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