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

Refactor audio feature graph code

Browse Source 
Code for drawing audio feature graphs has been refactored into a
function.
This commit is contained in:
Chris Shyi
2018-06-15 20:29:17 -04:00
parent bb97095398
commit fcb894fcb9
1 changed files with 70 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,78 +19,87 @@
<script src="https://d3js.org/d3.v5.js"></script> <script src="https://d3js.org/d3.v5.js"></script>
<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">
let margin = {top: 20, right: 30, bottom: 30, left: 40};
let width = 720 - margin.left - margin.right,
height = 420 - margin.top - margin.bottom;
let instrumData = { function drawAudioFeatGraph(audioFeature) {
"0-0.25": 0, let margin = {top: 20, right: 30, bottom: 30, left: 40};
"0.25-0.5": 0, let width = 720 - margin.left - margin.right,
"0.5-0.75": 0, height = 420 - margin.top - margin.bottom;
"0.75-1.0": 0,
};
// define the vertical scaling function
let vScale = d3.scaleLinear().range([height, 0]);
// getAudioFeatureData('instrumentalness', sessionStorage.getItem('user_secret')); let featureData = {
d3.json("{% url 'get_audio_feature_data' audio_feature='instrumentalness' client_secret=user_secret %}") "0-0.25": 0,
.then(function(response) { "0.25-0.5": 0,
for (let dataPoint of response.data_points) { "0.5-0.75": 0,
dataPoint = parseFloat(dataPoint); "0.75-1.0": 0,
if (dataPoint > 0.75) { };
instrumData["0.75-1.0"] += 1; // define the vertical scaling function
} else if (dataPoint > 0.5) { let vScale = d3.scaleLinear().range([height, 0]);
instrumData["0.5-0.75"] += 1;
} else if (dataPoint > 0.25) { // getAudioFeatureData('instrumentalness', sessionStorage.getItem('user_secret'));
instrumData["0.25-0.5"] += 1; d3.json(`/audio_features/${audioFeature}/{{ user_secret }}`)
} else { .then(function(response) {
instrumData["0-0.25"] += 1; for (let dataPoint of response.data_points) {
dataPoint = parseFloat(dataPoint);
if (dataPoint > 0.75) {
featureData["0.75-1.0"] += 1;
} else if (dataPoint > 0.5) {
featureData["0.5-0.75"] += 1;
} else if (dataPoint > 0.25) {
featureData["0.25-0.5"] += 1;
} else {
featureData["0-0.25"] += 1;
}
} }
}
let dataSet = Object.values(instrumData); let dataSet = Object.values(featureData);
let dataRanges = Object.keys(instrumData); // Ranges of audio features, e.g. 0-0.25, 0.25-0.5, etc let dataRanges = Object.keys(featureData); // Ranges of audio features, e.g. 0-0.25, 0.25-0.5, etc
let dataArr = []; let dataArr = [];
// turn the counts into an array of objects, e.g. {range: "0-0.25", counts: 5} // turn the counts into an array of objects, e.g. {range: "0-0.25", counts: 5}
for (let i = 0; i < dataRanges.length; i++) { for (let i = 0; i < dataRanges.length; i++) {
dataArr.push({ dataArr.push({
range: dataRanges[i], range: dataRanges[i],
counts: instrumData[dataRanges[i]] counts: featureData[dataRanges[i]]
}); });
} }
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.4);
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 instrumGraph = d3.select('body') let featureGraph = 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) .attr('height', height + margin.top + margin.bottom)
.append("g") .append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`); .attr("transform", `translate(${margin.left}, ${margin.top})`)
.attr("fill", "teal");
instrumGraph.selectAll(".bar") featureGraph.selectAll(".bar")
.data(dataArr) .data(dataArr)
.enter().append('rect') .enter().append('rect')
.attr('class', 'bar') .attr('class', 'bar')
.attr('x', function(d) { return hScale(d.range); }) .attr('x', function(d) { return hScale(d.range); })
.attr('y', function(d) { return vScale(d.counts); }) .attr('y', function(d) { return vScale(d.counts); })
.attr("height", function(d) { return height - vScale(d.counts); }) .attr("height", function(d) { return height - vScale(d.counts); })
.attr("width", hScale.bandwidth()); .attr("width", hScale.bandwidth());
// function(d) { return hScale(d.range); } // function(d) { return hScale(d.range); }
instrumGraph.append('g') featureGraph.append('g')
.attr('class', 'axis') .attr('class', 'axis')
.attr('transform', `translate(0, ${height})`) .attr('transform', `translate(0, ${height})`)
.call(xAxis); .call(xAxis);
featureGraph.append('g')
.attr('class', 'axis')
.call(yAxis);
});
}
drawAudioFeatGraph("instrumentalness");
drawAudioFeatGraph("valence");
drawAudioFeatGraph("energy");
instrumGraph.append('g')
.attr('class', 'axis')
.call(yAxis);
});
</script> </script>