Skip to content

jameslaneconkling/yard3

Repository files navigation

Yet Another React D3 Integration Library

The philosophy of this library is to take care of rendering, while leaving all data handling to the developer. In practice:

Internal

  • rendering, in particular providing the glue between react and D3
  • managing chart pixel dimensions, specifically scale ranges
  • managing chart svg positioning, for example css transforms

External

  • data transforms, such as x and y accessor functions
  • scale domains and interpolation methods
  • DOM interaction

Yard is built to be highly composable, breaking components down into small pieces that can be easily customized and combined to make complex visualizations. E.g, to create a multi-series line chart with axes and a simple horizontal grid:

multi-series line chart

const data = [
  {
    "date": new Date("2011-10-01T04:00:00.000Z"),
    "New York": 63.4,
    "San Francisco": 62.7
  },
  {
    "date": new Date("2011-10-02T04:00:00.000Z"),
    "New York": 58,
    "San Francisco": 59.9
  }, ...
];

const nyY = d => d['New York'];
const sfY = d => d['San Francisco'];
const x = d => d.date;

const xScale = d3.scaleTime()
  .domain(d3.extent(data, x));

const yScale = d3.scaleLinear()
  .domain([10, 100]);

<Chart
  width="600"
  height="300"
  xScale={xScale}
  yScale={yScale}
>
  <YGrid strokeDasharray={'2, 3'} />
  <XAxis />
  <YAxis />
  <LineChart
    data={data}
    x={x}
    y={nyY}
    stroke="red"
  />
  <LineChart
    data={data}
    x={x}
    y={sfY}
    stroke="blue"
  />
</Chart>

Documentation

here

Development

npm run dev