Browse Source
Set up artist bubble chart
Set up artist bubble chart
Major changes: - Set up preliminary artist bubble chart, font too small - Wrote shell script for resetting databasemaster
Chris Shyi
6 years ago
8 changed files with 174 additions and 22 deletions
-
14reset_db.sh
-
3reset_db.sql
-
81spotifyvis/static/spotifyvis/scripts/artist_graph.js
-
27spotifyvis/templates/spotifyvis/artist_graph.html
-
1spotifyvis/templates/spotifyvis/audio_features.html
-
5spotifyvis/templates/spotifyvis/logged_in.html
-
14spotifyvis/urls.py
-
51spotifyvis/views.py
@ -0,0 +1,14 @@ |
|||
# check if in virtual environment |
|||
# https://stackoverflow.com/questions/15454174/how-can-a-shell-function-know-if-it-is-running-within-a-virtualenv/15454916 |
|||
|
|||
python -c 'import sys; print(sys.real_prefix)' 2>/dev/null && INVENV=1 || INVENV=0 |
|||
|
|||
# echo $INVENV |
|||
# if $INVENV is 1, then in virtualenv |
|||
|
|||
if [ $INVENV -eq 1 ]; then |
|||
rm spotifyvis/migrations/00* |
|||
sudo -u postgres psql -f reset_db.sql |
|||
python manage.py makemigrations |
|||
python manage.py migrate |
|||
fi |
@ -0,0 +1,3 @@ |
|||
DROP DATABASE spotifyvis; |
|||
CREATE DATABASE spotifyvis; |
|||
GRANT ALL PRIVILEGES ON DATABASE spotifyvis TO django; |
@ -0,0 +1,81 @@ |
|||
/** |
|||
* Draws the artist count graph as a bubble chart, and appends it the a designated parent element |
|||
* @param artistData: the artist counts data as an array of objects, of the format {'name': artist name, 'num_songs': 50} |
|||
* @param parentElem: the DOM element to append the artist graph to (as a string) |
|||
*/ |
|||
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 color = d3.scaleOrdinal(d3.schemeCategory10); |
|||
let bubble = d3.pack(artistData) |
|||
.size([width, height]) |
|||
.padding(1.5); |
|||
|
|||
let svg = d3.select(parentElem) |
|||
.append("svg") |
|||
.attr("width", width + margin.right + margin.left) |
|||
.attr("height", height + margin.top + margin.bottom) |
|||
.attr("class", "bubble"); |
|||
|
|||
let nodes = d3.hierarchy(artistData) |
|||
.sum(function(d) { return d.num_songs; }); |
|||
|
|||
let node = svg.selectAll(".node") |
|||
.data(bubble(nodes).descendants()) |
|||
.enter() |
|||
.filter(function(d) { |
|||
return !d.children; |
|||
}) |
|||
.append("g") |
|||
.attr("class", "node") |
|||
.attr("transform", function(d) { |
|||
return "translate(" + d.x + "," + d.y + ")"; |
|||
}); |
|||
|
|||
node.append("title") |
|||
.text(function(d) { |
|||
return `${d.name}: ${d.num_songs}`; |
|||
}); |
|||
|
|||
node.append("circle") |
|||
.attr("r", function(d) { |
|||
return d.r; |
|||
}) |
|||
.style("fill", function(d,i) { |
|||
return color(i); |
|||
}); |
|||
|
|||
// artist name text
|
|||
node.append("text") |
|||
.attr("dy", ".2em") |
|||
.style("text-anchor", "middle") |
|||
.text(function(d) { |
|||
return d.data.name.substring(0, d.r / 3); |
|||
}) |
|||
.attr("font-family", "sans-serif") |
|||
.attr("font-size", function(d){ |
|||
return d.r/5; |
|||
}) |
|||
.attr("fill", "white"); |
|||
|
|||
// artist song count text
|
|||
node.append("text") |
|||
.attr("dy", "1.3em") |
|||
.style("text-anchor", "middle") |
|||
.text(function(d) { |
|||
return d.data.num_songs; |
|||
}) |
|||
.attr("font-family", "Gill Sans", "Gill Sans MT") |
|||
.attr("font-size", function(d){ |
|||
return d.r/5; |
|||
}) |
|||
.attr("fill", "white"); |
|||
|
|||
d3.select(self.frameElement) |
|||
.style("height", height + "px"); |
|||
|
|||
|
|||
|
|||
} |
@ -0,0 +1,27 @@ |
|||
<!DOCTYPE html> |
|||
{% load static %} |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<title>Artist Graphs</title> |
|||
</head> |
|||
<body> |
|||
<p>Logged in as {{ user_id }}</p> |
|||
<script src="https://d3js.org/d3.v5.js"></script> |
|||
<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 |
|||
}; |
|||
drawArtistGraph(data, "body"); |
|||
}); |
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue