from 2016 In, he began to contact the direction of Visualization , I've always wanted to write an article to review the pits I've stepped on in recent years , In the following period of time, I will share with you some experience and insights in visualization from time to time , Send it out and share it with you 、 Discuss together 、 Learn together and make progress .

Preface

This article serves as a starting point , Then a series of pit records will be issued from time to time , Sort out the common problems of big data visualization screen , And in-depth optimization for unique scenes . This article first takes you familiar with what is visualization ？ What are the common visualization components ？ What are the commonly used visualization technology stacks ？ How is the visual engineering framework ？ Common visualization problems （ No answers , If you have any questions, you can comment below. I will answer them separately , If there are many problems, I will write a separate article to explain in detail ）.

One 、 What is visualization

I believe you are not unfamiliar with the word big data visualization , from 17 Century maps and graphics to 19 The invention of the pie chart at the beginning of the century , The concept of using charts to understand data has existed for centuries . Visualization has always been with our lives , It is everywhere in our life , Tianxiang 11shuang 、 The goddess Festival collects all kinds of index data , Like the weather in our life 、 traffic 、 Operation and maintenance ... All need Visualization . With the advance of the digital age , The advent of the information age , Our data volume is slowly becoming huge , We use simple data tables 、 The log has been unable to view important information , Must rely on Visualization ！

Two 、 What are the common components of visualization ？ What is the common technology stack ？

1. Broken line diagram

Echarts、Chart、Highcharts、D3

2. Histogram  

Echarts、Chart、Highcharts、D3

3. Scatter plot

Echarts、Chart、Highcharts、D3

4. Pictogram

Echarts、Chart、Highcharts、D3

5. Radar map

Echarts、Chart、Highcharts、D3

6. The pie chart

Echarts、Chart、Highcharts、D3

7. Water wave ball

Echarts、D3、Canvas

8. The dashboard

Echarts、Highcharts、D3、Canvas

9. Map

Echarts、[email protected]

12. Topology

[email protected]、Vis、D3、d3-graphviz

13. Heat map

Echarts、[email protected]、Heatmap

14. Rectangle

Echarts、Highcharts、Canvas

15. Sunrise chart

Echarts、Highcharts、Chart

16. Sanguitu

Echarts、Highcharts、Chart

 17. 3D The pie chart

Highcharts、Three、Webgl

18. 3D scene

Three、Webgl

 18. 3D GIS scene

Mapbox、Cesium

19、20、21...

There are many common visualization components, which are not listed here , If you are interested, you can have a look Echarts The official website is relatively complete , You can also have a look at D3.js This book records the implementation scheme of many charts .

3、 ... and 、 Front end visualization engineering architecture

Four 、 What are the common visualization problems ？

The following questions will be described in detail in a separate article , If you have any questions, you can also comment below , Discuss learning together

1. Visual large screen development how to adapt to multiple terminals ？
2. Visualize how the large screen can be displayed accurately on the splicing screen ？
3. How to solve large screen distortion 、 Small screen text blur problem ？
4. How to optimize the speed of large screen ？
5. How to make the large visual screen compatible with low version ？
6. As the size of the visualization screen increases , How to optimize the excessive consumption of resources ？
7. 3D GIS How to decide the offline scheme ？
8. 3D Scene collision detection 、 How does horizon analysis achieve ？
9. large BIM Model loading is too slow , What is the optimization scheme ？
10. 2d、3d Dynamic Caton , How to optimize the continuous increase and change of memory ？