Data Visualization in JavaScript

Agenda

• What libraries are out there?
• Which one should I use?
• Lets graph some stuff with Vanilla JS!
• How do you use the library with a front end framework? (Angular, React, Vue.js etc.)
  • List wrapper libraries/how to find them

Things to Visualize

• Bitcoin Historical Price Data
  • https://www.coindesk.com/api/
• Realtime Bitcoin Price
  • https://www.coindesk.com/api/
• State of JS Data
  • https://stateofjs.com/2017
  • https://github.com/StateOfJS/StateOfJS/tree/master/src/data
• Popularity of Visualization Libraries
  • https://npm-stat.com/

TODO

• What Libraries are out there?
  • D3.js
    • D3.js is a JavaScript library for manipulating documents based on data.
    • https://d3js.org/
    • ~76K stars on github
    • ~351K weekly downloads on npm
    • https://github.com/d3/d3
    • https://www.npmjs.com/package/d3
  • Chart.js
    • Simple yet flexible JavaScript charting for designers & developers
    • http://www.chartjs.org/
    • ~37K stars on github
    • ~230K weekly downloads on npm
    • https://github.com/chartjs/Chart.js
    • https://www.npmjs.com/package/chart.js
  • Chartist.js
    • Simple responsive charts
    • https://gionkunz.github.io/chartist-js/
    • ~10.7K stars on github
    • ~20K weekly downloads on npm
    • https://github.com/gionkunz/chartist-js
    • https://www.npmjs.com/package/chartist
  • Plotly.js
    • Built on top of d3.js and stack.gl, plotly.js is a high-level, declarative charting library. plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps.
    • https://plot.ly/javascript/
    • ~8K stars on github
    • ~13K Weekly Downloads
    • https://github.com/plotly/plotly.js
    • https://www.npmjs.com/package/plotly.js
  • c3.js
    • 📊 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications.
    • http://c3js.org/
    • ~7.7K stars on github
    • ~30K weekly downloads on npm
    • https://github.com/c3js/c3
    • https://www.npmjs.com/package/c3
  • NVD3
    • This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you.
    • http://nvd3.org/
    • ~6.5K stars on github
    • ~23K weekly downlods on npm
    • https://github.com/novus/nvd3
    • https://www.npmjs.com/package/nvd3
  • Tau Charts
    • D3 based data-focused charting library. Designed with passion. Flexible.
    • https://www.taucharts.com/
    • ~1.6K stars on github
    • ~400 weekly downloads on npm
    • https://github.com/TargetProcess/tauCharts/
    • https://www.npmjs.com/package/taucharts
  • Flot
    • Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.
    • http://www.flotcharts.org/
    • ~5.5K stars on github
    • https://github.com/flot/flot
  • Google Charts
    • Google chart tools are powerful, simple to use, and free.
    • https://google-developers.appspot.com/chart/
• Which one should I use?
  • Extremely customizable, original data visualizations - D3
    • Requires more code/work to do the thing
  • Classic Charts - Bar, Line, Pie etc.
    • All of them... most easier than D3.js
  • Things to look for in a library
    • Has the chart you need
    • Browser Support
      • flot supports IE6+
    • Responsive
    • Supports Dynamic Data
    • 3D
    • Has a wrapper for your prefered front end framework**
• Lets graph some stuff!
  • Which libra(ies) should I use?
  • Static data
  • Data from an API
    • Reformatting data to work with the chart library
• How do you use the library with a front end framework? (Angular, React, Vue.js etc.)
  • Talk about wrapper libraries/how to find them