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

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>