D3.js Getting Started 1: Installation configuration

D3 is currently a popular data visualization tool, through this article can have a preliminary understanding of D3.

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

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

Here are two ways to install D3:

1. Download the D3.js file

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

2. You can also include links to the network directly, which is simpler:

<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 required for development using D3

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 apply, this will be explained later.

You can use Notepad software to create a new. html file, write the code inside, save it. You can then use your browser to open the. html file to see the results.

Well, you can start your D3 trip.

D3.js Getting Started 1: Installation configuration