05-visualization.md

Visualizing Data

D3 JS (Data Driven Documents)

D3 JS

• https://d3js.org/
• https://github.com/d3/d3/wiki/Gallery

Grammar of Graphics

• https://www.amazon.com/Grammar-Graphics-Statistics-Computing/dp/0387245448

What D3 is Not

• http://ruoyusun.com/2014/05/26/what-d3js-is-not.html

Inserting D3 into a webpage

https://classroom.github.com/a/_gB7y5As

Project Note

If you're planning to use D3 for the MVP of your project, you can find some great templates at

• http://bl.ocks.org/mbostock (Mike Bostock created D3JS, these are his examples)
• http://bl.ocks.org/ (same website, examples by different people)
• https://github.com/d3/d3/wiki/Gallery
• http://christopheviau.com/d3list/gallery.html
• https://d3js.org/

Some of these pre-created D3 visualizations take in CSV format (like the simple example that we did above). Others take in a JSON format. We will be talking in class about converting between CSV and JSON formats using python. If you find that you want to use a data visualization, but are not sure how to connect the dataset to the visualization, have someone in your project group chat with me.

Organizing your Code

Some additional notes on code organization.

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files