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