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

Create separate page for audio features

Browse Source 
An additional page where the user will be directed after logging in was
created. A link to the audio features display page was added to the
aforementioned page. Changes were made to the audio features graphing
function so that the categories are displayed in ascending order (was
random before).
This commit is contained in:
Chris Shyi
2018-06-25 21:39:39 -04:00
parent df36f07080
commit bdc88b5bdb
5 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
spotifyvis/templates/spotifyvis/user_data.html → spotifyvis/templates/spotifyvis/audio_features.html
View File

@@ -20,9 +20,8 @@
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<p>Logged in as {{ id }}</p>
<p>Logged in as {{ user_id }}</p>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="{% static "spotifyvis/scripts/user_data.js" %}"></script>
<script type="text/javascript">
/** Queries the backend for audio feature data, draws the bar chart
@@ -43,10 +42,14 @@
height = 270 - margin.top - margin.bottom;
let featureData = {};
// Create the keys first in order
for (let index = 0; index < intervalEndPoints.length - 1; index++) {
let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`;
featureData[key] = 0;
}
// define the vertical scaling function
let vScale = d3.scaleLinear().range([height, 0]);
// getAudioFeatureData('instrumentalness', sessionStorage.getItem('user_secret'));
d3.json(`/audio_features/${audioFeature}/{{ user_secret }}`)
.then(function(response) {
// categorize the data points
@@ -57,10 +60,7 @@
while (dataPoint < intervalEndPoints[index]) {
index -= 1;
}
let key = `${intervalEndPoints[index]}-${intervalEndPoints[index + 1]}`;
if (!featureData.hasOwnProperty(key)) {
featureData[key] = 0;
}
let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`;
featureData[key] += 1;
}
@@ -132,9 +132,10 @@
drawAudioFeatGraph("valence", [0, 0.25, 0.5, 0.75, 1.0], 'body');
drawAudioFeatGraph("energy", [0, 0.25, 0.5, 0.75, 1.0], 'body');
drawAudioFeatGraph("tempo", [40, 80, 120, 160, 200], 'body');
drawAudioFeatGraph("danceability", [0, 0.25, 0.5, 0.75, 1.0], 'body');
drawAudioFeatGraph("acousticness", [0, 0.25, 0.5, 0.75, 1.0], 'body');
drawAudioFeatGraph("loudness", [-60, -45, -30, -15, 0], 'body');
drawAudioFeatGraph("speechiness", [0, 0.25, 0.5, 0.75, 1.0], 'body');
</script>
</body>
</html>

12
spotifyvis/templates/spotifyvis/logged_in.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Logged In</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<a class="btn btn-primary" href="/audio_features/{{ user_secret }}" role="button">Audio Features</a>
</body>
</html>