Class 1: The Basics

The following are the links to working versions of each of the data visualizations and notes about each visualization.

To get access to the code behind the examples, you'll need to download it from A Taste of D3's GitHub site.


yoshiyasu nishikawa, licensed under CC BY 2.0

A) Intro

1) Why is D3 so powerful? Why is it hard to learn?

D3: created by Mike Bostock
D3's goals:
  • Unlike typical chart library, more fine-grained control -- designed for doing custom/bespoke graphics
  • unlike Flash etc., not built from scratch: built on top of a series of web standards(Takes advantage of their power)
Can be hard to get started:
  • Built on top of so many standards -- a lot to learn
  • Revenge of Your High School Geometry Teacher: to do D3, need to remember/relearn some basic High school math (looks weird when you first start doing it)
  • Unlike learning, say, typical programming language, where you learn one concept at a time,to do almost anything In D3 need to learn a bunch of concepts all at once
  • Some of the beginning code looks pretty weird (took me about six months before I figured this out)

2) Our strategy for learning D3: Adventurous Beginners (Motto: "Don't Sweat It")

Our strategy for learning D3: "Adventurous Beginners":
  • The good news: Although some of the code looks weird, most of the weird code is a pattern you will use over and over and over -- D3 gets used in a very patterned way
  • The other good news: you don't need to know everything to start using it -- so long as you know that up front
    • The key to this strategy: the motto, "Don't Sweat It!" Yeah, it looks a little weird at first but you'll see the same patterns over and over. Yeah, there are a lot of things you need to learn eventually, but to get started you just need to have a feel for what the code is doing. And there are lots and lots of examples to learn from. So long as you don't sweat everything, you'll be fine.

3) Using the Atom editor and Firefox

B) Quick and Dirty: HTML, CSS, SVG

1) Creating a rectangle and a circle
  • View it using Firefox
  • Then open the code using Atom
Key Concepts:
  • Both HTML, which is used to create text, and SVG, which is used to create graphics, are just text with tags
  • SVG: uses basic terms from geometry to describe rectangle, circle
  • CSS: can be used to change the look and feel of both HTML and SVG
  • You can put CSS inside an HTML file, or you can reuse it by putting it in a separate file and pointing to it
Your Turn: change the color of the rectangle or the circle

C) Very Simple D3

1) Turn Simple Data into Circles
Key Concepts:
  • Learning most programming, you only have to do with one new concept at a time, D3.JS throws a bunch of concepts at you right at the start
  • But don't sweat it! The patterns you see here you'll use over and over and will become second nature:
    • selectAll, data, enter, append: the most common pattern for creating a data viz.
    • Yeah, using 'selectAll("circle")' when you know there are no circles is weird -- but it's a very common pattern and you'll get used to it
    • function(d,i), a.k.a. an anonymous function looks weird, but again very common pattern you use over and over
Your Turn: try adding, deleting, modifying numbers in myData
2) Turn Data into Circles Three Ways
Key Concepts: small tweaks, big changes
Your Turn: Try changing color, spacing, see what happends

Debugging Basics

  • "It's disappeared": if anything weird happens, or the screen goes blank, first thing you need to do is open up the debugger
  • How to start it: use the menus or press Ctrl+Shift+k

D) Simple Real-World Example: What D3 Can Do That Excel Can't

1) Creating an Abstract Map: Team Room Scores

Key concepts:
  • Abstract map: very simple technique, allows you to put items wherever you want, so also very flexible
Your Turn:change the colors in the conditional logic
Your Turn: Tweak the map

E) Extra Credit

NOTE: highly unlikely I will get any of this in the class, just gives the materials that more adventurous/advanced folks can play with on their own

1) How to Make a Simple Bar Chart: Clothing Sales

Key Concepts:
  • Data: array of objects
  • It's pretty, but took a lot of work and isn't close to being done -- needs legend, etc. D3 gives you total control, but sometimes that's way more control than you want to have to spend time on

2) Reading Data from a File: SIG Status

NOTE: because this D3 script reads a file, for security reasons it must be run on a server; if you try running it just from your browser, you'll get an error message. It's not hard to run a tiny server on your desktop, but it takes some setup. So for the purpose of this class, the link above doesn't point to the filing your desktop, it points to the file on the class GitHub site.

Key concepts:
  • Reading data from a file
  • Using conditional logic for color: we will get to play with it in the next example
  • Beginning to think about scalable solutions -- e.g., new data from a file each month