Browse Source

Responsive features graph page

In process of making artists graph maximize height responsively. Moved
misc files in base dir to new scripts dir.
master
Kevin Mok 6 years ago
parent
commit
91484dbeab
Signed by: Kevin-Mok GPG Key ID: AEA75288DC135CF5
  1. 1
      .gitignore
  2. 5
      api/views.py
  3. 9
      graphs/static/graphs/css/graphs.css
  4. 13
      graphs/static/graphs/sass/max-height.scss
  5. 16
      graphs/static/graphs/sass/responsive_graph.scss
  6. 26
      graphs/static/graphs/scripts/artist_graph.js
  7. 14
      graphs/static/graphs/scripts/audio_feat_graph.js
  8. 34
      graphs/templates/graphs/artist_graph.html
  9. 18
      graphs/templates/graphs/features_graphs.html
  10. 0
      scripts/requirements.txt
  11. 0
      scripts/reset_db.sh
  12. 0
      scripts/reset_db.sql
  13. 0
      scripts/update-history.service
  14. 0
      scripts/update-history.sh

1
.gitignore

@ -2,6 +2,7 @@
.vscode/*
*/migrations/*
media/history/*
spotifyvis/static/graphs/sass/*
*.pyc
*.log

5
api/views.py

@ -31,7 +31,8 @@ ARTIST_LIMIT = 50
FEATURES_LIMIT = 100
# ARTIST_LIMIT = 25
# FEATURES_LIMIT = 25
TRACKS_TO_QUERY = 100
# TRACKS_TO_QUERY = 100
TRACKS_TO_QUERY = 500
TRACKS_ENDPOINT = 'https://api.spotify.com/v1/tracks'
CONSOLE_LOGGING = True
# CONSOLE_LOGGING = False
@ -141,7 +142,7 @@ def get_artist_data(request, user_secret):
artist_counts = Artist.objects.annotate(num_songs=Count('track',
filter=Q(track__users=user)))
processed_artist_counts = [{'name': artist.name, 'num_songs': artist.num_songs}
for artist in artist_counts if artist.num_songs > 1]
for artist in artist_counts if artist.num_songs > 2]
if CONSOLE_LOGGING:
pprint(processed_artist_counts)
return JsonResponse(data=processed_artist_counts, safe=False)

9
graphs/static/graphs/css/graphs.css

@ -1,9 +0,0 @@
.chart {
height: 16rem;
position: relative;
}
.chart > svg {
width: 100%;
height: 100%;
}

13
graphs/static/graphs/sass/max-height.scss

@ -0,0 +1,13 @@
html, body {
height: 100%;
}
.container-fluid {
height: 100%;
}
.svg-container {
height: 100%;
padding-bottom: 0%;
}

16
graphs/static/graphs/sass/responsive_graph.scss

@ -0,0 +1,16 @@
.svg-container {
display: inline-block;
position: relative;
width: 100%;
/* aspect ratio */
padding-bottom: 55%;
vertical-align: top;
// overflow: hidden;
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
}

26
graphs/static/graphs/scripts/artist_graph.js

