data, data journalism, data visualization, HTML, instagram, Interactivity, Javascript, maps, social media

[MUSIC MAP] My summer through Instagram pictures and Spotify songs

I have been experimenting with Instagram, again. This time, I have established a relationship between a picture of the day and a song recently discovered on Spotify through the Discover Weekly feature. The below post would be an example:

Picture + Name/lyrics of the song  + 🎶  + hashtags

 

After gathering the data, I mapped these posts using the Mapbox JS library and I made each song playable on the same window. This is the result:

output_5AfmIU

Below I explain the process of collecting and mapping the data: 

Continue reading

Standard
CSS, data, data journalism, data visualization, HTML, Javascript, maps

How to: build and customise interactive maps on Mapbox

Mapbox is an open source platform that allows users to create, customise and embed maps on websites and visualisations. Their developing tools such as APIs and libraries offer a great interactivity for experienced and beginners developers.

output_8iEyPG

Here I explain how to build and share the above map in 6 steps:

Continue reading

Standard
data, data journalism, data visualization, HTML, Interactivity, maps

How to: create maps with interactive tables from Google spreadsheets

I just discovered Awesome Table, a tool that allows users to visualise Google sheets into maps, tables, graphics, cards, etc. without coding skills.

This gadget contains multiple extensions that make interactivity easy. Geocode, for instance, is an add-on that geolocalises data from the spreadsheet and creates a map with interactive tables.

Here I explain how to do it in 6 steps:

Continue reading

Standard