Responsive features graph page

In process of making artists graph maximize height responsively. Moved
misc files in base dir to new scripts dir.

.gitignore

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

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) 

graphs/static/graphs/css/graphs.css

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

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%;
+}

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;
+  }
+}

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 width = 1000 - margin.right - margin.left;
-    let height = 1000 - margin.top - margin.bottom;
+    // 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)
+        //responsive SVG needs these 2 attributes and no width and height attr
-        .attr("height", height + margin.top + margin.bottom)
+        .attr("preserveAspectRatio", "xMinYMin meet")
-        .attr("class", "bubble");
+        .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,7 +95,8 @@ function drawArtistGraph(artistData, parentElem) {
         .attr("fill", "white");
 
      d3.select(self.frameElement)
-         .style("height", height + "px");
+         // .style("height", height + "px");
+         .style("height", "100%")
 
 
 

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)
+            // .append('svg').attr('width', width + margin.left + margin.right)
-            .attr('height', height + margin.top + margin.bottom);
+            // .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})`)

graphs/templates/graphs/artist_graph.html

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

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-12 col-lg-6" id="acoustic-column"></div>
-			  <div class="col-md-3" id="dance-column"></div>
+			  <div class="col-md-12 col-lg-6" id="dance-column"></div>
-			  <div class="col-md-3" id="energy-column"></div>
+			  <div class="col-md-12 col-lg-6" id="energy-column"></div>
-			  <div class="col-md-3" id="instr-column"></div></div>
+			  <div class="col-md-12 col-lg-6" id="instr-column"></div>
-			<div class="row">
+			  <div class="col-md-12 col-lg-6" id="loud-column"></div>
-			  <div class="col-md-3" id="loud-column"></div>
+			  <div class="col-md-12 col-lg-6" id="speech-column"></div>
-			  <div class="col-md-3" id="speech-column"></div>
+			  <div class="col-md-12 col-lg-6" id="tempo-column"></div>
-			  <div class="col-md-3" id="tempo-column"></div>
+			  <div class="col-md-12 col-lg-6" id="valence-column"></div>
-			  <div class="col-md-3" id="valence-column"></div>
 			</div>
 		</div>