Skip to content
Swizec Teller - a geek with a hatswizec.com

A trick to make your big dataviz load super fast

Big datasets are fun. The bigger, the better, especially when you let people explore them live in their browser.

But there’s a catch: big datasets are slow to load.

Even with modern content delivery networks (CDNs), gzip compression, and high internet speeds, it can take a few seconds to load and parse a dataset. In my H1B salaries visualization, downloading data takes 1.7 seconds, parsing takes another 2 seconds, and rendering takes maybe a full second because some things are done stupidly.

That’s a full 4 to 5 seconds before a user sees anything more than a "Loading, please wait” message. Users are going to leave before they play with your dataset. Yes, even though it’s so cool and the data is amazing and awesome, users don’t give a shit. It’s sad. ☹️

But there’s a trick to keep them around → show them an image first!

Check this out:

See how you barely notice the page refresh? That’s on purpose.

The main App.render() method is wrapped in a conditional statement that checks if the data is available. If it is, then we render the interactive visualization; if it isn’t, then we render a screenshot and default descriptions.

// src/App.js
render() {
if (this.state.techSalaries.length < 1) {
return (
<preloader>
);
}
// render the main dataviz
}
</preloader>

The Preloader component can be a functional stateless component, like this:

// src/App.js
import StaticViz from './preloading.png';
const Preloader = () => (
<div class="App container">
<h1>The average H1B in tech pays $86,164/year</h1>
<p class="lead">Since 2012 the US tech industry has sponsored 176,075 H1B work visas. Most of them paid <b>$60,660 to $111,668</b> per year (1 standard deviation). <span>The best city for an H1B is <b>Kirkland, WA</b> with an average individual salary <b>$39,465 above local household median</b>. Median household salary is a good proxy for cost of living in an area.</span></p>
<img src={StaticViz} style="{{width:" '100%'}}="">
<h2 class="text-center">Loading data ...</h2>
</div>
);

The Preloader component mimics the structure of your normal dataviz, but it’s hardcoded. The information is real, and it’s what people are looking for, but it doesn’t need the dataset to render.

The easiest way to get this is to first build your real dataviz, then screenshot the picture, and then copy-paste the descriptions if they’re dynamic. Without dynamic descriptions, half your job is done already.

That’s about it, really:

  1. render an image
  2. wait for data to load
  3. replace image with dynamic dataviz

It sounds dumb, but increases user satisfaction 341324%.

If it works …

Did you enjoy this article?

Published on October 17th, 2016 in Front End, Technical

Learned something new?
Want to become a high value JavaScript expert?

Here's how it works 👇

Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet 📖right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

Start with an interactive cheatsheet 📖

Then get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career.

"Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"

~ Ashish Kumar

Join over 10,000 engineers just like you already improving their JS careers with my letters, workshops, courses, and talks. ✌️

Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

Ready to Stop copy pasting D3 examples and create data visualizations of your own?  Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️