Kevin-Mok/spotify-lib-vis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Set up artist bubble chart

Browse Source 
Major changes:
- Set up preliminary artist bubble chart, font too small
- Wrote shell script for resetting database
This commit is contained in:
Chris Shyi
2018-06-28 16:42:16 -04:00
parent f8bf751920
commit 8851c5ce25
8 changed files with 174 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
reset_db.sh Normal file
View File

@@ -0,0 +1,14 @@
# check if in virtual environment
# https://stackoverflow.com/questions/15454174/how-can-a-shell-function-know-if-it-is-running-within-a-virtualenv/15454916
python -c 'import sys; print(sys.real_prefix)' 2>/dev/null && INVENV=1 || INVENV=0
# echo $INVENV
# if $INVENV is 1, then in virtualenv
if [ $INVENV -eq 1 ]; then
rm spotifyvis/migrations/00*
sudo -u postgres psql -f reset_db.sql
python manage.py makemigrations
python manage.py migrate
fi

3
reset_db.sql Normal file
View File

@@ -0,0 +1,3 @@
DROP DATABASE spotifyvis;
CREATE DATABASE spotifyvis;
GRANT ALL PRIVILEGES ON DATABASE spotifyvis TO django;

81
spotifyvis/static/spotifyvis/scripts/artist_graph.js Normal file
View File

@@ -0,0 +1,81 @@
/**
* Draws the artist count graph as a bubble chart, and appends it the a designated parent element
* @param artistData: the artist counts data as an array of objects, of the format {'name': artist name, 'num_songs': 50}
* @param parentElem: the DOM element to append the artist graph to (as a string)
*/
function drawArtistGraph(artistData, parentElem) {
let margin = {top: 20, right: 30, bottom: 30, left: 40};
let width = 960 - margin.right - margin.left;
let height = 540 - margin.top - margin.bottom;
let color = d3.scaleOrdinal(d3.schemeCategory10);
let bubble = d3.pack(artistData)
.size([width, height])
.padding(1.5);
let svg = d3.select(parentElem)
.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "bubble");
let nodes = d3.hierarchy(artistData)
.sum(function(d) { return d.num_songs; });
let node = svg.selectAll(".node")
.data(bubble(nodes).descendants())
.enter()
.filter(function(d) {
return !d.children;
})
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.append("title")
.text(function(d) {
return `${d.name}: ${d.num_songs}`;
});
node.append("circle")
.attr("r", function(d) {
return d.r;
})
.style("fill", function(d,i) {
return color(i);
});
// artist name text
node.append("text")
.attr("dy", ".2em")
.style("text-anchor", "middle")
.text(function(d) {
return d.data.name.substring(0, d.r / 3);
})
.attr("font-family", "sans-serif")
.attr("font-size", function(d){
return d.r/5;
})
.attr("fill", "white");
// artist song count text
node.append("text")
.attr("dy", "1.3em")
.style("text-anchor", "middle")
.text(function(d) {
return d.data.num_songs;
})
.attr("font-family", "Gill Sans", "Gill Sans MT")
.attr("font-size", function(d){
return d.r/5;
})
.attr("fill", "white");
d3.select(self.frameElement)
.style("height", height + "px");
}

27
spotifyvis/templates/spotifyvis/artist_graph.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Artist Graphs</title>
</head>
<body>
<p>Logged in as {{ user_id }}</p>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="{% static "spotifyvis/scripts/artist_graph.js" %}"></script>
<script>
d3.json("{% url "get_artist_data" user_secret %}").then(function(data) {
for (let index = 0; index < data.length; index++) {
console.log(data[index].name);
console.log(data[index].num_songs);
}
// this is the data format needed for bubble charts
data = {
"children": data
};
drawArtistGraph(data, "body");
});
</script>
</body>
</html>

1
spotifyvis/templates/spotifyvis/audio_features.html
View File

