loading

v33.0.2

select option

Data Visualization

Guide for creating effective data visualizations

Charts clarify data, and make the platform more visual and intuitive


“Bad data + good visualization = bad chart”
— Dona M. Wong1

Traps to avoid (if you are in a hurry)

  1. Avoid charts if your data set isn’t rich enough. If a short table will give users the same insight, you may want to skip the visualization altogether.
  2. Avoid replacing tables with charts. Charts are an addition, not a replacement.
  3. Avoid donut charts. They are hard to compare, and can distort data. Stacked bar charts are more accurate, and take less space.
  4. Avoid letting graphics cloud the message. Remove the noise.2
  5. Avoid complex interactive charts. Keep it simple.
  6. Good visualization is like good storytelling. Review it a few times before publishing.
  7. Avoid charts for “exploration,” or other vague goals3
  8. Don’t let users do the work. Draw out the insights for them.4

How to create effective visualizations

Be systematic, and don’t skip a step:1

1. Research

  • Get data from authoritative sources (rich content gives meaning)
  • Review data with product and engineering, to understand its biases and gaps

2. Edit

  • Identify the message
  • Distill the data for your audience4
  • Do the math for your users5

3. Plot

  • Choose the right chart type, e.g. a line to show trend, or a bar chart for discrete quantities
  • Configure your chart well, e.g. scale, increments, labels, baseline
  • Label the chart, e.g. title, short description, legends (when required)

4. Review

  • Check the chart with real data (demo data is deceiving)
  • Use judgment to evaluate if chart makes sense
  • Look at the chart from the user’s perspective
  • Refer to Dona M. Wong’s book for in-depth guidance1

Draw out the insights for the user

“Clearly state what you want the reader to take away from looking at a chart”
— Vrushali Paunikar, Presenting Insights4

Carta is a math platform5

Users send us numbers and we sell the summation and interpretation back to them, e.g. extract net new ARR from raw revenue numbers

Charts are one way to do the math for the user5

Plotting raw numbers only goes so far. Editing and doing the math on raw numbers allows you to create more interesting data narratives, e.g. a dedicated chart for net new ARR, in addition to raw revenue.

Partner with a subject matter expert

Collaborate with a colleague who has deep knowledge of the data set at hand, to figure out the best way to edit and present it to the user

Understand what numbers the users care about

User research can help narrow down the target. Power users rely on Excel to crunch the numbers. What numbers can we crunch for them ahead of time? E.g. CEOs care about quarter-over-quarter revenue trends. We can infer that from raw revenue numbers ahead of time.

Choose the right type of visualization

Tables

Structured and organized, tables align data in a predictable and glanceable way. They help users navigate through rich data, and shouldn’t be underestimated.

Progress bars

Compact and convenient, progress bars make information glanceable, without getting in the way. They are ideal for completion and depletion rates, and can be used inside table rows to add visual power to the data, e.g. the Equity Awards ledger progress bar

Line charts

Dense and high-resolution, line charts pack a lot of data in little space, and show small changes clearly. They are ideal for trends, high frequency numbers, percentage rates, e.g. stock price, inflation numbers

Vertical bar charts

Ideal for discrete quantities, e.g. number of shares, number of employees, quarterly revenue

Horizontal bar charts

Ideal for discrete quantities with few data points, or long labels, e.g. 2022 revenue for companies A and B

Stacked bar charts

Ideal for showing breakdown, or ratios, over time in an accurate, compact, and easy to compare way, e.g. revenue breakdown by product line per quarter, employee breakdown by department per year.

Horizontal stacked bar charts

Ideal for showing ratios, as described above, inline with other content, e.g. shareholder breakdown by relationship type

Be Concise

Aim for high data-density

Don’t underestimate your audience. Well made charts can handle a lot of data, and still let it flow gracefully to users

“No one can write decently who is distrustful of the reader’s intelligence, or whose attitude is patronizing.”
— William Strunk, Jr., and E. B. White, The Elements of Style2

Don’t make a large chart for short data sets

Use economy of screen real estate as a constraint to keep your chart eloquent

