Merge pull request #56 from jrg94/text-fix

Fixed Text Skewing

README.md

@@ -18,7 +18,7 @@ JuxtaMIDI -- a tool to compare and contrast MIDI recordings.
 - Final Report
   - [PDF][6]
   - [Source Code][16]
-  
+
 ## Sample MIDI Files
 
 - [Mario Theme][18]
@@ -55,4 +55,4 @@ JuxtaMIDI -- a tool to compare and contrast MIDI recordings.
 [19]: data/Mario-Few.mid
 [20]: data/Mario-Shift.mid
 [21]: #sample-midi-files
-[22]: https://github.com/jrg94/JuxtaMIDI/releases/tag/v1.3.0
+[22]: https://github.com/jrg94/JuxtaMIDI/releases/tag/v1.3.1

midiviz/dashboard.css

@@ -6,7 +6,7 @@ body {
 .container {
   display: grid;
   grid-gap: 10px;
-  grid-template-columns: 9% 42% 42% auto;
+  grid-template-columns: 10% 42% 42% auto;
   grid-template-rows: 60% auto;
   width: 98%;
   height: 98%;
@@ -121,6 +121,10 @@ div.graph-disabled {
   padding: 2%;
 }
 
+.axes-labels {
+  font: 20px sans-serif;
+}
+
 .welcome-message {
   align-self: center;
   justify-self: center;

midiviz/dashboard.html

@@ -21,15 +21,15 @@
       <div class="welcome-message">
         Welcome to the MIDI Comparison Tool! To get started, add MIDI files using the pane on the left.
       </div>
-      <svg id="notes-over-time" viewBox="0 0 3500 600" width="200%" height="100%" preserveAspectRatio="none"></svg>
+      <svg id="notes-over-time"></svg>
     </div>
 
     <div class="box graph-pane note-frequency-graph-pane">
-      <svg id="note-frequency" viewBox="0 0 700 400" width="100%" height="100%" preserveAspectRatio="none"></svg>
+      <svg id="note-frequency"></svg>
     </div>
 
     <div class="box graph-pane velocity-over-time-graph-pane">
-      <svg id="velocity-over-time" viewBox="0 0 1400 400" width="200%" height="100%" preserveAspectRatio="none"></svg>
+      <svg id="velocity-over-time"></svg>
     </div>
 
     <div class="box graph-view-buttons">

midiviz/js/Dashboard.js

@@ -22,6 +22,7 @@ class Dashboard {
 
   clearSvgs() {
     d3.selectAll("svg")
+      .html("")
       .selectAll("*")
       .remove();
   }

midiviz/js/GraphViewPane.js

@@ -34,12 +34,12 @@ class GraphViewPane {
   switchToPane(pane) {
     d3.selectAll(".graph-view-buttons span").classed("disabled-view-button", false);
     d3.selectAll(".graph-view-buttons span").classed("selected-view-button", false);
+    this.dashboard.clearSvgs();
     if (pane == Views.ALL) {
       d3.select("#view-all").classed("selected-view-button", true);
       d3.selectAll(".graph-pane").classed("selected-view", false);
       d3.selectAll(".graph-pane").classed("graph-disabled", false);
       d3.selectAll(".graph-pane").classed("single-graph-activated", false);
-      this.dashboard.clearSvgs();
       this.dashboard.panes.notesPlayed.graph();
       this.dashboard.panes.notesFrequency.graph();
       this.dashboard.panes.notesVelocity.graph();

midiviz/js/NotesFrequencyPane.js

@@ -9,12 +9,9 @@ class NotesFrequencyPane {
   graph() {
     var svg = d3.select("#note-frequency");
 
-    var padding = 50;
-    var width;
-    var height;
-    [width, height] = getGraphDimensions("#note-frequency");
-
-    // TODO: Separate this padding into a map? top/bottom/left/right. It appears inconsistently centered now.
+    var width, height, padding;
+    [width, height, padding] = getPaneDimensions("#note-frequency");
+    setGraphDimensions("#note-frequency", width, height);
 
     var keys = Object.keys(this.dashboard.midiFiles);
     var mapping = this.dashboard.mappings.frequency;

midiviz/js/NotesPlayedPane.js

@@ -14,13 +14,10 @@ class NotesPlayedPane {
 
     var keys = Object.keys(this.dashboard.midiFiles);
 
-    // TODO: Adjust width here based on parameters? (# of notes, length of song, screen size)?
-    // Adjust title formula accordingly. Currently at * 2 for both
-    var padding = 50;
-    var width;
-    var height;
-    [width, height] = getGraphDimensions("#notes-over-time");
-
+    var padding, width, height;
+    [width, height, padding] = getPaneDimensions("#notes-over-time");
+    width *= 2;
+    setGraphDimensions("#notes-over-time", width, height, 2);
 
     let mapping = this.dashboard.mappings.notes;
 

midiviz/js/NotesVelocityPane.js

@@ -10,10 +10,10 @@ class NotesVelocityPane {
   graph() {
     var svg = d3.select("#velocity-over-time");
 
-    var padding = 50;
-    var width;
-    var height;
-    [width, height] = getGraphDimensions("#velocity-over-time");
+    var padding, width, height;
+    [width, height, padding] = getPaneDimensions("#velocity-over-time");
+    width *= 2;
+    setGraphDimensions("#velocity-over-time", width, height, 2);
 
     var keys = Object.keys(this.dashboard.midiFiles);
     var timestamps = this.dashboard.mappings.velocity;

midiviz/js/Utils.js

@@ -37,6 +37,7 @@ function drawTitle(svg, width, height, padding, title) {
     .style("text-anchor", "middle")
     .style("font-size", "18px")
     .text(title)
+    .classed("axes-labels", true);
 }
 
 /**
@@ -66,12 +67,12 @@ function drawXAxis(svg, xScale, padding, height, width, label, rotated=false) {
       .call(d3.axisBottom(xScale))
   }
 
-
   // Draw x-axis title
   svg.append("text")
-    .attr("transform", "translate(" + ((width / 2) - padding / 2) + " ," + (height - 10) + ")")
+    .attr("transform", "translate(" + ((width / 2) - padding / 2) + " ," + (height - 5) + ")")
     .style("text-anchor", "middle")
-    .text(label);
+    .text(label)
+    .classed("axes-labels", true);
 }
 
 /**
@@ -95,13 +96,28 @@ function drawYAxis(svg, yScale, padding, height, label) {
     .attr("x", 0 - (height / 2))
     .attr("dy", "1em")
     .style("text-anchor", "middle")
-    .text(label);
+    .text(label)
+    .classed("axes-labels", true);
 }
 
-function getGraphDimensions(graph) {
+/**
+ * Grabs the dimensions of the SVG container
+ */
+function getPaneDimensions(graph) {
   var svg = d3.select(graph);
-  var viewBox = svg.attr("viewBox").split(" ");
-  var width = parseInt(viewBox[2], 10);
-  var height = parseInt(viewBox[3], 10);
-  return [width, height];
+  var width = svg.node().parentNode.getBoundingClientRect().width;
+  var height = svg.node().parentNode.getBoundingClientRect().height;
+  return [width, height, 50];
+}
+
+/**
+ * Sets the dimensions of the SVG
+ */
+function setGraphDimensions(graph, width, height, scalingFactor = 1) {
+  var widthPercentage = 100 * scalingFactor;
+  var svg = d3.select(graph)
+    .attr("width", `${widthPercentage}%`)
+    .attr("height", "100%")
+    .attr("viewBox", `0 0 ${width} ${height}`)
+    .attr("preserveAspectRatio", "none");
 }