When I worked on a project for real-time monitoring in IoT, I did an interesting feature. Since it’s impossible for the maintenance staff to stare at the screen day and night, they hope to record the real-time data into the database and revisit historical files another day. My responsibility is to create such an interface to upload a number of files and then visualize them.

In a data visualization project, there may be similar elements with tiny differences, which can be seen as one element receiving different parameters. In the previous post A hack for improving SVG Path hover sensitivity, I gave an example of creating a wider transparent outline for each path.

The project management tool, Asana, has a premium feature called Timeline. Basically, it helps us to create visualization for the upcoming project. Task bars are connected with each other by arrows. Such user interface is pretty common among visualization tools. Usually, the arrow is drawn using Bezier curves.

The way we handle images in the front end is quite different from the way a few years ago when we had to create several versions of the same image and put our little icons on one single sprite image. Nowadays, we are more comfortable using vector graphics, replacing JPEG, GIF with SVG formats.

Lift not the painted veil which those who live Call Life: though unreal shapes be pictured there, And it but mimic all we would believe

When there are many ways to change an element’s position with JavaScript, which one do you prefer? I believe most of you only want to implement the one that brings the best formance. So do I.

This is the second post on the topic of Draw a star-shaped chart with Canvas. This time I will cover how to paint different colors on the chart. You can visit the online demo HERE.

Recently, I am working on a music platform project where users can upload and share tracks with others. In the dashboard page, we will visualize the data associated with uploaded tracks. Maybe our designer was bored with regular pie charts, she designed a star-shaped chart which I was so amazed at. Here is a screenshot of the design:

We often choose Highcharts as our library when working with charts and data visualization in the front end. Highcharts is a comprehensive library with which you can create various kinds of visual effects. A few days ago, the project manager put up a customized select effect: when you select a part of area on the chart, the background color changes. Since I did not find a quick example on Highcharts website, I decided to create it on my own. You can view the live demo HERE.