The difference between visualization and Web development

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 first is the difference in the technology stack. Web development mainly uses HTML to describe structure, CSS to describe presentation, and JavaScript to describe behavior. Visualization, on the other hand, is less about HTML and CSS and more about dealing with Canvas, SVG, WebGL and other graphical apis of the browser. This is because Web development is about rendering blocky content, so HTML is a more appropriate technology. Visual development needs to present a wide variety of shapes and structures, so shape-rich SVG and lower-level Canvas2D and WebGL are more suitable technologies.

Secondly, Web development focuses on processing ordinary text and multimedia information and rendering ordinary, easy-to-read text and multi-media content, while visual development focuses on processing structured data and rendering various relatively complex charts and graphic elements. They have different information characteristics and requirements for graphic rendering, so there are also big differences in detail processing.

Visualization needs to deal with more visual details, especially when the data to be presented is more detailed, it may accurately present the size, distance, Angle, height, light, shadow and so on. The processing of these details requires us to have more precise control over graphic drawing. Therefore, we need to master the theoretical knowledge of graphics in depth, understand and familiar with professional graphics library and drawing tools. In short, the front end of Web development is mainly concerned with content and style, graphics rendering and drawing is done by the browser bottom layer, and the visual front end may have to go deep into the bottom rendering layer, to really control the drawing of graphics and the presentation of details.

There are also many useful libraries for visualization

ECharts, or similar ones such as  chartList,  chart.js, are all part of the chart library.

For example, a three-dimensional model of traffic routes and buildings in a city, or a three-dimensional architectural model of a park, etc., we may rely on a professional GIS map library. There are many mature GIS libraries in the community, such as  Mapbox,  Leaflet,  deck. gl,  CesiumJS

If the requirements are more complex, a more general render library like ThreesJS or SpriteJS is needed (in fact, the graph library or GIS map library itself is based on these render libraries). We can choose generic graphics libraries, such as SpriteJS for 2D rendering, ThreeJS, BabylonJS, SpriteJS3D extension for 3D rendering, etc

There is also  d3.js, which is a data-driven framework that deals with the organization of data and the presentation of data

Leave it to lower-level graphics systems (DOM, SVG, Canvas) or general-purpose graphics libraries (SpriteJS, ThreeJS).

Implement visual rendering in the browser

HTML+ CSS: traditional

2.SVG: Superior to Html

3.Canvas2D

4.WebGL: Best performance

1. How can HTML and CSS be visualized?

Using CSS to create a bar chart is actually very simple. The principle is to use Grid Layout and Linear gradient.

