Skip to content

Latest commit

 

History

History
57 lines (34 loc) · 2.88 KB

Class3.md

File metadata and controls

57 lines (34 loc) · 2.88 KB
Raw

Welcome to Day Three! :D

Agenda:

  • Brainstorming and iteration
  • File structure
  • CSS, HTML, Javascript review
  • Build our first line chart
  • Bar chart three ways
  • Build your first bar chart

Talk: Brainstorming and iteration

It's often one's instinct to take the first idea they come up with and run with it. However, because building things in d3 takes some time, we want to make sure we've thought through our design decisions before building anything. We're going to talk for a moment about the importance of brainstorming and iteration when building data visualizations.

To see a good example of brainstorming in action, see this IDEO brainstorming video.

Discussion: Review of CSS, HTML, Javascript

Let's examine the code we've already written, find where each of the three exist, and talk about what they're doing.

Discussion / Exercise

Open up the file scatterCompleteExample.html. I've reorganized the file by moving all elements that don't require data, as well as the dataSwap function, outside of the ready function. Although this is not totally necessary for this specific example (in its current state) is best to do this in general, as it will make for easier expansion of the code. For example, perhaps as you build out your code, you decide you'd like to access the dataSwap function, or any of the variables, elsewhere.

Take a minute to look through your code from last class, and compare it to this code. Make sure you understand the new structure.

Your first D3.js line chart!

We will follow these instructions to build off our scatter plot to create your first d3.js line chart.

Bar Chart Three Ways:

This exercise will look very similar to when we did our scatter plot three ways. The goal here is to reinforce the idea that d3 is merely manipulating DOM elements such as html tags, svg elements, and css stylings.

Create our first full bar chart:

Now, let's build our first bar chart from scratch. Parts of this will look very similar to when you built the scatter plot, but others will be bar charts specific. Pay attention to these similarities and differences

End of day discussion:

What we'll do next class:

  • general update pattern
  • d3.hierarchy
  • build your first tree map

Questions?

Before Next Class

Ping me if there are concepts that you'd like me to cover more fully.

If you're having trouble with HTML, CSS, or Javascript basics, I would recommend doing the corresponding tutorial before next class.