D3.js: A quick introduction to data visualization

hello,data!

Before entering D3.js, let's review the basic process of visualizing data with a small example.

• Task

Use the horizontal histogram to visualize the following data:

1. var data = [ten,34, at ,[];

To simply think about it, there are two issues that need to be addressed to accomplish this task:

1. What visual elements are used to represent horizontal columns ?
2. What properties of the data correspond to the visual elements?

This is not difficult, we use the HTML DIV element to implement, code see http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/: QuickStart first page

Try to change the contents of the variable data in the sample code to see what it means.

Visualization and D3.js of data

Visualizing The data graphically , this process is the visualization of the data .

Yes, a picture wins thousands of words. It's hard to find patterns and anomalies from boring numbers, but it's good to find the pattern from the graph. With the increasing scale of human data, data visualization is becoming an important and indispensable technology.

D3.js is an excellent data visualization library that allows us to quickly and easily transform data into graphics. However, before starting a follow-up tutorial, first of all, I hope you don't misunderstand d3.js:

• D3.js is not a graphical drawing library

Many people are amazed at this point, but have to mention it. D3 relies on standard web technologies to draw visual elements such as HTML, SVG, and CSS. The use of D3 requires us to have a basic understanding of these standard technologies.

• D3.js is a library of DOM operations based on set concept

D3 is not a drawing library, but it encapsulates DOM operations. Like jquery, D3 relies on selectors to select a set of elements, create a collection, and then manipulate the DOM using the method of the collection object.

• D3.js's large number of functions focus on data processing

To map data to graphics, there are a lot of trivial tasks, such as data range transformations, interpolation calculations, layout calculations, and so on. D3.js's large number of functions are focused on such data processing.

• The core of D3.js is the matching of data and visual elements

D3 the data visualization as a match between the data and the visual elements, a data corresponding to a visual element , and a value corresponding to the attributes of a visual element. D3 encapsulates this complex process of matching, allowing us to easily perform data visualization tasks by declaring data and visualizing elements.

D3 's four axes: hello,d3

After introducing d3.js in the HTML file, we get a global variable:d3. The function of D3.js is exposed through this object.

We used the D3 API to rewrite the previous example, and the code was pre-provisioned to →_→.

This example shows the typical idea of d3.js for visualizing data: Declarative data visualization based on set operations .

Please note that the classic four axe used in D3: D3 always requires the user to declare two sets:DOM object Set and dataset, and implement data with DOM object based on set operation match , and finally get a visual effect by modifying the matching DOM object.

D3 1th Axe: Declaring the DOM object set

The D3 data visualization process always starts by selecting a set of DOM elements to create a collection Object . In the example, we pass:

1. var selection1 = D3. Select("#barChart"). SelectAll(". Bar");

An attempt was made to Select all the div.barin div#barchart in the document DOM tree. We save the DOM collection returned in this step to the variable selection1 .

You should notice that this is an empty collection !

That's kind of interesting.

• D3 allows an empty collection to be declared

In jquery, if our selector doesn't have any HTML elements selected, then all of the subsequent operations are meaningless. However, D3 allows us to Select none of the elements to create an empty collection .

Because, D3 also has the 2nd axe, uses the data to influence this empty collection.

The size () method returns the number of all DOM elements in the collection. In →_→ 's example, you can see that selection1 is really an empty collection: It has 0 dom elements.

D3 2nd axe: declaring datasets

We execute the data () method declaration on the selection1 that is returned on the first step to show the information:

1. var selection2 = selection1. Data(data);

We know that this dataset is not empty, it has 8 data items. In this step, D3 compares the dataset to the DOM object set and returns a new collection Selection2.

We see that the number of DOM elements in Selection2 is also 0.

Matching calculations

The Data () method executes a matching calculation of the dataset and the DOM element set, and the result is a common part of the two collections that is returned directly. Since the DOM element set is empty, there must be no DOM element for the result:

However, there are two important ways to match the results of the calculation, so that we can get the differences in the set of data collection DOM elements:

• Enter (): Get more data in the dataset than in the DOM element set
• Exit (): Get more data in the DOM element set than in the dataset

Example (http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/: QuickStart on page fifth) shows whether the number of members currently available in the selection set is 0, through the data () operation.

D3 3rd axe: Get result set

Continuing to use the collection's Enter () method, we can get the missing collection of Dom objects (the data set is the baseline for comparison):

1. var selection3 = selection2. Enter();

Because the original Dom collection is empty, and the dataset has 8 items, there will be 8 items in Selection3 that describe the 8 missing DOM objects:

D3 4th Axe: Implementing DOM operations

Using the append () method of the collection, we create the missing DOM object:

1. var selection4 = selection3. Append("div");

At this point Selection4 is already a collection of 8 div elements, and on this set we use the text () method to set the textual content of each element:

1. Selection4. Text(function(d) {return d;});

You notice that the text () method parameter is a function! Let me explain.

Selection4 is a collection of 8 div elements, we pass the previous three axes, each of which has the corresponding data (D3 is responsible for managing their correspondence), for example, the first DIV element corresponds to 10, the second DIV element corresponds to 15 ...

Whenever a method of a collection is called, it checks the parameters passed in, and if the passed argument is a function, D3 executes the function once for each DOM element in the collection and passes in the corresponding data for that DOM element.

We then use the classed () method to set the CSS class for each element as "bar":

1. Selection4. Classed("Bar",true)

Finally, use the width () method to set its width by using the corresponding data for each element. Does that make sense?

Reference: http://www.hubwiz.com/

D3.js: A quick introduction to data visualization