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.