Civic Impact Through Data Visualization

These are the materials for my workshop on creating interactive data visualization with D3!

And please do not hesitate to reach out to me directly via email at jondinu@gmail.com or over twitter @clearspandex

Getting Setup

You will need:

• HTTP web server
  • On OSX and Linux python -m SimpleHTTPServer
  • On Windows, I recommend downloading Mongoose
• Text Editor: I recommend Sublime Text
• A (modern) Web Browser: I recommend Google Chrome

Once you have downloaded the software above, you are ready to start making some data visualizations!

1. Get the files: Download the ZIP or git clone https://github.com/Jay-Oh-eN/hands-on-d3.git (git tutorial) this repository.
2. Start you HTTP web server
   • If using a SimpleHTTPServer, navigate into the repository folder (hands-on-d3) on your machine before you start the server.
   • If using Mongoose, set the 'Shared Directory' to be the repository folder.
3. Navigate with a web browser to http://localhost:[port] where [port] is the port the server has started on (SimpleHTTPServer defaults to port 8000)
4. You should see the directory listing, click on any of the .html files and you should see the charts.

If you need some help with Javascript or D3, refer to the tutorials below

Libraries Used

• D3.js

The Data

The data is from the Data Canvas project, which is sponsored by Gray Area, swissnex San Francisco, and Lift. It contains data from 14 sensors in 7 cities which collect and stream information about their environment (temperature, dust, pollution, humidity, light, etc.).

You an access a bulk download of all the data (100+ MB) here. You can also download samples or access the stream through the API (details on the data page).

There are 4 different granularities of measurement. Files ending in:

• *-5md.csv: measurements every 5 minutes for a day
• *-1hd.csv: measurements every 1 hour for a day
• *-6hw.csv: measurements every 6 hours for a week
• grapealope.csv: entire history of the sensor near Noe Valley at 10 second resolution

The files are comma separated with headers and 8 fields:

timestamp	city	temperature	light	airquality_raw	sound	humidity	dust
2015-02-16T17:00:00.000Z	San Francisco	20.8856185354523	2231.45801048026	28.8458008730416	1674.71050009727	48.4880466992298	882.367404134883
2015-02-16T18:00:00.000Z	San Francisco	21.8623045793052	2542.46720508251	26.5113633058142	1652.25960948903	43.9341875396295	912.0280753969
2015-02-16T19:00:00.000Z	San Francisco	23.5113166041101	3215.03460441893	24.8987852323788	1690.5842506536	40.5058249680354	939.447105875158
2015-02-16T20:00:00.000Z	San Francisco	25.6472096479114	4558.69142401972	26.0867059045864	1704.29832357106	38.4312464272035	999.743066983922

---

Goals

By the end of this workshop you should be able to:

• Describe the data visualization process and the difference between explanatory and exploratory visualizations
• Understand the Javascript functions, closures and callbacks
• Know how to load multiple data files with D3
• Determine the best chart type for your type of data
• Create author driven narratives with animation (setInterval())
• Create engaging user interaction through Javascript events such as dragging, hovering, and clicking
• Tie this interaction into a reader driven narrative
• Contextualize your data through the use of secondary datasets

Visualization Examples

Author Driven

Facebook IPO (NYT)

Syrian Refugee Crisis (Wesam Manassra)

Viewer Driven

Crimespotting (Stamen)

Martini Glass (mix of author and viewer)

Visualizing MBTA Data (Mike Barry and Brian Card)

Gun Deaths (Periscopic)

Flight Delays (538)

Next Steps

• Visual Storytelling with D3 (Ritchie King)
• Data Visualization and D3.js (Udacity)
• Interactive Data Vizualization (Scott Murray)
• CSE512: Data Visualization (University of Washington)
• D3 Meetups

Resources

General

• A Tour Through the Visualization Zoo

Javascript

• JS for Cats (beginner)
• Code School interactive
• Eloquent Javascript (more advanced)
• Superhero.js (set of resources)

D3

• Let's Make a Bar Chart
• How Selections Work
• Thinking with Joins
• General Update Pattern
• Working with Transitions
• Gallery of D3 example
• Dashing D3
• D3 Noob
• D3 Show Reel
• D3 master list of tutorials
• bl.ocksplorer
• Towards Reusable Charts

D3 Libraries

• RAW (GUI)
• D3plus (charting)
• Rickshaw (timeseries)
• dc.js (multidimensional)
• NVD3 (charting)
• c3.js (charting)
• Queue.js (multiple data files)

Workflow

• Mike Bostock: Why Use Make

License

Copyright 2015 Jonathan Dinu.

All files and content licensed under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License

Rights of examples and screenshots of data visualizations belong to the authors themselves.