Save 37% off PRO during our Black Friday Sale! »

The Magic of Charts - Data Visualisation in JavaScript

50bd52fe63e2264aeae49b33d0e9102e?s=47 James Ford
November 24, 2015

The Magic of Charts - Data Visualisation in JavaScript

Data Visualisation in JavaScript - a run through of the libraries which I've used, what they do best, what they don't do so well, when you should use them and for what.

50bd52fe63e2264aeae49b33d0e9102e?s=128

James Ford

November 24, 2015
Tweet

Transcript

  1. The Magic of Charts Data Visualisation in JavaScript

  2. Why create a Chart? A picture tells a thousand words.

    Charts creates a picture from a thousand pieces of data, and you don’t need to know what story it will tell beforehand. “ ” James Ford - MMT Digital
  3. Options • Morris.js • Chart.js • D3.js / C3.js •

    Google Charts • Google Analytics Embed API • Raw Data (CSV) Export
  4. Comparison ease of use flexibility / options Morris.js D3.js C3.js

    Chart.js Google Charts Google Embed API
  5. Morris.js http://morrisjs.github.io/morris.js/ • 4 Chart types • Gentle learning curve

    • Limited flexibility
  6. Chart.js http://www.chartjs.org/ • 6 Chart types • Gentle learning curve

    • Visual options, interactivity, scripting hooks and built-in animations
  7. D3.js http://d3js.org/ • ∞ Chart types • Harsh learning curve

    • Complete creative freedom, lots of classes and methods for data manipulation, layout, interaction etc.
  8. C3.js http://c3js.org/ • 15 Chart types • Low learning curve

    • Plenty of config options, built-in animations and chart-to-chart transformations
  9. Google Charts https://google-developers.appspot.com/chart/ • 18+ Chart types • Medium learning

    curve • Lots of standard chart customisation options, some components available with Polymer
  10. GA Embed API https://ga-dev-tools.appspot.com/embed-api/ • 5 Chart types • Medium

    learning curve (mostly about data) • Same visuals as GA interface, limited customisation, but visuals can be replaced by custom graphics (or charting libraries)
  11. Lecture about appropriate Charts

  12. ‘Offline’ charts • Export data in CSV format for download

    and import into Microsoft Excel
  13. Questions?