get in touch
March 28, 2018 by WebbyLab Team

Data Visualization Best Practices, Tools, and Examples

Data Visualization Best Practices, Tools, and Examples
technology

Infographics work 30 times better than regular text. Content with relevant images gets 94% more views. 56% of marketers use visuals in almost every piece of content to draw attention. 

Developers get more and more requests connected with data visualization dashboards in CRM, ERP, and other business software. It’s rare that a corporate product doesn’t have these practices today. 

To help you find the right tools when the time comes, we’re sharing some data visualization best practices and libraries we’ve stumbled across. Here’s what we’ll be reviewing:

  • Which types of data charts there are
  • What libraries to use to build them
  • How much it costs

Let’s take a look. 

Data Visualization Best Practices: Common Chart Types

First, a bit of theory. Let us explain to you five (it’s seven, really) basic data charts and when to use them. 

Line Charts

Line charts or graphs show information as a series of points (called ‘markers’) connected by straight lines. These charts show how the data changes at equal intervals of time.

In most cases, to use a line chart you need to gather data into a table with 2+ columns. The first column indicates positions for points on the horizontal axis, and the following columns indicate the vertical position for points of a single line. 

When to use: When visualizing data to emphasize changes in revenues, target numbers, stock volatility, etc. 

Bar Charts

A bar chart is a chart with rectangular bars whose lengths are proportional to the values they represent. One axis is for explaining the categories being compared, while the other ones show the value.

35Bar charts can either be vertical or horizontal; only the x-axis and y-axis are switched.

Here’s an example of a horizontal bar chart:

You can use any type, but horizontal bar charts have more advantages, especially for mobile apps. Horizontal charts are easier to display, and they work better in the narrow layout smartphones have.

When to use: Compare different values across time, show trends, or make data visualization dashboard(s) for mobile devices.

Pie, Donut, and Polar Charts

There are many variations of pie charts, the most popular ones being donut and polar charts.

A pie chart got its name because of its resemblance to a pie being sliced in chunks. A basic pie chart is a circle divided into a few sections that show numerical proportion. In such charts, the arc length of each sector equals the quantity it represents. 

Donut (or doughnut) charts work the same way pie charts do, but they have a blank center and can support multiple statistics at once. The blank center can be used to show additional, related information.

Polar charts, the next type, are also similar to pie charts. But their sectors have equal angles and differ in how far each sector extends from the center of the circle.

When to use: To plot cyclic phenomena (e.g., COVID-19 cases by month).

Radar Charts

This is probably the best way to visualize data in video games and thus a very popular chart among game designers. Radar charts are used to compare different characteristics — strength, speed, stamina, and so on.

They are used to help players see which variables have similar values and which valuables are scoring high or low. They are great for displaying performance.

When to use: Show different parameters of a character/device (e.g., in game design).

Funnel Charts

If you have ever worked in sales or marketing, you have experience with these visualization practices.

Funnel charts show streamlined data — each slice represents a process. The last funnel stands for the final result of the procedure. 

Ideally, the funnel shows a process that starts at 100% and ends with a lower percentage.

When to use: Help to visualize a linear process that has a few connected stages (e.g., how a visitor turns into a customer). 

5 Popular Data Visualization Tools

Next, we’ll list five popular data visualization libraries for personal and commercial use. Most are written in JS and come with beautiful UI design and smooth animations. Some of them are free and open-source; others require buying a license.

#1. Highcharts

These are one of the most popular charting libraries written in JS. Highcharts works with any back end database or server stack accepting data in any form, including CSV and JSON. 

They support all popular chart types, helping visualize data in lines, bars, pies, etc.— including 3D charts. 

There are wrappers for quite a few programming languages like Python, Node, or PHP; frameworks like Angular, React or Vue; and native platforms like iOS and Android.

Export formats: PNG, JPG, PDF or SVG

Here’s an example of what Highcharts can do:

Good data visualization examples:

  1. Demo
  2. Stock demos
  3. Maps
  4. Gantt charts

Highcharts is a paid library: the developer license starts at $535 for internal and external projects hosted by you. 

#2. Echarts 

This is an open-source library that supports all popular chart types, including the 3D ones. Encharts is written in JavaScript and based on zrender, a new lightweight canvas library.

Here’s an example of a basic line chart made with Echarts:

Best data visualization examples:

  1. Bar chart with background
  2. Donut chart
  3. Customized pie chart
  4. Scatter charts
  5. Funnel charts

Echarts is free to use and does not require any additional payments. 

#3. Chart.js

Chart.js isnother open-source JS library for creating animated, interactive graphs for designers and programmers. It supports line charts, bar charts, pies, donuts, and other popular visualization practices. 

Other examples:

#4. amCharts 4

This is a  charting library that natively integrates with TypeScript, Angular, React, Vue, and plain JavaScript apps for best data visualization. amCharts 4 offers a huge selection of chart types, including geographical maps and timelines. It works with 3D-based charts and slices charts (pie, donut, funnel, pyramid, etc).

What map charts look like: 

amChart 4 is an open-source library, free for personal use. But if you want to use the library for commercial products (and don’t want their logo to show up), it’s better to purchase a license — $180 for one public or private website. 


Demos: 

#5. ggplot2

If you’re not into fancy UI designs and looking for something more suitable for Data Science, try ggplot2. It’s one of the open-source data visualization tools with a chart-drawing package that is highly configurable and highly extensible. Note: It requires knowledge of R programming.

You can use ggplot2 together with the dplyr package (this provides a consistent set of verbs for data manipulation) to make informative line plots, bar plots, histograms, and so on. With ggplot2, you can also make reference lines, bar charts, heatmaps, and many others. It works with 2D charts as well.

An example of how ggplot2-based charts appear:

Simple Data Visualization Design: Chart Constructors

Now, if you don’t want to come up with a custom solution, there are some ready-made dashboard constructors you can use for good data visualization without much effort. Of course, such tools come with a price tag. 

Here are a couple of examples: 

Grafana

Grafana is an open-source project that supports main data visualization principles. It allows developers to visualize metrics and logs, as well as combine data from many places and put it into a single dashboard. 

Grafana comes with built-in support for popular cloud vendors like Microsoft Azure, Amazon Cloudwatch, and Google Stackdriver, as well as SQL databases like Postgres and MySQL. 

Plus, there’s an alerting feature you can set for the most important metrics. In case anything happens, you’ll get notified in Slack, PagerDuty, VictorOps, or OpsGenie.

You can check the visual samples here. There’s a free version for three users; paid plans start at $49/mo + usage. 

Mixpanel

This is a platform that can help you with data visualization dashboard(s), funnels, top user flows, creating cohorts, and more without SQL skills. 

At its core, Mixpanel maintains a custom datastore that queries your data. In addition to that datastore is a user-friendly web application which lets you visualize the data you have sent to them.

Free for 100K monthly tracked users, paid plans start at $25/month. 

Conclusion

We hope you’ve found the right data visualization tools in this guide. There are lots of such libraries, most with great UI, so at times it can be difficult to choose between them. Everything depends on your skills, business needs, and budget. 

Again, if you don’t have time or don’t want to mess with SQL, you can use templates like Grafana or Mixpanel. It’s perfectly OK to use them, as long as they work for you. 

WebbyLab Team
WebbyLab Team
Published: March 28, 2018
You may also like