1. Home
2. EasyGraph

A small, batteries-included charting library built on D3 v7: lines, filled areas, zoom, a hover crosshair, stacked/grouped bars (vertical and horizontal), and heatmaps, with chart width that tracks its container's rendered size. It powers the charts across this site's Weather, Sensors, EnergyPlus Weather, and Graphics sections.

Source, docs, and license: github.com/larsi-org/d3-easygraph

Shared by every chart below: container sizing that tracks a live resize (width follows the container, height stays fixed), SVG/margin/clip/title scaffolding, palette handling, number and time axis formatting, and a small set of unit presets (temperature, pressure, wind speed, and so on) that fill in a sensible label/unit/range when you just want to plot a known physical quantity.

Lines and filled areas over a continuous (time or linear) x axis, with optional zoom (scroll to zoom, drag to pan) and a hover crosshair — multiple line charts on the same page can have their zoom and crosshair synced together.

var graph = d3.easygraph.line({
  id:        "graph",
  label:     "Temperature",
  x:         { scale: "time" },
  y:         { preset: "temperatureC" },
  height:    320,
  margin:    { top: 20, right: 20, bottom: 30, left: 50 },
  lines:     true,
  areas:     true,
  zoom:      [1, 50],
  crosshair: true
});

graph.update(graph_data);

// e.g. toggle daily averages (min/max band) on or off, then re-draw
graph.areas = false;
graph.update(graph_data);

Vertical or horizontal bars, stacked or grouped. Orientation is fixed for a chart's lifetime, but stacked vs. grouped can be toggled live (see the dropdown on the examples below).

var graph = d3.easygraph.bars({
  id:          "graph",
  label:       " ",
  height:      520,
  margin:      { top: 10, right: 14, bottom: 30, left: 50 },
  orientation: 'v',
  mode:        'grouped'
});

graph.update(graph_data, times);

// live toggle to stacked, then re-draw
graph.mode = 'stacked';
graph.update(graph_data, times);

A grid of colored cells over plain continuous x/y axes — good for spotting seasonal patterns across a lot of data (8,760 hourly values for a year, in the example below) where a line chart would just be noise.

var graph = d3.easygraph.heatmap({
  id:     "graph",
  label:  " ",
  x:      { scale: "time" },
  height: 520,
  margin: { top: 10, right: 14, bottom: 30, left: 50 }
});

graph.update(graph_data, [ startDate, endDate ], [ 0, 24 ]);

// switch to a different data channel, then re-draw
graph.update(otherGraphData, [ startDate, endDate ], [ 0, 24 ]);