Data Visualization Design & front-end Resources
Design and front-end resources for chart dashboard
Data driven interface and chart dashboard, are similar things that can allow folks to understand numbers easily and quickly. They are powerful tools for building complex data visualization interfaces, especially dashboards where users can get an overview of all the numbers they care about.
The following are examples of web applications that can help users get straightforward understanding about different types of numbers.
Basic chart types and use cases
A Line chart displays data as a series of points connected by lines. It’s a good way to show trend of data such as revenues, stock volatility, target numbers for road map and etc.
A bar chart could be used to show trend data, or comparison between different value across time or different categories.
Pie charts are usually used to show relational proportions between data and use arc length to present the percentage of total.
From Wikimedia Commons, the free media repositorycommons.wikimedia.org
Doughnut charts are basically the same, but with a white space in the middle that could be used to show important numbers.
Polar chart is similar to pie charts but with an extra dimension of range for each category.
A radar chart is used to analyze and compare different variables such as strength, intelligence, endurance and etc. You can often find in game design to show different parameters of a character.
Each of them could be customized for specific scenarios. Some of them are highly polished with beautiful UI and smooth animation. And each of them is well documented in a way that is easily understand and implemented.
The following 4 libraries are beginner friendly, well designed, and suitable for web applications.
Chartjs is a great chart framework for Angular based websites. It’s a responsive, well designed and reactive library. It supports 8 different chart types and it’s a free, open-source framework.
If you are using Angular material or other angular frameworks for your website, and want to build simple yet beautiful charts for dashboard. I think it’s a good choice.
AmCharts has a live editor that allows users to customize charts online and download code to local. It can support complex charts such as stock charts, and it also supports multiple interactions.
It can help users build a pixel-perfect interactive map as well. If you have needs for super complex or large data charts, amCharts is a good choice.
It’s not a free framework, you can purchase different license from $140 to $4,590.
I’ve never used vega before, so I found an article about Vega and D3 for people who are interested.
With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and…vega.github.io
D3 is a highly customizable JS library, and it allows great control in visual. It’s easy to learn and supports SVG. If you want to build special customized charts and have a great visual designer work with you, d3 is a good choice.
Compared with d3, processing has some limitations in customization but it’s easy to use and very stable.
We’re also happy to get help in the form of pull requests to add functionality to Pjs, or to simply fix small errors…processingjs.org
OpenGL is a large library that can be used across multiple platforms and API. It supports 2D and 3D graphics and can make awesome animation. It’s good for animation or game development, but a little “too fancy” for website applications. And it’s not easy for beginners.
NVIDIA demonstrated at GTC Europe a high-end virtual reality demo of a complete car model. You can explore every detail…www.opengl.org
Not like other JS frameworks, plot.ly is an online data visualization tool that allows users to do real time editing. Users can have immediate visual feedbacks for the data they enter in. It’s very friendly for beginners to build charts, but if you want a highly customizable chart, it’s not the best choice.
Plotly is the modern platform for agile business intelligence and data science.plot.ly
ggplot can generate simple charts in plain and unpretentious graphs, users can keep their data in Data Frames and import to ggplot and generate 2D charts.