Some of the interactive code examples and demos in older posts on Creating With Data were originally hosted on Glitch, a platform for building and sharing live code projects. Recently, Glitch announced that it is shutting down its free hosting services. As a result, many of the embedded demos and…
Browsers are more powerful than ever! Now we can use FFmpeg + Resvg in the browser to save D3 animations as video files.…
How to map house prices in an interactive choroplath visualisation using d3.…
Part 1 of 2 posts on making a choropleth map of house sale data using d3.js and mapshaper.…
Over the past few weeks I've been dabbling with Nocode tool Bubble.io. I've played with Make, Airtable, and IFTTT before, but nothing as involved as Bubble. As a developer, Nocode holds two attractions, the promise of accelerated development, and second, the opportunity to empower non-technical colleagues. Introducing Timely Exports…
This is the 2nd post in a series about building Super Map World (SMW). SMW is a web-application featuring over 17,000 maps and map graphics. They're free and they're customisable using a map edit feature. Head over here for the first post of the series. To spend as much…
Super Map World is a site that offers over 17,000 maps and map graphics. They're colourful. They're free! And best of all, they're customisable using a map edit feature. It's one of the biggest side projects I've committed to. Over the course of the next few posts I'm going…
Last week I ran a webinar for The Data Lab Community. The aim of the webinar was to provide a hands-on introduction to D3, and cover: * What D3 is, and what it's not * Capabilities of the library * How to use 'data-bindings' to power your visualisations * How to manipulate SVG elements…
Figuring out where to start with a new programming language or framework can be challenging. Searching for advice can inundate you with long lists of prerequisites and concepts to learn. Forums will turn up tech veterans that demand newcomers "start from the ground up". The newcomers should know the fundamentals…
In this walkthrough, we look at the code behind this spinning globe graphic rendered to web canvas using D3.js. Links: * Spinning globe graphic * Code on Glitch * d3-geo documentation…
In this follow-up video, we add another method of filtering data on our doctors' practices map visualisation. If you're not too familiar with Leaflet or JavaScript in general, I recommend watching the first Leaflet.js video where we create our visualisation from scratch. You can find the complete map visualisation…
“A treaty of peace has been signed between Austria and Prussia” – the first message that was transmitted across the Atlantic via telegraph. That's the first connection that appears in this animated globe visualisation. It shows a timeline of various trans-Atlantic subsea telegraph connections starting with the first successfully laid cable…