Two types of

Data visualization falls into two types:

  1. Visualization libraries, such as D3, Echarts, G2, etc., are available for developers to develop data visualization projects based on these libraries;
  2. Visualization platforms, such as Datatalk of Tencent Pony BI and Quick BI of Alibaba, are directly used to analyze data for analysts and general users without development

How to choose a visualization platform

Why make a similar platform?

  • Tencent – Ma BI
  • Ali – Quick BI

When our team was planning to do a data visualization project, we investigated the development of a data visualization project product on the market, and learned the data source security problems of Tencent’s Maomao BI product (soon to be discontinued) and Ali Quick BI, as well as some functional requirements that Maomao BI did not have. That’s why we decided to do a data visualization kanban project ourselves

Of course, we can refer to the solutions of these two products when we encounter problems in the products. There is a saying that learn from each other

  • For those not open source, we can refer to the product design and interactive experience of the product
  • For open source we can refer to the design patterns and specifications of the code

Open source project: github.com/dongsuo/vue… ; Experience website: v11nlab.com/

In addition, open source projects we can also refer to its scheme selection, such as the above project to choose Echarts to do charts, choose VUE-Grid-Layout to do drag

  1. The selection survey of dragging scheme is as follows:
Drag and drop solution Vue native drag and drop vue-grid-layout
layout High layout flexibility Suck-and-stick layout
Development costs Costs are high and many things need to be developed from scratch Low cost, basic functions already available
advantages The layout can be customized The conflict is resolved by design
disadvantages It is difficult to deal with stack conflict and the user experience is poor Component cannot customize location
choose Square root
  1. The selection research on the sidebar function setting scheme is as follows:
plan At the same level Parameter transfer between parent and child components
advantages Updated in real time Multiple DOM operations are merged when reactivation is turned off
disadvantages Multiple operations can cause congestion Unable to update in real time
choose √ (According to product requirements)
  1. See below for chart making scheme selection

How do I choose a visual library

General reference elements (Balm) :

  1. Does Github have many stars

High overall score

  1. Order of magnitude of lines of code

If the number of stars is similar, run the CLOC tool to see the number of lines of code. If the number of lines of code is one level different, the difference in functionality becomes apparent

But it depends on the requirements of each project: if you want something lightweight and not very functional, you can choose something with less code; But most of the time when you’re working on a project, you want more features

  1. Whether the submission frequency is on an upward trend

Look at GitHub’s Ficolin-3 page to see if that project is active, such as the one that shows long-term submissions like this one, showing steady development:

A good project

The following type of commit is unstable and, less and less, is a drop pit:

Abandoned pit project

Several good data visualization libraries

From what Angle to carry on the analysis?

Visual library D3 Echarts G2 Chart.js
Lot number of Star 98.1 k. 47.8 k. 10.9 k. 54.7 k.
Constructors trend falling stable stable stable
richness Species is less Most species Sort is more Species is less
Configuration items Multiple configuration items are flexible A large number of configuration items are not flexible Minimum configuration items
It costs The lower The lower higher The lower
Our team selection Square root

The following content reproduced from zhuanlan.zhihu.com/p/149398216

D3 – jQuery for Visualization

The most famous front-end visualization project is D3, which can not only make a variety of visualization effects, but also serve as the basis for many other chart libraries. As mentioned above, the result of chart search is 7.6W, while the result of D3 search is 5.6W, which shows a wide influence.

D3 first appeared in a paper published by Mike Bostock during his PhD. Its purpose is not to be a chart library, but to be a lower-level infrastructure to simplify the development of data visualization. It references jQuery in TERMS of API design. D3.selectall (“p”).attr(“class”, “graf”) and change d3.selectAll to $.

In addition to chain like jQuery calls, D3 and distinctive features is very fine, the function to do the function level, from data parsing and transformation to the layout algorithm are provided, which makes the developers can be flexibly to achieve various visual display, this makes D3 visualization algorithm is very good for learning, And it’s easy to incorporate these algorithms into your own projects.

D3’s chained calls can make code very small, instead of the for loop, such as the following:

d3.select("body")
  .selectAll("p")
  .data([4.8.15.16.23.42])
  .enter()
  .append("p")
  .text(function (d) {
    return "I’m number " + d + "!";
  });
Copy the code

