Maps are some of the most shared and sought after forms of visualisation. In this video, I walk through an example that visualises unemployment data at the US county level. The code was updated from this bl.ocks.org v4 example to use d3.js version 7. The walkthrough touches…
This screencast shows how to code a generate fabric patterns and visualise them as shirts using SVG and D3js. The patterns are composed of images gathered from an archive of botanical watercolours held by the US Department of Agriculture. For some context about the project I've written a post about…
This screencast is part 1 of 2. It shows how to scrape imagery and data from the USDA's online collection of pomological watercolours. This sets up an imageset to be used in the generative pattern designer. For more context on the project, you can read my previous post. The scraping…
This shirt was designed by code. More accurately, the fabric pattern was composed with the help of a generative design tool. It randomly selected and arranged images from the US Dept. of Agriculture's Pomological Watercolour collection to visualise hundreds (if not thousands and thousands) of different shirt designs. In my…
A code-walkthrough of one of Mike Bostock's d3.js examples, Pannable Chart. In this video, I look at a fairly simple area chart, with the added twist of a scroller to pan across the large area created by this visualisation. The walkthrough covers the CSS that provides this kind of…
The second of two parts, this video covers the front-end steps in creating a map of the UK's oldest trademarks. Here we visualise the trademarks data we gathered in part 1 using D3js by rendering a map of the UK with postal area boundaries, labelling and then filling with the…
The first of two parts, this video covers the data-gathering/prep side in creating this map of the UK's oldest trademarks. How do you interrogate a 1M+ row CSV with (almost) all the trademarks filed for registration in the UK? In this video, we take a look at the data…
A map showing the oldest trademark for each postcode area in the UK . This data comes from the IPO which maintains a register of all the trademarks since the system started back in 1876. I'm currently in the process of recording two screen-casts on creating this data-viz. If you'd like…
This video is an introduction to getting data from Companies House. It shows the steps of how you can get company details using both the web interface and the API. In it, I discuss the limitations of the API, particularly when it comes to searching and retrieving non-standard details on…
A mostly introductory talk about D3.js at the Edinburgh.js monthly meetup. Contents: * Is D3 a charting library? What is it good for? * A taste of capabilities- what can the library do? * Core concepts (selections & data bindings) * Examples of d3.js in action * 'Tech Companies in Edinburgh' data visualisation…
A data visualisation exploring the growth of the tech industry from 1980 to 2022. Each dot on the graph represents a company incorporation in the city. This visualisation was created for my talk on Principles of D3.js at the Edinburgh.js Meetup (Summer 2022).…
Over the past few years, I've particularly enjoyed teaching coding and tech skills. This has been the case whether I've been teaching established developers a new framework, or helping newbies log that first 'hello world'. Regardless of how I spend most of my working days, I know I'll continue to…