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.