AGENDA FOR EACH STAGE OF THE HACKATHON
Stage 1 - Intro to D3 + Selecting and Transforming Your Data
Introduction of how we expect them to work
Load plunker, fork it, login with github if they want
Guidelines about collaboration amongst team members
D3 isn’t about shiny charts, it’s about driving DOM manipulation through data.
You can easily pull in data from outside sources, including CSVs and REST apis
Basic data cleaning and transforming
Ideally you want to start with a flat collection of data objects. You can then group it with nest().
D3 has stat methods: e.g. standard deviation, quartiles, medians, ranges, etc
60 second talk about DOM manipulation
How you select and bind data with D3 (“data”, “enter”, “exit”).
Make sure you provide an explicit key in the data method when using flat arrays!
Load up workspace plunker http://tiny.cc/columbiadata
Use stage 1 plunker to explore the data and choose filtering and objectives
Stage 2 - Intro to C3: A Reusable Chart Library
Choose which charts to use
Refine the grouping, datasets, and scales
You can use the same data objects for all sorts of different charts.
There's no log scale out of the box like in vanilla D3, so we need to use helper functions.
Separate your helper functions from the chart code, else the file becomes unreadable.
You choose which attributes to show via the "key" properties of "x" and "value".
You can rotate entire charts. This in effect makes the "x" axis "y" and visa versa.
You can rotate "y" axis labels (or "x" when rotated).
You can have two "y" axes (when rotated these are both "x" instead).
You can overlay multiple different chart types on the same container.
You can group data (see the stacked bar chart)
How to combine d3.nest with d3.roll up do do things like sum up a value or get the mean of a value.
How to reduce an array of values to a single object.
Stage 3 - Adding Polish to Your Charts
Referencing charts we've already made
Loading and unload data is super quick and easy, regardless of chart type.
So is changing grouping or what sort of chart we're displaying on the fly!
Pretty much all of these API calls can be done with timeout to create animations.
We can add subcharts to some chart types, and enable mouse zoom.
We can customize colors, labels, tooltips, and legends.
Tons more visual tweaks can be done with css.
We can bind custom events to click, mouseover, mouseout, select, unselect, load, etc
Loading data for tooltips sucks in C3, so we have to work around it by fetching the original object.