Chart tool

July 14, 2015, Vox Media


Middleman and D3.js

View Project

Charts is a “blueprint” for our static site generating application, Autotune.

The Charts blueprint allows users from six of Vox's media brands plus Vox Creative to generate one of nine different chart types by filling out a form within Autotune.

For example

The included chart types are:

  • bar charts (4)
    • single-series vertical
    • single-series horizontal
    • grouped vertical
    • grouped horizontal
  • line charts
  • pie charts
  • donut charts

Charts is written in D3 and is built on top of c3.js. Data transformation based on user inputs is partially handed using ruby on project build, and completed using D3 on the interaction side of things.

To learn a bit more about Charts, check out this presentation that I created for a talk that I gave at a HacksHackers event.

All of the available chart types: