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

Set up artist bubble chart 

Major changes:
- Set up preliminary artist bubble chart, font too small
- Wrote shell script for resetting database
master
Chris Shyi 7 years ago
parent
f8bf751920
commit
8851c5ce25
8 changed files with 174 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      reset_db.sh
  2. 3
      reset_db.sql
  3. 81
      spotifyvis/static/spotifyvis/scripts/artist_graph.js
  4. 27
      spotifyvis/templates/spotifyvis/artist_graph.html
  5. 1
      spotifyvis/templates/spotifyvis/audio_features.html
  6. 5
      spotifyvis/templates/spotifyvis/logged_in.html
  7. 10
      spotifyvis/urls.py
  8. 47
      spotifyvis/views.py

14
reset_db.sh
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
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
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
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 * @return None
*/ */
function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem) { function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem) {
// TODO: Not hard code the dimensions?
let margin = {top: 20, right: 30, bottom: 30, left: 40}; let margin = {top: 20, right: 30, bottom: 30, left: 40};
let width = 480 - margin.left - margin.right, let width = 480 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom; height = 270 - margin.top - margin.bottom;

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

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

10
spotifyvis/urls.py
View File

@ -1,5 +1,4 @@
from django.urls import path, include from django.urls import path, include
from django.conf.urls import url
from .views import * from .views import *
@ -9,11 +8,12 @@ urlpatterns = [
path('callback', callback, name='callback'), path('callback', callback, name='callback'),
path('user_data', user_data, name='user_data'), path('user_data', user_data, name='user_data'),
path('admin_graphs', admin_graphs, name='admin_graphs'), 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('api/user_genres/<str:user_secret>', get_genre_data, name='get_genre_data'),
path('graphs/genre/<str:client_secret>', display_genre_graph,
path('graphs/genre/<str:user_secret>', display_genre_graph,
name='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>',
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'), get_audio_feature_data, name='get_audio_feature_data'),
] ]

47
spotifyvis/views.py
View File

@ -183,12 +183,33 @@ def admin_graphs(request):
update_track_genres(user_obj) update_track_genres(user_obj)
return render(request, 'spotifyvis/logged_in.html', context) 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 {{{ # # get_artist_data {{{ #
def get_artist_data(request, user_secret): 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', 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, processed_artist_counts = [{'name': artist.name,
@ -197,38 +218,40 @@ def get_artist_data(request, user_secret):
# }}} get_artist_data # # }}} 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 = { context = {
'user_secret': client_secret,
'user_secret': user_secret,
} }
return render(request, "spotifyvis/genre_graph.html", context) 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 """Renders the audio features page
:param request: the HTTP request :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 :return: renders the audio features page
""" """
user = User.objects.get(user_secret=client_secret)
user = User.objects.get(user_secret=user_secret)
context = { context = {
'user_id': user.user_id, 'user_id': user.user_id,
'user_secret': client_secret,
'user_secret': user_secret,
} }
return render(request, "spotifyvis/audio_features.html", context) return render(request, "spotifyvis/audio_features.html", context)
# get_audio_feature_data {{{ # # 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 """Returns all data points for a given audio feature
Args: Args:
request: the HTTP request request: the HTTP request
audio_feature: The audio feature to be queried 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) user_tracks = Track.objects.filter(users=user)
response_payload = { response_payload = {
'data_points': [], 'data_points': [],

Write Preview
Loading…
Cancel
Save