Online Dashboards: Eight Helpful Tips You Should Hear From Visualization Experts
Tags: Data Visualization, Big Data, Dashboard

“There is no such thing as information overload, only bad design”

— Professor Emeritus of Political Science, Statistics, and Computer Science at Yale University Edward Tufte

The number of organizations working on data-driven projects increased by 125% in the past year. 44% of companies tackle big data “all the time.” 82% of executives call big data “important or mission critical.” How do we manage all this data? Interactive dashboards. This post has four sections (data, design, functionality, conclusion) that show how you can apply what experts say about dashboards. We used Plotly’s free online tool and APIs to create these graphs. So can you. Contact us if you want to use Plotly Enterprise on-premise. Scroll down to see an interactive version of this US population map.

Part 1: The Data

“It is only by measuring that we can cross the river of myths.”

— Hans Rosling, data visualization expert, founder of Gapminder

Choose the right data

We’ll start with a simple example. Without data over a full year and categories, we wouldn’t understand the composition or trends in our sales. Imagine seeing only March to November. Choosing the best graph and using actionable and relevant data helps you communicate your work. We made this graph with Python. Click and drag to zoom, hover your mouse to see data, or press the legend to filter traces on and off.

Contextualize Your Data

“We are overwhelmed by information, not because there is too much, but because we don’t know how to tame it.”

— Data visualization expert Stephen Few

Context makes your data manageable. As an example, suppose you wanted to learn about car wrecks in NYC over time. Splitting the data by neighborhood allows us to study the composition of the trend. Showing the same data from the past two years in a histogram and box plot adds historical context. Click and drag to zoom. We’ve saved a custom-zoom; if you double-click, you’ll see data back to 2013.

Keep it Current

“The process of visual monitoring involves a series of sequential steps that the dashboard should be designed to support.”

Stephen Few

You need the most recent data to monitor your metrics. Lags in data syncing can quickly make your dashboard obsolete. Plotly connects to MySQL, Google Docs, Dropbox, SQLite, and more with Cron jobs or by pasting in a URL. If you have faster data, you can stream your data at 50 ms per second.

Part 2: The Design

“Overload, clutter, and confusion are not attributes of information, they are failures of design.”

Edward Tufte

Make it Visual

Colors shouldn’t just make graphs look nice, but contribute to the analysis of the data. In this interactive map, the color scale shows the population of each city in the US. Turn traces off and on by pressing the legend; see our Python docs to learn more about this map. We can also use R and RColorbrewer with Plotly to create a spectral palette and Python and colorlover to use a colorscale.

Less flashy, more functional

“Plotly is at the center of our business development platform…We can quickly comprehend and analyze huge amounts of data, and use the results to make multi-million-dollar investment decisions.”

— Dr. Jenya Kirshtein, Scientific Software Engineering at C12 Energy

Making a dashboard right means minimizing chart-junk, the unnecessary add-ons to dashboards that only serve as decoration. You want to maximize your data:ink ratio, the proportion of ink devoted to actually displaying information.

To maximize your data: ink ratio, Plotly’s default charts use thin gray grid lines and do not use lines to surround the plot. Here we used Python, Pandas and Plotly to aggregate stock prices. Only the data we need, and all in one place.

Part 3: The Functionality

“…few people will appreciate the music if I just show them the notes. Most of us need to listen to the music to understand how beautiful it is. But often that’s how we present statistics; we just show the notes we don’t play the music.”

- Hans Rosling

Make it interactive

Plotly makes your graphs beautiful, interactive, and engaging. Your graphs are rendered with with D3.js and WebGL so you can drill down, zoom, pan, see data on the hover, and more. We can also use Plotly with IPython Widgets and R with Shiny to create interactive dashboards. That’s going well beyond a screenshot or slide. For example, below see the original plot we’ve made with MATLAB, then the Plotly version. Hover your mouse or click and drag to play with this 3D surface plot of bessel functions, rendered with our MATLAB API.

Have a Single Source of Truth

“The Plotly Enterprise solution is really the closest thing to fulfill the old promise of one picture telling more than a thousand words.”

- Dr. Pekka Teppola, VTT Senior Scientist

Does looking for files, data, graphs, presentations, and code feel like this xkcd comic?

Plotly lets you share with anyone to view, edit and embed with IPython Notebooks, Python, R, a JavaScript API, MATLAB, and more. All you have to do is add the file extension you want to export at the end of the permalink. For the plot above, we’d get:

Or you add the type of code you want to view it as:

Make sharing dashboards with your team easy. Stop wasting time with email! The data below comes from a McKinsey study.

Part 4: Conclusion

“But how do you exercise the restraint that simplicity requires without crossing over into ostentatious austerity? How do you pay attention to all the necessary details without becoming excessively fussy? How do you achieve simplicity without inviting boredom?”

Artist, author, designer Leonard Koren

One Tool For Your Team

Ultimately, making graphs will require judgment. The fastest way to hone your craft and produce the best dashboards is through collaboration. Ask for feedback and work with tools your whole team can use. Plotly has over 200K users you can learn from, tutorials, and is built for teams.

If you liked what you read, please consider sharing. Find us at feedback@plot.ly and @plotlygraphs.