Data visualizations such graphs, charts, presentations, and reports represent the intersection point of your company’s data, statistics, and numbers (i.e. science) and its brand, style, and personality (i.e. art). However, this “marriage” of science and art will only be a successful one if the platform it is presented on is simple, effective, and beautiful.
“Design is not just what it looks like and feels like. Design is how it works.”
-Steve Jobs
This is where Plotly’s dashboards, reports, and presentations come in — to bridge the gap between what your creation looks and feels like, and how it works. Plotly gives you the tools and examples to make beautiful dashboards and reports, even if you’re not trained in design.
In this post, we’ll teach you how to be situationally aware when it comes to choosing graph types. Additionally, we’ll show you how easy it is to apply your brand’s style guide, from the logo to the color palette, to a Plotly product. Inspiration for this post stems from IBM’s Design Language data visualization guidelines and therefore we created some IBM-branded graphs, reports, and presentations in Plotly.
We recently provided some dashboard and slide deck templates that you can use — now we’ll expand on that work, personalizing your figures and applying industry-leading techniques to ensure the best visualizations possible.
How it works
Let’s go through several different chart types. We’ll address how to best utilize each type of graph according to IBM’s data visualization language. We’ll later use these to construct our Dashboard and Report.
Line chart, costs vs revenues: “Line graphs are used to track changes over short and long periods of time. When smaller changes exist, it’s better to use line graphs than bar graphs. Line graphs can also be used to compare changes over the same period of time for more than one group.”
Line chart, units sold over time: “Avoid [line charts] if not comparing values over time, as it might create confusion. Select a bar graph in this case.”
Bar chart, revenue by year: “Rectangular bars with lengths proportional to the values they represent. Bar graphs should be used to compare different values that are hierarchically equivalent. Using a colored element among gray elements makes the focus of the chart clear to the reader.”
Stacked bar chart, evaluation of manager by department: “A variant of the bar graph, where each rectangle is divided in multiple parts. Stacked bar charts are good for comparing elements across categories. In this example, a diverging palette is especially effective — the two opposing values have a positive/negative connotation.”
Pie chart, comparison of revenue subdivision: “Use only when the different values add up to a total and there is a need to highlight percentages.”
Bubble chart, students by faculty: “Used to show values among categories or groups with circles, avoiding any kind of axis. Use it as alternative to bar chart.”
Map, temperature variations across the USA: “Cartography is used to display geographical data. Use it when the focus of the analysis is geography, and when it’s important to zoom in on different places.”
What it looks like
Notice we’ve applied IBM’s color palette and logo to our dashboard and slide deck below [click here to reference the color palette]. If you’re on a Mac, you can use Digital Color Meter to ‘color pick’ off your screen. Windows users might try paint.
Pro tip: simple touches like this not only make your figures look more sleek but also reputable, professional—it readies it for the big stage (i.e. a presentation for the execs) in a jiffy.
Dashboard
Slide Deck
When using Slide Deck, make your graphs as large as possible and use at least 50 size-font for slide titles; match your charts background color to the color of the slide deck (we recommend white or light gray).
Your presentation should tell a story and not be a lecture — your goal should be to not only convey information to your audience, but inject some of your passion and expertise about the topic(s) into them. Consider it a journey that you are taking together and reach the finish line at the same time!
A limited text-plentiful graphic combination will set you on the right path…
