Skip to main content

Welcome readers, to our first Data Recipe! Courtesy of one of our data wizards Martí here at Bestiario, who made a fun little game that caught lots of people's attention the other day!


New call-to-action

It's true that the metro might not top everyone's list of favourite modes of transport but there's an undeniable charm to it that resonates universally. In the heart of a bustling city, those lines are a common thread that connects us all. Everyone is fascinated by the maps originally created by Henry Beck, containing vibrant colours and straight lines, a simple vision of a city's complexity. 

Some weeks ago this website came to us, we loved it but there was an issue, we are not from London. How about we adapt this idea to our city? That initial idea is what drove this project. We love to collect, we enjoy remembering, and we all fancy a challenge; let’s merge all the components into a delicious website!

For this recipe, we will need the following ingredients:

  • Motivation, it’s what will drive the flavour
  • A spoon of code, always necessary in the 21st century kitchen
  • Maps and colours, this will add the special punch to the final result

First, let’s define the cooking mould shape. A good tip is to add some already liked graphic elements.

Then, distribute it nicely on the screen (oh! And don’t forget about smaller screens).

Now it’s time to define the data structure that will give the main flavour to the app. For each station, we have the following data:


“name”: “Catalunya”,

“coordinates”: [2.169, 41.387],

“lines”: [

{“lineName”: 1, “stationNumber”: 16}, 

{“lineName”: 3, “stationNumber”: 13},

{“lineName”: 6, “stationNumber”: 1},

{“lineName”: 7, “stationNumber”: 1}


“alternativeNames”: [“Plaça Catalunya”]


Once that is done, set aside and create a map style, we used Mapbox but make sure to use your favourite map provider. A simple gray map will do! Oh, and if possible no names, that way we prevent cheating!

After that, mix it all together until you have the desired texture.

And that’s it! Ready to serve. A great dish that can be enjoyed alone or with friends. Other serving suggestions? What about a crayon style for the map? 

Or an even more simplified map version? The final choice is yours. 

Data wizard Martí in his natural habitat.

Thanks for reading! 


Github link:


New call-to-action


Post by Bestiario
November 22, 2023

Receive news by email

Do you want to receive news and trends about the data visualisation sector? Subscribe to our newsletter!