5 Steps to Create an Effective Data Visualization With JavaScript

Did you know that 80% of our brain is dedicated to visual processing? This explains the common saying, “that a picture says more than a thousand words.” With that saying in mind, I would like to argue that a chart is capable of saying more than a thousand data points.

Turning data into charts and graphs, or using “data visualization” as it is known, is a critical component of modern-day communications, anywhere from the corporate boardroom, to your local sports blog.

While visualizing data enables us to process information faster and better compared to text and numbers alone, many people struggle to create truly effective and impactful data visualizations.

The good news is that the process of communicating more effectively via charts can be taught. If you want to learn, read on!

1. Purpose

The first step is to define the purpose of your visualization. Consider the following:

1. Are you looking to educate your audience?
2. Do you want to influence the audience to see a certain viewpoint?
3. Are you trying to encourage your audience to take action?

If your goal is to educate, just displaying the relevant data could be enough (i.e. the “let the numbers speak for themselves” approach).

However, if your approach is to influence, it is often more effective to compare different data sets.

If you want to drive your audience to action, not only do you need to visualize the data but, additionally, you must wrap the data into a story with clear advice and conclusions.
In short, it takes less effort to inform than to influence or push for action.

2. Audience

Whoever your audience is, your communication needs to be customized to their needs, interest, level of expertise, and analytical ability. Also take into account factors such as their culture, whether they are believers or skeptics, or if they have cognitive or physical disabilities that require special considerations.

The following examples will help you to understand how you can use your audience’s information:

a. Culture

Colors have cultural significance. For example, the Chinese use red to represent a dynamic or/and a positive event, such as growing sales in a region, while in most of the western world blue or green represents positive trends, such as sales revenue, etc. Chart layout is also something to consider: in the Middle East, the writing system is from right to left, so organizing chronological data accordingly could be a good idea.

b. The Level of Expertise

If you are dealing with an audience with a specific expertise, show detail whenever needed (or in doubt). Also provide zooming capabilities, both in terms of drill-down exploration as well as navigating across a timeline (check the code and corresponding chart below).

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
  // Create the chart
  Highcharts.stockChart('container', {
    chart: {
      zoomType: 'xy'
    },

    rangeSelector: {
      selected: 4
    },

    title: {
      text: 'AAPL Stock Price'
    },

    series: [{
      name: 'AAPL',
      data: data,
      tooltip: {
        valueDecimals: 2
      }
    }]
  });
});

View interactive chart here.

Make no mistake, accurate data are important for all audiences. Remember to tailor your visualization to the task and audience in question, or you will risk confusing instead of illuminating some audiences.

c. Believers vs skeptics

Skeptics will examine the evidence closely, so choose your data carefully and be ready to provide reliable sources to back them up. While you will provide the same data to an audience of believers, you may choose a visualization that highlights differences or specific trends that drive action, rather than working to inform and influence. In any case, providing the source of the data is a good idea.

d. Accessibility

Did you know that 10% of the population is color-blind? What if your customer struggles to read small characters? What if your target audience is partially or completely blind?

To give you an idea about the color blindness challenge, here is a chart (with its corresponding code) with colors highlighting how different people could potentially perceive it:

$(function() {

  Highcharts.chart('container', {

    chart: {
      type: 'heatmap',
      marginTop: 80,
      marginBottom: 40,
      plotBorderWidth: 1
    },


    title: {
      text: 'How people with color blindness see colors'
    },

    xAxis: {
      categories: ['Red', 'Blue', 'Yellow', 'Green']
    },

    yAxis: {
      categories: ['Normal vision', 'Deuteranomalia', 'Protanopia', 'Tritanopia'],
      title: null
    },

    colorAxis: {},

    legend: {
      enabled: false
    },

    tooltip: {
      formatter: function() {
        return 'How people with <b>' + this.series.yAxis.categories[this.point.y] + '</b> see <b>' + this.series.xAxis.categories[this.point.x] + '</b>';
      }
    },
    plotOptions: {
      series: {
        states: {
          hover: {
            enabled: false
          }
        }
      }
    },
    series: [{
      name: 'Sales per employee',
      borderWidth: 1,
      data: [{
        x: 0,
        y: 0,
        color: 'red'
      }, {
        x: 0,
        y: 1,
        color: '#b65b0a'
      }, {
        x: 0,
        y: 2,
        color: '#877a2c'
      }, {
        x: 0,
        y: 3,
        color: '#ea3535'
      }, {
        x: 1,
        y: 0,
        color: 'blue'
      }, {
        x: 1,
        y: 1,
        color: '#0e4287'
      }, {
        x: 1,
        y: 2,
        color: '#00428e'
      }, {
        x: 1,
        y: 3,
        color: '#004d52'
      }, {
        x: 2,
        y: 0,
        color: 'yellow'
      }, {
        x: 2,
        y: 1,
        color: '#fae684'
      }, {
        x: 2,
        y: 2,
        color: '#fde87c'
      }, {
        x: 2,
        y: 3,
        color: '#fddeea'
      }, {
        x: 3,
        y: 0,
        color: 'green'
      }, {
        x: 3,
        y: 1,
        color: '#596a5f'
      }, {
        x: 3,
        y: 2,
        color: '#6d6756'
      }, {
        x: 3,
        y: 3,
        color: '#346f79'
      }],
      dataLabels: {
        enabled: false,
      }
    }]

  });
});

