Visualizing Data from the Spotify API with Infogr.am

boombox

This post will go over how to connect with the Spotify API to collect information about artists using Python 3 and then create an infographic from the data Spotify returned.

Preview of what we will be creating 🙂

Installing Requests

In order to play around with Spotify’s API in Python to gather data about artists, I installed Requests: HTTP for Humans via the terminal using: $ pip install requests . Note:  Requests is a library that can be used to make API calls and is not limited to use only with the Spotify API.

spotify.py

Note: You can explore documentation for the Spotify web API here



The Spotify API describes items returned from search as:

KEY VALUE TYPE VALUE DESCRIPTION
items an array of objects The requested data.

artist object (full) (from Spotify API)

KEY VALUE TYPE VALUE DESCRIPTION
external_urls an external URL object Known external URLs for this artist.
followers A followers object Information about the followers of the artist.
genres array of strings A list of the genres the artist is associated with. For example:"Prog Rock", "Post-Grunge". (If not yet classified, the array is empty.)
href string A link to the Web API endpoint providing full details of the artist.
id string The Spotify ID for the artist.
images array ofimage objects Images of the artist in various sizes, widest first.
name string The name of the artist
popularity int The popularity of the artist. The value will be between 0 and 100, with 100 being the most popular. The artist’s popularity is calculated from the popularity of all the artist’s tracks.
type string The object type: "artist"
uri string The Spotify URI for the artist.



Note: Spotify’s API will also return artists that had names that formerly matched query. For example: Boosie Badazz, G Herbo and Bow Wow no longer user ‘lil’ in their stage name however, they are included in this dataset.

returns:




returns:

Visualize Data

  1. Create a free Infogr.am account.
  2. Select ‘Chart or Graph’

create chart or graph

3. Select the type of chart or graph you would like to create

4. The chart will be created with dummy data. Double click on the chart to pull up an black bar with an ‘edit’ button. Clicking edit will allow you to manipulate the data.

select type of chart

default data barchart

Screen Shot 2016-06-07 at 7.40.12 AM5. Here’s the dummy data that infogr.am automatically includes:

default data

6. Copy and paste the output of:print(artist['name']) and
print(artist['popularity'])

paste data

7. The result is a beautiful graphic will all of the data that you pasted into infogr.am. Now you can play around with the visual aesthetic of the graphic.

Example of Infogr.ams I created from this data

(fyi: set limit to 10 for this one — the other two examples have 50 datapoints)

Monica

Monica

Monica started Black Tech Diva to document her journey of learning more about programming and web development. If you'd like to chat, feel free to tweet her: @waterproofheart.