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

Refactor audio features graph code 

Closes #44. Audio features graph code is now in an external .js file.
Also closes #45.
master
Chris Shyi 7 years ago
parent
8851c5ce25
commit
f624414701
5 changed files with 136 additions and 127 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. 24
      spotifyvis/static/spotifyvis/scripts/artist_graph.js
  2. 105
      spotifyvis/static/spotifyvis/scripts/audio_feat_graph.js
  3. 6
      spotifyvis/templates/spotifyvis/artist_graph.html
  4. 124
      spotifyvis/templates/spotifyvis/audio_features.html
  5. 4
      spotifyvis/urls.py

24
spotifyvis/static/spotifyvis/scripts/artist_graph.js
View File

@ -5,13 +5,25 @@
*/ */
function drawArtistGraph(artistData, parentElem) { function drawArtistGraph(artistData, parentElem) {
let margin = {top: 20, right: 30, bottom: 30, left: 40}; 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); 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) let bubble = d3.pack(artistData)
.size([width, height])
.padding(1.5);
.size([width + 100, height + 100])
.padding(0.2);
let svg = d3.select(parentElem) let svg = d3.select(parentElem)
.append("svg") .append("svg")
@ -23,7 +35,7 @@ function drawArtistGraph(artistData, parentElem) {
.sum(function(d) { return d.num_songs; }); .sum(function(d) { return d.num_songs; });
let node = svg.selectAll(".node") let node = svg.selectAll(".node")
.data(bubble(nodes).descendants())
.data(bubble(nodes).leaves())
.enter() .enter()
.filter(function(d) { .filter(function(d) {
return !d.children; return !d.children;
@ -36,7 +48,7 @@ function drawArtistGraph(artistData, parentElem) {
node.append("title") node.append("title")
.text(function(d) { .text(function(d) {
return `${d.name}: ${d.num_songs}`;
return d.data.name + ": " + d.data.num_songs;
}); });
node.append("circle") node.append("circle")

105
spotifyvis/static/spotifyvis/scripts/audio_feat_graph.js
View 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);
}

6
spotifyvis/templates/spotifyvis/artist_graph.html
View File

@ -11,13 +11,9 @@
<script src="{% static "spotifyvis/scripts/artist_graph.js" %}"></script> <script src="{% static "spotifyvis/scripts/artist_graph.js" %}"></script>
<script> <script>
d3.json("{% url "get_artist_data" user_secret %}").then(function(data) { 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 // this is the data format needed for bubble charts
data = { data = {
"children": data
children: data
}; };
drawArtistGraph(data, "body"); drawArtistGraph(data, "body");
}); });

124
spotifyvis/templates/spotifyvis/audio_features.html
View File

@ -22,121 +22,17 @@
<![endif]--> <![endif]-->
<p>Logged in as {{ user_id }}</p> <p>Logged in as {{ user_id }}</p>
<script src="https://d3js.org/d3.v5.js"></script> <script src="https://d3js.org/d3.v5.js"></script>
<script src="{% static "spotifyvis/scripts/audio_feat_graph.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
* 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> </script>
</body> </body>
</html> </html>

4
spotifyvis/urls.py
View File

@ -9,11 +9,11 @@ urlpatterns = [
path('user_data', user_data, name='user_data'), path('user_data', user_data, name='user_data'),
path('admin_graphs', admin_graphs, name='admin_graphs'), path('admin_graphs', admin_graphs, name='admin_graphs'),
path('api/user_artists/<str:user_secret>', get_artist_data, name='get_artist_data'), 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('api/user_genres/<str:user_secret>', get_genre_data, name='get_genre_data'),
path('graphs/genre/<str:user_secret>', display_genre_graph, path('graphs/genre/<str:user_secret>', display_genre_graph,
name='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>', path('api/audio_features/<str:audio_feature>/<str:user_secret>',
get_audio_feature_data, name='get_audio_feature_data'), get_audio_feature_data, name='get_audio_feature_data'),
] ]
Write Preview
Loading…
Cancel
Save