Endangered Species visualized in Pixels

Imgur user JJSmooth44 scraped The Animal Planet endangered animals list and generated photos of several animals where each “pixel” represents one actual animal running around. The more pixelated the image, the closer it is to extinction. There are about 2500 Bengal Tigers, so the picture above consists of 2500 “pixels”: The Amur Leopard is less […]

Mercator – It’s a flat, flat world!

In the 16th century, Gerardus Mercator, a Flemish cartographer devised a new way of depicting the world on a flat plane. We set off to explore his map in order to illustrate his biggest blunders, unearth curious facts and explain the advantages that make this representation of the globe still relevant today. I especially like […]

Chart Design Guidelines at City Intelligence

At the City Intelligence unit at City Hall almost anyone can create a data visualisation. To keep everyone in line they created Data Design Guidelines: Effective communication of evidence and data through information design and data visualisation, is obviously important to help inform policy internally, but it is also just as important to help boroughs […]

AR Experiments: Flight Paths – A visualization of flight data that floats around you.

Flight Paths is an experiment that transforms your room into a flight path visualization. Touch any horizontal surface and explore as flights take off from JFK or SFO and fly around your space. AR Experiments: Flight Paths →

SEDAC Population Estimator

The Population Estimation Service is a Web-based service for estimating population totals and related statistics within a user-defined region. It enables users of a wide variety of map clients and tools to quickly obtain estimates of the number of people residing in specific areas without having to download and analyze large amounts of spatial data. […]

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 = () => { requestAnimationFrame(loop); analyser.getByteTimeDomainData(waveform); analyser.getByteFrequencyData(frequencies); ctx.beginPath(); waveform.forEach((f, i) => ctx.lineTo(i, f)); ctx.lineTo(0,255); frequencies.forEach((f, i) => ctx.lineTo(i, 255-f)); ctx.stroke(); } loop(); I especially […]