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 […]

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 […]

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 […]

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 →