Your taobao annual consumption report that cool chart suddenly let people forget how much money they spent, major portal sites, media began to use a large number of charts, and then there is a batch of tools waiting for us to learn on the road

What is the D3. Js

D3.js (full name: D3.js (data-driven Documents) is a Javascript library. If you have a background in Javascript, you can start using d3.js. D3.js is mainly used for data visualization, i.e. all kinds of cool charts, such as line charts, string charts, force guides, etc., while jquery is mainly used for page DOM control, AJAX and animation.

What’s the difference between d3.js and echarts.js

D3.js and echarts.js are used to generate all kinds of charts, Echart. js uses canvas to draw graphics. In particular, echarts. Init initializes an echarts instance and setOption generates a simple bar graph. D3.js uses SVG to draw graphics. To use it, you need to create a canvas (SVG element) and then draw various graphics.

In terms of compatibility,echart.js is compatible with all major browsers IE6 and above, while D3.js is compatible with IE9 and above and all major browsers. If the project is considering compatibility with IE6, it is recommended to use Echart.js

In terms of learning cost, Echart. js is a packaged method that can be directly called, so it is faster to learn. However, d3. js is relatively low-level and costs more to learn. Because of this, D3.js also has greater flexibility, so if you can’t find the chart you need in Echart, you can do it in D3

How cool is the d3.js chart

You can see a screenshot of the official first screen here

Download the latest version (5.5.0) from d3js.org/ and click here to Download the latest version directly to the page or through the Internet

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>