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

Responsive features graph page

Browse Source 
In process of making artists graph maximize height responsively. Moved
misc files in base dir to new scripts dir.
This commit is contained in:
Kevin Mok
2019-03-07 07:57:15 -05:00
parent dbb1a8738e
commit 91484dbeab
14 changed files with 90 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

5
api/views.py
View File

@@ -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
View File

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

13
graphs/static/graphs/sass/max-height.scss Normal file
View File

@@ -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 Normal file
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

@@ -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
View File

0
reset_db.sh → scripts/reset_db.sh
View File

0
reset_db.sql → scripts/reset_db.sql
View File

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

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