hsGraphD3

Helpful Scripts D3 convenience wrappers for simple plotting.

hsGraphD3 Provides JavaScript directives to facilitate really simple plotting of data. The API is designed to utilize the vast power of the D3 framework while hiding the complexity and steep learning curve.

Installation

npm i hsgraphd3

Usage

Create a data set to plot. The first row contains column names:

import { Graph } from 'hsgraphd3';

const data = {
    colNames: ['date', 'time', 'volume', 'costs'], 
    rows:  [
        ['1/1/14', -1,     0.2,      0.3], 
        ['1/1/16',  0.2,   0.7,      0.2], 
        ['9/1/16',  0.4,   0.1,      0.3],
        ['5/1/17',  0.6,  -0.2,      0.1], 
        ['7/1/18',  0.8,   0.3,      0.5], 
        ['1/1/19',  1,     0.2,      0.4]
    ]
};

Create the graph and define the series to plot, using the column names:

const root = document.root;

const graph = new Graph(root);
graph.add('bubble', {x:'time', y:'volume', r:'costs'});

Optionally, adjust some settings. See Configuration Defaults for a list of all available settings.

graph.defaults.axes.color = '#00a';

Render the graph:

graph.render(data);

To create a periodically updated graph, call the update method returned by render:

const ms = 1000;  // millisecond period

graph.render(data).update(ms, data => {
    data.rows.forEach(row => row[2] = Math.random();
});

See an example or visit the example pages for Cartesian Plots or Polar Plots

Series Definitions

Series are defined via the pattern

graph.add(<type>, {<dim>:<ValueDef>, ...});

• <type> defines the type of the plot. For plot types see ordinal series, numeric series and polar series.
• <dim> valid series dims are defined as extensions of SeriesDimensions, for example for CartesianSeriesDimensions or PolarSeriesDimensions.
• <ValueDef> defines the values for <dim>. See ValueDef for details. In general, values can be defined as
  • column key for the data set to plot
  • a numeric constant
  • or a user-defined function of the rowindex of the data set to plot

Example: Column plot

Side-by-side columns with data-driven popups and labels:

graph.add('column', {x:'State', y:'costs', label:'State', popup:'costs'});
graph.add('column', {x:'State', y:'volume', popup:'volume'});

graph.scales.defaults.dims.hor.ordinal.gap = 0.25;

Stacked columns with inline-calculated item label strings:

graph.add('column', {x:'State', y:'costs',  label:i=>`costs ${i}`,  stacked:'group1'});
graph.add('column', {x:'State', y:'volume', label:_=>'volume', stacked:'group1'});