How to use

To use the lib as a cdn import use the 'vis' prefix before the classes:

sample:

const beePlot = new vis.BeeswarmPlot(...);

BeeswarmPlot

This block of code is an example of using it to create a "beeswarm" graph using the library. A "beeswarm" chart is an alternative to the scatter chart to avoid overlaps.

const beeswarm = new BeeswarmPlot(
    "elementID", // ID of the element in the DOM where the graph will be drawn
    dataset, // Dataset to be visualized
    'value', // Attribute to use for axis
    5, // Radius of each data point
    {
        title: "Beeswarm Y", // Title of the chart
        color: "#069", // default color the chart
        highlightColor: "#FF1122", // default highlight color
        opacity: 1,
        width: 700, // width of the chart
        height: 400, // height of the chart
        theme: "dark", // theme dark or light
        orientation: 'y', // orientation of chart x or y
        colorAttr: 'value', // Attribute name of col of dataset
        showLegend: true, // legends of colors for chart
        margin: {top: 30, right: 10, bottom: 60, left: 60 }, // margins of visualization
        dotsType: 'hex' // type of dot 'circle' or 'hex'
    }
);

    beeswarm.draw();

BeeswarmGroup Plot

Este bloco de código demonstra a criação de um gráfico de grupo "beeswarm" utilizando a biblioteca vis. Um gráfico de grupo "beeswarm" é um tipo de gráfico de dispersão onde os pontos são agrupados por uma variável categórica.

const beeswarmGroup = new BeeswarmGroup(
    "elementId", // ID of the element in the DOM where the graph will be drawn
    dataset, // Dataset to be visualized
    'categories', // Attribute to be used for the X axis
    'price', // Attribute to be used for the Y axis
    8, // Radius of each data point
    {
        title: "CAR TYPE CHART", // Title of the chart
        color: "#069", // Default color of the chart
        opacity: 1,
        width: 800, // Width of the chart
        height: 800, // Height of the chart
        highlightColor: "#FFFFFF", // Highlight color
        margin: {top: 30, right: 10, bottom: 60, left: 60 }, // Margins of the visualization
        colorAttr: 'categories', // // Attribute name of the dataset column to color the items
        theme: "dark", // Theme dark or light
        forceX: 5, // Attraction/repulsion force on the X axis
        forceY: 2, // Attraction/repulsion force on the Y axis
        dotsType: 'hex', // Type of dot 'circle' or 'hex'
        showLegend: true, // Show color legends for the chart
        colors: colors // optional array of colors to color the categories
    }
);

    beeswarm.draw();