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

Put features graphs into Bootstrap columns 

d3 ranges based on the column size.
master
Kevin Mok 6 years ago
parent
4ddf11aa41
commit
73223ac355
3 changed files with 54 additions and 12 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. 9
      graphs/static/graphs/css/graphs.css
  2. 14
      graphs/static/graphs/scripts/audio_feat_graph.js
  3. 43
      graphs/templates/graphs/features_graphs.html

9
graphs/static/graphs/css/graphs.css
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; featureData[key] = 0;
} }
// define the vertical scaling function // 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}`) d3.json(`/api/audio_features/${audioFeature}/${userSecret}`)
.then(function(response) { .then(function(response) {
@ -52,12 +54,16 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
} }
vScale.domain([0, d3.max(dataSet)]).nice(); 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 xAxis = d3.axisBottom().scale(hScale);
let yAxis = d3.axisLeft().scale(vScale); 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) .append('svg').attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom); .attr('height', height + margin.top + margin.bottom);
@ -102,4 +108,4 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSec
*/ */
function capFeatureStr(audioFeature) { function capFeatureStr(audioFeature) {
return audioFeature.charAt(0).toUpperCase() + audioFeature.slice(1); 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> <title>User Spotify Data</title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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> <style>
.tick { .tick {
font-size: 15px; font-size: 15px;
} }
</style> </style>
</head> </head>
<body> <body>
<!--[if lt IE 7]> <!--[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> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]--> <![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="https://d3js.org/d3.v5.js"></script>
<script src="{% static "graphs/scripts/audio_feat_graph.js" %}"></script> <script src="{% static "graphs/scripts/audio_feat_graph.js" %}"></script>
<script type="text/javascript"> <script type="text/javascript">
let userSecret = "{{ user_secret }}"; 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> </script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save