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 (
    // render the main dataviz

    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>

    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 an expert?

    Here's how it works 👇

    Leave your email and I'll send you thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Join Swizec's Newsletter

    And get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.

    "Man, love your simple writing! Yours is the only newsletter I open 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 14,000 engineers just like you already improving their 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 ❤️

    Created bySwizecwith ❤️