Refactor audio features graph code
Closes #44. Audio features graph code is now in an external .js file. Also closes #45.
This commit is contained in:
Chris Shyi
@@ -5,13 +5,25 @@
|
||||
*/
|
||||
function drawArtistGraph(artistData, parentElem) {
|
||||
let margin = {top: 20, right: 30, bottom: 30, left: 40};
|
||||
let width = 960 - margin.right - margin.left;
|
||||
let height = 540 - margin.top - margin.bottom;
|
||||
let width = 1000 - margin.right - margin.left;
|
||||
let height = 1000 - margin.top - margin.bottom;
|
||||
|
||||
let color = d3.scaleOrdinal(d3.schemeCategory10);
|
||||
/*
|
||||
** Next four variables were part of an attempt to make bubbles larger,
|
||||
** didn't work
|
||||
*/
|
||||
let songCounts = artistData.children.map(function(artist) { return artist.num_songs; }); // array of counts
|
||||
let songCountExtent = d3.extent(songCounts); // [min song count, max song count]
|
||||
let circleSize = {
|
||||
min: 45,
|
||||
max: 75
|
||||
};
|
||||
let circleRadiusScale = d3.scaleSqrt().domain(songCountExtent).range([circleSize.min, circleSize.max]);
|
||||
|
||||
let bubble = d3.pack(artistData)
|
||||
.size([width, height])
|
||||
.padding(1.5);
|
||||
.size([width + 100, height + 100])
|
||||
.padding(0.2);
|
||||
|
||||
let svg = d3.select(parentElem)
|
||||
.append("svg")
|
||||
@@ -23,7 +35,7 @@ function drawArtistGraph(artistData, parentElem) {
|
||||
.sum(function(d) { return d.num_songs; });
|
||||
|
||||
let node = svg.selectAll(".node")
|
||||
.data(bubble(nodes).descendants())
|
||||
.data(bubble(nodes).leaves())
|
||||
.enter()
|
||||
.filter(function(d) {
|
||||
return !d.children;
|
||||
@@ -36,7 +48,7 @@ function drawArtistGraph(artistData, parentElem) {
|
||||
|
||||
node.append("title")
|
||||
.text(function(d) {
|
||||
return `${d.name}: ${d.num_songs}`;
|
||||
return d.data.name + ": " + d.data.num_songs;
|
||||
});
|
||||
|
||||
node.append("circle")
|
||||
|
||||
105
spotifyvis/static/spotifyvis/scripts/audio_feat_graph.js
Normal file
105
spotifyvis/static/spotifyvis/scripts/audio_feat_graph.js
Normal file
@@ -0,0 +1,105 @@
|
||||
/** Queries the backend for audio feature data, draws the bar chart
|
||||
* illustrating the frequencies of values, and appends the chart to
|
||||
* a designated parent element
|
||||
*
|
||||
* @param audioFeature: the name of the audio feature (string)
|
||||
* @param intervalEndPoints: a sorted array of 5 real numbers defining the intervals (categories) of values,
|
||||
* for example:
|
||||
* [0, 0.25, 0.5, 0.75, 1.0] for instrumentalness would define ranges
|
||||
* (0-0.25), (0.25-0.5), (0.5-0.75), (0.75-1.0)
|
||||
* @param parentElem: the DOM element to append the graph to (a selector string)
|
||||
* @param userSecret: the user secret string for identification
|
||||
* @return None
|
||||
*/
|
||||
function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem, userSecret) {
|
||||
// TODO: Not hard code the dimensions?
|
||||
let margin = {top: 20, right: 30, bottom: 30, left: 40};
|
||||
let width = 480 - margin.left - margin.right,
|
||||
height = 270 - margin.top - margin.bottom;
|
||||
|
||||
let featureData = {};
|
||||
// Create the keys first in order
|
||||
for (let index = 0; index < intervalEndPoints.length - 1; index++) {
|
||||
let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`;
|
||||
featureData[key] = 0;
|
||||
}
|
||||
// define the vertical scaling function
|
||||
let vScale = d3.scaleLinear().range([height, 0]);
|
||||
|
||||
d3.json(`/api/audio_features/${audioFeature}/${userSecret}`)
|
||||
.then(function(response) {
|
||||
// categorize the data points
|
||||
for (let dataPoint of response.data_points) {
|
||||
dataPoint = parseFloat(dataPoint);
|
||||
let index = intervalEndPoints.length - 2;
|
||||
// find the index of the first element greater than dataPoint
|
||||
while (dataPoint < intervalEndPoints[index]) {
|
||||
index -= 1;
|
||||
}
|
||||
let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`;
|
||||
featureData[key] += 1;
|
||||
}
|
||||
|
||||
let dataSet = Object.values(featureData);
|
||||
let dataRanges = Object.keys(featureData); // Ranges of audio features, e.g. 0-0.25, 0.25-0.5, etc
|
||||
let dataArr = [];
|
||||
// turn the counts into an array of objects, e.g. {range: "0-0.25", counts: 5}
|
||||
for (let i = 0; i < dataRanges.length; i++) {
|
||||
dataArr.push({
|
||||
range: dataRanges[i],
|
||||
counts: featureData[dataRanges[i]]
|
||||
});
|
||||
}
|
||||
vScale.domain([0, d3.max(dataSet)]).nice();
|
||||
|
||||
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 featureSVG = d3.select(parentElem)
|
||||
.append('svg').attr('width', width + margin.left + margin.right)
|
||||
.attr('height', height + margin.top + margin.bottom);
|
||||
|
||||
let featureGraph = featureSVG.append("g")
|
||||
.attr("transform", `translate(${margin.left}, ${margin.top})`)
|
||||
.attr("fill", "teal");
|
||||
|
||||
featureGraph.selectAll(".bar")
|
||||
.data(dataArr)
|
||||
.enter().append('rect')
|
||||
.attr('class', 'bar')
|
||||
.attr('x', function(d) { return hScale(d.range); })
|
||||
.attr('y', function(d) { return vScale(d.counts); })
|
||||
.attr("height", function(d) { return height - vScale(d.counts); })
|
||||
.attr("width", hScale.bandwidth());
|
||||
|
||||
// function(d) { return hScale(d.range); }
|
||||
|
||||
featureGraph.append('g')
|
||||
.attr('class', 'axis')
|
||||
.attr('transform', `translate(0, ${height})`)
|
||||
.call(xAxis);
|
||||
|
||||
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)}`);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
@@ -11,13 +11,9 @@
|
||||
<script src="{% static "spotifyvis/scripts/artist_graph.js" %}"></script>
|
||||
<script>
|
||||
d3.json("{% url "get_artist_data" user_secret %}").then(function(data) {
|
||||
for (let index = 0; index < data.length; index++) {
|
||||
console.log(data[index].name);
|
||||
console.log(data[index].num_songs);
|
||||
}
|
||||
// this is the data format needed for bubble charts
|
||||
data = {
|
||||
"children": data
|
||||
children: data
|
||||
};
|
||||
drawArtistGraph(data, "body");
|
||||
});
|
||||
|
||||
@@ -22,121 +22,17 @@
|
||||
<![endif]-->
|
||||
<p>Logged in as {{ user_id }}</p>
|
||||
<script src="https://d3js.org/d3.v5.js"></script>
|
||||
<script src="{% static "spotifyvis/scripts/audio_feat_graph.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
|
||||
* a designated parent element
|
||||
*
|
||||
* @param audioFeature: the name of the audio feature (string)
|
||||
* @param intervalEndPoints: a sorted array of 5 real numbers defining the intervals (categories) of values,
|
||||
* for example:
|
||||
* [0, 0.25, 0.5, 0.75, 1.0] for instrumentalness would define ranges
|
||||
* (0-0.25), (0.25-0.5), (0.5-0.75), (0.75-1.0)
|
||||
* @param parentElem: the DOM element to append the graph to (a selector string)
|
||||
* @return None
|
||||
*/
|
||||
function drawAudioFeatGraph(audioFeature, intervalEndPoints, parentElem) {
|
||||
// TODO: Not hard code the dimensions?
|
||||
let margin = {top: 20, right: 30, bottom: 30, left: 40};
|
||||
let width = 480 - margin.left - margin.right,
|
||||
height = 270 - margin.top - margin.bottom;
|
||||
|
||||
let featureData = {};
|
||||
// Create the keys first in order
|
||||
for (let index = 0; index < intervalEndPoints.length - 1; index++) {
|
||||
let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`;
|
||||
featureData[key] = 0;
|
||||
}
|
||||
// define the vertical scaling function
|
||||
let vScale = d3.scaleLinear().range([height, 0]);
|
||||
|
||||
d3.json(`/api/audio_features/${audioFeature}/{{ user_secret }}`)
|
||||
.then(function(response) {
|
||||
// categorize the data points
|
||||
for (let dataPoint of response.data_points) {
|
||||
dataPoint = parseFloat(dataPoint);
|
||||
let index = intervalEndPoints.length - 2;
|
||||
// find the index of the first element greater than dataPoint
|
||||
while (dataPoint < intervalEndPoints[index]) {
|
||||
index -= 1;
|
||||
}
|
||||
let key = `${intervalEndPoints[index]} ~ ${intervalEndPoints[index + 1]}`;
|
||||
featureData[key] += 1;
|
||||
}
|
||||
|
||||
let dataSet = Object.values(featureData);
|
||||
let dataRanges = Object.keys(featureData); // Ranges of audio features, e.g. 0-0.25, 0.25-0.5, etc
|
||||
let dataArr = [];
|
||||
// turn the counts into an array of objects, e.g. {range: "0-0.25", counts: 5}
|
||||
for (let i = 0; i < dataRanges.length; i++) {
|
||||
dataArr.push({
|
||||
range: dataRanges[i],
|
||||
counts: featureData[dataRanges[i]]
|
||||
});
|
||||
}
|
||||
vScale.domain([0, d3.max(dataSet)]).nice();
|
||||
|
||||
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 featureSVG = d3.select(parentElem)
|
||||
.append('svg').attr('width', width + margin.left + margin.right)
|
||||
.attr('height', height + margin.top + margin.bottom);
|
||||
|
||||
let featureGraph = featureSVG.append("g")
|
||||
.attr("transform", `translate(${margin.left}, ${margin.top})`)
|
||||
.attr("fill", "teal");
|
||||
|
||||
featureGraph.selectAll(".bar")
|
||||
.data(dataArr)
|
||||
.enter().append('rect')
|
||||
.attr('class', 'bar')
|
||||
.attr('x', function(d) { return hScale(d.range); })
|
||||
.attr('y', function(d) { return vScale(d.counts); })
|
||||
.attr("height", function(d) { return height - vScale(d.counts); })
|
||||
.attr("width", hScale.bandwidth());
|
||||
|
||||
// function(d) { return hScale(d.range); }
|
||||
|
||||
featureGraph.append('g')
|
||||
.attr('class', 'axis')
|
||||
.attr('transform', `translate(0, ${height})`)
|
||||
.call(xAxis);
|
||||
|
||||
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)}`);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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", [0, 0.25, 0.5, 0.75, 1.0], 'body');
|
||||
drawAudioFeatGraph("valence", [0, 0.25, 0.5, 0.75, 1.0], 'body');
|
||||
drawAudioFeatGraph("energy", [0, 0.25, 0.5, 0.75, 1.0], 'body');
|
||||
drawAudioFeatGraph("tempo", [40, 80, 120, 160, 200], 'body');
|
||||
drawAudioFeatGraph("danceability", [0, 0.25, 0.5, 0.75, 1.0], 'body');
|
||||
drawAudioFeatGraph("acousticness", [0, 0.25, 0.5, 0.75, 1.0], 'body');
|
||||
drawAudioFeatGraph("loudness", [-60, -45, -30, -15, 0], 'body');
|
||||
drawAudioFeatGraph("speechiness", [0, 0.25, 0.5, 0.75, 1.0], 'body');
|
||||
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);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,11 +9,11 @@ urlpatterns = [
|
||||
path('user_data', user_data, name='user_data'),
|
||||
path('admin_graphs', admin_graphs, name='admin_graphs'),
|
||||
path('api/user_artists/<str:user_secret>', get_artist_data, name='get_artist_data'),
|
||||
path('artists/<str:user_secret>', artist_data, name='display_artist_graph'),
|
||||
path('graphs/artists/<str:user_secret>', artist_data, name='display_artist_graph'),
|
||||
path('api/user_genres/<str:user_secret>', get_genre_data, name='get_genre_data'),
|
||||
path('graphs/genre/<str:user_secret>', display_genre_graph,
|
||||
name='display_genre_graph'),
|
||||
path('audio_features/<str:user_secret>', audio_features, name='display_audio_features'),
|
||||
path('graphs/audio_features/<str:user_secret>', audio_features, name='display_audio_features'),
|
||||
path('api/audio_features/<str:audio_feature>/<str:user_secret>',
|
||||
get_audio_feature_data, name='get_audio_feature_data'),
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user