Start learning data visualization from CSS

A picture is worth a thousand words

The field of visualization is currently one of the hottest branches in the (pan) front-end. Whether it is the large-scale visual display of data information for ordinary users, or the statistical overview of data in enterprise services or scheduling services, and even the smart construction (smart brain, smart city) and other projects vigorously promoted by the state, data visualization technology is heavily used.

The following picture is from front-end visualization rookie experience experience technology and sharing of his song "How to Integrate Data Visualization and the Physical World". We can see: Visualization combined with hardware is also very useful.

What is visualization

Of course, I used to think that visualization is to draw all kinds of charts. To learn visualization is to learn libraries such as echarts, D3, and then use these tools to draw charts such as pie charts, line charts, and histograms. However, in most cases, we can use these libraries to develop visualization projects. But these libraries are general solutions. Under certain conditions, such as rendering a large number of elements at the same time in a short period of time, the general solution cannot be used. At this time, we need to choose a lower-level solution (such as using WebGL to control the GPU rendering image by itself).

The source of visualization is data. We need to get useful data, and then transform and integrate the data to generate the structure that the user needs, and finally show it in a graphical way. Visualization must be highly integrated with the current business. Visualization engineers need to select the appropriate technology stack for the current business and generate useful images for users based on the current business and product requirements.

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

Use css for data visualization

Generally speaking, SVG is easy to interact, and Canvas2D performs better. Basically, the use of SVG or Canvas will be determined based on the current interaction and the amount of calculation. If you encounter a large number of pixel calculations, you even need to go deep into GPU programming through WebGL (control CPU parallel computing by yourself).

But what if we make the chart on the homepage of the official website? What if the current chart is simple and does not need to be changed? We still need to introduce a library like ECharts? Or write a chart manually.

In fact, with the development of browsers, the expressive capabilities of CSS have become more powerful and can completely realize conventional charts. Such as bar chart and pie chart. Use Grid Layout plus Linear-gradient to 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) {
  /** 从上到下(to bottom 默认，可不写)，75% 全透明， 25% 红色，  **/  
  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) {
  /** 也可以多种颜色渐变  **/    
  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>

We can also use conic gradient conic-gradient achieve pie chart, and use div + transform achieve line chart.

Of course, the advantage of using CSS for charting is that there is no need to learn additional libraries and APIs. But the disadvantages are also obvious:

The corresponding relationship is complicated, and the current code cannot be modified intuitively 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 homepage chart, there will be no big problems)

Chart library Chart.css

Before I encountered Charts.css , I thought that the chart is inseparable from JavaScript calculation. But when I saw the library, I was also very happy. Charts.css is a CSS framework. It uses CSS3 to set HTML elements as chart styles, and one of the design principles of the library is to 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:

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>

Great!

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, giving it the ability to communicate with other elements (HTML, JavaScript), followed by With the help of the calculated property calc in CSS. At the same time, you can also refer to my previous blog play with CSS variables and CSS minesweeper game .

/** 图表 css 中会有很多这种计算代码 **/ 
height: calc(100% * var(--end, var(--size, 1)));

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

Charts.css also supports users to use CSS3 to add various effects to the current chart. For details, see customized .

Encourage

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

Blog address

Reference

"How to Integrate Data Visualization and the Physical World"

moon shadows visualization

Charts.css

Start learning data visualization from CSS

What is visualization

Use css for data visualization

Chart library Chart.css

Encourage

Reference

jump__jump

引用和评论

聊聊前端框架的未来 Signals

网页设计的垂直居中

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了