Data product is a Web project first and foremost. React or Vue is not discussed here. This article wants to talk about how to choose a tool library and what libraries are available for products with high interaction, multidimensional data analysis, and multi-graph presentation.
Chart library selection
The main web chart libraries are: Echarts; Highcharts. D3js; Antv (G2, G6, F2) based on D3 packaged React chart library rechart; Viser, the React charting library based on G2 encapsulation; Bizcharts, and so on. There are also diagrams showing Cytoscapejs used; So how to choose? It’s a philosophical proposition, nothing is best, just be happy. After all, Echarts, which is said to be too customizable, can also draw the most freeform shader using the underlying ZRender. So, the next step is to analyze it from an engineering point of view.
1Choose according to the complexity of the diagrams involved in the project.
Simple traditional charts, best partner echarts, HighCharts (commercial charges), belong to enumeration type charts. Plot by configuration items, drawing charts that conform to their enumerated chart types, or stacking charts according to established rules. It is used for products that require less customization of chart design details using traditional charts. In short, the designer won’t compete with you on visual reducibility. Requirements: Designers should enumerate presentation charts from the demo library. If you’re overposted, I’m sorry if it’s painful for you as the front end.
If your designer is more individual, this is the time to consider using G2 drawing. Alleged individuation is designed, requirement is very tall actually. G2’s website describes itself as follows:
G2 is a set of graphics syntax based on visual coding, which is data-driven and highly easy to use and expandable. Users do not need to pay attention to all kinds of tedious implementation details, and can build a variety of interactive statistical charts with one statement.
So the choice of G2 to draw personalized chart design is to follow this graphical syntax. The following image is from g2 website (www.yuque.com/antv/g2-doc…
If you want super freedom of expression, a lot of personalized creative design, and even information visualization (if your page has many coordinate systems and complex scales, or no proper coordinate systems and scales at all). This is where the artifact D3JS comes in. Without hesitation, D3 can draw any reasonably designed chart. There is another word “rational design”, and what is rational design is to be able to find the relationship between data and graphics mapping. That is, the design of graphic position, color size, and so on can be calculated with clear rules. As can be seen from the SLOGAN of D3JS, d3JS defines itself not only as a chart, but also as xxxChart. It’s data-driven Documents. Literally, data-driven DOM. D3js provides mapping between data and DOM (graphics). So we can divide it into data sources – data mapping layer (D3) – drawing layer (SVG/DIV CSS/canvas). D3 also provides a simple DOM manipulation tool called D3-Selection.
2 Select a tool based on the data format
The biggest determinant of product form is data type. Data types include: classified data; Quantitative data; Time series data; Spatial data; Relational data; Classified data; Quantitative data; Most of them are traditional statistical reports. Timing data: it is the data with time as the main clue, and the reaction time changes. Here is a recommended visjs: visjs.org/timeline_ex… Can be more effective to help show time. Meanwhile, d3-time and time Intervals can provide convenient time calculation. Moment is also a good tool.
Relational data, that’s the point, line and edge data that you see. Includes tree structure data. This kind of data is rather special. Optional frameworks include: D3-Force, G6, VisJS, Cytoscapejs, Cola. js, Gephi, and more. These are based on force map simulation charge motion calculation layout, so the user needs to be familiar with force map collision algorithm, graph algorithm, trigonometric function, preferably familiar with the quadtree octree algorithm (for optimizing retrieval efficiency).
3. Use chart tool library in combination
As mentioned above: data source – data mapping layer – drawing layer (SVG/DIV CSS/canvas). Our drawing process can be divided into three layers. At the same time, the data source can also be divided into business model and control layer, drawing layer can be divided into graphic model and presentation layer. But using different tools, these layers can be combined in different layers. For example, with Echarts, the data mapping layer is controlled only through the configuration of options, and the subsequent drawing is left to Echarts. The benefits of layering can be clearly felt using D3 plots. Assuming the data is processed and d3 is used for layout and style transformation, the drawing layer can be handed over to a professional drawing library. For example, handwriting CSS! Just kidding ~ like createjs. Even using D3’s diagram layout algorithm, combined with G6 plotting capabilities. We can get the best out of each library as long as we clearly do our job. (Preferably one that can be used on demand, which is supported by most libraries).
Data processing selection
Immutable js. Lodash; The underscore. The original; D3. There doesn’t seem to be much to explain here. I won’t bore you.
The appendix
Antv: antv.alipay.com/zh-cn/index… Echarts:echarts.baidu.com hightcharts: www.highcharts.com/demo d3: d3js.org bizcharts: bizcharts.net/index visjs: Visjs.org/ sparkline (small chart) embedded in the text: omnipotent.net/jquery.spar… Cytoscape: js.cytoscape.org/ immutable: facebook. Making. IO/immutable – j…