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 - 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.