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

Setup Sass for Bootstrap and Darkly theme

Browse Source 
Genre graph stopped showing up for whatever reason.
This commit is contained in:
Kevin Mok
2018-11-18 02:48:24 -05:00
parent a7e4c151cf
commit 4ff1bc6744
101 changed files with 14022 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
graphs/static/graphs/scripts/audio_feat_graph.js
View File

@@ -33,9 +33,9 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret)
// featureData[key] = 0;
// }
// define the vertical scaling function
// let vScale = d3.scaleLinear().range([height, 0]);
let vScale = d3.scaleLinear().range([height, 0]);
let padding = 0.5;
let vScale = d3.scaleLinear().range([100 - 2*padding, padding]);
// let vScale = d3.scaleLinear().range([100 - 2*padding, padding]);
d3.json(`/api/audio_features/${audioFeature}/${userSecret}`)
.then(function(response) {
@@ -68,8 +68,8 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret)
let hScale = d3.scaleBand()
.domain(dataRanges)
// .rangeRound([0, width])
.rangeRound([padding, 100 - 2*padding])
.rangeRound([0, width])
// .rangeRound([padding, 100 - 2*padding])
.padding(0.5);
let xAxis = d3.axisBottom().scale(hScale);
@@ -81,7 +81,7 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret)
let featureGraph = featureSVG.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.attr("fill", "teal");
.attr("fill", "#0099CC");
featureGraph.selectAll(".bar")
.data(dataArr)
@@ -106,6 +106,7 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret)
featureSVG.append("text")
.attr('x', (width / 2))
.attr('y', (margin.top / 2))
.attr('fill', "white")
.attr('text-anchor', 'middle')
.style('font-size', '14px')
.text(`${capFeatureStr(audioFeature)}`);

2
graphs/templates/graphs/artist_graph.html
View File

@@ -1,9 +1,11 @@
<!DOCTYPE html>
{% load static %}
{% load sass_tags %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Artist Graphs</title>
<link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}">
</head>
<body>
<script src="https://d3js.org/d3.v5.js"></script>

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

@@ -1,4 +1,5 @@
{% 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]-->
@@ -7,11 +8,10 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>User Spotify Data</title>
<title>Features Graphs</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'css/dark_bg.css' %}">
<link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}">
<style>
.tick {
font-size: 15px;
@@ -29,8 +29,7 @@
<div class="col-md-3" id="acoustic-column"></div>
<div class="col-md-3" id="dance-column"></div>
<div class="col-md-3" id="energy-column"></div>
<div class="col-md-3" id="instr-column"></div>
></div>
<div class="col-md-3" id="instr-column"></div></div>
<div class="row">
<div class="col-md-3" id="loud-column"></div>
<div class="col-md-3" id="speech-column"></div>

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

@@ -6,21 +6,21 @@
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
{% load static %}
{% load sass_tags %}
<html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test DB Page</title>
<title>Genre Graph</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{# <link rel="stylesheet" href="{% static 'css/dark_bg.css' %}">#}
<!-- <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>
@@ -29,10 +29,16 @@
<div class="col-" id="genre-graph"></div>
</div> -->
<svg id="genre-graph" width="600" height="400"
viewBox="0 0 600 400"
perserveAspectRatio="xMinYMid">
</svg>
<div class="container-fluid">
<div class="row">
<div class="col-md-12" id="genre-column">
</div>
</div>
</div>
<svg id="genre-graph" width="600" height="400"
viewBox="0 0 600 400"
perserveAspectRatio="xMinYMid">
</svg>
<script>
let svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},

4
graphs/templates/graphs/logged_in.html
View File

@@ -1,11 +1,11 @@
<!DOCTYPE html>
{% load static %}
{% load sass_tags %}
<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">
<link rel="stylesheet" href="{% static 'css/dark_bg.css' %}">
<link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}">
</head>
<body>
<h1>{{ user_id }}'s Graphs</h1>

4
graphs/templates/graphs/user_history.html
View File

@@ -1,12 +1,12 @@
<!DOCTYPE html>
{% load static %}
{% load render_table export_url from django_tables2 %}
{% load sass_tags %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User History</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/dark_bg.css' %}">
<link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}">
</head>
<body>
<h1>{{ user_id }}'s Listening History</h1>