Andy Barefoot - Digital Professional

Andy Barefoot

Digital professional with over 15 years experience of programming, management and digital strategy at Condé Nast and adidas.

Personal Projects

CSS Grid: Rodchenko poster layout

A CSS Grid layout experiment on CodePen using CSS Grid and CSS transformations and perspective.

The layout is based on the famous 1924 poster by Alexander Rodchenko for the Gosizdat publishing house.

CSS Grid: Animated lizard tiles

An experiment on CodePen combining CSS Grid and SVG animation using D3.js.

The tessellated lizard tiles are based on a painting by M. C. Escher.

CSS Grid: Diamond Grid layout

A CSS Grid layout on CodePen with a diagonal grid that fills exactly the browser window and orders the items appropriately.

The user can specify the total number of grid items and the number of items per row. JavaScript is used to resize the grid and place the items in the correct order.

CSS Grid: Masonry layout with CSS Grid

CSS Grid makes laying out content in a grid much easier and does a good job of Masonry style layouts as long as you are able to specify the size of each grid item in advance.

I wrote an example of how you can use a little bit of JavaScript to automatically resize the grid items to get a perfect Masonry layout with CSS Grid.

Data Vis: Game of Thrones Allegiances

To play the Game of Thrones you will need allies. But when those allies are Petyr Baelish, Roose Bolton or Alliser Thorne you will also need stab proof armour.

This map shows all the major houses and institutions of the Game of Thrones world with the many, many allegiances and connections to the hundreds of characters in the show.

The visualisation was built using D3.js using data from the excellent Game of Thrones wiki.

CSS Grid: Grid of Thrones

The dilligent and learned maesters at the excellent Game of Thrones wiki have documented everything you could ever need to know about Game of Thrones. This includes every character who has appeared in the show. From Daenerys Tagaryen to Othell Yarwyck to "Dwarf Hunter 2". If they speak a line or even if they are just an interesting corpse they will be on the site.

I used this data as the basis for an experiment using CSS Grid to create a grid whose elements expand to show more content when clicked.

The grid was built using D3.js to load in the data and populate the grid with content.

Data Vis: The Met Collection

The Metropolitan Museum of Art recently published to GitHub the details of 446,029 objects from their collection.

This data visualisation attemts to show the distribution of the entire collection by date and to show the difference in age depending on the type of artifact. For example, the majority of vases in the collection are from around the year 300 A.D or before.

The visualisation was made using D3.js after the raw data had been consolidated into JSON using PHP.

Data Vis: UFWC Map

Following on from my previous UFWC data visualisation I wanted to show the progress of the Unofficial World Football Championship using an animated interactive map.

The animation shows details of all 926 matches played so far as the map updates to show which teams have held or challenged for the title.

The visualisation was built using D3.js and JQuery and all the game data was sourced from the UFWC website.

Data Vis: Premier League

A data visualisation to show the distance travelled by each Premier League footballer to get to their current club. It shows the distance from the player's birthplace and the clubs they have been at along the way both individually and totalled for each club.

See which clubs cast their nets the furthest and which rely on the largest number of journeymen.

The visualisation was built using D3.js and JQuery and all the data was scraped from Wikipedia.

Javascript: Codepen

As I was spending more and more time playing with JavaScript it made sense to work directly in Codepen for some of the smaller experiements. At the moment it holds a few experiements with SVGs (dynamic scaling, animation and background images).

The amount of content here will continue to grow.

Data Vis: UFWC

The Unofficial Football World Championships is a project by Paul Brown that tracks the World Champions of football as if the title were decided in the same way as boxing, i.e a team remains champions until they lose a game.

My data visualisation shows all of the 918 "title decider" games that have been played so far showing how thetitle has jumped from nation to nation and continent to continent.

The visualisation was built using D3.js and JQuery and all the data was sourced from the UFWC website.

Data vis: Olympics 2016

A selection of data visualisations from the 2016 Summer Olympics.

Data was either manually collected from wikipedia or scraped in real time from the BBC medal table and then stored in MySQL and formatted to CSV or JSON files.

The visualisations were built using D3.js and JQuery using some of Mike Bostock's excellent examples as a starting point.

Data Vis: Cocktail Menu

An exercise in using D3.js and SVG to create data visualisations of cocktails and their ingredients.

Inspired by this original visualisation by Tatjana Dubovina & David McCandless I wanted to make an entirely dynamically generated version.

The data was taken from Wikipedia and is served in JSON from a MySQL database.

Each visualisation is generated programmatically from the data, including the drawing of the glass outline to create a menu of over 70 cocktails.

Data Vis: Valar Morghulis

Fans of Game of Thrones know that Valar Morghulis (all men must die) but when over 200 named characters have already gone to meet The Seven (or The Old Gods, or The Drowned God, or The Lord of Light, or The Many-Faced God of Death, or the Great Stallion, etc...) then it gets hard to keep track of the tragedy.

Fortunately Maester Barefoot has created a comprehensive record of all these deaths, whether violent, very violent or extremely violent.

Valar Morghulis shows every death and who was responsibly for the slaying. A kind of "butchery tree" if you like.

The data was scraped from the excellent Game of Thrones wiki and the data representation is implemented using Mike Bostock's marvellous D3 library.

