Ucl 2020 Lectures

Intro This series of lectures aims to build foundational skills in modern programmatic data vizualization. There are three main parts: Exploratory dataviz with Python notebooks and chart libraries like Matplotlib, Seaborn and Plotly. Moving the results of those explorations onto the web with Plotly, a powerful dataviz tool. Crafting web-based dataviz with D3 and JavaScript. D3 being by a big margin the largest and most popular dataviz library for the web.

UCL Dataviz Workshops 2020

The course structure and some online resources for the UCL Business Management Dataviz module. Due to the Covid disruption and to accommodate the majority of students in time-zones to the east of the UK, lectures/workshops will run from 10am to 1pm London/UK time. In order to reduce the intensity of a three hour online session, the workshop will be interspersed with mini challenges. Timetable 1 (Friday 29 May) 10:00 - 13:00 Introduction to the Module, stating key learning aims, workshop structure and covering any tools that will be used (e.

Visualizing Walking Gaits from Smartphone Sensors

The phone in your pocket isn”t just recording your position by satellite and wifi signal (and sending it on to who knows where?), it also has little accelerometers which monitor the way the phone moves. This visualization takes data from an academic study, showing that phone users can be distinguished by their unique walking “signature”.

A Dynamic D3 Filter Menu

A recent job required a menu that lets one progressively filter a packet of row-column data, drilling down to items of interest. It was refreshing to use D3 outside of charting and it dealt with the necessary DOM manipulations with ease.

Historic UK Weather

I used Python and D3 to transform some old pages of row-columnar data provided by the UK Meteorological into an animated coloured map, showing hours of monthly sunshine, millimetres of rain and maximum temperature.

Visualizing the UK's Establishment

This chart shows the findings of a recent commision into equality in Britain. It found that a small, self-perpetuating elite, attendees of the “right” schools and universities (Eton, Oxbridge etc.) has disproportionate influence on Britain”s levers of power. From senior judges to the editors of national newspapers, this group dictates our national discourse and locks out those not born to privilege.

Warped England: Why young people can't buy houses anymore

A D3 maps visualization of the change in the ratio of English house-prices to household incomes over the period 1997-2012. By warping the map of England to reflect the increase in this ratio and reciprocal decrease in households” house-buying power, we see the dramatic economic disempowerment of current and future English generations.

D3 CSS3D Chess Games

Sometimes it”s good to imagine something a little exotic and then try and realize it using the tools to hand. So here we have a simultaneous chess tournament featuring 54 random games from the great Kasparov vs Karpov series of the 80s and 90s. Using D3, THREE.js, CSS3D and a few helpers they are superimposed on a giant rotating cube because, why not?

D3 Chess Board

Packed circles are a good way to visualise certain tree structured data. Here I use a dataset of the 135 chess games played by the titans Kasparov and Karpov. By representing the opening moves as packed circles certain relationships become clear. We can also see how the two players revised their strategies over time.

D3 Chess Board

I needed a chess-viewer for a larger data-viz project I’m working on ( see here ) and D3 seemed like the perfect tool for the job. The viewer takes lists of moves (SAN format) and creates an animated play. It could be a nice base for something more full-featured. Once again I was impressed by how easy D3 makes this kind of project.

D3 Chess Parasets

An attempt to capture the multi-dimensional complexity of chess openings, using the dataset of all games played between chess titans Kasparov and Karpov.

D3 Chess Squares

Using the Kasparov-Karpov data-set, this visualisation shows relative occupation times for each square. The occupation times can be filtered by type of piece (knight, bishop etc.). Comparing games with Kasparov playing white with those of Karpov shows a clear difference, reflecting the different playing styles and strategies of the two.

Gothic Window Generator

A rainy bank-holiday Monday was a good excuse to try and indulge my aesthetic whims. Something to overload the frontal cortex with colors and symmetries, something a little like a Gothic Rose Window in fact. Once one begins to get D3, rolling this kind of stuff together gets a lot easier and faster. I liked the effect so much I added the ability to change number of segments and number of triangular elements in each.

Brush Filters with Active Charts

A recent client wanted a way to filter a large dataset of objects while seeing any changes immediately reflected by data-selective charts. Using Angular directives for two-way data-binding and Bootstrap for placement and dimensions, a few lines of XHTML is all it takes to build a console.