Great D3 book - Data Visualization with D3.js Cookbook

This is so well organized book about D3 data visualization.

Starting from the development environments, it explains Selection, Data Joining, which are the key concepts of D3. Then it begins to show how to draw charts with Scale and Axis. And you can enjoy the real splendid part of D3 like Layout, Interactiveness, Force and so forth.

I could follow this book in pretty good pace, because its simple but essential examples. That's the another good point of this book, so don't have to give up reading this book to the end.

And the author himself made a good D3 library like dc.js which gives great interactiveness to D3. Maybe that's the reason the author has the great insight about D3.

Actually I'm translating other D3 book, which has splendid examples, but is somewhat lack of simpleness. I would be far happier if I was translating this book.

If I have to recommend only 1 book for learning D3, this book will be.

Realtime Streaming Chart using D3.js - 03. Streaming the Axis

Code and the Result




Add a button to toggle streaming the axis

I want to add a feature that can streaming the X-axis.
So I add <button> in the html, and add a jQuery click event handler, which toggles the streaming feature.



Streaming, the mechanism

Well, I selected the word 'streaming' because the X-axis flew to the left constantly.
But from the view point of the mechanism, 'streaming' may not be the proper word.
'Periodic Smooth Shifting' is probably more accurate.
Actually, 'streaming' consists of 3 parts as you can see the code above.

• Updating the domain of the axis
• Animate the change of domain of the axis
• Repeating periodically

D3 stuff in this code

xScale.domain()
  Refer to here - 01. Draw SVG and Axes


gXAxis.transition()
  selection.transition() starts and returns the 'transition' of the selection. Transition is an object derived from the selection and it enables the selection to animate.


transition.ease("linear")
  transition.ease(value[, arguments]) specifies the easing function and returns the transition. 'transition.ease("linear")' means there is no acceleration in the animation, so the animation proceeds at a constant speed. See this page for the easing functions.


transition.each()
  transition.each([type, ]listener) will executes 'listener' when the 'type' event dispatches. The 'type' is "start" or "end".


So the code above does,
update the domain of the xAxis using scale() method,
and provide xAxis with the animation-enabled selection,
and reinvoke the 'shiftXAxis' function whenever each transitions ends.



Summary

We streamed the axis by
1. updating the domain of the axis
2. animating the change of the domain of the axis
3. repeating periodically.



What's next?

X-axis represents just a number for now.
Streaming the 'time' rather than just a number can produce more values in the real world.
We are going to change the X-axis so it can represent the 'time'.

go Back | go Next

Realtime Streaming Chart using D3.js - 02. Draw a Point

The Code and the Result

Add a button to draw a point on the chart

I want to add a point(circle) on the chart.
So I add <button> in the html, and add a jQuery click event handler, which makes a new data and draw a circle on the chart.


SVG circle

D3 is based on SVG. So the result of the D3 chart consists of SVG tags.
Here I will draw a point using SVG circle, and it look like this:

<circle cx="454" cy="92" r="4" style="fill: #893af5;"></circle>

'cx', 'cy' means the location of the X, Y originated from the Top-Left corner of the SVG.
'r' means the radius of the circle
'style' is just a css style to display the circle.

Our goal is simple.
Produce the HTML code above with our own data.
D3 plays a key role here.


D3 stuff in this code

selection.datum(data)
  selection.datum([value]) returns the selection after binding the value to that selection.
  So using selection.datum(), we can bind our own data to the SVG circle.

selection.attr("cx", function (d) { return xScale(d.x); })
  selection.attr(name, [value]) returns the selection after setting the named attribute with the value. As a value, we can use a function whose arguments are our own data because we bound the data to the selection using datum().


Summary

We drew a point, actually a SVG circle, with our own data using D3's datum() and set the attributes of the element using D3's attr().


What's next?

Now it's time to handle streaming! We are going to stream the axis.

go back | go Next

Realtime Streaming Chart using D3.js - 01. Draw SVG and Axes

The Code and the Result



The process in a real world

When you draw a graph, what is needed?
First of all, you need a pen to draw with, and a paper to draw on.

What's next?
You determine the physical size of the graph and the location of the graph in the paper.

