Backend for Heat Map

client/css/bar.css

@@ -0,0 +1,60 @@
+.hero {
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  width: 100%; /* don't use 100vw, that will cause horizontal scrollbar */
+  height: 100vh;
+}
+
+.svg {
+  width: 100%;
+  height: 100%;
+}
+
+#vis {
+  display: flex;
+  align-items: stretch;
+  width: 50vh;
+
+  height: 60vh;
+  margin-left: 0;
+
+  background-color: #222425;
+}
+
+#graph {
+  display: inline-block;
+  width: 70%;
+}
+
+.bar {
+  cursor: pointer;
+
+  transition: fill .3s ease;
+
+  fill: var(--color-accent-primary-2);
+}
+
+.bar:hover, .bar:focus {
+  fill: var(--color-accent-special);
+}
+
+#bar-text {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 25%;
+  height: 100%;
+
+  text-align: right;
+  vertical-align: top;
+}
+
+.category {
+  display: flex;
+  flex-basis: 0;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+
+  text-align: right;
+}

client/js/bar.js

@@ -0,0 +1,62 @@
+/**
+ * @file constructs bar graph from scratch
+ */
+
+// hard coded data for bar chart for now
+const CHART_VALUES = [1, 3, 1, 2];
+const CHART_CATEGORIES = [
+  'Pop Music',
+  'Other Music',
+  'Electronic Music',
+  'Music of Latin America',
+];
+
+const GRAPH_HEIGHT = 100;
+// each bar container is composed of bar padding and fill
+const BAR_PERCENT_FILL = 0.7;
+const BAR_PERCENT_PADDING = 1 - BAR_PERCENT_FILL;
+
+const GRAPH_LEFT_PADDING = 2.5;
+
+/**
+ * creates SVG bar chart given chart values and categories
+ * @param {number[]} chartValues array of bar values/lengths
+ * @param {string[]} chartCategories array of bar categories/labels
+ */
+function createBarChart(chartValues, chartCategories) {
+  const maxChartValues = Math.max(...chartValues);
+  const barContainerHeight = GRAPH_HEIGHT / chartValues.length;
+
+  const barThickness = BAR_PERCENT_FILL * barContainerHeight;
+  const barUnitLength = 100 / maxChartValues;
+
+  // top graph padding depends on bar padding
+  const graphTopPadding = (BAR_PERCENT_PADDING / 2) * barContainerHeight;
+
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', '0 0 100 100');
+  svg.setAttribute('preserveAspectRatio', 'none');
+  svg.setAttribute('class', 'svg');
+  document.getElementById('graph').appendChild(svg);
+
+  for (let i = 0; i < chartValues.length; i++) {
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    svg.appendChild(g);
+    g.setAttribute('class', 'bar');
+
+    const bar = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    g.appendChild(bar);
+    bar.setAttribute('width', barUnitLength * chartValues[i]);
+    bar.setAttribute('height', barThickness);
+    bar.setAttribute('x', GRAPH_LEFT_PADDING);
+    bar.setAttribute('y', graphTopPadding + barContainerHeight * i);
+
+    const barTextContainer = document.getElementById('bar-text');
+    const category = document.createElement('div');
+    barTextContainer.appendChild(category);
+    category.setAttribute('class', 'category');
+    category.textContent = chartCategories[i];
+  }
+}
+
+createBarChart(CHART_VALUES, CHART_CATEGORIES);

client/js/genre.js

@@ -21,4 +21,3 @@ async function displayMusicGenre() {
   const genreCount = await response.text();
   genreBlock.innerHTML = genreCount;
 }
-

server/src/main/java/com/google/musicanalysis/site/YoutubeGenres.java

@@ -4,6 +4,7 @@
 import com.google.gson.JsonObject;
 import com.google.gson.JsonArray;
 import com.google.gson.Gson;
+import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.Map;
 import java.lang.Math;
@@ -22,6 +23,9 @@ public class YoutubeGenres {
   public HashMap<String, Integer> genreData = new HashMap<String, Integer>();
   public int totalMusic = 0;
   public int maxGenreCount = 0;
+  // element of value x means xth latest video is music
+  // needed for heat map
+  public ArrayList<Integer> likedMusicHistory = new ArrayList<Integer>();
 
   public YoutubeGenres() {
 
@@ -30,9 +34,11 @@ public YoutubeGenres() {
 /**
  * parses through youtube liked videos json array,
  * updates hash map to contain frequency count of each music genre
+ * @param firstVideoCount the number of videos retrieved before this http call
  * @param videos json array of youtube liked videos
+ * @return number of videos retrieved so far
  */
-  protected void calculateMusicCount(JsonArray videos) {
+  protected int calculateMusicCount(int firstVideoCount, JsonArray videos) {
     for (int i = 0; i < videos.size(); i++) {
         JsonObject video = videos.get(i).getAsJsonObject();
         JsonObject topicDetails = video.getAsJsonObject("topicDetails");
@@ -68,12 +74,17 @@ protected void calculateMusicCount(JsonArray videos) {
             }
         }
 
-        if (isMusic && totalSubgenres == 0) {
+        if (isMusic) {
+          // likedMusicHistory records video numbers that are music
+          likedMusicHistory.add(firstVideoCount + i);
+
+          if (totalSubgenres == 0) {
             // video only classified as Music so we update as "Other music"
-            this.updateGenre("Other music");
+            this.updateGenre("Other music");            
+          }
         }
     }
-    return;
+    return firstVideoCount + videos.size();
   }
 
 /**

server/src/main/java/com/google/musicanalysis/site/YoutubeServlet.java

@@ -96,6 +96,8 @@ protected void doGet(HttpServletRequest req, HttpServletResponse res)
         JsonObject likedVideoRes;
         JsonArray videos;
         YoutubeGenres genreAnalysis = new YoutubeGenres();
+        // needed to keep track of likedMusicHistory for heat map
+        int videosRetrieved = 0;
 
         // next Page Token must be an empty string for first http call
         String nextPageToken = "";
@@ -111,7 +113,8 @@ protected void doGet(HttpServletRequest req, HttpServletResponse res)
             }
 
             videos = likedVideoRes.getAsJsonArray("items");
-            genreAnalysis.calculateMusicCount(videos);
+            videosRetrieved = genreAnalysis
+                                .calculateMusicCount(videosRetrieved, videos);
 
             nextPageToken = getNextPageToken(likedVideoRes);
         }