Visualization and D3.js of data

Visualization of data

Data visualization is a topic of how to better visualize data, and it becomes more important and urgent after big data emerges.

Previous use of Excel for histograms, pie charts, line charts, etc. is one of the most commonly used data visualization methods, while on the web side, using popular ExtJS, Fusioncharts, Jfreechart, or relatively less popular amchart, Highcharts, Bootstrap in the charts, some of the jquery plug-ins and so on can realize the pie chart and so on display.

However, the data visualization I'm talking about here is not a traditional, simple graphic, but rather more complex, and can show more data in a limited space, especially for the better presentation of big data. For example, Treemap1 is an example. The traditional implementation of the tree data structure display through a tree, such as ExtJS in the tree-shaped components, and treemap through a rectangle, the different slices, different colors to achieve more information display.

Web Technology for data visualization

There are many techniques for visualizing data, but this is only the web-side, so Excel does not discuss the data visualization of multiple forks, even though it can now or later be implemented.

Today's popular web data visualization technologies include d3.js, tableau and many more. D3 has a lot of visual graphics, too much to see. specifically visible d3-example. Tableau's support for treemap, among other things, is particularly prominent in the map. Concrete Visible Tableau-gallery
In fact, as long as the data can be graphically displayed, can be called data visualization. But I am divided into two categories to better differentiate the old generation of data visualization and new data visualization techniques in the context of big data. For example, in the following article:

30 Best Data Visualization tools recommended

Both ExtJS and D3JS are data visualization tools. But I think, ExtJS more inclined to the JS component library, and the graphical data is only one of its functions, so it is not very exhaustive, only provide basic graphics. And D3 is different, it is specifically for data visualization, in addition to common graphics, it is more focused on how to better visualize the data.

The following highlights the introductory use of D3.

D3.js Getting started how to download

Official website
Download D3.zip on the homepage, the current version is 3.5.5 (in D3. The 3rd line of the JS file is visible). Only three files after decompression:

• D3.js
• D3.min.js
• LICENSE

View Example

Click Example on the top of the homepage. Depending on the source file in the example, you can quickly make a helloword example. If you do not use the server, it is recommended to use the Firefox browser, I personally test the use of chrome and IE did not succeed.

View Chinese documents

Learning a new technology, in addition to the source code (d3.js), the document is absolutely the most important.
Wiki Chinese links

A first example

Let me call it Helloword. In fact, example is the first example-box plots. To open a link:
Http://bl.ocks.org/mbostock/4061502#morley.csv
Create 3 files according to the instructions inside:

• Index.html
• Box.js
• Morley.csv

Just use Firefox (my version is Mozilla Firefox35.0.1) to open index.html. Other browsers are best to deploy servers before they can be opened. Otherwise, the d3.csv, D3.json and other code lines error:
? Cross origin requests is only supported for protocol schemes:http, data, Chrome, chrome-extension, HTTPS, Chrome-extensi On-resource

Reference

Recommend a very good d3.js Chinese network, basic I met most of the primary problems, are here to find answers.
-Ourd3js

Recommended articles:

• 20 Big Data Visualization tools reviews
• 22 Free data visualization and analysis tools recommended
• D3.js Introductory article (one)
• D3.js Advanced Series -1.0-csv Table file read
• D3.js-wiki-csv

This article is from: Ouyida3 's CSDN Blog
2015.5.19

1. If you do not know what treemap is, can be d3.js to treemap an implementation of the TreeMap look at the appearance.

Visualization and D3.js of data