Then?
You draw the outline of the chart, specifically, the axes.
And begin to think about the range of the data, in other words, the logical size of the graph, that is to say, a Scale.

Yes. that's exactly what the code is doing.



The analogy in the code

The pen is the D3.js
The paper is the 'svg' tag and the physical size is width/height attributes of svg
The location can be set using 'g' tag
The axes are instantiated by calling axis function
The scale can be calculated by d3.scale



The basic

You need to 'append'(or 'insert') some HTML tag to see anything happen in the screen.
That is to say, all you did without 'append'(or 'insert') are all logical things that produce no physical effects.



D3 stuff in this code

d3.select("body")

  d3.select(selector) returns a D3 'Selection'
  In a word, D3 'Selection' is a wrapper of the selected element(s).
  You can understand the 'Selection' by reading the API references, but I strongly suggest to read this article. It may takes some time to understand, but it deserves.

selection.append("svg")

  selection.append(selector) returns a new selection containing the appended elements(here, 'svg' element).

selection.attr("class", "axis")

  selection.attr(name, value) returns the selection after setting the 'name' attribute with the 'value'.

  selection.attr(name) returns the current value of the 'name' attribute.

d3.scale.linear().domain([minData, maxData]).range([minPixel, maxPixel])

  d3.scale.linear() returns the linear scale function which is capable of calculating the scaled result.
  domain([minData, maxData]) returns the linear scale function after setting the 'domain' of the scale.
  domain() returns an array which contains the current minData and maxData.
  range([minPixel, maxPixel]) returns the linear scale function after setting the 'range' of the scale.
  range() returns an array which contains the current minPixel and maxPixel.
  As a result, this sentence returns a linear scale function which is capable of calculating a pixel value from a data.
  There are more scale function like sqrt, pow, log, quantize, threshold, quantile, identy, ordinal, category10, category20, category20b, category20c. Please see the API references for those various scales.

d3.svg.axis().scale(xScale).orient("bottom")

  d3.svg.axis() returns the axis function which applies the axis to a selection or transition.
  scale(scaleFunction) returns the axis function after setting the scale with the scaleFunction.
  scale() returns the current scale function.

  orient(orientation) returns the axis setting the orientation of the axis. Orientation is a string, "top", "bottom", "left", "right".
  orient() returns a string which represents the current orientation.

selection.call(functionA)

  This pattern is frequently used when you create axis.
  The sentence above is equivalent to 'functionA(selection)'



What's next?

Now it's time to draw data points.

go back | go Next

Realtime Streaming Chart using D3.js - 00. Intro

What is D3.js

D3.js is the most popular and powerful Open Source Data Visualization library.
Some other data visualization libraries like Rickshaw.js and nvd3.js are based on this D3.
You can produce realtime, interactive charts(or graphs) as well as static charts(or graphs) based on SVG, basically.

You can see a bunch of splendid examples here.
The following is just a part of those 120+ examples.(It's still growing though)

What this post wants to say

Actually I needed a 'Realtime Streaming Point Chart'.
That is to say, the X-axis represents the time series, and the X-axis is streaming with its data points as time goes by.

At first, I just wanted to find appropriate example and to modify it a little bit. ^^
I found some realtime streaming 'Line' chart here, and 'Bar' chart here.
But I couldn't find the realtime streaming 'Point' chart.

So I made up my mind to study D3.js and finally I made it!!!

I will show how to make it through 7 steps.

01. Draw SVG and Axes
02. Draw a Point
03. Streaming the Axis
04. Change X-Axis to the time series axis
05. Change a data to a time
06. Moving points according to the time
07. Apply Clipper


Prerequisites

Not much.
Just fundamental experiences on HTML and JavaScript.
And some effort to study the concepts of D3.



What you can get

You will get a Realtime Streaming Point Chart.
And you will find yourself familiar with the D3.js.



Benefits

I will use jsFiddle, so you can test all the codes in this way and that way.
It will help you understand D3's mechanism.

For D3 concepts, I'll basically provide very short instructions to speed up learning. Instead of explaining everything by myself, I'll provide proper links to great articles written by Gurus.

I approach to those D3 concepts in a timely manner, which means I'll first describe what we actually needed rather than following the order of the D3 references book.