This is a Reading Note for Interactive Data Visualization for the Web - An Introduction to Designing with D3 by Scott Murray, pulished by O’Reilly, 2013
This post will contains concepts that I think it’s important for me to be familiar with in D3 book.
Note: All tips that is written by book will has a sign near it.
All code example in this post comes from book.
Chapter 11 : Layout
code example for Chapter 11 is here.
All Layouts for D3 are:
Force: generate and assign
Hierarchy: there are sevel layer in chart. Each chart inherience layout from previous layer
Pack: generate layout based on
Partition: generate adjacency diagrams: a space-filling variant of a node-link tree diagram
Pie: generate pie chart
Stack: generate base line for a series of bars
Tree: generate tree chart
Treemap: generate a group of rectangles. Each reactangles size is based on radio of data.
Step one: given a dataset(array of numbers), you can use
var pie = d3.layout.pie() to convert this dataset to a new dataset with numbers ready for pie chart.
Step two: you can use
d3.svg.arc() to create
arc for pie chart. This function will generate a
path variable, which can draw any shape in SVG:
Step 3: create new group and make arcs in this group to comine a pie chart. Then add
path element to store arcs data and generate shape:
Step 1: Assume you have a dataset which contains objects with attributes, you need to re-organize this dataset to objects with
x is the
y is the actally value of original data:
Step 2: similar to pie chart, use
d3.layout.stack(dataset) to re-generate dataset. Note this will generate a
y0 value as baseline for each object, which equals to the total of all
y value for its previous object / the minimum y-position of the value:
Step 3: Assign
height attribute to each rect. You need to use
Force Directed Layout
This layout is dragable by user, and the chart will move following physic role. This layout use
graph, which is combined by
Step 1: This layout needs special dataset which defining
weight attributes, which defines the from and to attribute for each edge, with line weight:
Step 2: Using
d3.layout.force() to initailize dataset. You need to set
.links() with data in dataset, then set
size of how far user can drag. Use
start() to finish initialization:
Step 3: Set attributes for
ages. At the ends of
nodes attribute, make sure use
.call(force.drage) to enable the ability of dragging.
Step 4: Define what is going to happen in
tick, which means define the behavior of chart when a time frame pass by. Here we want for each time frame, chart will update nodes and edges:
Code for This Chapter
An interacive version is here.