Donut charts are low data-density

Donut charts sell. However, they should be avoided when possible since they are blunt, imprecise, and visually disorganized. E.g. ownership percentage for employees

Small charts can be powerful

Don’t underestimate small charts. When content rich, and well crafted, they can be a good fit for the job, e.g. CTC salary and equity distribution

Consider multiple simple charts, instead of a single complex one

Unless crucial for direct comparison, split separate sets of data into their own charts. Even related information can be clearer if presented separately, e.g. cash raised and post-money valuation

Number of lines per chart example, from UK.gov

Keep it simple

“Graphics reveal data”
— Edward Tufte, The Visual Display of Quantitative Information2

If the chart is clean, the user will focus on the content

  • Don’t use texture patterns or 3D effects
  • Check if colors are competing for attention, or creating visual “vibration”
  • Check if data labels overlap or clash with each other
  • Keep lines to 4 or fewer when using line charts1

Remove noise

  • Remove animations
  • Remove tooltips unless essential
  • Remove legends unless essential
  • Reduce number of tick marks and grid lines if possible

Color Use

  1. Use colors carefully, economically, in service of the data and the message
  2. After picking a color for a data point, stick to it for the same data point in that page, or vicinity
  3. Try different shades of one color, and gray, to create hierarchy in complex cases

CFO Charly Keeves’s quote

Category-based colors

Use category based colors, following the order set in the image below, for free-form color coding of objects.

Colors were chosen based on the contrast among them, and tested against common types of color blindness.

Category-based color set

Example 1

Context: Product A wants to add a visualization for employee headcount over time. The first visualization should default to category-1 colors. Subsequent charts for “employee headcount,” on the same page or immediate adjacencies, should continue to use the same color coding.

Example 2

When Product A decides to add a second visualization in the same context, the chart should use the next available category color. For example, the following cash balance chart would use category-2 colors.

Semantic-based colors

Use positive and negative colors to help users interpret the data. Rely on neutral colors to deemphasize secondary or supporting data points.

Semantic-based color set

Example 1

How much money a startup burns per month is a key metric. The use of negative color helps convey the threat that burn represents.

Example 2

Use neutral colors to deemphasize secondary data points. That allows key data points to stand out.

Note, line charts don’t have to start at y=0, therefore the dark line at the x-axis is absent.

Typography Settings

Be succinct while still providing enough context to the audience

  • Use the Inter typeface for all chart text
  • Don’t rotate text as it compromises legibility1
  • Stick to plain type, and only emphasize (bold) key elements
  • Label the chart and the data directly1
  • Avoid abbreviations, unless familiar to users
  • Use Associated Press (AP) date formats:
    • Jan., Feb., March, April, May, June, July, Aug., Sept., Oct., Nov., Dec.
    • Mon, Tue, Wed, Thu, Fri, Sat, Sun

Numeral Settings

Round data labels to largest meaningful denomination1

  • Use K for thousands, e.g $5K
  • Use M for millions, e.g. $5M
  • Use B for billions, e.g. $5B
  • Use T for trillions, e.g. $1T
  • Use minus sign for negative values, e.g. -$200K
  • Avoid decimal places on axis labels
import { formatNumber } from '@carta/pen';
yAxis: {
labels: {
formatter: function () {
return formatNumber(this.value, '$0a').toUpperCase();
// -100000 → -$100K
// 1000000 → $1M
}
}
}

Axis Settings

  • Most users expect data values to be on the y-axis and time to be on the x-axis. Break this convention at your peril.
  • Remove the y-axis, to reduce noise. Grid lines and y-axis labels are enough
  • Use few and intuitive y-axis increments, e.g. 0, $20M, $40M, $60M increments are more intuitive than 0, $12M, $24M, $36M, $48M, $60M1
  • Bar charts should always start with y=0
  • Use double y-axis sparingly. Try to split into multiple charts.
  • Use a black line for y=0
  • Don’t name the axis if it’s clear from context, e.g. remove “Time” or “Date” on the x-axis if tick labels are present
