Everest front-end data visualization

1. D3.js overview
1. What is
D3? The full name of D3 is (Data-Driven Documents), which translates to a data-driven document. In short, it is a JavaScript library mainly used for data visualization. Because it is JavaScript in nature, all functions can be achieved with JavaScript, but it can greatly reduce your workload, especially in data visualization. D3 has streamlined the complex steps of generating visualization to a few simple functions. , You only need to enter a few simple data, you can convert into a variety of gorgeous graphics.

2. What is data visualization and why data visualization is needed

Show boring and complex data graphically, this is data visualization. For example, there is a set of data [5,15,23,78,110,57,29,34,71]. There are not many data here. It is easier to see their size relationship directly, but it is more intuitive to display with graphics, as follows Figure:
Data visualization bar graph.png

Through the graphic display, we can clearly know their size relationship. This is just an application example of the D3.js framework, which has more powerful functions.
3. Why use js frameworks like D3 for front-end data visualization

Take the above data visualization bar chart as an example, we use native js to achieve this effect.

Goal: Use a horizontal histogram to visually display the following data
var data = [5,15,23,78,110,57,29,34,71];

HTML code:

css code:

#barChart{
background:#f0f0f0;
padding:10px;
font-family:Verdana;
color：white；
}
#barChart .bar{
left:0px;
height:20px;
background:blue;
margin:5px;
}
js代码：

//The data object to be displayed
var data = [5,15,23,78,110,57,29,34,71];;

window.onload = function(){ //Calculate the length of data var len = data.length;

//获取容器DOM对象
var barChart = document.querySelector("#barChart");

//创建len个div对象，并设置其属性
for(var i=0;i<len;i++){
    //创建一个新DOM元素
    var e = document.createElement("div");
    //设置元素的CSS类为bar
    e.setAttribute("class", "bar");
    //设置元素宽度为对应数据值
    e.style.width = data[i] + 50;
    //设置元素的文本为对应数据值
    e.innerText = data[i];
    //向容器追加此DIV对象
    barChart.appendChild(e);
}

}; It
can be seen that even if it is just a very simple and basic data chart, a lot of js code must be written. When the visualization data becomes more and more complicated, a package library like D3 is needed to improve development efficiency.

4. Overview of several features of D3

(1). d3.js is not a graphics drawing library, it relies on standard web technology to draw visual elements, such as HTML, SVG, CSS.
(2).d3.js is a DOM manipulation library based on the concept of collection, which encapsulates DOM manipulation. Similar to jQuery, d3 relies on the selector to select a group of elements, build a collection, and then use the collection object method to manipulate the DOM.
(3) A large number of functions of .d3.js focus on data processing. To map data to graphics, there are a lot of trivial tasks, such as data range transformation, interpolation calculation, layout calculation, etc.
(4).d3. The core of js is the matching of data and visual elements. One data corresponds to one visual element, and one value corresponds to the attribute of one visual element. d3 encapsulates this complex matching process, allowing us to complete the task of data visualization simply by declaring data and visualization elements.

4. Download and use of
D3 D3 official website has detailed documents, but the English
D3github address has detailed installation and introduction

2. D3.js grammar basis
1. Selection set
The object returned after selecting an element using d3.select() or d3.selectAll() is the selection set.
D3 can call functions continuously, such as: d3.select().selectAll().text(), which is called chain syntax, which is very similar to the syntax of JQuery. The following example, use D3 to change the text and style

Hello World 1

Hello World 2

Operation result 2. Select element and bind data (1) Select element

d3.select (): the first is to select all of the specified elements
d3.selectAll (): is the choice of all the specified elements

var body = d3.select("body"); //Select the body element in the document
var p1 = body.select("p"); //Select the first p element in the body
var p = body.selectAll( "P"); //Select all p elements in the body
var p = body.selectAll(".car"); //Select all elements with the class name car in the body
var svg = body.select("svg" ); //Select the svg element in the body
var rects = svg.selectAll("rect"); //Select all the svg elements in the svg
(2) Binding data
D3 A very powerful feature is the ability to bind data to On the DOM, that is, bound to the document.
For example, there are paragraph elements and an integer 100 in a web page, so the integer 100 can be bound together. After binding, it is very convenient when you need to rely on this data to manipulate elements.

In D3, the data is bound by the following two functions:
datum(): bind a data to the selection set
data(): bind an array to the selection set, and each value of the array is connected to the selection set. Element binding

Next, use datum() and data() to bind the data to the following HTML elements.

I love Jane

I love jianshu

Realize with datum()

var str = “nightzing”;
var body = d3.select(“body”);
var p = body.selectAll(“p”);
p.datum(str);
p.text(function(d, i){ return The data bound to the "th" + i + "element is" + d; }); running result

In the above code, an unnamed function function(d, i) is used. When the selection set needs to use the bound data, it is often used in this way. It contains two parameters, among them:

d stands for data, which is the data bound to an element.
i stands for index, the index number of the data, starting from 0.