Contact Us

We can help you:

  • Identify the cradle to grave GHG emissions of products
  • Identify GHG hot spots in your supply chain
  • Run material and process scenarios
  • Inform business and supply chain strategies   

To find out more or to request a demo, send us a message.

318 W 118th St
New York, NY, 10026
United States

Teaching Agenda

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

Important Takeaways

  • 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!

Do Now

  • Load up workspace plunker http://tiny.cc/columbiadata

  • Fork it

  • Use stage 1 plunker to explore the data and choose filtering and objectives

 

Stage 2 - Intro to C3: A Reusable Chart Library

Do Now

  • Choose which charts to use

  • Refine the grouping, datasets, and scales

Important Takeaways

  • 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.