Data visualization with D3 transition / interpolate——使用d3动画与interpolate实现数据可视化

D3可以使你站在世人的肩膀上,做我们想做的事情。
D3 makes you stand on the shoulders of giants to fulfill your mission of Data visualization.

这里我写了个简单的入门实例教程,涉及 D3 的几个核心概念。
Here I provide a simple Kick-starter of D3, bring you some core concept of D3 with a live demo.

比如 数据绑定、动画、SVG Path 数据生成器等。
Like Data binding (driver), transition (animation), SVG Path generator

使用 Google,结合我的注释,把下面的d3的函数一个一个弄懂,我想就算为入门了。
Reference to my comment in the js code (jsFiddle) and Google all the verbs/nouns of d3. It’s supposed to be helpful for absolute starter.

对了,至少你应该了解 Javascript/css,否则可能看不懂。
Surely, you may want to learn Javascript first before you move onto d3.

难点:
Show stopper:

Interpolate 是一种工具方法,可以把你设定的区间,平均返回给传入的值。你可以用 Chrome debugger 细细体现其中的妙处。
Interpolate is a util d3 provides, which could get a value within an interval in accordance to the percentage of it (if you will). You will get a better idea if you debugger the code in jsFiddle via Chrome.

详细 iframe:
Go to iframe:


另外一个更复杂的例子:
A more complicated example: