A picture is worth a thousand words

Visualization is one of the hottest areas of the (generic) front end right now. Data visualization technology is heavily used in large screen display of data information for ordinary users, data statistical overview or scheduling services in enterprise services, and even smart construction projects (smart brain, smart city) vigorously promoted by the country.

The following pictures are from the song “How to merge Data Visualization and the physical World” shared by front-end visualization rookie Experience Technology. We can see that visualization combined with hardware is also very useful.

What is visualization

Of course, THERE was a time when I thought visualization meant drawing charts, and learning visualization meant learning echarts, D3, etc., and then using those tools to draw pie, line, bar charts, etc. In most cases, however, these libraries are available for visual project development. But these libraries are a universal solution. Under certain conditions, such as rendering a large number of elements simultaneously in a short time, general solutions are not available, so we need to choose a more low-level solution (such as using WebGL to control GPU rendering).

The source of visualization is data. We need to take useful data, and then transform and integrate the data to generate the structure that the user needs, and finally present it graphically. Visualization must be highly relevant to the current business. According to the current business and product requirements, visualization engineers need to select the technology stack suitable for the current business and generate images useful to users.

The purpose of visualization is to improve the user’s cognitive ability to data, liberate the user’s brain, and thus make data more valuable.

Use CSS for data visualization

In general, SVG is easy to interact with and Canvas2D performs better. Basically, SVG or Canvas will be used depending on the current interaction and computation volume. If you have a lot of pixel computation, you even need deep GPU programming through WebGL (self-control CPU parallel computation).

But what if we did the front page of the website? What if the current chart is simple and doesn’t need to change? We also need to introduce libraries like ECharts, right? Or write a chart by hand.

In fact, as browsers have evolved, CSS has become so powerful that regular diagrams can be implemented. Such as bar charts and pie charts. Histogram can be generated directly using Grid Layout plus Linear gradient.

<style>
.bargraph {
  margin: 0 auto;   
  display: grid;
  width: 250px;
  height: 200px;
  padding: 10px;
  transform: scaleY(3);
  grid-template-columns: repeat(5.20%);
}

.bargraph div {
  margin: 0 5px;
}

.bargraph div:nth-child(1) {
  /** bottom, 75% transparent, 25% red, **/  
  background: linear-gradient(to bottom, transparent 75%, red 0);
}

.bargraph div:nth-child(2) {
  background: linear-gradient(transparent 74%, yellow 0);
}

.bargraph div:nth-child(3) {
  background: linear-gradient(transparent 60%, blue 0);
}

.bargraph div:nth-child(4) {
  background: linear-gradient(transparent 55%, green 0);
}

.bargraph div:nth-child(5) {
  /** can also be a variety of color gradient **/    
  background: linear-gradient(transparent 32%.#37c 0.#37c 63%.#3c7 0);
}
</style>

<body>
    <div class="bargraph">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>  
</body>
Copy the code

We can also use the conic-gradient for pie charts and div + Transform for line charts.

Of course, the advantage of charting with CSS is that you don’t need to learn additional libraries and apis. But the downsides are also obvious:

  • The correspondence is complex, so it is not intuitive to modify the current code to quickly replace the current icon style (conversion often requires JavaScript).

  • As a member of the DOM tree, performance is often difficult to control (as a stable home page chart, it is not a big problem)

Graph library Chart. CSS

Until I came across charts.css, I thought charting was JavaScript computing. But I was also very happy when I saw the library. Charts.css is a CSS framework. It uses CSS3 to set HTML elements to chart style, and one of the design principles of the library is that it doesn’t use JavaScript code (if it can’t be done with CSS, it won’t be part of the framework). Of course, the user can decide whether to use JavaScript or not.

Take the simplest form for example:

<table border="1">
    <caption> Front End Developer Salary </caption>
    <tbody>
    <tr>
        <td> $40K </td>
    </tr>
    <tr>
        <td> $60K </td>
    </tr>
    <tr>
        <td> $75K </td>
    </tr>
    <tr>
        <td> $90K </td>
    </tr>
    <tr>
        <td> $100K </td>
    </tr>
    </tbody>
</table>
Copy the code

As shown in the figure:

After using chart.css:

<table style="width: 400px; height: 400px" class="charts-css column">
  <caption> Front End Developer Salary </caption>
  <tbody>
    <tr>
      <td style="--size: calc( 40 / 100 )"> $40K </td>
    </tr>
    <tr>
      <td style="--size: calc( 60 / 100 )"> $60K </td>
    </tr>
    <tr>
      <td style="--size: calc( 75 / 100 )"> $75K </td>
    </tr>
    <tr>
      <td style="--size: calc( 90 / 100 )"> $90K </td>
    </tr>
    <tr>
      <td style="--size: calc( 100 / 100 )"> $100K </td>
    </tr>
  </tbody>
</table>   
Copy the code

Very good!

One of the most important changes we can see is the use of CSS variables. CSS is not a general-purpose programming language like JavaScript, but CSS variables are a bridge that allows it to communicate with other elements (HTML, JavaScript), Secondly, use the computational property calc in CSS. Also check out my previous blog about CSS variables and CSS minesweeper.

/** The CSS has a lot of this calculation code **/ 
height: calc(100% * var(--end, var(--size, 1)));
Copy the code

Of course, the library can currently describe horizontal bar, column, area, and line graphs. Pie charts, radar charts etc are still under development. Of course, the library can also implement mixed diagrams:

Chart.css also allows users to use CSS3 to add various effects to the current chart, as detailed in Customizations.

To encourage the

If you think this article is good, I hope you can give me some encouragement and help me star under my Github blog.

Blog address

The resources

How to Merge Data Visualization and the Physical World

Follow the moon shadow for visualization

Charts.css