The data visualization technology that the front-end er must master

It's the end of January again, and the workers are reporting on time and meeting with you as scheduled. When it comes to reporting, an indispensable part is data aggregation and analysis.

As a qualified social person, we deal with numbers in work, life, and study every day. From the quantified work content to the specific work indicators, workshop production, wholesale and retail industries are flooded with large amounts of data. After the birth of the Internet, the Internet closely connected us and allowed data to gather more densely.
Far away... Currently, Grape, who is writing the monthly report, is facing an overwhelming amount of 20,000 data from the back end.

Can this data be used?
It can be used, but not completely.
After all, when making a report, we can't throw 20,000 pieces of data directly on the leader's face and let him find a way to look at it.
At this time, if the leader said, look at which province has the most sales, wouldn't we be blinded on the spot.
But if it becomes such a picture:

You can clearly see the sales gap between provinces.
With this picture, we can return to the leadership in seconds: Zhejiang Province, Tianjin City, and Jiangxi Province are among the top three in sales.
And the leader can take this picture and report to his leader with satisfaction.
Such a data processing process is called "data visualization", which enables us to process and process data.
For an excellent front-end, we pay more attention to how to realize data visualization. There are actually many fields of knowledge involved, including data source integration, data extraction, data cleaning, data modeling, data visualization and so on.
This article mainly introduces you what visualization technologies we need to master in the front-end field as front-end development to help us better realize the visualization of data.

1. Basic development technology

1、SVG

SVG is an XML language, similar to XHTML, which can be used to draw vector graphics. SVG can create a graphic by defining necessary lines and shapes, or modify an existing bitmap, or combine these two methods to create a graphic.

The following is an example on MDN:

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg> 

A rectangle (rect label), circle (circle label) and text (text label) are drawn. Generally, if the canvas is relatively large, there are high-frequency interactive scenes such as zooming and panning, and the development of common pie charts, histograms, and flowcharts, you can consider using SVG. For the specific use of SVG tutorial, you can move to the document: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial

2、Canvas

The Canvas API provides a way to draw graphics through JavaScript and HTML elements. It can be used in fields such as animation, game graphics, data visualization, picture editing, and real-time video processing.

The graphics drawn by Canvas will not appear in the DOM structure. Generally, Canvas is suitable for scenes with small canvases and large amounts of data, with better performance.
The following is a simple example:
HTML part:

<canvas id="canvas"></canvas> 

JavaScript code part:

const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 150, 100); 

For the specific use of Canvas, you can move to the document: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

3、WebGL

WebGL makes it possible to use OpenGL ES 2.0-based APIs for 2D and 3D rendering in the canvas without installing any plug-ins in browsers that support the canvas tag of HTML. If you have some 3D drawing requirements, you can use the webGL solution. In particular, webGL technology is needed to draw 3d maps and 3d earth.

webGL is a drawing technology based on Canvas. To use webGL for 3D rendering, you must first create a canvas element in the page, and initialize the WebGL context through this canvas element. For details, you can move to the document to learn: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial

Two, visual components and tools

1、ZRender

ZRender is a lightweight Canvas library, a two-dimensional drawing engine, it provides Canvas, SVG, VML multiple rendering methods, and provides a Dom-like event model. At the same time, ZRender is also the renderer of ECharts.
Using ZRender is not complicated, we need to import the corresponding JavaScript file, use the API provided by it to initialize a Dom container, and draw the graphics you need in this container. The following is a simple example, creating a circle with a center at [150, 50] and a radius of 40:

var circle = new zrender.Circle({ shape: { cx: 150, cy: 50, r: 40 }, style: { fill: 'none', stroke: '#F00' } }); zr.add(circle); 

For more graphics drawing methods, please refer to ZRender's official document https://ecomfe.github.io/zrender-doc/public/
I won't repeat it here.

2、Echarts