@@ -37,6 +37,7 @@
* @return None
*/
function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem) {
// TODO: Not hard code the dimensions?
let margin = {top: 20, right: 30, bottom: 30, left: 40};
let width = 480 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;

5
spotifyvis/templates/spotifyvis/logged_in.html
View File

@@ -9,9 +9,12 @@
</head>
<body>
<h1>{{ user_id }}'s Graphs</h1>
<a class="btn btn-primary" href="/audio_features/{{ user_secret }}"
<a class="btn btn-primary" href="{% url "display_audio_features" user_secret %}"
role="button">Audio Features</a>
<a class="btn btn-primary" href="{% url "display_genre_graph" user_secret %}"
role="button">Genres</a>
<a class="btn btn-primary" href="{% url "display_artist_graph" user_secret %}" role="button">
Artists
</a>
</body>
</html>

14
spotifyvis/urls.py
View File

@@ -1,5 +1,4 @@
from django.urls import path, include
from django.conf.urls import url
from .views import *
@@ -9,11 +8,12 @@ urlpatterns = [
path('callback', callback, name='callback'),
path('user_data', user_data, name='user_data'),
path('admin_graphs', admin_graphs, name='admin_graphs'),
path('user_artists/<str:user_id>', get_artist_data, name='get_artist_data'),
path('api/user_artists/<str:user_secret>', get_artist_data, name='get_artist_data'),
path('artists/<str:user_secret>', artist_data, name='display_artist_graph'),
path('api/user_genres/<str:user_secret>', get_genre_data, name='get_genre_data'),
path('graphs/genre/<str:client_secret>', display_genre_graph,
name='display_genre_graph'),
path('audio_features/<str:client_secret>', audio_features, name='audio_features'),
path('api/audio_features/<str:audio_feature>/<str:client_secret>',
get_audio_feature_data, name='get_audio_feature_data'),
path('graphs/genre/<str:user_secret>', display_genre_graph,
name='display_genre_graph'),
path('audio_features/<str:user_secret>', audio_features, name='display_audio_features'),
path('api/audio_features/<str:audio_feature>/<str:user_secret>',
get_audio_feature_data, name='get_audio_feature_data'),
]

51
spotifyvis/views.py
View File

@@ -183,52 +183,75 @@ def admin_graphs(request):
update_track_genres(user_obj)
return render(request, 'spotifyvis/logged_in.html', context)
def artist_data(request, user_secret):
"""Renders the artist data graph display page
:param request: the HTTP request
:param user_secret: the user secret used for identification
:return: render the artist data graph display page
"""
user = User.objects.get(user_secret=user_secret)
context = {
'user_id': user.user_id,
'user_secret': user_secret,
}
return render(request, "spotifyvis/artist_graph.html", context)
# get_artist_data {{{ #
def get_artist_data(request, user_secret):
"""TODO
"""Returns artist data as a JSON serialized list of dictionaries
The (key, value) pairs are (artist name, song count for said artist)
:param request: the HTTP request
:param user_secret: the user secret used for identification
:return: a JsonResponse
"""
user = User.objects.get(user_id=user_secret)
user = User.objects.get(user_secret=user_secret)
artist_counts = Artist.objects.annotate(num_songs=Count('track',
filter=Q(track__users=user)))
filter=Q(track__users=user)))
processed_artist_counts = [{'name': artist.name,
'num_songs': artist.num_songs} for artist in artist_counts]
'num_songs': artist.num_songs} for artist in artist_counts]
return JsonResponse(data=processed_artist_counts, safe=False)
# }}} get_artist_data #
def display_genre_graph(request, client_secret):
user = User.objects.get(user_secret=client_secret)
def display_genre_graph(request, user_secret):
user = User.objects.get(user_secret=user_secret)
context = {
'user_secret': client_secret,
'user_secret': user_secret,
}
return render(request, "spotifyvis/genre_graph.html", context)
def audio_features(request, client_secret):
def audio_features(request, user_secret):
"""Renders the audio features page
:param request: the HTTP request
:param client_secret: user secret used for identification
:param user_secret: user secret used for identification
:return: renders the audio features page
"""
user = User.objects.get(user_secret=client_secret)
user = User.objects.get(user_secret=user_secret)
context = {
'user_id': user.user_id,
'user_secret': client_secret,
'user_secret': user_secret,
}
return render(request, "spotifyvis/audio_features.html", context)
# get_audio_feature_data {{{ #
def get_audio_feature_data(request, audio_feature, client_secret):
def get_audio_feature_data(request, audio_feature, user_secret):
"""Returns all data points for a given audio feature
Args:
request: the HTTP request
audio_feature: The audio feature to be queried
client_secret: client secret, used to identify the user
user_secret: client secret, used to identify the user
"""
user = User.objects.get(user_secret=client_secret)
user = User.objects.get(user_secret=user_secret)
user_tracks = Track.objects.filter(users=user)
response_payload = {
'data_points': [],