- introductions to learn about each other
- what is D3?
- technical Setup
- Building a simple scatter plot three different ways
- poke in the console
- our First Scatter plot!
- think about the D3 blueprint
- end of day discussion
- First, write down on a notecard two things: 1) some goals you have for yourself in this class, and 2) you experience level with javascript / css / html.
- 30-second introductions: name, background, goal for the class, favorite thing to do that does not involve computers.
Expectations about communicating with me: I may not be available outside of class. If there are subjects you'd like me to spend more time on next class, feel free to tell me after class or email me and let me know.
Talk: Intro to D3
What is D3.js? When should we use it? When shouldn't we?
Also, we'll check out some cool D3 examples to get us excited!
To make sure our computers are all set up for what's to come.
In these exercises you will be making the same scatter plot in three different ways:
- Using HTML, CSS, and SVG
- Using D3.js
- Using D3 AND data joins
D3 is not intended just for data visualization; like jQuery, it's useful for DOM selection and manipulation, or simply for creating structured HTML pages. It's also public-facing on more web sites than you think. In this activity, we will explore some of its features.
Exercise: Building our first scatter plot
We'll now build our first full chart by plotting one of the Ambscombe data sets in a scatter plot.
Exercise: Uploading our projects to Bl.ocks
Bl.ocks is the main site where D3 projects are posted. Let's check it out and learn how to post our own Bl.ocks!
Rendering elements on the web, regardless of chart type, will require following the same pattern. Because we'll find ourselves doing this over and over, let's consider the steps involved.
How was the first day? What questions do you have so far?
What we'll do next class:
- go over any questions
- add interactions to the static plot we made today
- talk about how to utilize brainstorming and iteration in designing your plots
- build our first bar chart
Before Next Class
- Watch this IDEO brainstorming video. It's short, promise!
- D3 is not a data visualization library by Elijah Meeks
- The Power of Visualization's "Aha!" Moments](https://hbr.org/2013/03/power-of-visualizations-aha-moment) by Amanda Cox
- Gather links for cool visualizations you would like to share with the class, by you or others.