Building Interactive Data Visualizations
This repository contains the files and data for the interactive data visualization with D3 workshop, as well as resources and next steps. Videos of another presentation of this workshop can be found here.
I would love your feedback on the materials either on the Q&A forum (Google Group) or in the Github issues.
And please do not hesitate to reach out to me directly via email at [email protected] or over twitter @clearspandex
Throughout this workshop, you will learn how to make this animated and interactive line plot of temperature over time in Noe Valley.
Getting Setup
You will need:
- HTTP web server
- On OSX and Linux
python -m SimpleHTTPServer
- On Windows, I recommend downloading Mongoose
- On OSX and Linux
- 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!
- Get the files: Download the ZIP or
git clone https://github.com/Jay-Oh-eN/strata-interactive-data-viz.git
(git tutorial) this repository. - Start you HTTP web server
- If using a
SimpleHTTPServer
, navigate into the repository folder (strata-interactive-data-viz
) on your machine before you start the server. - If using Mongoose, set the 'Shared Directory' to be the repository folder.
- If using a
- Navigate with a web browser to
http://localhost:[port]
where [port] is the port the server has started on (SimpleHTTPServer
defaults to port 8000) - 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
Whats in here?
data/ data
images/ static image examples to be used in the readme.md
lib/ supporting JavaScript library files
exercise_1.html file containing dimple.js exercise
exercise_2.html D3 equivalent of dimple.js line chart
exercise_3.html animating line plot with interactive buttons
LICENSE Details of rights of use and distribution
presentation.pdf lecture slides from presentation
readme.md this file!
template.html HTML and Javascript scaffold to start from
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
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
- Let's make a bubble map
- geojson viewer
D3 Libraries
- RAW (GUI)
- D3plus (charting)
- Rickshaw (timeseries)
- dc.js (multidimensional)
- NVD3 (charting)
- c3.js (charting)
- Queue.js (multiple data files)
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.