If you use the common writing method, you need to traverse the data with the for loop, and then operate the P tags found according to the sequence, while D3 only needs one line. However, it has both advantages and disadvantages. For those who have not learned D3, they will not understand it completely. My personal experience is that I wrote d3-style code and after two weeks I couldn’t read it. I might as well have written a for loop.

There is no need to use D3 directly if you just want to draw common charts. Take a look at d3-based chart libraries such as these:

  • Nvd3 has been around since 2012, but its most recent update was in June 2018. Despite having been around for six years, nvD3 was dropped, for unclear reasons, and several core developers are now inactive on GitHub, but the story isn’t over yet and will be covered in the next post.
  • C3 was first introduced in 2013 and is often compared to NVD3 since it was introduced around the same time. It is not much different now than it was many years ago.
  • Vx /Recharts/ React-VIS/NIvo /Victory are all charts libraries specially used for react project. Personally, I do not like this idea. On the one hand, JSX is more complicated to write than JSON, and on the other hand, the actual benefits of this writing method are not great. It also makes it difficult to render using canvas.
  • Dc.js is mainly used to do multidimensional analysis, featuring the support for fast filtering of different dimensions in the front end, but this scheme has limited application scenarios.
  • Blist.js is an open source version of C3.js, which is a fork of Naver’s c3. js. Because they used c3. js internally, they found a lot of problems with it. For example, they did not support D3 V4.
  • Britecharts provides a d3-like chain-call interface, with frequent releases but few improvements with each release, and few configuration items currently.
  • Ploty.js has been around since 2012 and has been updated all the time. It’s the best in terms of functionality and project activity, with more than 9W lines of code, far more than any of the previous ones. Behind it is a company that in addition to Ploty.js has a Dash app for analysts, which we’ll cover in our next article.

Ploty. js > nivo > vx, there is no need to see D3, although very popular, but in the field of professional graphics can be taken out of the hand in fact only ploty.js, and ploty.js is not only D3, It also relies on webGL-based libraries such as GL-Plot2D and RegL. Because D3’s interface is DOM based, it is ok to operate SVG, but it cannot be used to operate Canvas and WebGL, which makes D3 unable to be used for large data volume and pixel-level effects.

In general, D3 is a successful visualization infrastructure, and its source code is worth learning, but it is not recommended to use it directly for chart development. On the one hand, the code written based on it has a high learning barrier, and on the other hand, it is not a chart library. If you want to use D3, it is better to use other chart libraries developed based on D3, such as Ploty.js.

ECharts – Highcharts for the Poor

More than a decade ago, I only knew Highcharts and Adobe Flex as charts libraries that could be used by browsers. Although Highcharts was a charging product, it provided downloads, so payment was completely voluntary. At that time, no one in China had the habit of paying for software, and many companies secretly used it internally.

Baidu’s earliest internal chart components used Flash technology (probably Flex, I don’t remember). Later, with the rise of HTML5, Canvas from Safari gradually gained wide support. In addition, Apple explicitly does not support Flash in iOS. The future of Flash technology began to dim.

Therefore, the business front end team of Baidu tried to develop the chart library ECharts based on Canvas (at the same time, another commercial company CanvasJS used Canvas technology). Compared with SVG/VML, Canvas is troublesome to debug, but has better performance under a large number of data points. Early developers Kener and Pissang were very helpful, and it didn’t take long to add a large number of commonly used charts. With the advantage of Chinese documentation, ECharts quickly became popular in China, and it is still the most popular chart library in China today.

After Qi Lu joined Baidu in 2017, he promoted open source. ECharts also entered the Apache incubator in 2018 and began to attract attention abroad. For example, Gitlab wrote an article explaining why they changed from D3 to ECharts.

ECharts has a large number of configuration items, estimated to be over 600. Most of the charts in our Sugar platform are based on ECharts, and there are still many advanced configuration items to be completed. If you want to make a beautiful chart, it is suggested to visit the Gallery more, you can find many beautiful effects, just look at the official document is unexpected, such as the following:

Examples shared by users during the pandemic

The API of Echarts and Highcharts is very similar, many companies actually use It as free Highcharts, but Echarts actually has many unique features, among which the highlight is Echarts-GL, which can realize 3d charts and earth display. Other open source libraries do not have this, while other commercial graphics are based on SVG and can only simulate 3D effects, only Echarts-GL is based on WebGL to make 3d, can configure lighting, materials, shadows, etc., and has exclusive post effects.

