The difference between Web front-end and visualization
Visualization is the theory, method and technology that organizes data into a structure that is easy to be understood and recognized, and then presents it graphically.
The Web front end mainly describes the structure in HTML. CSS is used to describe the presentation and JavaScript is used to describe the logical behavior.
Differences on the technology stack:
- Web front end: HTML, CSS, JavaScript
- Visualization: Canvas, SVG, WebGL, JavaScript
Differences in development content:
- Web front end: Focuses on processing plain text and multimedia information and rendering plain, easy-to-read text and multimedia content
- Visualization: Focuses on processing structured data and rendering various relatively complex charts and graphic elements.
Tools for visualizing domains
The field of visualization has evolved over the years with a wealth of tools that can be broadly divided into four categories:
- The graph library
- Geographical library
- Rendering library
- Data-driven framework
The graph library
Chart libraries should be the most common things in visualization, such as: bar charts, line charts, pie charts, etc. Common Chart libraries include: Echarts, Chartitist. Js, chart.js, HighCharts, etc.
To gallery
Professional GIS map library is designed to draw complex maps, which can mark traffic routes, building model locations, geographic block contours, etc. Common map libraries include Cesium. Js, deck.gl, Leaflet.js, Mapbox, ArcGIS, etc.
Rendering library
Render libraries provide the ability to draw more flexible graphics, graphics or physical models. In fact, many map libraries themselves are developed based on these libraries, such as Babylon. Js, SpriteJS, three.js, etc.
Data-driven framework
Data-driven frameworks are special libraries, such as d3.js, which focus more on the organization of data and leave data presentation to lower-level graphics systems (DOM, SVG, Canvas) or general-purpose graphics libraries (SpriteJS, ThreeJS).
Visual field graphics rendering method
There are four ways to draw graphics on the Web:
- HTML + CSS
- SVG
- Canvas2D
- WebGL
Here’s how each of these approaches works on the Web.
HTML + CSS
This is the most traditional and most commonly used graphing method in general web development, such as common bar charts, pie charts and line charts can be used in this way to achieve.
A histogram
The pie chart
The line chart
The advantages of HTML + CSS are: some simple visual charts, CSS to achieve very good, can simplify the development, and do not need to introduce additional libraries, can save resources, improve the speed of web page opening.
But its disadvantages are also obvious:
- Its drawing method is not simple, need to use the layout of the web page, and it is difficult to see the corresponding relationship between data and graphics in CSS, for maintenance is more troublesome.
- HTML and CSS are part of the browser rendering engine, and there is a lot of extra work to do in addition to drawing graphics to get the page rendered. For example, when a browser’s rendering engine works, it parses HTML, SVG, AND CSS, builds DOM trees, RenderObject trees, and RenderLayer trees, and then draws in HTML (or SVG). When the graph changes, we will most likely have to redo the entire work, which can be very costly in terms of performance. These complex layouts are unnecessary for visualization and cost performance.
SVG
Scalable Vector Graphics (SVG) is an image format based on XML syntax that can be loaded using the SRC attribute of the IMG element.
Browsers embed SVG tags and manipulate SVG elements using the DOM API as if they were normal HTML elements. Even CSS can work with embedded SVG elements.
The sample
SVG’s biggest advantage over HTML + CSS is that it makes drawing irregular shapes much easier.
However, SVG diagrams have a disadvantage similar to HTML + CSS, that is, parsing and rendering tree generation is expensive, so SVG rendering is slow when there are lots of pixels, which makes SVG suitable only for scenarios with fewer elements.
Canvas2D
Canvas2D is a browser-provided API that allows you to draw directly on a flat “canvas” with code. Using Canvas2D to draw is more like traditional “writing code”, which simply calls drawing instructions and the engine draws directly on the page. This is an instruction drawing system.
Canvas can draw graphics directly on the Canvas, unlike HTML + CSS and SVG, which require a complete process of webpage rendering, so its drawing performance is much higher than HTML + CSS and SVG.
However, Canvas also has a disadvantage that it is not so convenient to control the graphics elements on the Canvas. It needs to be positioned through some data calculation to obtain local graphics and interact with them.
In addition, SVG can be drawn to Canvas, so that you can enjoy both the convenience of SVG and the high performance of Canvas.
Example 1
Example 2
WebGL
WebGL (Web Graphic Library) is a 3D drawing protocol that allows JavaScript to be combined with OpenGL ES 2.0. By adding a JavaScript binding to OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas so that Web developers can use the GPU to display 3D scenes and models more smoothly in the browser. WebGL is supported and implemented by browsers.
WebGL drawing is much more complex than the first three, with a relatively low-level API that is not as straightforward to use.
Canvas2D is good enough for drawing graphics in general, but there are three situations where it is necessary to directly manipulate a more powerful GPU for drawing:
- The amount of graphics needed to be drawn was huge and could require constant dynamic updates, so Canvas2D’s performance had reached its limit. At this point, we need to use the GPU capability and draw directly with WebGL.
- The graphics to be drawn have high requirements for detail processing, such as the realization of light and shadow of objects, fluid effects and some complex pixel filters with pixels. The performance of Canvas2D has reached the bottleneck, so WebGL is needed to draw.
- Draw 3D objects.
The sample
conclusion
| The drawing mode | advantages | disadvantages | Applicable scenario |
|---|---|---|---|
| HTML + CSS | Simple, less dependence, fast loading | It is not intuitive and convenient for development and maintenance | A few simple shapes |
| SVG | Simple, intuitive and convenient | Performance bottlenecks are obvious when there are multiple elements | More graphics and more complex graphics |
| Canvas2D | High performance dynamic rendering | Manipulating graphic elements directly is not convenient | Graphics are complex and pixel processing elements are numerous |
| WebGL | 3D, mass drawing, full use of GPU, ultra-high performance | Cumbersome use, high threshold | Complex graphics, extra pixel processing, 3D |