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: 

1. Gathering data

There are two ways of storing the data from Instagram:

A. If you know it beforehand, IFTTT recipes are very useful. This website syncronises apps and devices such as Twitter, Instagram, Spotify, Google Drive and much more to collect the data .

I created a recipe that stored each published post by me on Instagram on a Google spreadsheet:

Screen Shot 2016-08-18 at 10.32.05

B. If you aim to gather published posts, you can import or scrap them using Import.io or other tools.

Import.io allows creating an API from the data o to download it as JSON and CSV:

Screen Shot 2016-08-14 at 22.58.12

URL data. Download as CSV or JSON

Screen Shot 2016-08-14 at 22.58.28

API created by Import.io

Read this previous post to know how to use Import.io.

2. Creating previews for Spotify tracks

Spotify presents a Spotify Play Button that gets the code from a song URL ready to be embed on WordPress or another website. However, this button opens the song in a new window and on the user’s Spotify account.

The aim was to listen to the songs on the map, so I used Spotify API. It offers a console that allows developers to get the documentation from a track:

This slideshow requires JavaScript.

Placing the preview_url within the <source src=””> code will display the song on the same website rather than a new window:

Screen Shot 2016-08-14 at 23.20.28

Code

And this is the result:

Screen Shot 2016-08-14 at 23.22.23

 

3. Exploring the Instagram embedding code

The first idea was to embed the post on the map. However, the default code provided by Instagram wasn’t rendering.

I looked for more details through two append endpoints to the URL:

  1. /oembed (to have information about the post)
  2. /p/shortcode/media (to get the JPG)

Screen Shot 2016-08-14 at 23.24.48

Screen Shot 2016-08-14 at 23.24.56

Using /oembed

This solution wasn’t working. Instagram platform shows, again, its lack of flexibility. Finally, I decided to insert the link on each marker that opens the post in a new window.

4. Creating the map 

I used the Mapbox library, which provides code examples that can easily be modified by users.

From their examples:

You can change the data and add features:

Screen Shot 2016-08-18 at 12.11.13.png

And visualise the data as you want:

 

This example can be found on Github here.

5. Finding relationships

Using this information as an excuse, I tried Neo4j to find a relationship between the music in Birmingham, Girona and Barcelona.

Els Catarres was the most listened band this summer (attending to a concert in Girona might be the key!) and the connection between Birmingham and Girona. Even thought the result was a tiny and non-intimidating visualisation, it was an opportunity to jump into this tool and see how it works:

 

Conclusions:
  • I find the Instagram API frustrating. It’s very difficult to deal with the data and embed posts on websites apart from WordPress.
  • Mapbox has great examples but I find Google Maps API more flexible
  • The result show that I miss my home and Catalan songs!

 

Let me know what you think in the comments or at @mcrosasb.

Advertisements
Standard

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s