An Introduction

I’ve a friend, well respected Chef, tell me that the plating is

his favorite part of cooking. All the planning, spicing, and
actual cooking is fantastic. But the plating is where every-
thing comes together. Being able to take all his knowledge
and skills and express it into something meaningful was
the surest way to display his craft.

Data people; scientists, engineers, and analysts alike

face a similar challenge and result.
Rarely does a business manager, board of
directors, or executive care of the intricacies
and work needed to collect, clean, and
explore the data.

They want the results.

Data visualizations are the way to present

complicated relations into something mean-
ingful to all aspects of the business.
Creating a visually appealing dashboard/report
test_a MD

Select Application

these days may not require a whole department

Choose which application you would like to open.

inViewer inBoard inModeler inFlow

of IT professionals and graphic designers but attributes

test_a

ldm
inVault inMailer RestAPI help refresh
Doc
MD

spaces

utilizing some of the underlying principles of

facts join

loads hierarchy

them portrays good judgment. test_a

Product Demand
For Nikki

Inventory Status Products Sold

Export pdf refresh

Sales by Hour
MD

Product_Line (Text)
(
(Text) Inventory

Trucks and …

Vintage Cars
220000 60000

Classic Cars

Motorcycles
Classic Cars 219,183

Planes
Vintage Cars 124,880

Trains
Ships
Motorcycles 69,401
Planes 62,287 165000
1996 Trucks and Buses 35,851 45000

Ships 26,833
1997
Trains 16,696

1998 110000

1999
500
30000
Total Transactions
600
400
2000 70
300 0 55000

Sounds oh-so-simple right? Make a user-friendly

Trans_Date Yea… Trans_DateQua… Trans_Date Mo…

0
2001

80
20
console

0
15000

100

900
2002
0

1,000
2003

s
rs

ips
rs

ins
s

se
ne
cle
Ca

Ca
0

Bu

Sh

Tra
Pla
rcy
sic

d
628

tag

to

an
as

Mo
Vin
Cl

ks
2004 0

uc
Tr
2005

2006 Client Map

2007

2008
+

dashboard that positively influences the busi-

2009 114
91 159
−
2010 403 56
126,351
2011
444 # Transaction_ID
2012 2137 2839

305 2432
2013

2014
952

2015 2920
402 90

2016 949

2017

ness decision? Here are a few ways to make that

60 319
2018

15,042 45,555 76,067 106,580 137,092 167,605 198,117 228,630

LeaÙet| © OpenStreetMap contributors

process a bit easier.

Layout

This is a multi-pointed concept. A good layout conveys

the information necessary without going into data over
over-
load. Consider the reports a way of story-telling; you are
the narrator and illustrator. The visualizations are your
way of bringing the point home.
Layout > Narration

Keep in mind your audience and add labels and notes to

make sure everyone understands what they are seeing.

engage
Presenting to a group and bringing the key points of your narrative visuals
change
discovery can be highlighted with a visualization. You can enl
l ain igh
create dashboards to be completely self-sufficient too. exp ten

Even if you are not there to do the narration yourself.

data
1 Layout > Illustration

Try not to lose sight to the key message you are aiming for and who your audience is. Is this for marketing, sales,
executives? A mixture of both? Focus on simplicity, keep each departments visuals within their own dashboard.
Never mix the two or you’ll always disappoint someone. Make effective use of space, but leave plenty of
whitespace. Keep the most important data on top, upper leftmost corners, since this will always load first and
often. Group big-picture data with more detailed data sequentially. Great data visualization tells a story, with an
introduction, middle and end (main point). Think about what additional questions would emerge after you
viewed one chart, and answer them directly in the next 1-2 charts, then repeat the process.

If you take the time to lay out your dashboards in terms of telling a visual story, your users will appreciate them
much more.

The big picture should be front and center. Any major trends or defining
metric should be immediately visible and understood.
Storytelling Dashboard Factors
Influencing
KPIs

DESK - Performance Management

Key Indicators
(KPIs) Dashboard All teams quarter-to-quarter Product team year-over-year Product
Top and team year-over-year
bottom 3 Teams

+ 6%
Front-end 91% Product 65%
Reports
14% UX design 84% Big Data 53%
Team (QTD) Monthly Trend (QTD) Monthly Trend
QA 72% Analysis 47%
(last 3 months) (last 3 months)

Last updated 4 days ago Last updated 4 days ago Last updated 4 days ago

Configure

Quarterly team performance - last 2 years (percentage of goal) Meetings attended by team (QTD) Engineering Performance (QTD)

History PRODUCT UX DESIGN ENGINEERING See more detail PRODUCT UX DESIGN ENGINEERING NEW YORK PUNE SYDNEY

Monthly Add to report

Edit card

Replace

Key Indicators
in Historical
Context
73% Attended
85% On Target Things that will
43 31 29 68 78 47 63 54 predict/improve
KPIs
2015 2015
Q1 Q2 Q3 Q4 Q1 Q2 Q3 QTD
Last updated 2 days ago Last updated 1 day ago Last updated 1 day ago
2 Which graph?
INFOGRAPHIC
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum
sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
INFOGRAPHIC
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.

INFOGRAPHIC
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
INFOGRAPHIC
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.

INFOGRAPHIC

This is the big one. Without the right visu-

Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
INFOGRAPHIC
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus
mus.

alization, the data isn’t communicated INFOGRAPHIC

Lorem ipsum dolor sit amet, consectetuer adipiscing
INFOGRAPHIC
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean
elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis

effectively. You lose that first pass at

massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
parturient montes, nascetur ridiculus mus.

understanding. Consider the main types:

Pie, Bar, and Line charts. 20%
10%
70%
01
02
03
04 INFOGRAPHIC

05
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

INFOGRAPHIC
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

INFOGRAPHIC
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

INFOGRAPHIC
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Which Graph > Bar Charts
60

50

40

30

Great for quick scanning like pie charts. Especially if 20

10
the data is from the same attributes; say emails by A B C D

day. Clear and easy to understand even when placed

10k 25k 65k 45k
in a compact section of the overall dashboard. Clus-
45% 45% 45% 45%
tered Bar Charts are very useful because they’re
space-efficient, you can display three or four different
metrics in the space a little larger than a single bar
chart.
Which Graph > Line Charts
DATA SAMPLE

30

Line charts are great for viewing patterns over time. 20

They’re also useful for comparison of values and
10
distributions. They let viewers quickly digest informa- 0 1 2 3 4 5 6 7
tion and narrow down on a single date/attribute.
TITLE HERE
450 10%
1000

235 25% 750

500

600 70%

750 85%
LOREM LOREM LOREM
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet
Which Graph > Pie Charts
04
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam

Instantly readable, large, colorful and pleasingly round, congue et urna sed commodo

03
these make Pie Charts a popular choice. But consider Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam
congue et urna sed commodo

they have a difficult time showing precision, with the Pie Title here
Chart 01
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nam congue et urna sed
commodo.

largest slices easily outweighing the smaller ones. 02

Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Nam
congue et urna sed
commodo
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam
congue et urna sed commodo

Pie charts also become very busy if you have more than
5 categories to display. Save Pie Charts for summary IPSUM

25%
Lorem ipsum dolor sit amet,

data, high level breakdowns or to show distribution

consectetuer adipiscing elit

37.5%
between a few large categories. LOREM
Lorem ipsum dolor sit amet,

12.5%
consectetuer adipiscing elit

DOLOR
Lorem ipsum dolor sit amet,

25%
consectetuer adipiscing elit

SIT AMET
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit
More On Graphs
TITLE HERE

TITLE HERE LOREM IPSUM DOLOR

There are multitudes of variations of each of these types of 65%

LOREM LOREM LOREM

Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh adipiscing elit, sed diam nonummy nibh
LOREM LOREM LOREM

graphs within any solid visualization tool. Be wary of being

euismod tincidunt ut laoreet euismod tincidunt ut laoreet

LOREM LOREM

too fancy. A Sunburst may look pretty in an active JavaScript 15% 80% 50%

website but falls flat, literally, when exported to PDF.

Scatter plots and Sparklines, as well, look nice but usually are 01 02 03 04
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit

displayed either without scale or any way to quickly decipher

amet, consectetur amet, consectetur amet, consectetur amet, consectetur
adipiscing elit. Nam adipiscing elit. Nam adipiscing elit. Nam adipiscing elit. Nam
congue et urna sed congue et urna sed congue et urna sed congue et urna sed
commodo. commodo. commodo. commodo.

without the users being relatively informed.

Title here Title here Title here Title here

Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur amet, consectetur
adipiscing elit. Nam adipiscing elit. Nam adipiscing elit. Nam adipiscing elit. Nam
congue et urna sed congue et urna sed congue et urna sed congue et urna sed
commodo. commodo. commodo. commodo.
3 The Finishing Touches

Now you’ve worked out your narrative, polished your charts and gotten the dashboards assembled. Have
you gotten it all down? Maybe. Examine a few more concepts before considering it complete:

Colors
I know, this should be easy right? Who doesn’t love color?

Not so fast. Creating a pleasing color palette is no simple

matter. But a few simple rules of thumb can help
immensely.
Colors

Don’t always go for the easy route of using your company’s

colors. Your viewers may be desensitized by seeing that
palette over and over in their work day. Leading to glossed
over reports. Highly saturated, intense colors instantly draw
users’ attention to a certain piece of data, don’t overuse
them however. Try to stick to 2-3 colors and use gradients. If
the dashboards have graphs of complementary data, con-
sider mirroring the color to tie them together.
Simplicity and Creativity (!?!)

This final tidbit seems to be counter productive but is merely a reinforcement of

the concepts relayed above. Consider your audience, try to make it entertaining.
Have fun with the narrative, not a boring powerpoint presentation from the 90’s.

Try something edgier, flat and minimalist designs are popular now. Try it out!

Each dashboard should speak to a particular user-group and the end goal
would be to give the information in a way that drives the business forward.
Conclusion & Helpful Links

Putting this all together at first can seem daunting. As in every learned skill, practice makes perfect. Try various
combinations of what is shown here, don’t be afraid to add your touch. After all, chefs don’t win awards for follow-
ing the recipe exactly. You are the narrator; let your work speak to those around you through great visualizations.

Ready to learn more? Take a look at these great resources:

https://d3js.org/
https://www.chartjs.org/
http://cesiumjs.org/
https://gramener.github.io/visual-vocabulary-vega/
https://datavizcatalogue.com/resources.html