Four ways to realize visualization in browser

Understanding of visualization: visualization is the theory, method and technology of organizing data into a structure that is easy to be understood and recognized by people, and then presenting it in the form of graphics.

There are four ways to achieve visualization:


Some simple charts can be implemented with html and css.

Advantages: simplify development, no need to introduce additional relevant libraries, save resources and improve the speed of web page opening.

Disadvantages: 1. html and css are mainly created for web page layout. Although they can realize simple visual charts, the drawing method is not very simple. 2. It is difficult to see the corresponding relationship between data and graphics. Once the chart or data is changed, it needs to be opened and recalculated, which is very troublesome to maintain.

2. As a part of the browser rendering engine, HTMl and CSS not only complete the rendering of the page, but also parse HTMl, SVG and CSS, build DOM tree, RenderObject tree and RenderLayer tree, and then draw with HTMl. When the graphics change, the browser has to perform all the work again, so it costs a lot.


html+css drawing histogram

    .bargraph {
        display: grid;
        width: 150px;
        height: 100px;
        padding: 10px;
        transform: scaleY(3);
        grid-template-columns: repeat(5, 20%);
    .bargraph div {
        margin: 0 2px;
    .bargraph div:nth-child(1) {
        background: linear-gradient(to bottom, transparent 75%, #37c 0, #37c 85%, #3c7 0);
    .bargraph div:nth-child(2) {
        background: linear-gradient(to bottom, transparent 74%, #37c 0, #37c 89%, #3c7 0);
    .bargraph div:nth-child(3) {
        background: linear-gradient(to bottom, transparent 60%, #37c 0, #37c 83%, #3c7 0);
    .bargraph div:nth-child(4) {
        background: linear-gradient(to bottom, transparent 55%, #37c 0, #37c 75%, #3c7 0);
    .bargraph div:nth-child(5) {
        background: linear-gradient(to bottom, transparent 32%, #37c 0, #37c 63%, #3c7 0);

    <!-- Histogram -->
    <div class="bargraph">


Modern browsers support SVG. SVG is an image format based on XML syntax. It can be embedded in the browser like ordinary html tags.

Advantages: compared with html and css,svg is very flexible to use. It has its own syntax and supports irregular graphics.

Disadvantages: in the rendering engine, SVG, like HTML elements, needs to go through engine parsing, layout calculation and rendering tree generation before outputting graphic elements. Moreover, an SVG element represents a basic graphic. If the data is complex and the amount of graphics is large, it will also cost a lot to the browser.

Case: svg implementation histogram

<svg xmlns="" width="120px" height="240px" viewBox="0 0 60 100">
    <g transform="translate(0, 100) scale(1, -1)">
        <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"/>
        <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"/>


The canvas element creates a blank canvas on the browser, provides rendering context, sets various attributes, and then calls the drawing instruction to complete the output. Canvas has rich settings and drawing API s to support complex business scenarios.

Canvas can directly operate the drawing context without a series of operations such as HTML, CSS parsing, building rendering tree, layout and so on. Therefore, canvas is much faster than HTML/CSS and SVG when drawing alone.

Disadvantages: however, because an element of HTML and SVG corresponds to A basic graphic, we can easily operate them, such as registering click events on A column of the histogram. The same function is difficult to realize on Canvas, because for Canvas, the process of drawing the whole histogram is the execution process of A series of instructions, in which "A pillar" and "B pillar" are not distinguished, which makes it difficult to control the part of Canvas drawing alone in development.


WebGL rendering is more complex than the first three methods, because WebGL is implemented based on the browser of OpenGL ES specification. The API is relatively low-level, and it is not as simple and direct as the first three methods.

WebGL is a powerful drawing system provided by the browser. It is complex to use, but powerful. It can make full use of the ability of GPU parallel computing to quickly and accurately operate the pixels of the image and complete hundreds of thousands or millions of calculations at the same time. In addition, it also has built-in processing such as projection and depth detection of 3D objects, which makes it more suitable for rendering 3D scenes.

Tags: Front-end html css Visualization

Posted by tiagofrancis on Sun, 01 May 2022 20:50:09 +0300