Rendering One Million Datapoints with D3 and WebGL
Over the weekend I was discussing the latest news relating to open weights with some of my non-techie friends. After 30 mins of waffling, I realised it is quite a long and interesting story, with many twists and turns. I've always wanted to create a 'long scroll' story, but have never found a suitable story to tell. This felt like a fun weekend project to undertake. The story itself doesn't have too many scroll effects (which is probably a good thing), it was more about trying to tell a story with a certain style that wouldn't really fit on my personal blog. Would love to get your feedback…
Rendering One Million Datapoints with D3 and WebGL launched on May 2, 2020 with 200 votes, #121 of 4,813 launches that month and more than 95% of that year's launches. The site was still online in September 2026, 6 years on.
In plain words
Rendering One Million Datapoints with D3 and WebGL is a technical resource for developers working with large datasets. It combines D3 visualization methods with WebGL's graphics processing capabilities to handle visualization of extremely large numbers of data points. The resource is suited for programmers building data visualization tools who need to display millions of datapoints efficiently without performance degradation.
written from the facts on this page · September 2026
From the sources
This blog post introduces the WebGL components which we recently added to D3FC, this suite of components make it easy to render charts with very large numbers of datapoints using D3. Throughout this post I
Read the follow on post to this one which optimises the loading behaviour to use Apache Arrow . This blog post introduces the WebGL components which we recently added to D3FC , this suite of components make it easy to render charts with a very large number of datapoints using D3. Throughout this post I’ll describe the creation of the following visualisation, which displays 1 million books from the Hathi Trust library as showcase for what these components are capable of: I’ll also look at streaming data into the browser, creation of D3 annotations and fast spatial indexing with Quadtrees. But first, let’s take a look at why we need WebGL when handling large datasets … D3 charts are most…from blog.scottlogic.com
In the maker’s words, at launch
Over the weekend I was discussing the latest news relating to open weights with some of my non-techie friends. After 30 mins of waffling, I realised it is quite a long and interesting story, with many twists and turns. I've always wanted to create a 'long scroll' story, but have never found a suitable story to tell.…
Does a similar job
all alternatives →
ChartGPU – WebGPU-powered charting library (1M points at 60fps)Jan 2026 · github.com · ▲670Creator here. I built ChartGPU because I kept hitting the same wall: charting libraries that claim to be "fast" but choke past 100K data points. The core insight: Canvas2D is fundamentally CPU-bound. Even WebGL chart libraries still do most computation on the CPU. So I moved everything to the GPU via WebGPU: - LTTB downsampling runs as a compute shader - Hit-testing for tooltips/hover is GPU-accelerated - Rendering uses instanced draws (one draw call per series) The result: 1M points at 60fps with smooth zoom/pan. Live demo:…
A gallery of graphs built with React and D3.js2023 · react-graph-gallery.com · ▲297Many JS libraries exist to build graphs on the web (Vega, chartJS, Plotly...). They allow to make charts quickly. But you lose flexibility: you're limited by the options they offer. I just created a gallery with hundreds of graphs made with d3.js and React. - Examples are split by graph types - They all come with explanation and code sandboxes - Gradual complexity to ease the learning curve It took me ages to create this project! Feedback welcome!
- RTReal-Time 3D Gaussian Splatting in WebGL2023 · antimatter15.com · ▲309
- MGMy Guild Wars 2 data viz weekend experiment using D3 and SVG filters2012 · guildwars2viz.com · ▲49
Interactive WebGL visualization of all 47K buildings in Manhattan2018 · tbaldw.in · ▲151An interactive 3D visualization of the all the buildings in Manhattan.
A JavaScript library for data visualization in both SVG and Canvas2024 · github.com · ▲161Here's a project I've been working on for a little while now. Ripl is a JS library that provides a unified API for rendering shapes on both canvas and SVG interchangeably. Over the years I've used D3 extensively to create data visualisations so I figured I'd have a go at making my own version with a slightly more modern API and stricter TypeScript support. I am aware there are already libraries that can draw to multiple contexts interchangeably, but I've added a few little niceties to Ripl that (as far as I know) some other libraries don't have such as CSS-like query selectors, DOM-like…
More work this month
the category →
Endless lofi beats composed live in your browser, over pixel-art nights in Paris, Tokyo, New York, Hong Kong, Sydney, San Francisco and more. Free, no sign-up.
Work · 24d ago · loficities.com
Smooth Recorder▲257Mac screen recordings that look edited when you hit stop
Work · 18d ago · smoothrecorder.com
Work · 12d ago · readrare.com
Source: Show HN post ↗ · launch text quoted in part
Launched alongside, May 2020
the whole month →
SHA-256 Animation▲1,053Animation of the SHA-256 hash function in your terminal. - in3rsha/sha256-animation
Dev tools · 2020 · github.com
This Word Does Not Exist uses an artificial intelligence model named GPT-2 to invent new English words.
AI · 2020 · thisworddoesnotexist.com
- P3
Life & fun · 2020 · leeoniya.github.io
