Course: Metis Data Visualization
City: Chicago, IL
Dates: 9/11/2017 - 10/18/2017
Creator Based on course materials by Kevin Quealy
Instructor: Mollie Pettit
- Data Scientist at Datascope Analytics
- Data Viz Instructor at Metis
- LinkedIn: Mollie Pettit
- Github: molliemarie
- Twitter: MollzMP
Data Driven Documents D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
Mike Bostock wrote D3.js based on his work during his PhD studies at the Stanford Visualization Group. Mike worked at the The New York Times for a while and is now independently working on D3.js. You can find Mike's github profile here and his twitter profile here. While he wrote the library, there have been and continue to be many active contributors adding a diverse set of components and plugins.
from D3.js: D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of components and plugins.
from dashingd3js.com: You should use D3.js because it lets you build the data visualization framework that you want. Graphic / Data Visualization frameworks make a great deal of decisions to make the framework easy to use. D3.js focuses on binding data to DOM elements. D3.js is written in JavaScript and uses a functional style which means you can reuse code and add specific functions to your heart's content. Which means it is as powerful as you want to make it. How you chose to style, manipulate, and make interactive the data is up to you.
You should use D3.js when your webpage is interacting with data. D3 stands for Data Driven Documents.
D3.js is a javascript library added to the front-end of your web application. Your back-end (the server) will generate the necessary data. The part of the application the users interact with (the front-end) will use D3.js.
- HTML
- CSS
- Javascript
++A if you have experience with Web Dev, Design, Data Analysis and Github
- D3 Examples gallery
- Mike Bostock's Interactive Essays
- Mike Bostock's Bl.ocks
- Kevin Quealy's Recent work
- Kevin Quealy's New York Times work
- Amanda Cox's New York Times
- FiveThirtyEight
- The Upshot
In case you're asking yourself who some of the people above are...
- Mike Bostock - former New York Times editor and creator of D3
- Kevin Quealy - graphics editor and reporter at New York Times
- Amanda Cox - editor of New York Time's The Upshot section
- Where We Came From and Where We Went, State by State
- Mapping the Spread of Drought Across the U.S.
- Voting Habits of Americans Like You
- Money, Race and Success: How Your School District Compares
- Word Tree
- In This Season’s N.F.L., Two Breeds of Quarterbacks
- Is it Better to Buy or Rent?
- Star Trek network graph
- Traditional Charting: Bar Chart, Scatterplots, Line Charts, etc.
WEEK 1 Getting Started & Learning about New Problems
- Introduction, configuring machines, intro to data visualization
- Charting basics
- Data joins
- Using D3 and the DOM to make our first chart – a scatter plot
- The fiddly bits: axes, formatting, etc.
- dabbling with transitions
WEEK 2 Understanding chart intent; creating a blueprint for charting in D3
- Explore charting and intent
- Come up with multiple ways to visualize data
- Learn about hierarchical data and d3.nest()
- Create interactive bar charts
- discuss merit of various chart forms
WEEK 3 Line charts and working with nested data
- Learn about line charts and the path and line SVG elements
- Learn to recognize hierarchical data when we see it
- Create and manipulate nested data to easily create multiple plots
- Additional D3 tips and tricks
- discuss common plotting mistakes
WEEK 4 Building confidence with hierarchical data, thinking about design, and the general update pattern
- Learn about the general update pattern (enter, exit, and update)
- Work on thinking with joins
- Use triple nest when creating charts
- Become better designers
WEEK 5 Maps
- Learn how to make bubble maps and choropleth maps
- Create topojson files from scratch.
- Equip you to alter mapping examples to suit your needs.
WEEK 6 What do you want to learn?
- Network graphs?
- Stack layout graphs?
- What else?