View interactive chart here

There are several tools and techniques you may employ to spread your message to the visually impaired. First, determine the exact impairment, and follow by choosing the appropriate tool to augment your presentation to their needs. We will review a few tools in the next section.

3. Data Ethics

I previously mentioned providing the data source to your audience, but this is only one element of data ethics. You can easily mislead your audience intentionally or not if you use data that is incomplete, outdated, unreliable (e.g. unknown sources), etc. It is the responsibility of each of us to check the information produced or used as the consequences could be irreversible, especially for a sensitive field such as health care, security, news, etc.

4. Visual Representation

Once your audience is identified, and your purpose and message are clear, it is time to focus on the visuals. It could be a chart, dashboard, or infographic.

While it is tempting to go for a striking visual, check your creative ambitions against the needs of your audience. Do they have physical or cognitive disabilities to consider? Are they likely to end up consuming your visual on both a desktop and a mobile device, or even on paper?

In any event, always start by taking into account the purpose of your visual.

Case 1: Inform

Use a simple chart to inform or to influence your audience. For example, if a friend from Tokyo is considering vacationing in London, you might inform him or her about the weather by showing a chart like this.

Highcharts.chart('container', {

  title: {
    text: 'Average Rainfall'
  },
  subtitle: {
    useHTML: true,
    text: 'Source: <a href="http://www.worldclimate.com">worldclimate</a> '
  },
  xAxis: {

    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  yAxis: {
    title: {
      text: 'mm'
    }
  },

  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b><br/>',
    valueSuffix: ' mm',
    shared: true
  },

  series: [{
    name: 'London',
    data: [48.9, 38.8, 39.3, 41.4, 47, 48.3, 59, 59.6, 52.4, 65.2, 59.3, 51.2]
  }]

});

Case 2: Influence

But if you friend is hesitant and you would like to influence his/her decision, you may want to compare the weather in London and Tokyo.

Highcharts.chart('container', {

  title: {
    text: 'Average Rainfall'
  },
  subtitle: {
    useHTML: true,
    text: 'Source: <a href="http://www.worldclimate.com">worldclimate</a> '
  },
  xAxis: {

    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  },
  yAxis: {
    title: {
      text: 'mm'
    }
  },

  tooltip: {
    pointFormat: '{series.name}: <b>{point.y}</b><br/>',
    valueSuffix: ' mm',
    shared: true
  },

  series: [{
    name: 'London',
    data: [48.9, 38.8, 39.3, 41.4, 47, 48.3, 59, 59.6, 52.4, 65.2, 59.3, 51.2]
  }, {
    name: 'Tokyo',
    data: [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]

});

View interactive chart here.

Case 3: Accessibility

If your audience includes people who have disabilities such as color blindness, consider using pattern fills instead of only colors:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Color blind demo using pattern fills'
    },
    xAxis: {
        categories: ['A', 'B']
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'V1',
                    color: 'url(#highcharts-default-pattern-0)',
        data: [5, 3]
    }, {
        name: 'V2',
        color: 'url(#highcharts-default-pattern-8)',
        data: [2, -2]
    }, {
        name: 'V3',
        data: [3, 4]
    }]
});

View interactive chart here.

If your users are blind, make sure the chart can be explored using keystrokes and screen readers, using something like Highchart accessibility module.

Case 4: Explore 

Dashboards with drill-down options, or forecasts, are great for organizing multiple sets of interrelated data sets. With such tools, you empower your users to explore the data and make decisions by evaluating different scenarios.

5. Mistakes to Avoid

Keep in mind that your visualization will be used by others to make decisions, build opinions, take actions, etc. “With great power (or visualizations) comes great responsibility.”

Mistakes could be wrong/missing labels, incomplete data, too much information with the wrong scale, to name a few. I previously discussed this topic in greater detail in this article 7 most common chart mistakes.

One simple and effective way to minimize the mistakes is to share your work with a colleague for feedback before publication.

Visualizing data is an art; it requires creativity, experience, and common sense. A process such as the one described here, allows you to better understand and connect with your audience. It also minimizes the risk of errors and displaying misleading information.

Let me know if you have any other tips that you’d like to share about the subject.