Data Visualization and D3.js

Data Visualization and D3.js
Data Visualization

Data visualization is a topic for how to better present data. After the emergence of big data, it becomes more important and urgent.

Previously, using excel for column charts, pie charts, and line charts was one of the most commonly used data visualization methods. On the WEB end, the popular extjs, fusioncharts, and jfreechart were used, or the relatively less popular plug-ins such as amchart, highcharts, charts in Bootstrap, and jquery can all display pie charts.

However, the data visualization I mentioned here is not a traditional and simple image, but more complex. It can display more data information in a limited space, especially for better presentation of big data. For example, treemap1 is an example. Traditionally, tree data structures are displayed through a tree, such as the tree components in extjs. treemap uses rectangles to split and display different colors for more information.

WEB technology of data visualization

There are a lot of data visualization technologies, but here we only discuss WEB-side, so excel won't be discussed in this article, even if it can achieve data visualization with Multiple forks now or in the future.

The popular WEB data visualization technologies include D3.js and tableau. D3 has a lot of visual images, but it can't be seen in many cases. Specific visible D3-Example. In addition to the support for treemap and other functions, tableau's support for maps is particularly prominent. For details, see tableau-gallery.
In fact, data visualization can be called as long as the data is displayed in a graphical way. However, I am divided into two categories to better distinguish the older generation of data visualization and the new data visualization technology under the big data background. For example, in the following article:

Recommended 30 best data visualization tools

Extjs and d3js are both data visualization tools. However, I think extjs is more inclined to js component libraries, and data graphics are only one of its functions, so it is not comprehensive and only provides basic graphics. D3 is different. It specifically targets data visualization. Apart from Common Graphics, it focuses more on how to better visualize data.

The following describes how to get started with D3.

How to download D3.js

Official Website
Download d3.zip on the first page. The current version is 3.5.5 (which can be seen in line 3rd of the d3.js file ). After decompression, there are only three files:

D3.js d3.min. js LICENSE View Example

Click Example at the top of the homepage. Based on the source files in example, you can quickly create a helloword example. If you do not use the server, we recommend that you use the Firefox browser. I personally test that chrome and ie are not successful.

View Chinese documents

Learning a new technology, except for the source code (d3.js), is definitely the most important document.
Wiki Chinese Link

Example 1

Let me call it helloword. It is actually the first example in example-box plots. Open link:
Http://bl.ocks.org/mbostock/4061502#morley.csv
Create three files according to the instructions:

Index.html box. js morley.csv

Use Firefox directly (my version is Mozilla firefox35.0.1← to open index.html. It is best for other browsers to deploy a server before it can be opened. Negative will report an error in d3.csv, d3.json, and other code lines:
? Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource