Class 2: Using Layouts, Creating Reusable Code

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.

A) Layout + JSON Data = Circle Packing

Creating a Circle Packing Diagram

Key Concepts:

Using Stylesheet rather than doing it all by code: Try changing the colors
JSON data, for hierarchical data: try tweaking it
Grouping: to make it easier to keep the pieces together
Layout, to hide the details: try using console log

B) Dendrogram Layout

Cluster Dendrogram

Key Concepts:

Different Layout
Lines, circles, text (this is where grouping really pays off)

C) Creating Reusable Code

Org Chart

Key Concepts:

Pretty easy to do: create a function,Add parameters, move the data into the new file, call the new file
Also reusable: using a stylesheet (alternatively, could just pass parameters into function)