.piegraph {
  display: inline-block;
width: 250px;
height: 250px;
border-radius: 50%;
background-image: conic-gradient(#37c 30deg, #3c7 30deg, #3c7 65deg, orange 65deg,orange 110deg,#f73 110deg,#f73 200deg,#ccc 200deg)
}
  
Copy the code

2. Disadvantages of using HTML+CSS to achieve visualization

HTML and CSS were created primarily for the layout of web pages, and while they can be used to draw visual diagrams, they don’t do it in a neat way. This is because it is difficult to see how data and graphics relate to each other in THE CSS code, and many of the conversions need to be done by developers themselves. As a result, if the chart or data changes, we need to recalculate, which can be troublesome to maintain.

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.

In traditional Web development, all this extra parsing and building is required because it involves UI building and content organization. And visualization is different from traditional web pages, it does not need complex layout, more work is in the drawing and data calculation. So, for visualization, all this extra work is a waste of performance.

Canvas2D and WebGL are better suited for visualization than HTML and CSS. Their drawing apis can manipulate the drawing context directly, generally without involving other parts of the engine, and with much less overhead, the process of reparsing documents and building structures does not occur when redrawing.

SVG

Scalable Vector Graphics (SVG)

What’s more, the browser can also 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.

<svg xmlns="https://www.w3.org/2000/svg" width="120px" height="240px" viewBox="00 60 100"
<g transform="translate(0, 100) scale(1, -1)"> <g>
<rect x="1" y="0" width="10" height="25" fill="#37c"/>
<rect x="13" y="0" width="10" height="26" fill="#37c"/> 
<rect x="25" y="0" width="10" height="40" fill="#37c"/> 
<rect x="37" y="0" width="10" height="45" fill="#37c"/> 
<rect x="49" y="0" width="10" height="68" fill="#37c"/>
</g> 
<g>
<rect x="1" y="0" width="10" height="15" fill="#3c7"/> 
<rect x="13" y="0" width="10" height="11" fill="#3c7"/> 
<rect x="25" y="0" width="10" height="17" fill="#3c7"/>
<rect x="37" y="0" width="10" height="25" fill="#3c7"/> 
<rect x="49" y="0" width="10" height="37" fill="#3c7"/>
</g> 
</g>
</svg>
Copy the code

The data total and current correspond to the height of the RECt element under the two G elements in SVG respectively. That is, the attributes and values of elements can be directly correlated.

In the above SVG code, g stands for grouping and rect stands for drawing a rectangular element. In addition to RECT, SVG provides a wealth of graphic elements for drawing rectangles, arcs, ellipses, polygons, Bessel curves, and more.

The disadvantage of HTML is that the shape of HTML elements is generally rectangular, and although it is possible to draw all kinds of shapes with the help of CSS, even irregular shapes, it is still very cumbersome in general. SVG makes up for this by making it much easier to draw irregular shapes. Therefore, drawing in SVG is much more convenient than drawing in HTML and CSS.

However, SVG diagrams have drawbacks. In the rendering engine, SVG elements, like HTML elements, need to be parsed, layout computed, and rendered tree generated by the engine before output graphics. Also, an SVG element represents only one basic graph shape, and if the data presented is complex, there will be many SVG elements to generate the graph. As a result, a large number of SVG primitives not only take up a lot of memory, but also increase the overhead of the engine, layout calculations, and rendering tree generation, reducing performance and rendering speed. This makes SVG suitable only for simple visualizations with fewer elements.

Canves2D

Whether using HTML/CSS or SVG, they are declarative drawing systems, where we create various graphic elements (or CSS rules) from the data, and then use the browser rendering engine to parse them and render them. Canvas2D, however, is a browser-provided API that allows you to draw graphics directly on a flat “canvas” with code. Drawing with Canvas2D is more like traditional “writing code”, which simply calls drawing instructions and the engine draws graphics directly on the page. This is an instruction drawing system.

However, because each HTML and SVG element corresponds to a basic graph, we can easily manipulate them, such as registering click events on a column of a bar graph. However, it is difficult to achieve the same function on Canvas, because for Canvas, the process of drawing the entire bar chart is just the execution of A series of instructions, and there is no distinction between “pillar A” and “pillar B”, which makes it difficult for us to independently control the part of Canvas drawing. However, this does not mean that we cannot control the Canvas part. In fact, through mathematical calculations we can get local graphics by positioning

Canvas and SVG are not either-or, they can be used together. As a graphic format, SVG can also be drawn to Canvas as an image element. For example, we can generate some graphics in SVG and render them in Canvas. In this way, we can enjoy the convenience of SVG with the high performance of Canvas.

WebGL

WebGL rendering is a little more complex than the first three methods, because WebGL is implemented by the browser based on the OpenGL ES specification, and the API is relatively low-level, which is not as simple and straightforward to use as the first three methods.

Canvas2D is good enough for drawing graphics in general, but there are three cases where it’s necessary to directly manipulate a more powerful GPU for drawing.

1. The number of graphics to be drawn is very large, such as tens of thousands of geometric graphics to be drawn

2. Pixelated the details of larger images, such as light and shadow of objects, fluid effects and some complex pixel filters

3. Draw 3D objects. Since WebGL has built-in features such as projection and depth detection of 3D objects, rendering 3D objects with it does not require us to do our own low-level coordinate processing.

Comparison and application of various visualizations

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event