datagovsg-plottable-charts

datagovsg-plottable-charts

Generate beautifully styled charts like those on data.gov.sg

Motivation

Generating a chart is easy, making it looks beautiful requires much more effort. Numerous charting libraries have been written to solves the basic problem of converting data to chart objects. Regardless of the library you choose, out-of-the-box defaults hardly produces the look you want.

Charts on Data.gov.sg are rendered using the Plottable library. Based on D3, it is highly flexible and gives you many low level controls to fine-tune every single detail. However, this power comes at the price of additional configurations. We want to abstract away these configurations by creating wrappers that pre-apply all the styles we want on our component. That's why we created this library.

Some cool things it does

Tooltips

Pie chart labels

Using the chart components

npm install --save datagovsg-plottable-charts

import {
  SimplePie,
  SimpleBar,
  GroupedBar,
  StackedBar,
  SimpleLine,
  MultipleLine
} from 'datagovsg-plottable-charts'

// Instantiate the chart component
var pie = new SimplePie(props)

// Mount component
pie.mount(document.getElementById('ctn'))

// Update chart
pie.update(newProps)

Using plugins

import {
  highlightOnHover,
  setupOuterLabel
} from 'datagovsg-plottable-charts/dist/plugins'

highlightOnHover(pie)
setupOuterLabel(pie)

Debugging guide

1. Clone the datagovsg/datagovsg-plottable-charts repo
2. cd to the cloned repo
3. Run npm install
4. Change main field in the package.json to "main": "src/index.js"
5. Set up a symlink sudo npm link
6. cd to your working directory
7. Run npm link datagovsg-plottable-charts