yAxis: {
plotLines: [
{
value: 0, // y=0
color: "#000",
width: 1,
zIndex: 4,
},
];
}

Engineering Notes

Use the following tools to create charts with our design standards, and brand direction. These will ensure cohesion in the user experience across products and features.

Chart Library

Highcharts JS is recommended, with the following configuration:

import { tokens } from '@carta/ink';
import { formatNumber } from '@carta/pen';
{
chart: {
animation: false, // removes noise
height: 320,
width: 452, // golden ratio (height * (2^(1/2))
style: {
fontFamily: tokens.font.global.family.base, // ink token
},
},
// Check ink.carta.com for visualization-specific options
colors: [
tokens.color.global.visualization['category-1'].default // ink token
],
credits: {
enabled: false, // removes noise
},
legend: {
enabled: false, // removes noise
},
plotOptions: {
column: {
pointPadding: 0.1,
groupPadding: 0,
borderWidth: 0,
maxPointWidth: 45,
},
line: {
lineWidth: 4,
marker: false, // removes noise
dataLabels: {
align: 'left',
crop: false,
enabled: true,
formatter: function() { // one label the end of the line
const series = this.series;
if (this.point === series.points[series.points.length - 1]) {
return series.name;
}
},
overflow: 'allow',
style: {
color: tokens.color.global.font.custom.gray.default, // ink token
textOutline: false, // removes noise
},
},
},
series: {
animation: false, // removes noise
states: {
hover: {
enabled: false, // removes noise
},
},
},
},
subtitle: {
align: 'left',
style: {
fontSize: tokens.font.global.size.small, // ink token
color: tokens.color.global.font.custom.gray.default, // ink token
},
},
title: {
align: 'left',
margin: 40,
style: {
fontSize: tokens.font.global.size.body, // ink token
fontWeight: tokens.font.global.weight.bold, // ink token
},
},
tooltip: {
enabled: false, // removes noise
},
xAxis: {
labels: {
autoRotation: undefined, // Never turn type
style: {
color: tokens.color.global.font.hierarchy.body.default, // ink token
},
},
lineColor: tokens.color.global.border.separation.weak.default, // ink token
},
yAxis: {
gridLineColor: tokens.color.global.border.separation.weak.default, // ink token
labels: {
autoRotation: undefined, // Never turn type
// Defaults y-axis to currency
// Set to undefined otherwise
formatter: function () {
return formatNumber(this.value, '$0a').toUpperCase(); // import @carta/pen
},
style: {
color: tokens.color.global.font.hierarchy.body.default, // ink token
},
},
plotLines: [
{
// dark line @ y=0
value: 0,
color: '#000',
width: 1,
zIndex: 4,
},
],
tickAmount: 5,
tickColor: tokens.color.global.border.separation.weak.default, // ink token
tickWidth: 1,
tickLength: 0,
title: {
align: 'high', // Far end
margin: 0,
reserveSpace: false,
rotation: 0, // Never turn type
style: {
color: tokens.color.global.font.custom.gray.default, // ink token
background: 'white', // protects from grid lines
padding: '0 4px 4px 6px',
},
textAlign: 'left',
useHTML: true,
x: 35,
y: 4,
},
},
}

Color Tokens

Here’s the full list of visualization-specific color tokens you can import from @carta/ink

