Learn data visualization from CSS

Time:2021-8-30

A picture is worth a thousand words

The field of visualization is one of the hottest branches in the (Pan) front-end. Data visualization technology is heavily used in projects such as visual large screen display of data information for ordinary users, data statistics overview or dispatching services in enterprise services, and smart construction (smart brain, smart city) vigorously promoted by the state.

The following pictures are fromFront end visualizationRookie experience technology shares his song “how to integrate data visualization and physical world”. We can see that the combination of visualization and hardware also has a great use.

Learn data visualization from CSS

What is visualization

Of course, I once thought that visualization meant drawing various charts. Learning visualization meant learning from libraries such as ecarts and D3, and then using these tools to draw charts such as pie chart, broken line chart and histogram. However, in most cases, we can use these libraries to develop visualization projects. But these libraries are common solutions. Under certain conditions, such as rendering a large number of elements at the same time in a short time, the general solution cannot be used. At this time, we need to choose a more underlying solution (such as using webgl to control GPU to render images).

The source of visualization is data. We need to get useful data, then generate the structure required by users through transformation and integration of data, and finally show it in a graphical way. Visualization must be highly integrated with the current business. The visualization engineer needs to select the technology stack suitable for the current business and generate images useful to users according to the current business and product requirements.

The purpose of visualization is to improve users’ cognitive ability of data, liberate users’ brains, and make data more valuable.

Data visualization with CSS

Generally speaking, SVG is easy to interact and canvas 2D has better performance. Basically, SVG or canvas will be used according to the current interaction and calculation. If you encounter a large number of pixel computing, you even need to go deep into GPU Programming through webgl (self-control CPU parallel computing).

But what if we make a chart on the home page of the official website? What if the current chart is simple and doesn’t need to change? We also need to introduce a library like echarts? Or write a chart manually.

In fact, with the development of browsers, CSS has become more and more powerful, and can fully realize conventional charts. Such as histogram and pie chart. Using grid layout and linear gradient can directly generate histogram.

<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) {
  /**From top to bottom (default to bottom, can not be written), 75% fully 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) {
  /**You can also use multiple color gradients**/    
  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>

Learn data visualization from CSS

We can also use conical gradientsconic-gradientImplement pie chart and use Div+transformRealize line chart.

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

  • The correspondence is complex, and it is impossible to intuitively modify the current code to quickly replace the current icon style (JavaScript is often required for conversion)
  • As a member of the DOM tree, the performance is often difficult to control (as a stable home page chart, it won’t be too big a problem)

Chart library chart.css

Not encountered inCharts.cssPreviously, I thought charts were inseparable from JavaScript computing. But when I saw the library, I was also very happy.Charts.cssIs a CSS framework. It uses CSS3 to set HTML elements as chart styles, and one of the design principles of the library is that it will not use JavaScript code (if it cannot be done with CSS, it will not become part of the framework). Of course, users can decide whether to use JavaScript or not.

Take the simplest form as an 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>

As shown in the figure:

Learn data visualization from CSS

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>   

Learn data visualization from CSS

excellent!

We can see that the most important modification is the use of CSS variables. Although CSS is not a general programming language like JavaScript, CSS variables are a bridge, allowing it to communicate with other elements (HTML, JavaScript). Secondly, with the help of the calculation attribute Calc in CSS. You can also refer to my previous blogPlay with CSS variablesandCSS minesweeping game

/**There will be a lot of this calculation code in the chart CSS**/ 
height: calc(100% * var(--end, var(--size, 1)));

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

Learn data visualization from CSS

Charts.css also supports users to use CSS3 to add various effects to the current chart. See for detailscustomization

Encourage me

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

Blog address

reference material

How to integrate data visualization with the physical world

Visualization with lunar shadow

Charts.css