Data Visualization

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

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

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

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

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

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.

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

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.

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

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

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

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

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

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.

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

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 Style²

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

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

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

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

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

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.

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.

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.

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

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

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.

Be succinct while still providing enough context to the audience

Round data labels to largest meaningful denomination¹

import { formatNumber } from '@carta/pen';

yAxis: {
  labels: {
    formatter: function () {
      return formatNumber(this.value, '$0a').toUpperCase();

      // -100000 → -$100K
      // 1000000 → $1M
    }
  }
}

yAxis: {
  plotLines: [
    {
      value: 0, // y=0
      color: "#000",
      width: 1,
      zIndex: 4,
    },
  ];
}

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.

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,
    },
  },
}

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"]

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

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

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

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

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

Read the document

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

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

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