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