Dataviz = performance issues

At this step of the course you should be able to draw pretty much anything on a screen with D3 and React.

But sooner or later, you'll reach performance issues: a page that loads slowly, a hover effect that has delay, or an animation that lags. This lesson explains why it is so often the case, and the different strategies to fix it.

Members only

5 minutes read

❌ The Problem

Performance is a common concern for front-end developers.

But when building charts, it is even more of a problem than when drawing a regular piece of UI. The reason is the sheer number of elements we add to the DOM.

Let's say you build a scatterplot with 10,000 data points, which is far from impossible. Add axes with ticks and labels. Now push 10 charts onto your page to create a dashboard. Finally, set up a cross-chart hover interaction where every dot on the screen has to update. 😳

That is an insane amount of work for your computer. With a large number of DOM elements and many interactive patterns, performance has to be at the core of a dataviz engineer's focus.

import { useState } from 'react';

const width = 500;
const height = 300;
const sampleSize = 10000;

const data = generateDataset(sampleSize);

export default function App() {
  const [hovered, setHovered] = useState(null);

  return (
    <svg width={width} height={height}>
      {data.map((d, i) => (
        <circle
          key={i}
          cx={d.x}
          cy={d.y}
          r={hovered === i ? 4 : 2}
          fill={hovered === i ? 'red' : 'blue'}
          fillOpacity={0.4}
          onMouseOver={() => setHovered(i)}
        />
      ))}
    </svg>
  );
}

function generateDataset(n) {
  const dataset = [];
  for (let i = 0; i < n; i++) {
    const x = Math.floor(Math.random() * width);
    const y = Math.floor(Math.random() * height);
    dataset.push({ x, y });
  }
  return dataset;
}

Open Sandbox

The scatterplot above does not have any performance optimization. Depending on your machine, you might already see performance issues with just 10k points.

✅ The solutions

Unfortunately, there is no single solution or recipe to follow to fix performance issues. Every use-case is different.

What you need instead is a list of common problems and their fixes, then the judgment to pick the right ones for your situation. That is how this module is structured.

Oh no! 😱

It seems like you haven't enrolled in the course yet!

This is a lesson from the D3 ❤️ React course, where you learn to create bespoke, interactive graphs with d3.js and React.

Enrollment is currently closed. Join the waitlist to be notified when doors reopen:

Or Login

← Previous

Project

useMemo