Feeding the Audio Graph – Using Web Audio’s AnalyserNode

Good article on 24ways (yes, that still is a thing) on using Web Audio’s AnalyserNode.

const waveform = new Uint8Array(analyser.fftSize);
const frequencies = new Uint8Array(analyser.frequencyBinCount);
const ctx = canvas.getContext('2d');

const loop = () => {

    waveform.forEach((f, i) => ctx.lineTo(i, f));
    frequencies.forEach((f, i) => ctx.lineTo(i, 255-f));


I especially like the demo where the emoji are animated based on the frequency.

Feeding the Audio Graph →

Strava Global Heatmap

Strava has released a Global Heatmap powered by Mapbox GL, plotting all locations where their users go run / go cycle / do water activities / do winter activities.

The raw input activity streams data comes from a Spark/S3/Parquet data warehouse. This data includes every one of the 3 trillion GPS points ever uploaded to Strava. Several algorithms clean up and filter this data.


The full global heatmap was built across several hundred machines in just a few hours, with a total compute cost of only a few hundred dollars.

I like the fact that it’s possible to filter on activity type, revealing some hotspots like Wielercentrum Eddy Merckx for cycling, and the adjacent Watersportbaan and Blaarmeersen for running in Gent.

Strava Global Heatmap →
Strava Engineering: The Global Heatmap, Now 6x Hotter →

A New Kind of Map: It’s About Time

The Mapbox Team:

Recently, we’ve been thinking of a visualization that cuts directly to the way in which people make decisions about where to go: what would a map look like if we swept the physical world away completely, in favor of the time needed to move around it?

We’ve been prototyping a simple discovery tool on this idea. We take search results from the Foursquare API and array them around the user at the center

And yes, that prototype is publicly available 🙂

A New Kind of Map: It’s About Time →
TimeMap Prototype →

Spark: A Typeface for Creating Sparklines in Text Without Code

Spark is a typeface for creating sparklines in text. It uses OpenType’s contextual alternates and requires no Javascript, though it does require a modern-ish browser that can make use of OpenType features in text.

Spark data needs to be formatted as comma-separated values, with curly brackets at both ends of the set, e.g., {30,60,90}. You can also have numbers at the beginning and end of the set, which are useful for providing the start and end points, e.g., 123{30,60,90}456 – Spark has numerals built in.

Really neat!

Spark: A typeface for creating sparklines in text without code (GitHub) →
AtF Spark →

D3 in Depth: Rendering Geographic Information

D3 in Depth has dedicated a chapter to rendering geographic information.

D3’s approach differs to so called raster methods such as Leaflet and Google Maps. Typically D3 requests vector geographic information in the form of GeoJSON and renders this to SVG or Canvas in the browser.

D3 in Depth: Rendering Geographic Information →

Uber Visualization Nights: deck.gl

During the first “Uber Visualization Night” on June 20, 2017, Nicolas Belmonte from Uber’s Data Visualization team gave a nice introduction to the aforementioned deck.gl:

Every Solar Eclipse Happening in your Lifetime

The Washington Post has created a nice article on the upcoming solar eclipse that will cross the United States

On Aug. 21, a total solar eclipse will be visible from the contiguous United States. It’ll be the first to traverse coast to coast in nearly a century. There will be 69 total solar eclipses visible from somewhere on the planet in the next 100 years, but only a few will be visible from North America. See how many total solar eclipses are left in your lifetime

The article also contains some a very neat visualisation of all upcoming eclipses across the glove.

Here’s every total solar eclipse happening in your lifetime →

Sidenote: VOX have created a nice piece on why a total solar eclipse, like the upcoming one, is such a big deal:

Exploring interdependencies in global resource trade

The volume of natural resources traded globally has increased over 60% since the turn of the century, reflecting and reinforcing new economic and geopolitical realities and bringing new environmental and social challenges – as well as opportunities. Now everyone can explore these fast-evolving dynamics through Chatham House’s comprehensive and accessible data and insights into resource trade.

Tightly executed data visualisation … and it’s interactive too! Very, very, nice work!

Exploring interdependencies in global resource trade →

The problem with maps // Playing with Projections

One of the core ideas covered in my talk named “Geoshizzle” on mapping is that the Mercator projection is way overdue. It’s main feature of preserving angle measurements is no longer feasible in this time and age (it was back when you were sailing a boat to get somewhere), and it’s distortion of areas has affected how we perceive the size of the world (e.g. Greenland and Antarctica really aren’t that big).

Michael Davis has created a really good article on this, filled with visualisations using Tissot’s indicatrices demonstrating the effects of each projection.

Pictured above you can see Tissot’s indicatrices drawn onto a globe, an equirectangular projecten, and the Mercator projection

A Frenchman named Tissot came up with something fancy. The general idea was to characterize local distortions; To show you what a small circle would look like when moved from the globe to the map.

The coolest part of the article/site is that the visualisations are interactive: you can give each globe a spin and simultaneously see how (the distortion of) the linked projection is affected by it.

The problem with maps →

👉 Want to see how the Mercator Projection affects the shape of a country when drawn on a map? Play the interactive Mercator Puzzle to find out.

(via Lensco)

Data Driven Depression – Determining Radiohead’s Most Sad Song

Radiohead has been my favorite band for a while, so I am used to people politely suggesting that I play something “less depressing.” Much of Radiohead’s music is undeniably sad, and this post catalogs my journey to quantify that sadness, concluding in a data-driven determination of their most depressing song.

The result: “True Love Waits” from their latest album “A Moon Shaped Pool” is the one.

The score was determined using R, the Spotify API, and the Genius Lyrics API

Data Driven Depression: Radiohead Song Sadness by Album →
Finding the most depressing Radiohead song →