Flow-vis for Net-A-Porter Apr 2023

Formula 1 engineers use flow-vis paint to see air flow. It’s a simple technique that turns something hidden, visible. It can also be beautiful. Acting on that inspiration, this is what a day’s trading at Net-A-Porter looks like rendered in flow-vis.

A flow field is a grid of forces acting on objects passing through that grid. I learned about flow fields from Charlotte Dann and Tyler Hobbs, both generative artists who use them to produce visual effects. Engineers also use flow fields to model physical forces in simulations.

For the Net-A-Porter visualisation I generated a flow field based on product and trading data. Each product was represented by a force derived from its sales and views. The position of the force was based on the product’s age and price.

I was under the illusion that this would produce something that looked like air flowing over an F1 car. But no.

The flow field had too many extreme forces. The “air” was getting stuck going back and forth between forces. I was able to get something that looked more organic by limiting the maximum strength of a force, but still not what I was aiming for.

To remove the extreme forces I normalised the data, basing the forces on percentiles to provide an even spread. I added momentum to the air, meaning even a big force wouldn’t completely change its flow. It still didn’t look like what I had in mind. But I think it works, like threads of material under a microscope? Or maybe hair?

Given that image was based on a single days’ trading, I thought it would be interesting to see what a whole month looked like.

I’ve been asked if I could show specific things, product categories performing well, peak age of product performance or how a sale period might look. All would be possible, but could be seen much more clearly on a simple graph. My priority was to come up with something based on data that looked pretty rather than being insightful. It’s ok that this visualisation is ultimately meaningless.

Notes

If you’re interested in flow fields or any kind of generative art, I can’t recommend Charlotte Dann and Tyler Hobbs more highly. They are both real artists, producing beautiful things and are amazingly generous in sharing their techniques.

I use p5.js to play around with things like this.

Thanks to Kristian for organising the Hackday which I made this for and everyone else for taking part and coming up with much more useful ideas.

Algorithmic Twombly

My favourite things at the Louvre Abu Dhabi were Cy Twombly's Untitled I-IX paintings. They're structured but chaotic and beautifully imperfect.

Flow-vis for Net-A-Porter

What does a day's trading at Net-A-Porter look like? Taking inspiration from Formula 1's use of flow-vis paint, I came up with a visualisation for a YNAP hackday.

YNAP Hackday Poster

The most significant colours sampled from the product images of the top 1024 clothing products on Net-A-Porter, organised by hue.

Should Have Been Listening to Phoebe Bridgers

Spotify's Wrapped is very shareable but what if it took a longer term view? What if it considered the full thirteen years I've been with Spotify?

My Favourite Net-A-Porter Colour is Black

Net-A-Porter's Spring Summer 2022 marketing campaign, "Go for Bold", centred around a collection of colourful products. Marketing wanted to add a technology element and one idea was to use palettes as a route to finding products. Ultimately this was binned, but I built it anyway.

Has Roger Federer Perspired?

That Roger Federer does not sweat had become ingrained thinking, the sort of idea we were looking to challenge. Was it real or just a lazy cliche? We had IBM’s Wimbledon match data for all the top players and using Weather Underground we pulled in temperature data for those matches. This let us see the number of matches played by player and temperature.

Physical Web and Physical Meetings

As an experiment in using the Physical Web I wanted to create a voting system for physical meetings. A meeting would have a current question and attendees could vote with one click. There would be no entering URLs, downloading apps, or scanning QR codes.

Hello!

I'm Darren Shaw. I work as a software engineer at a tiny bank in London. I previously worked at Net-A-Porter and IBM. These are my side projects. Away from work I also play at being a portrait photographer.