Web: MP CoMParison

The site the Public Whip aggregates the data on how MPs in the UK parliament vote. They then group this by similar votes to provide an insight into how much each MP supports a particular policy.

However at the moment the site does not provide a tool to enable users to easily compare MPs and see their relative support for each issue.

I made a small site that scrapes the data from the Public Whip and allows the user to compare support for related policies across groups of MPs. The tool also allows the user to select any policy or MP and add them to the comparison.

The site was built using PHP to scrape the data and serve via API, and AngularJS to provide the interactive front-end functionality.

CoMParison - Compare MPs on their support for key policies.

Web: Social Feed

I updated the implementation of the social feed on this site to use AngularJS.

Due to limitations with the Instagram API I scraped my content directly from the Instagram site and wrote an API in PHP to allow the content to be pulled into the site.

I detailed the approach in a post on Medium.

Mobile Gaming: Ski VR

Ski VR is a quick VR demo built for Google Cardboard but also playable without a headset.

Slide gracefully down the mountain between trees and alpine chalets in a Virtual Reality winter wonderland.

Ski VR was built in Unity with the Google Cardboard SDK and uses 3rd party graphical assets.

Ski VR on Google Play.

Mobile Gaming: Color Hex

Color Hex is a mobile puzzle game for Android and iOS built and published uing the Unity platform.

The player must try and match patterns by mixing colours together on a hexagonal grid. As the patterns get more complicated the puzzle becomes more difficult.

There are 2 play modes with a combined total of 222 levels.

Color Hex was built in Unity which supports exporting to both iOS and Android platforms.

Color Hex on Google Play.
Super Color Hex on iTunes.

Mobile Gaming: Super Dice

My first attempt at using the Unity platform to create a mobile game was a mobile version of the dice game Farkle.

Super Dice

Web: All The Sneakers

In-progress search engine of sneakers collating and comparing sneakers from a number of eCommerce sites.

Regularly spiders a number of sites and compares prices where identical sneakers appear on multiple sites.

The spiders and APIs are built in PHP, the database in MySql and the front-end uses SASS for the CSS.

All The Sneakers

Web: Winstagram

More and more people are posting photos on their social web blogs. But most of them are not very good photographers. Or have poorly made cameras. The colours come out funny, the edges are all crackly and often some of the image is out of focus.

I have developed an app to restore these poor quality photographs: Winstagram!

Web: We can't go on like this

Good old David Cameron. He's so suave yet so caring. he just wants the best for the country. He says so in his lovely new poster campaign (NSFDuring lunch).

Deface David's poster with your own words with "Make your own David Cameron poster".

Go on, have a go. You know you want to. Make it look like he is saying rude words. Hurr hurr hurr!

Web: Malcolm Tucker

Combines the David Cameron poster generator with the foul-mouthed tirades of Malcolm Tucker, sweary spin doctor from The Thick of It.

A random choice of blue bon-mot is substituted every time you click the "Tuckerise" button so click away. However, be warned. He is a very very rude man and if you don't like naughty words you probably won't like this.

Blog: Invented by the English

If it was invented, it was probably invented by an Englishman.

A retired blog detailing all the greatest inventions of the English.

Work Highlights

The Scene

Condé Nast wanted to provide a showcase for the large amount of high quality video content made across the many different titles and countries.

The Scene brings all that content together using the Brightcove platform to serve the videos.

The Scene Germany

WIRED Germany

I was Product Owner for the digital launch of WIRED magazine in Germany.

WIRED Germany is the first Condé Nast title to have a digital membership model with some content only visible to subscribers.

We launched a responsive website with the emphasis on giving the long form in-depth articles the presentation they deserve.

WIRED Germany

Condé Nast Hackathon

I took part in the first Condé Nast International Hackathon joining with the "F’Nito" team to help them develop their cross-platform content concept.

F’Nito enables the user to read or listen to an article on any of their devices seamlessly switching from text to audio and back and maintaining their place as they switch devices.

F’Nito won the first prize at the hackathon.

Condé Nast Hackathon

As Director Digital Brand Platforms I led the implementation of the global redesign for the Global Marketing department.

The site integrates a global CMS that supports each of the local markets as well as the global team.


adidas Go All In

The adidas Go All In platform highlighted the breadth of the adidas brand across all sports as well as the Street and Style side of the business.

I was the adidas person responsible for the technical implementation of the platform and CMS.

The site was launched globally across over 40 markets.

Go All In

adidas Store Finder

The adidas Store finder was the first responsive functionality on the platform, designed to display well on both web and mobile devices.

As well as the front end implementation with Google Maps we also used the Google API to tidy up and validate the thousands of store records which until that point had been maintained manually on disparate documents throughout the organisation.

We developed a central database with an easy to use buusiness interface and provided an API allowing store data to be integrated into marketing campaigns wherever they were integrated.

adidas Store Finder

The Webby Awards

The redesigned home page won the "Web: Best Home/Welcome Page" at the Webby Awards 2009.

I worked on the project from the adidas side with the agencies Molecular and de-construct.

The Webby Awards

Social Feed

{{ userNameString( }}{{ * 1000 | date:'d MMMM yyyy' }}
{{ instagram.caption }}

{{ instagram.caption }}