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

Put features graphs into Bootstrap columns

Browse Source 
d3 ranges based on the column size.
This commit is contained in:
Kevin Mok
2018-11-17 20:47:00 -05:00
parent 4ddf11aa41
commit 73223ac355
3 changed files with 54 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
graphs/static/graphs/css/graphs.css Normal file
View File

@@ -0,0 +1,9 @@
.chart {
height: 16rem;
position: relative;
}
.chart > svg {
width: 100%;
height: 100%;
}

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

@@ -24,7 +24,9 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
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]);
d3.json(`/api/audio_features/${audioFeature}/${userSecret}`)
.then(function(response) {
@@ -52,12 +54,16 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
}
vScale.domain([0, d3.max(dataSet)]).nice();
let hScale = d3.scaleBand().domain(dataRanges).rangeRound([0, width]).padding(0.5);
let hScale = d3.scaleBand()
.domain(dataRanges)
// .rangeRound([0, width])
.rangeRound([padding, 100 - 2*padding])
.padding(0.5);
let xAxis = d3.axisBottom().scale(hScale);
let yAxis = d3.axisLeft().scale(vScale);
let featureSVG = d3.select(parentElem)
let featureSVG = d3.select('#' + parentElem)
.append('svg').attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
@@ -102,4 +108,4 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
*/
function capFeatureStr(audioFeature) {
return audioFeature.charAt(0).toUpperCase() + audioFeature.slice(1);
}
}

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

@@ -10,28 +10,55 @@
<title>User Spotify Data</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' %}">
<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]-->
<div class="container-fluid">
<div class="row">
<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="row">
<div class="col-md-3" id="loud-column"></div>
<div class="col-md-3" id="speech-column"></div>
<div class="col-md-3" id="tempo-column"></div>
<div class="col-md-3" id="valence-column"></div>
</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 }}";
drawAudioFeatGraph("instrumentalness", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret);
drawAudioFeatGraph("valence", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret);
drawAudioFeatGraph("energy", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret);
drawAudioFeatGraph("tempo", [0, 40, 80, 120, 160, 200], 'body', userSecret);
drawAudioFeatGraph("danceability", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret);
drawAudioFeatGraph("acousticness", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret);
drawAudioFeatGraph("loudness", [-60, -45, -30, -15, 0], 'body', userSecret);
drawAudioFeatGraph("speechiness", [0, 0.25, 0.5, 0.75, 1.0], 'body', userSecret);
drawAudioFeatGraph("acousticness", [0, 0.25, 0.5, 0.75, 1.0],
'acoustic-column', userSecret);
drawAudioFeatGraph("danceability", [0, 0.25, 0.5, 0.75, 1.0],
'dance-column', userSecret);
drawAudioFeatGraph("energy", [0, 0.25, 0.5, 0.75, 1.0],
'energy-column', userSecret);
drawAudioFeatGraph("instrumentalness", [0, 0.25, 0.5, 0.75, 1.0],
'instr-column', userSecret);
drawAudioFeatGraph("loudness", [-60, -45, -30, -15, 0],
'loud-column', userSecret);
drawAudioFeatGraph("speechiness", [0, 0.25, 0.5, 0.75, 1.0],
'speech-column', userSecret);
drawAudioFeatGraph("tempo", [0, 40, 80, 120, 160, 200],
'tempo-column', userSecret);
drawAudioFeatGraph("valence", [0, 0.25, 0.5, 0.75, 1.0],
'valence-column', userSecret);
</script>
</body>
</html>