Introduction and installation of "D3.js starter Series-0"

Introduction and installation of "D3.js starter Series-0"Posted in 2014/06/12

In recent years, visualization has become more and more popular, many newspapers and magazines, portals, news, media have a large number of use of visual technology, making complex data and text becomes very easy to understand, there is a proverb "a picture value in 1000 words", is indeed true. A variety of data visualization tools as well as the development of the blowout, D3 is one of the best.

1. What is D3?

The full name of D3 is (Data-driven documents), as the name implies, is a data-driven document. Listen to the name a bit abstract, say simple, is actually a JavaScript function library, use it is mainly used to do data visualization. If you don't know what JavaScript is, learn about JavaScript first.

W3school's JavaScript Tutorial

JavaScript file suffix is usually. js, so D3 also often use d3.js salutation. D3 provides a variety of easy-to-use functions that greatly simplify the operation of JavaScript data. Since it is inherently javascript, it can do all the work with JavaScript, but it can significantly reduce your workload, especially in data visualization, where D3 has streamlined the complex steps of generating visualizations to a few simple functions, you just need to enter a few simple data, Can be converted to a variety of brilliant graphics. A friend with a JavaScript base must be easy to understand.

2. Why Data visualization

Now there is a set of data, "4, 32, 15, 16, 42, 25," can you see their size relationship at a glance? Of course, the data here is not much, there is the sighted of the guy stood up and said I can see it! But the more intuitive is the graphical display, such as:

Through the graphical display, it is clear to know their size relationship. Of course, D3 ability is much more than that, it's just a small application. The tedious and complicated data is represented by a simple and clear graph, which is the visualization of data.

3. How popular D3 is

D3 is an open source project and the author is a New York Times engineer. The code for the D3 project is hosted on GitHub (a development management platform that is now the world's most popular code hosting platform, with excellent engineers from all over the world).

What are the most popular projects on GitHub?

The reputation of JQuery is big enough, but ranked number 5th in 6,d3.

For a survey of the 2014 popular JavaScript graphics library, read this article:

A survey of the prevalence of JavaScript graphics libraries

4. How to learn and use D3

The best place to learn D3 is: http://d3js.org/, of course, the inside are English, and then the site O (∩_∩) o~.

D3 is a library of JavaScript functions and does not require "installation", which is commonly said. It has only one file, which can be referenced in HTML. There are two ways of doing this:

(1) Download the D3.js file

• D3.zip

After decompression, the HTML file contains the relevant JS file can be.

(2) can also directly include links to the network, this method is simpler:

1	<script src="Http://d3js.org/d3.v3.min.js" charset="Utf-8"></ script>

But the use of the time to keep the network connection is valid, can not be used in the case of network disconnection.

5. What to learn D3 need to prepare knowledge

What do you need to know about a friend who wants to start a data visualization journey through D3?

• HTML: Hypertext Markup Language for setting the content of a Web page
• CSS: Cascading style sheets for setting the style of a Web page
• JavaScript: A literal-translation scripting language used to set the behavior of a Web page
• DOM: Document Object Model for modifying the contents and structure of a document
• SVG: Scalable Vector graphics for drawing visualizations

Passerby A: Well, do I need to learn so much to start learning D3? Psychological pressure a little bit ... Big

Steamed bread flowers: Do not need, completely can directly learn D3, encountered do not understand the place, and then see the relevant content can

Passers-by B: HTML, CSS What, I have never used, it does not matter?

Steamed bread flowers: As long as in W3school, look at these words are what meaning, is used to do, and then see a few simple examples, there is no need to master the learning D3.

6. What tools are needed

The tools you can use to make Web pages.

Notepad software: notepad++, EditPlus, Sublime Text, etc., choose their favorite can.

Browser: IE9 above, Firefox, chrome, etc., recommended with chrome

Server Software: Apache, TOMCAT, etc.

In this case, the server Software may not be necessary, but some functions in D3 need to put the HTML file in the server directory, in order to work properly, this will be explained later.

Well, you can start your D3 trip.

Introduction and installation of "D3.js starter Series-0"