This is an introduction to D3, to clarify the understanding of D3, and hopefully to help you get started.

1. What is D3?

D3 (Data-driven Document) translated into Chinese “data-driven Document”, is a Javascript library based on Data manipulation DOM. D3 is similar to jQuery, but it is data-oriented, data-driven manipulation of DOM; JQuery is web oriented and manipulates the DOM directly.

D3 is a javaScript library, not a javaScript charting library like Echarts, HighCharts, etc. The idea is to map data to visual elements (shape, length, direction, Angle, color, area, text, etc.) and visualize data through combinations of visual elements (as I understand it). Therefore, D3 is more flexible and suitable for creating customized interactive data visualizations. Ali’s G2 also borrowed this idea from D3, and G2 also has great potential.

Because D3 does not introduce new visual representations, its graphical vocabulary comes directly from Web standards (HTML, CSS, SVG, Canvas). Therefore, no matter how much the browser iterates, D3 will never become obsolete. Industry known as D3 data visualization library king, the most powerful data visualization JS library.

In addition to learning D3 API, web-related KNOWLEDGE of HTML, CSS, JavaScript, SVG, Canvas and data visualization theory also need to be learned. Of course, you can supplement your knowledge with D3.

2. Install the D3

The easiest way to introduce D3 is to import external D3 script files via the script tag in HTML. You can use external links, or you can download d3.js locally and import it.

The use of external links < script SRC = “https://d3js.org/d3.v5.min.js” / >

// SRC property to write d3.js local path

D3.min.js is a compressed version of d3.js, with smaller files and faster loading, but no discount at all.

If you need to read external files (CSV, JSON, or XML), you need to set up a server environment. If you have python3 installed, you can enable its built-in easy server. Python -m http.server is done with a single command. You can also download and install the Apache Http Server from the Apache website (httpd.apache.org/).

3. D3 object

Once d3.js is introduced, you can get the “D3” object you want to use. The D3 object is similar to the “$” object in jQuery, using the same chained syntax. That is, each call to a function provided by D3 will return a D3 object, which can continue to call other d3 function methods. Here’s an example:

d3.select('body')
.append('svg')
.attr('width'.500)
.attr('height'.500)
Copy the code

This line of code says: Select the Body tag, add the SVG element, and set the width and height of the SVG element to 500.

If you’re used to this chaining syntax, you’ll find it very handy for creating data visualizations. The following diagram shows the composition of D3 objects nicely.

4. Select and perform operations

The D3 selection element provides two functions: select and selectAll.

Select returns the first element matched by the CSS selector.

SelectAll returns all elements matched by the CSS selector.

After selecting elements, you can manipulate them, including adding (Append), inserting (INSERT), removing (remove), and setting and obtaining element attributes (attr, style). Here is an example of the D3 selection and action elements that you can add line by line to make sense of.

5. Data binding

Data binding is the binding of data to DOM elements, which is the biggest feature of D3 and the design philosophy of D3. Data binding in D3 provides datum() and data() functions.

Datum (value) Selects each element in the set to bind to the same data value.

This method does not perform data binding calculations (Update, Enter, exit) and only binds data to existing elements. If the value is an array, it is automatically converted to a string.

Data ([value]) Selects each element in the set to bind to an item in the array value.

It’s easy to understand, but again, as an example, you can add your own line by line.

6. Scale

Scale is an important D3 concept.

Why scale?

The reason is the difference in size between real data and the visual elements that create the data visualization. The concept of scale is the same as that of map scale. To draw a map of the world on a canvas, you need to project the whole world onto the canvas at a certain scale. In a mathematical sense, scale is a mathematical function, which has three elements: definition domain, range, and corresponding rules. D3 provides a variety of scales, both continuous and discrete, according to the corresponding law.

Take the linear scale:

let scale = d3.scaleLinear()
           .domain([0.10000])
           .range([0.100])
Copy the code

Where scaleLinear() corresponds to the rule, domain() is the domain and range() is the range.

7. Coordinate

Coordinate axes are components that are often used in drawing diagrams, such as bar charts, line charts, scatter charts, bubble charts, etc. The specialized axis module D3-Axis is provided in D3, which can generate a wide variety of axes with just a few lines of code. In general, coordinate axes are used with scale. Remember that, to leave the scale axis is to bully.

It’s easy to understand, but let me give you an example.

Run the final result:

8. Draw a bar chart

You can use this knowledge to make a lot of graphs, for example, let’s make a bar graph.

9. Summary

This article is only a brief overview of the most basic concepts and modules of D3, and there are many modules left uncovered. But once you understand data binding, you can write countless creative works using selection and manipulation, scales, and axes, plus basic shapes like lines, circles, and rectangles.

Focus on data visualization technology wechat official account