@ -5,8 +5,8 @@
*/
function drawArtistGraph(artistData, parentElem) {
let margin = {top: 20, right: 30, bottom: 30, left: 40};
let width = 1000 - margin.right - margin.left;
let height = 1000 - margin.top - margin.bottom;
// let width = 1000 - margin.right - margin.left;
// let height = 1000 - margin.top - margin.bottom;
let color = d3.scaleOrdinal(d3.schemeCategory10);
/*
@ -22,14 +22,23 @@ function drawArtistGraph(artistData, parentElem) {
let circleRadiusScale = d3.scaleSqrt().domain(songCountExtent).range([circleSize.min, circleSize.max]);
let bubble = d3.pack(artistData)
.size([width + 100, height + 100])
// .size([width + 100, height + 100])
.size([600, 250])
.padding(0.2);
let svg = d3.select(parentElem)
// .append("svg")
// .attr("width", width + margin.right + margin.left)
// .attr("height", height + margin.top + margin.bottom)
// .attr("class", "bubble");
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.attr("class", "bubble");
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 250")
//class to make it responsive
.classed("svg-content-responsive", true);
let nodes = d3.hierarchy(artistData)
.sum(function(d) { return d.num_songs; });
@ -86,8 +95,9 @@ function drawArtistGraph(artistData, parentElem) {
.attr("fill", "white");
d3.select(self.frameElement)
.style("height", height + "px");
// .style("height", height + "px");
.style("height", "100%")
}
}

14
graphs/static/graphs/scripts/audio_feat_graph.js

@ -13,7 +13,7 @@
*/
function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret) {
// TODO: Not hard code the dimensions?
let margin = {top: 20, right: 30, bottom: 30, left: 40};
let margin = {top: 40, right: 40, bottom: 40, left: 40};
let width = 480 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
@ -76,8 +76,16 @@ function drawAudioFeatGraph(audioFeature, intervalEndPoints, colId, userSecret)
let yAxis = d3.axisLeft().scale(vScale);
let featureSVG = d3.select('#' + colId)
.append('svg').attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
// .append('svg').attr('width', width + margin.left + margin.right)
// .attr('height', height + margin.top + margin.bottom)
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 400")
//class to make it responsive
.classed("svg-content-responsive", true);
let featureGraph = featureSVG.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`)

34
graphs/templates/graphs/artist_graph.html

@ -3,22 +3,26 @@
{% load sass_tags %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Artist Graphs</title>
<link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}">
<meta charset="UTF-8">
<title>Artist Graphs</title>
<link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}">
<link rel="stylesheet" href="{% sass_src 'graphs/sass/responsive_graph.scss' %}">
<link rel="stylesheet" href="{% sass_src 'graphs/sass/max-height.scss' %}">
</head>
<body>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="{% static "graphs/scripts/artist_graph.js" %}"></script>
<script>
d3.json("{% url "api:get_artist_data" user_secret %}").then(function(data) {
// this is the data format needed for bubble charts
data = {
children: data
};
drawArtistGraph(data, "body");
});
</script>
<div class="container-fluid">
</div>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="{% static "graphs/scripts/artist_graph.js" %}"></script>
<script>
d3.json("{% url "api:get_artist_data" user_secret %}").then(function(data) {
// this is the data format needed for bubble charts
data = {
children: data
};
{% comment %} drawArtistGraph(data, "body"); {% endcomment %}
drawArtistGraph(data, ".container-fluid");
});
</script>
</body>
</html>

18
graphs/templates/graphs/features_graphs.html

@ -12,6 +12,7 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% sass_src 'scss/custom.scss' %}">
<link rel="stylesheet" href="{% sass_src 'graphs/sass/responsive_graph.scss' %}">
<style>
.tick {
font-size: 15px;
@ -26,15 +27,14 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="acoustic-column"></div>
<div class="col-md-3" id="dance-column"></div>
<div class="col-md-3" id="energy-column"></div>
<div class="col-md-3" id="instr-column"></div></div>
<div class="row">
<div class="col-md-3" id="loud-column"></div>
<div class="col-md-3" id="speech-column"></div>
<div class="col-md-3" id="tempo-column"></div>
<div class="col-md-3" id="valence-column"></div>
<div class="col-md-12 col-lg-6" id="acoustic-column"></div>
<div class="col-md-12 col-lg-6" id="dance-column"></div>
<div class="col-md-12 col-lg-6" id="energy-column"></div>
<div class="col-md-12 col-lg-6" id="instr-column"></div>
<div class="col-md-12 col-lg-6" id="loud-column"></div>
<div class="col-md-12 col-lg-6" id="speech-column"></div>
<div class="col-md-12 col-lg-6" id="tempo-column"></div>
<div class="col-md-12 col-lg-6" id="valence-column"></div>
</div>
</div>

0
requirements.txt → scripts/requirements.txt

0
reset_db.sh → scripts/reset_db.sh

0
reset_db.sql → scripts/reset_db.sql

0
update-history.service → scripts/update-history.service

0
update-history.sh → scripts/update-history.sh

Loading…
Cancel
Save