--- title: "Data Recipes #1 Metro Maps" description: "Data Design Blog: Here is out 1st data recipe. Learn how to create an interactive train map. With just a sprinkle of coding and Mapbox" image: https://lh7-us.googleusercontent.com/vYIK_YRdPkT_QFdXC8UD6ZqhvVmwg-XcH5pgIfcXJ9q3ezZ5DKvEEpSybCXMOrr8AHftsJ3JY-0gGmNJfuEQYnM4RbOpFV0vbmU5ziS15RYHkKXc90SUf6JOVWDXWVmMYBDJp33OIXbokeR2rJoB4wM --- [Skip to main content](https://blog.bestiario.org/a-little-data-recipe-1#main) [![Bestiario_Logo_RGB_White (1)](https://blog.bestiario.org/hs-fs/hubfs/Bestiario_Logo_RGB_White%20(1).png?width=150&height=31&name=Bestiario_Logo_RGB_White%20(1).png) ![Bestiario_Logo_RGB_White (1)](https://blog.bestiario.org/hs-fs/hubfs/Bestiario_Logo_RGB_White%20(1).png?width=150&height=31&name=Bestiario_Logo_RGB_White%20(1).png)](https://www.bestiario.org/) - [Home](https://www.bestiario.org/) - [About](https://www.bestiario.org/about/) - [Blog](https://blog.bestiario.org) - Show submenu for Resources Resources - [Data Visualization](https://www.bestiario.org/data-visualisation/) - [Contact](https://www.bestiario.org/contact/) Open main navigation Close main navigation - [Home](https://www.bestiario.org/) - [About](https://www.bestiario.org/about/) - [Blog](https://blog.bestiario.org) - Show submenu for Resources Resources - Resources - [Data Visualization](https://www.bestiario.org/data-visualisation/) - [Contact](https://www.bestiario.org/contact/) # Data Recipes #1 Metro Maps # Data Recipes #1 Metro Maps ![Bestiario](https://blog.bestiario.org/hs-fs/hubfs/Mask%20group-3.png?width=50&height=50&name=Mask%20group-3.png) by [Bestiario](https://blog.bestiario.org/author/bestiario) November 22, 2023 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](https://twitter.com/TTinan/status/1725785183855472671) the other day!   [![New call-to-action](https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/143346230/63b5e983-0d8a-469f-96d2-87cecb602bd8.png)](https://hubspot-cta-redirect-eu1-prod.s3.amazonaws.com/cta/redirect/143346230/63b5e983-0d8a-469f-96d2-87cecb602bd8) 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](https://london.metro-memory.com/) 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. ![](https://lh7-us.googleusercontent.com/PLBzqLQYCR7h5xWfSJ9z18XWIeo9fE1YTbAD7OqJrHvVM6jBuBkLzacaN98HTfaQ0eD0suRK2bmQccWaTPKlfmopoovyv3DR8ndlyFHT37aLtrs6_f2qn2GvEEPOPbil0j99I0xJvrZQsKSh0sxRE3c)![](https://lh7-us.googleusercontent.com/2fLC3kbWLrMlhwKzwvERsJKkpdrq90HemW1WASy5nZbazd7hNlQ4HwRh5_9t3T2iKM65htc5yg06lc8zbf1TtEWSt_IQXF5MB1_fP9pDDh7t53H8L4U0D6xX8Tj2FDfsKrdjDco9TWUAJ0vuTenG74M) Then, distribute it nicely on the screen (oh! And don’t forget about smaller screens). ![](https://lh7-us.googleusercontent.com/vbynIVmwa2G0Skf7-JNalj4XHLb8T5yj4RSo2SFt2K0chnoviIeRUSMkbsL7tFxKQGlhVJOD0HjhheE0SZO608x7BUOPcA-7w_CRecTRt8JQcp3TjWGBI_aIKJKkdzDzwZYIKSboe1-XJwUMXcJU9SQ) 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! ![](https://lh7-us.googleusercontent.com/T5aO9POvGsy1_j-O7WeGy4HqrdL_lI4GKbrrTadRksmFvtMTXqdUxrGqKSUnMTjytM_kqmvE1MIK1kXSETW81bQ26w40Rrkoq8O9t6YPDAW1UD5tQRGFYwjD8SwOkCqWiBlrgzg-deTTE9OflbFBRVY) After that, mix it all together until you have the desired texture. ![](https://lh7-us.googleusercontent.com/25qTzfLmAJuy0Z59LY-DsGdOqr4TiYNfRUmBJM4bqAXp5E8DZvM-RjoT7hJKQe2WgUpIiBzyKDnKq835e1JHgfcHEwV_dKlqHvxBJRAQzMvjRK195h9UaVMT6DnHctJctgTKB20jSwQ4KNbiZ6cpPtQ) 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?  ![](https://lh7-us.googleusercontent.com/vYIK_YRdPkT_QFdXC8UD6ZqhvVmwg-XcH5pgIfcXJ9q3ezZ5DKvEEpSybCXMOrr8AHftsJ3JY-0gGmNJfuEQYnM4RbOpFV0vbmU5ziS15RYHkKXc90SUf6JOVWDXWVmMYBDJp33OIXbokeR2rJoB4wM) Or an even more simplified map version? The final choice is yours.  ![](https://lh7-us.googleusercontent.com/5-uku7-lr8Rd1BXwpay1NTF225mYtqZvIdKUfhlYPyinmZ89vnrqJkhs6kR2J0EvN5YBPVzKCgSEexcN-6rp9Dq4XPb-lzu2SzJ2blA43ajctzK7FsdCaLUYYgKOOjxzggLBfYijkLCeXt8ed3hH4EI) ![](https://lh7-us.googleusercontent.com/5JmOXazf2t1BHJH2qQQZI3ZgcHxHcefn3U2xy-c7DOOrsXNusChdshwTIJsV6asC6aT9wMcqxz4GJeAon4lfRTLUe1e07VpjmAkBV1betZoKilIahJktBZkfV9O74xAkF1A7SX1wxEHCfdBd6SYRu90) Data wizard Martí in his natural habitat. Thanks for reading!    Github link: [https://github.com/acamposuribe/p5.brush](https://github.com/acamposuribe/p5.brush)   [![New call-to-action](https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/143346230/a56b7e7a-f5ee-44e1-ac97-699d716b3745.png)](https://hubspot-cta-redirect-eu1-prod.s3.amazonaws.com/cta/redirect/143346230/a56b7e7a-f5ee-44e1-ac97-699d716b3745)   ###### Tags: ![Bestiario](https://blog.bestiario.org/hs-fs/hubfs/Mask%20group-3.png?width=50&height=50&name=Mask%20group-3.png) Post by [Bestiario](https://blog.bestiario.org/author/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! [![Bestiario_Logo_RGB_White (1)](https://blog.bestiario.org/hs-fs/hubfs/Bestiario_Logo_RGB_White%20(1).png?width=200&height=41&name=Bestiario_Logo_RGB_White%20(1).png)](https://www.bestiario.org/) ©2026  All rights reserved. [Privacy Policy](https://blog.bestiario.org/privacy-policy?hsLang=en-gb) - - - ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Bestiario", "url" : "https://blog.bestiario.org/author/bestiario" }, "dateModified" : "2024-01-31T12:17:14.183Z", "datePublished" : "2023-11-22T14:49:03.000Z", "headline" : "Data Recipes #1 Metro Maps", "image" : [ "https://lh7-us.googleusercontent.com/vYIK_YRdPkT_QFdXC8UD6ZqhvVmwg-XcH5pgIfcXJ9q3ezZ5DKvEEpSybCXMOrr8AHftsJ3JY-0gGmNJfuEQYnM4RbOpFV0vbmU5ziS15RYHkKXc90SUf6JOVWDXWVmMYBDJp33OIXbokeR2rJoB4wM" ], "mainEntityOfPage" : { "@id" : "https://blog.bestiario.org/a-little-data-recipe-1", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://blog.bestiario.org/hubfs/Bestiario_Logo_RGB_Black.png" }, "name" : "Bestiario" } } ```