subtleWorks Focusing on Web Data Visualization Solutions

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.

As a solo web developer, I often charge my clients by hour even though I am aware that a fixed-price quote can provide me with more flexibility and money. That’s because a fixed-price quote also brings more risks such as endless revisions and unpredicted technical problems.

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.

作为一名雇员，你的事业成功很大程度上取决于公司和团队的成就。而公司和团队的成功，依赖的是所有人。因此，建立一个强大的团队非常重要，其中招聘和入职培训是必不可少的两个关键环节，且都具有很大的leverage(单位时间里的影响力)。

成为一名自由职业者之后，我们首先需要适应的一个事实是角色转换。可能之前你只是公司里的一名软件工程师，而从现在开始，你需要做的工作不仅仅是编程，还包括设计、运营、写作、定价、找客户等等这些看似和软件开发无关的工作。

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.