import { tokens } from "@carta/ink";
tokens.color.global.visualization.positive.default;
tokens.color.global.visualization.positive["intensity-0"];
tokens.color.global.visualization.positive["intensity-1"];
tokens.color.global.visualization.positive["intensity-2"];
tokens.color.global.visualization.positive["intensity-3"];
tokens.color.global.visualization.positive["intensity-4"];
tokens.color.global.visualization.negative.default;
tokens.color.global.visualization.negative["intensity-0"];
tokens.color.global.visualization.negative["intensity-1"];
tokens.color.global.visualization.negative["intensity-2"];
tokens.color.global.visualization.negative["intensity-3"];
tokens.color.global.visualization.negative["intensity-4"];
tokens.color.global.visualization.neutral.default;
tokens.color.global.visualization.neutral["intensity-0"];
tokens.color.global.visualization.neutral["intensity-1"];
tokens.color.global.visualization.neutral["intensity-2"];
tokens.color.global.visualization.neutral["intensity-3"];
tokens.color.global.visualization.neutral["intensity-4"];
tokens.color.global.visualization["category-1"].default;
tokens.color.global.visualization["category-1"]["intensity-0"];
tokens.color.global.visualization["category-1"]["intensity-1"];
tokens.color.global.visualization["category-1"]["intensity-2"];
tokens.color.global.visualization["category-1"]["intensity-3"];
tokens.color.global.visualization["category-1"]["intensity-4"];
tokens.color.global.visualization["category-2"].default;
tokens.color.global.visualization["category-2"]["intensity-0"];
tokens.color.global.visualization["category-2"]["intensity-1"];
tokens.color.global.visualization["category-2"]["intensity-2"];
tokens.color.global.visualization["category-2"]["intensity-3"];
tokens.color.global.visualization["category-2"]["intensity-4"];
tokens.color.global.visualization["category-3"].default;
tokens.color.global.visualization["category-3"]["intensity-0"];
tokens.color.global.visualization["category-3"]["intensity-1"];
tokens.color.global.visualization["category-3"]["intensity-2"];
tokens.color.global.visualization["category-3"]["intensity-3"];
tokens.color.global.visualization["category-3"]["intensity-4"];
tokens.color.global.visualization["category-4"].default;
tokens.color.global.visualization["category-4"]["intensity-0"];
tokens.color.global.visualization["category-4"]["intensity-1"];
tokens.color.global.visualization["category-4"]["intensity-2"];
tokens.color.global.visualization["category-4"]["intensity-3"];
tokens.color.global.visualization["category-4"]["intensity-4"];
tokens.color.global.visualization["category-5"].default;
tokens.color.global.visualization["category-5"]["intensity-0"];
tokens.color.global.visualization["category-5"]["intensity-1"];
tokens.color.global.visualization["category-5"]["intensity-2"];
tokens.color.global.visualization["category-5"]["intensity-3"];
tokens.color.global.visualization["category-5"]["intensity-4"]

Sources

For additional guidance, check the resources below. They have informed this guidelines, and are best-in-class.

1 The WSJ Guide to Information Graphics, by Dona M. Wong Recommended

A student of Edward Tufte, former graphics editor at The New York Times, and The Wall Street Journal, and current VP of Communications at the Federal Reserve Bank of NY, Dona Wong’s guide is practical, straightforward, and serious.

See the book on bigwords.com

2 The Visual Display of Quantitative Information, by Edward Tufte

Edward Tufte, world renowned authority on the topic, walks through the history of data visualizations and builds up his philosophy and methodology to visualize data in the best possible way. It’s a difficult read, but is packed with substance, and may change your understanding of what data visualization is all about.

See the book on bigwords.com

3 Banning Exploration in my Infovis Class, by Prof. Eytan Adar

Fascinating article from our friend Vispan Boocha’s data visualization teacher, Prof. Eytan Adar. Dives straight to the point: data visualizations designers typically want to create are not the data visualizations users need. To get it right, designers must deepen their understanding of the data, the user, and their goals.

Read the article

4 Presenting Insights, by Vrushali Paunikar Recommended

Our very own CPO wrote a fantastic guide focused on how to present R&D insights internally.

Read the document

5 Max Estes’ “Cartesian” data visualization project

Max, one of Carta’s founding designers, had a brilliant vision for data visualizations for Carta, which he articulated incredibly well in this deck.

See the deck

6 UK.GOV Office of National Statistics’ chart design guidelines

Excellent resource, found by Asmi Joshi (Design, LLC), with lots of visual examples and dos and don’ts heavily in line with the guidance adopted here.

See the guidelines

7 January 2023 catalog of Carta in-app data visualizations

The status quo of the Carta platform, reveals a great variety of charts, and different degrees of sophistication. Some could be removed, some could be refined for 5x more impact, and a handful of them show sophistication.

Open the catalog in Figma

Is this page helpful?