[WIP] Feature/charts - Githubissues

Charts

A chart/graph making add-on.

Only 3.5kb minified & gzipped so far, also works standalone (Component not required).

draw charts to canvas
a chainable API, similar to d3 but simpler to use
so far, it supports:
- scatter charts
- bubble charts
- line charts
- area charts (layered & stacked)
- bar charts (horizontal & vertical)
- grouped bar charts (horizontal & vertical)
- stacked bar charts (horizontal & vertical)
- candlestick charts
- pie & doughnut charts
- arc or "gauge" charts
- lollipop charts
- mixed charts

TO DO

DONE: easier chart dimensions
- an optional .dimensions() method:
- returns { x, y, h, w, margin, xRange, yRange, xScale, yScale, xDistance, yDistance }
DONE: move axis - allow placing an axes at given % of chart width/height
- don't move chart area, only the axes around it
- xAxis() takes a yPos param - a % value of the chart height
- yAxis() takes a xPos param - a % value of the chart width
DONE: flip axis - allow flipping/inverting chart X and Y axes:
- just swap the range values for the axis you wanna flip
- this should flip the chart area too!
DONE: improve axis tick labels
- allow customising tick labels - added new params to .xAxis() and .yAxis():
  - each axis now takes an optional tickLabels array, as the last param
  - the labels given will override any auto-generated tick labels
  - can also pass in a func, which receives the default (auto-generated) tick label
  - Tip: include empty strings in tickLabels to "hide" specific tick labels
DONE: fix bars
- bars should sit beside each other, they shouldn't overlay straight on top of each other
DONE: circle angles
- support passing in start, end and rotation (in degrees) to circle()
- this enables drawing of circle segments/pacman shapes
DONE: pie charts
- added .pie({ px, py, radius, slice, fill })
- about the params:
- px/py to place it
- radius is the width/size of it
- slice is the slice width, in degrees,
- fill to colour it in
DONE: doughnut charts
- pie() now takes an optional innerRadius param, to create holes in the middle (doughnut charts)
DONE: stacked bars
- add a stacked attr to bar()
- to "stack", take the data point of the previous group/category, use that as the offset of the current one
DONE area charts
- added fill and stacked attributes to .line({...}) method
- fill produces a "layered area chart", fill and stacked produces a "stacked area chart"
DONE: styling
- added helper method to set styles easier (used setStyle() from Ctx)
- allow setting all styles, on every object - just pass in a style param to the drawing methods
- allow adjustable fonts (auto-adjust label positions based on font size, etc)
DONE: candlesticks
- for much more informative financial charts
- a "candle" (rect) - open/close prices, if open<close it's red, else green
- a "wick" (line extending out of bar) - shows high/low prices
- example: data.candle({ open, close, high, low, green, red, padding, style })
add: colour scales
- allow creation of colour scales, mapped to data, but independant of x/y axes
- support hls/hsla, hex/hexa, rgb/rgba as input colours
- something like .colourScale('name', [min,max], scale, [startColour, endColour])
- example: .colourScale('temperature', [0,100], 5, ['#eee','#c00']) // creates 20 colours
- usage: ctx.colours['temperature'](96) // returns '#c00'
- allow easy creation of types of colour scale:
  - sequential: e.g, from light red to ..., to dark red
  - good for a linear scale with start/end values, doesn't loop around
  - categorical: evenly spaced set of colours, from along the whole hue spectrum
  - good for getting colours for a "legend", pallettes not gradients
  - all - "all" the colours from start to end, from hue 0
  - all of same brightness (default 50%) and saturation (default 100%)
- see sinebow, rainbow and turbo from d3-scale-chromatic

Addons:

animations
- just animate the data itself with the tweenState or springTo add-ons :)
- the Ctx add-on has a zoomable, pannable camera, and more shapes, plus save to video, image, etc
maps + charts
- make it play nice with the Geo add-on
audio visualisations
- make it play nice with the useAudio add-on, which can do audio visualisation stuff

Usage:

      ctx.beginPath()

      .useData({
        'USA': [{}, // pad with an empty year.. just to create more space on chart
          { medals: 25 },
          { medals: 15 },
          { medals: 21 },
          { medals: 42 },
          { medals: 47 },
          { medals: 21 },
          { medals: 24 },
        ],
        'China': [{},
          { medals: 10 },
          { medals: 10 },
          { medals: 25 },
          { medals: 40 },
          { medals: 32 },
          { medals: 12 },
          { medals: 21 },
        ]
      })

      // top, bottom, left, right
      .margin(50,60,120,40)  

      .xAxis({
        range: [1999,2006],
        scale: 1,
        // optional settings
        label: "Years",
        labelBelow: true,
        yPos: 0,
        tickLength: -3,
        tickCentered: true,
        tickLabelCentered: true,
        tickLabels: [], // can be func which receives each label, like `label => {...}`
      })

      .yAxis({
        range: [0,16],
        scale: 1,
        // optional settings
        label: "Gold medals",
        labelLeft: true,
        xPos: 0,
        tickLength: -3,
        tickCentered: false,
        tickLabels: [], // can be func which receives each label, like `label => {...}`
      })

      .drawEach((country, key, i) => {
        // Now we can work with some "decorated" chart data, ${country}.
        // Use your top-level data here - to draw a legend, for example..

        country.forEach(data => {
          // Note, ${data} has .bar(), .circle(), and .line() methods added,
          // which try to draw "ready-made" shapes, in the right place.

          // You should only define the attrs you want "joined" to your
          // data - and don't override any others.
        data.bar({
          height: data.medals,
          stacked: false,
          padding: 24,
          style:{ fill: colors[i] },
        });
        data.circle({
          cy:     data.medals,
          radius: data.medals*2,
          start: 0,
          end: 360,
          rotate: 0,
          style: { fill: colors[i+2], lineWidth: 5, stroke: 'red' },
        });
        data.pie({
          slice: data.medals,
          style: { fill: colors[n] },
        });
        data.arc({
          slice: data.medals,
          radius: 80,
          innerRadius: 40,
          style: { fill: colors[n] },
        });
        data.line({
          py: data.medals,
          stacked: true,
          style: {
            fill: colors[i],
            stroke: colors[i],
            lineWidth: 0,
          },
        });

    });

Outputs:

bar

..easily flip swap the axes by changing a few lines of code:

hbar

..same chart, different settings:

line

Newer demo:

charts

sc0ttj / component

[WIP] Feature/charts #55

Charts

Usage: