diff --git a/reset_db.sh b/reset_db.sh new file mode 100644 index 0000000..4bbef35 --- /dev/null +++ b/reset_db.sh @@ -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 diff --git a/reset_db.sql b/reset_db.sql new file mode 100644 index 0000000..7a99492 --- /dev/null +++ b/reset_db.sql @@ -0,0 +1,3 @@ +DROP DATABASE spotifyvis; +CREATE DATABASE spotifyvis; +GRANT ALL PRIVILEGES ON DATABASE spotifyvis TO django; diff --git a/spotifyvis/static/spotifyvis/scripts/artist_graph.js b/spotifyvis/static/spotifyvis/scripts/artist_graph.js new file mode 100644 index 0000000..c1f48cb --- /dev/null +++ b/spotifyvis/static/spotifyvis/scripts/artist_graph.js @@ -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"); + + + +} \ No newline at end of file diff --git a/spotifyvis/templates/spotifyvis/artist_graph.html b/spotifyvis/templates/spotifyvis/artist_graph.html new file mode 100644 index 0000000..433e39b --- /dev/null +++ b/spotifyvis/templates/spotifyvis/artist_graph.html @@ -0,0 +1,27 @@ + +{% load static %} + +
+ +Logged in as {{ user_id }}
+ + + + + + \ No newline at end of file diff --git a/spotifyvis/templates/spotifyvis/audio_features.html b/spotifyvis/templates/spotifyvis/audio_features.html index bc53458..78e2e50 100644 --- a/spotifyvis/templates/spotifyvis/audio_features.html +++ b/spotifyvis/templates/spotifyvis/audio_features.html @@ -37,6 +37,7 @@ * @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; diff --git a/spotifyvis/templates/spotifyvis/logged_in.html b/spotifyvis/templates/spotifyvis/logged_in.html index 849a59b..1df0826 100644 --- a/spotifyvis/templates/spotifyvis/logged_in.html +++ b/spotifyvis/templates/spotifyvis/logged_in.html @@ -9,9 +9,12 @@