- questions?
- css, html, javascript review
- debugging using the console,
console.log(), global variables, etc. - finish our first Scatter Plot - add interactions!
- post to bl.ocks
- first line chart
- think about the D3 blueprint
- discuss readings and videos from last class
- end of day discussion
Let's talk about the different components of a webpage - CSS, HTML, and Javascript.
What does each do?
Let's examine the code we've already written, find where each of the three exist, and talk about what they're doing.
First, we will finish up our static scatter plot by:
- loading in our data with
d3.csv - formatting our x axis
- adding gridlines and other stylings
- adding a title
Instructions here - scroll down to "Day Two".
Then, we'll move on to adding interactions to our plot, which will include
- hover interactions
- creating buttons
- updating data shown
- utilizing
transition,duration, andease
Instructions here.
Now, we'll follow these instructions to add our new visualizations to bl.ocks.org
We will follow these instructions to build off our scatter plot to create your first d3.js line chart.
All d3 plots start similarly. I'll give you some time to think about what these components are. We will discuss as a class and then you will create your own blueprint file.
- IDEO brainstorming video
- 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
How was the first day? What questions do you have so far?
What we'll do next class:
- go over any questions
- general update pattern
- first bar chart
Before Next Class
If you're having trouble with HTML, CSS, or Javascript basics, I would recommend doing the corresponding tutorial before next class.