If you need to do visualization work, then you must be no stranger to Echarts. Echarts is a javaScript visualization library open sourced by Baidu, which can run smoothly on PCs and mobile devices, and is compatible with most current browsers. The bottom layer relies on the vector graphics library ZRender, providing intuitive, interactive, and highly personalized data visualization. chart. At the same time, Echarts is relatively easy to learn and use. You can quickly draw a chart through a few simple option configuration items. For example, for a line chart, only a dozen lines of configuration are required:

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] }; 

In addition to 2D charts, echarts also provides Echarts-gl, which can display 3D charts and the earth, which is basically not available in other open source libraries. Although 2D images can also achieve 3D-like effects, only Echarts-gl is a true 3D based on WebGL, which can configure lighting, materials, shadows, and exclusive post-production special effects.
For more configuration and use of Echarts, you can move to the Echarts document: https://echarts.apache.org/zh/option.html#title

In addition to the resources officially provided by Echarts, Echarts's resource community Gallery is the real main force. There are very rich chart resources in this community, which are uploaded by users personally, and can be filtered and inquired. These charts can basically satisfy most application scenarios.

3、AntV

AntV is a data visualization project and a team, namely the data visualization team of Ant Group. AntV currently covers many fields such as statistical charts, mobile charts, graph visualization, geographic visualization, 2D drawing engine and intelligent visualization, mainly including G2 stack, F2 stack, G6 stack, X6 stack, L7 stack, AVA and a complete set The use of diagrams and design specifications.

Among them, G2 is mainly dedicated to a general chart library, using a more simplified syntax to construct a variety of interactive statistical charts. F2 is a visualization solution that focuses on mobile and out-of-the-box. It perfectly supports the H5 environment and is compatible with multiple environments (node, applet, weex, etc.). L7 is an open source large-scale geospatial data visual analysis development framework based on WebGL. Regarding the use of various diagrams of AntV, you can go to the official website to check for : 161c2b6d029234 https://antv.vision/zh

4、Wyn Enterprise

Wyn Enterprise is a powerful embedded data visualization tool that provides flexible data interaction and exploration and analysis capabilities, as well as OEM white label integration, to fully meet the data analysis needs of industry application software. It has functions such as multi-source data integration, report design, data visualization, self-service BI analysis, and data reporting. It helps users tap the potential value of data and provides data support for managers to make decisions.

https://www.grapecity.com.cn/solutions/wyn

5、D3

The D3.js library is an open source project, the author is an engineer from the New York Times. To be precise, D3.js is actually a JavaScript function library, not a chart library, and is more suitable for data visualization. D3 has a wealth of mathematical functions to handle data conversion and physical calculations, and can map data to HTML structures or SVG documents. This feature allows us to manipulate the DOM to draw charts more conveniently. It can be said to be "the jQuery of visualization", because D3's api is very similar to jQuery. You can see the following example:

d3.select('#chart') .selectAll("div") .data([4, 16, 23, 42]) .enter() .append("div") .style("height", (d)=> d + "px") 

If you just want to draw common charts, there is no need to use D3 directly. You can check out those D3-based chart libraries, such as Ploty.js, nivo, etc. the GitHub project address of d3 here: 161c2b6d0292c4 https://github.com/d3/d3

6、Vega

There is no need to write front-end code to use Vega. It can complete all chart-related development with only JSON, including data loading, conversion, and interaction. Since Vega is committed to drawing charts through some JSON configuration items, many lines of configuration are required when generating some basic and simple charts. For example, the simplest histogram requires 95 lines of configuration, so it provides a more concise syntax Vega-Lite, which is used to quickly generate visualizations to support analysis. The following is an example of a histogram:

Here is the official website of vega-lite for everyone to learn: https://vega.github.io/vega-lite/

3. Conclusion

Here I have introduced you to several popular visualization technologies or galleries. The above introductions are all free to use. Of course, there are also some commercial chart libraries on the market, such as HighCharts, AnyChart, Wyn Enterprise, FusionCharts, etc., if you are interested, you can Understand for yourself.