# pnut

Pnut is designed as a react rendering layer for d3.

D3 is useful because its very low level and doesn't make many opinions on how to join the dots. There are functions to manipulate data, functions to make scales, and functions to render svg. These decisions make individual charts quite verbose, but the trade off is you can visualise anything you want.

Most react charting libraries go the other way and force all charts into high level concepts like LineChart, or BarChart. This is easy to get started with but hard to customise.

Pnut tries to strike a middle ground by providing a series of renderable components, and a common data structure. This lets the dev build the custom chart that they need without having to dive into the weeds with

## Code Samples

import {Chart, Line, SingleSeries, ContinuousScale, ColorScale, Axis, layout} from 'pnut';

function SavingsOverTime() {
    const data = [
        {day: 1, savings: 0},
        {day: 2, savings: 10},
        {day: 3, savings: 20},
        {day: 4, savings: 15},
        {day: 5, savings: 200}
    ];

    // Define our series with day as the primary dimension
    const series = SingleSeries({data});

    // calculate chart width, height and padding
    const ll = layout({width: 400, height: 400, left: 32, bottom: 32});

    // Set up scales to define our x, y and color
    const x = ContinuousScale({series, key: 'day', range: ll.xRange});
    const y = ContinuousScale({series, key: 'savings', range: ll.yRange, zero: true});
    const color = ColorScale({series, key: 'savings', set: ['#ee4400']});

    // create a scales object for each of our renderable components
    const scales = {series, x, y, color};

    // render a chart with two axis and a line
    return <Chart {...ll}>
        <Axis scales={scales} position="left" />
        <Axis scales={scales} position="bottom" />
        <Line scales={scales} strokeWidth={2} />
    </Chart>;
}