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

Add title to audio feature graphs

Browse Source 
Audio feature bar graphs now have titles.
This commit is contained in:
Chris Shyi
2018-06-15 20:48:35 -04:00
parent fcb894fcb9
commit 840152b99e
1 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
spotifyvis/templates/spotifyvis/user_data.html
View File

@@ -20,6 +20,13 @@
<script src="{% static "spotifyvis/scripts/user_data.js" %}"></script>
<script type="text/javascript">
/** Queries the backend for audio feature data, draws the bar chart
* illustrating the frequencies of values, and appends the chart to
* <body></body>
*
* @param audioFeature: the name of the audio feature
* @return None
*/
function drawAudioFeatGraph(audioFeature) {
let margin = {top: 20, right: 30, bottom: 30, left: 40};
let width = 720 - margin.left - margin.right,
@@ -62,15 +69,16 @@
}
vScale.domain([0, d3.max(dataSet)]);
let hScale = d3.scaleBand().domain(dataRanges).rangeRound([0, width]).padding(0.4);
let hScale = d3.scaleBand().domain(dataRanges).rangeRound([0, width]).padding(0.5);
let xAxis = d3.axisBottom().scale(hScale);
let yAxis = d3.axisLeft().scale(vScale);
let featureGraph = d3.select('body')
let featureSVG = d3.select('body')
.append('svg').attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append("g")
.attr('height', height + margin.top + margin.bottom);
let featureGraph = featureSVG.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.attr("fill", "teal");
@@ -93,9 +101,26 @@
featureGraph.append('g')
.attr('class', 'axis')
.call(yAxis);
featureSVG.append("text")
.attr('x', (width / 2))
.attr('y', (margin.top / 2))
.attr('text-anchor', 'middle')
.style('font-size', '14px')
.text(`${capFeatureStr(audioFeature)} distribution`);
});
}
/**
* Returns the audio feature name string with the first letter capitalized
* @param audioFeature: the name of the audio feature
* @returns the audio feature name string with the first letter capitalized
*/
function capFeatureStr(audioFeature) {
return audioFeature.charAt(0).toUpperCase() + audioFeature.slice(1);
}
drawAudioFeatGraph("instrumentalness");
drawAudioFeatGraph("valence");
drawAudioFeatGraph("energy");