Data Visualization at Riskified
Introduction
This guide provides a visual outline for data visualization practices at Riskified. It will walk you through the most common chart types and will give you instructions on how to make your chart’s appearance conform to Riskified’s design language.
General Guidelines
Keep it simple and avoid decoration.
What goals do you hope to accomplish with the data visualization? Try to emphasize important information and eliminate unnecessary data points in order to communicate your main idea as clearly as possible.
Do's and Don'ts
1. Don't overload the chart
2. Don't use 3D
4. Connect data points with straight lines
3. Avoid dual-axis charts
5. Grid
6. Don't truncate bar charts
7. Zoom into relevant range when appropriate
Zoom into the relevant range to better emphasize these changes.
Typography
Google Sheets Text Styles
Chart Title
Roboto Bold, 20pt
Legend
Roboto Regular, 14pt
Chart Title
Roboto Regular, 12pt
Numbers/ Categories
Roboto Regular, 12pt
Lables
Roboto Regular, 10pt
Colors
Qualitative Comparism
Principle Colors
#DF375F
#217883
#7EDFEC
#BA97FF
#5A4CFF
#00BEA6
Extended Colors
Additional categorial color options - to be used in a moderate amount, only when needed
#283593
#7F1FF7
#D07A5F
#F8DE81
Color Attributes
#00BEA6
#DF375F
#BA97FF
#B9C2CA
Qualitative Comparism
Diverging Palette
Data that progresses outward from a middle value should be represented by a diverging color scheme.
Click on a color swatch to reveal it's HEX code.
#7F1FF7
#1E9F9A
#DF375F
#4C3EFF
#DF375F
#5A4CFF
Monochromatic Palette
The monochromatic palettes are good for showing heat maps and ranged values
Click on a color swatch to reveal it's HEX code.
#D4F9F2
#002B33
#F1F5FF
#080E3F
#EEE5FF
#1F0547
#FFECED
#440035
#F3F5F7
#016249
#D1F7FA
#27C1D1
Chart Models
The charts below are a curated set of data visualizations for common needs at Riskified. Click on a chart to view it’s underlying data and setup in Google Sheets.
Line Chart
A line chart reveals trends or changes over time and can be used to show and compare between different categories of data. You should use it when you chart sequential data sets, for example the Riskified approval rate vs SLA approval rate.
Keep in mind: Avoid dual axis charts. The scales of dual axis charts are arbitrary and can therefore mislead readers about the relationship between the different data series.
Column Chart
A column chart is used to show a comparison among different items, or of items over time. Use vertical column charts when you’re graphing sequential data sets, for example recovery rates among bank-declined orders.
The numerical axis needs to start at 0 to avoid distortion. Our eyes are sensitive to the area of bars on a chart. If those bars are truncated, the viewer might draw the wrong conclusions.
Bar Chart
Use horizontal bar charts when you’re graphing nominal variables. Sort nominal variables from greatest to least or from least to greatest.
Stacked Bar Chart
A stacked bar graph is used to show how a larger category is divided into smaller categories and what the relationship of each part to the total amount is. For example, use a stacked bar chart to show how many chargeback disputes Riskified has won, relative to the total chargeback population.
Pie Chart
Pie charts are used to show parts of a whole. A pie chart represents numbers in percentages, the total sum of all the divided segments must equal 100%.
Keep in mind that here should not be more than five slices and that the largest slice should start at the top and fall to the right.
Map
Cartography is used to display geographical data. Use a map to show, for example the world-wide distribution of orders by billing country.
How-to: Google Slides
This chapter is providing you with instructions on how to stylize charts in google slides.
Customize colors
...
Text styles
...
Grid lines
...
Highlight single data points
...