Echarts-gl owes a lot to Pissang, who wrote his own WebGL framework ClayGL (formerly qtek) when I first heard of pissang. As a WebGL guy I couldn’t figure out why Threejs would have to copy one. It turned out that the framework was not simple.

After learning 3D graphics, I learned that there are two common rendering architectures, one is forward rendering and the other is delayed rendering. Generally speaking, forward rendering is easier to implement, but it cannot support a large number of light sources, while delayed rendering is more expensive to implement, but it supports a large number of light sources and is suitable for post effects. So major game engines, including Unity and Unreal Engine 4, mostly use delayed rendering and only switch to forward rendering on low-end devices.

However, if you check GitHub, clayGL is the only WebGL that supports delayed rendering, including three.js (tried and abandoned), Babysurb.js, Playcanvas, and various WebGL engines you haven’t heard of. So they all limit the number of light sources to, say, four at most.

In addition to the unique feature of delayed rendering, ClayGL has built-in effects like Bloom, SSAO, SSR, animation support, GLTF, and more, making it one of the few fully functional WebGL frameworks.

It is precisely because of its deep understanding of 3D graphics that Echarts-GL can produce effects far superior to other graphics libraries. However, this huge threshold is both advantage and disadvantage. The biggest problem of Echarts-GL is that there are too few front-end engineers who know WebGL, and the use of self-developed rendering engine leads to a higher threshold. This project has been submitted by only Pissang for a long time. Recently, I added a small special effect to the earth and it became the second contribution list.

As an open source product within the company, Echarts is at the level of a commercial product in terms of functionality and documentation, with a theme editor and numerous examples of community contributions, and the Echarts team has been making submissions for the past seven years, which is not easy, and is currently planning a new version 5.0. There will be significant improvements in animation, data processing and performance.

G2/F2 – Follower Of The Grammar Of Graphics

G2 was developed by the front end team of Alipay. Although Echarts was already mature at that time, Alipay chose to make one by itself, namely AchArts, the predecessor of G2, whose API is basically similar to Echarts. After reading The Grammar Of Graphics, The author changed direction and started developing G2 based on The ideas Of The book. G2 is named after The two Gs in The title Of The book.

There are a lot of visual libraries influenced by this book. Vega-lite mentioned above has borrowed a lot from the author’s paper. Like G2, chart-Parts also refers to that book. The author is also working on another more well-known project, React-DND, so it will probably be abandoned in the future.

The author Of The Grammar Of Graphics draws on object-oriented ideas by splitting diagrams into components such as data sources, data transformations, coordinate systems, Graphics, etc., and assembling them to achieve a variety Of presentation effects is technically not new. But the book looks very advanced in its mathematical approach to composition and analysis.

Chart.interval ().position(‘genre*sold’); The * is not a multiplication, but an operator defined by the author, which means a merge. However, because JavaScript does not support operator overloading, it can only be used as a string, so the type information is lost, and it is easy to misspell.

G2 is positioned closer to Vega than a chart library like Echarts, meaning it’s one level below the straight-up chart library, making it more expensive for anyone who wants to use it like Echarts to get started, so G2 later offered a simplified G2Plot that focuses on plotting common charts.

This project I haven’t actually used, see the documentation and examples do very attentively, and achieved the level of commercial projects, can satisfy most requirements, but look from submission history some unstable, F2 stalled for several months in 2019, the G2 submit the quantity also significantly reduced, recently resumed six months, may be in the internal refactoring.

It is worth mentioning that AntV team also made a lot of directions, such as diagram G6/X6, map L7, automatic image selection AVA, etc., but most of these projects only had one person, the team might be a little scattered.

Chart.js – Top promotion case

I didn’t know much about chart.js library before. When I first discovered it a few years ago, its Star number was very high. Now its Star number is as high as 49.3K, and its weekly downloads on NPM have reached one million.

Since how popular is it, how is it technically? The earliest submission time of this project was in 2013, and the submission was not interrupted much in the past 7 years. However, the code volume of the whole project was only more than 1W lines, with few types of charts and configurable items. Overall, it was far worse than Echarts/Highcharts. Perhaps reflects the majority of people to chart requirements are not high, can display several scene chart, a little interaction and animation is enough.

In my opinion, the only thing worth paying attention to is the publicity and promotion ability. How did it become so popular? Is it just a good name?