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

Fix genre graph not displaying

Browse Source 
- take top genres/artists for graphs
- improve graphs' appearance
- update pip packages
This commit is contained in:
Kevin Mok
2019-03-07 05:57:30 -05:00
parent 15c07a208a
commit 670693203e
7 changed files with 228 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
graphs/templates/graphs/features_graphs.html
View File

@@ -1,28 +1,28 @@
{% load static %}
{% load sass_tags %}
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Features Graphs</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Features Graphs</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}">
<style>
.tick {
font-size: 15px;
}
</style>
</head>
<style>
.tick {
font-size: 15px;
}
</style>
</head>
<body>
<!--[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]-->
<body>
<!--[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]-->
<div class="container-fluid">
<div class="row">
@@ -38,10 +38,10 @@
</div>
</div>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="{% static "graphs/scripts/audio_feat_graph.js" %}"></script>
<script type="text/javascript">
let userSecret = "{{ user_secret }}";
<script src="https://d3js.org/d3.v5.js"></script>
<script src="{% static "graphs/scripts/audio_feat_graph.js" %}"></script>
<script type="text/javascript">
let userSecret = "{{ user_secret }}";
let graphParams = {
"acousticness": {
intervalEndPoints: {begin: 0, end: 1.0, step: 0.20},
@@ -74,6 +74,6 @@
drawAudioFeatGraph(featureKey, params.intervalEndPoints,
params.colId, userSecret);
}
</script>
</body>
</script>
</body>
</html>

50
graphs/templates/graphs/genre_graph.html
View File

@@ -1,9 +1,9 @@
<!-- header {{{ -->
<!DOC
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
{% load static %}
{% load sass_tags %}
@@ -14,44 +14,46 @@
<title>Genre Graph</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}"> -->
<link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}">
</head>
<!-- }}} header -->
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.min.js"></script>
{% load static %}
<script src="{% static "graphs/scripts/genre_graph.js" %}"></script>
<!-- <div class="row">
<div class="col-" id="genre-graph"></div>
<div class="col-" id="genre-graph"></div>
</div> -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12" id="genre-column">
</div>
<div class="row">
<div class="col-md-12" id="genre-column">
</div>
</div>
<svg id="genre-graph" width="600" height="400"
viewBox="0 0 600 400"
perserveAspectRatio="xMinYMid">
</svg>
</div>
{% comment %} <svg id="genre-graph" width="600" height="400"
viewBox="0 0 600 400"
perserveAspectRatio="xMinYMid"> {% endcomment %}
<svg id="genre-graph" width="1500" height="900">
</svg>
<script>
let svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
let x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1)
.paddingOuter(0.7)
.align(0.1);
let y = d3.scaleLinear()
.rangeRound([height, 0]);
let svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
let x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.1)
.paddingOuter(0.7)
.align(0.1);
let y = d3.scaleLinear()
.rangeRound([height, 0]);
d3.json("{% url "api:get_genre_data" user_secret %}").then(create_genre_graph);
</script>