|
|
@ -20,6 +20,13 @@ |
|
|
<script src="{% static "spotifyvis/scripts/user_data.js" %}"></script> |
|
|
<script src="{% static "spotifyvis/scripts/user_data.js" %}"></script> |
|
|
<script type="text/javascript"> |
|
|
<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) { |
|
|
function drawAudioFeatGraph(audioFeature) { |
|
|
let margin = {top: 20, right: 30, bottom: 30, left: 40}; |
|
|
let margin = {top: 20, right: 30, bottom: 30, left: 40}; |
|
|
let width = 720 - margin.left - margin.right, |
|
|
let width = 720 - margin.left - margin.right, |
|
|
@ -62,15 +69,16 @@ |
|
|
} |
|
|
} |
|
|
vScale.domain([0, d3.max(dataSet)]); |
|
|
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 xAxis = d3.axisBottom().scale(hScale); |
|
|
let yAxis = d3.axisLeft().scale(vScale); |
|
|
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) |
|
|
.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("transform", `translate(${margin.left}, ${margin.top})`) |
|
|
.attr("fill", "teal"); |
|
|
.attr("fill", "teal"); |
|
|
|
|
|
|
|
|
@ -93,9 +101,26 @@ |
|
|
featureGraph.append('g') |
|
|
featureGraph.append('g') |
|
|
.attr('class', 'axis') |
|
|
.attr('class', 'axis') |
|
|
.call(yAxis); |
|
|
.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("instrumentalness"); |
|
|
drawAudioFeatGraph("valence"); |
|
|
drawAudioFeatGraph("valence"); |
|
|
drawAudioFeatGraph("energy"); |
|
|
drawAudioFeatGraph("energy"); |
|
|
|
Chris Shyi
7 years ago