Merge pull request #17 from dyushen/beta-tweaks

move chart files, make tweaks to some styling and labels

Author: dyushen

index.html

@@ -56,8 +56,8 @@
       </div>
 
       <div id="compare">
-        <div id="compare-chart-a" class="box image-pane dp-1 compare-chart">
-          <!--<div class="view-title">Chart 1</div>-->
+        <div id="compare-chart-c" class="box image-pane dp-1 compare-chart">
+          <!--<div class="view-title">Chart III</div>-->
           <svg width="0" height="0"></svg>
         </div>
         <div
@@ -79,8 +79,8 @@
           </div>
           <svg width="0" height="0"></svg>
         </div>
-        <div id="compare-chart-c" class="box image-pane dp-1 compare-chart">
-          <!--<div class="view-title">Chart III</div>-->
+        <div id="compare-chart-a" class="box image-pane dp-1 compare-chart">
+          <!--<div class="view-title">Chart 1</div>-->
           <svg width="0" height="0"></svg>
         </div>
       </div>
@@ -233,7 +233,7 @@
           />
         </filter>
         <filter id="blur">
-          <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
+          <feGaussianBlur in="SourceGraphic" stdDeviation="1.8" />
         </filter>
       </defs>
     </svg>

src/controllers/ComparisonController.js

@@ -5,9 +5,9 @@ import { FeatureModel } from "../models/FeatureModel.js";
 import { MouseView } from "../views/MouseView.js";
 import { TimelineView } from "../views/comparison/TimelineView.js";
 
-import { ChartA } from "../views/comparison/ChartA.js";
-import { ChartB } from "../views/comparison/ChartB.js";
-import { ChartC } from "../views/comparison/ChartC.js";
+import { DifferenceChart } from "../views/comparison/DifferenceChart.js";
+import { ViolinChart } from "../views/comparison/ViolinChart.js";
+import { SlopeChart } from "../views/comparison/SlopeChart.js";
 
 export class ComparisonController {
   topExperiment = null;
@@ -25,14 +25,15 @@ export class ComparisonController {
       onChange: this.onTimeChange.bind(this),
     });
 
-    // these names can change once we know exactly what they are
-    this.chartA = new ChartA({
+    this.diffChart = new DifferenceChart({
       container: d3.select("#compare #compare-chart-a"),
     });
-    this.chartB = new ChartB({
+
+    this.violinChart = new ViolinChart({
       container: d3.select("#compare #compare-chart-b"),
     });
-    this.chartC = new ChartC({
+
+    this.slopeChart = new SlopeChart({
       container: d3.select("#compare #compare-chart-c"),
     });
   }
@@ -48,9 +49,9 @@ export class ComparisonController {
     const data = new FeatureModel({ name });
 
     this.timeline.setTopData({ data });
-    this.chartA.setTopData({ data });
-    this.chartB.setTopData({ data, name });
-    this.chartC.setTopData({ data });
+    this.diffChart.setTopData({ data });
+    this.violinChart.setTopData({ data, name });
+    this.slopeChart.setTopData({ data });
   }
 
   setBotExperiment({ name }) {
@@ -64,9 +65,9 @@ export class ComparisonController {
     const data = new FeatureModel({ name });
 
     this.timeline.setBotData({ data });
-    this.chartA.setBotData({ data });
-    this.chartB.setBotData({ data, name });
-    this.chartC.setBotData({ data });
+    this.diffChart.setBotData({ data });
+    this.violinChart.setBotData({ data, name });
+    this.slopeChart.setBotData({ data });
   }
 
   onTimeChange({ top, bot }) {

src/views/comparison/ChartA.js renamed to src/views/comparison/DifferenceChart.js

@@ -8,7 +8,7 @@ const MARGINS = {
   right: 10,
 };
 
-export class ChartA {
+export class DifferenceChart {
   topData = null;
   botData = null;
 
@@ -30,7 +30,7 @@ export class ChartA {
       .attr("y", MARGINS.top - 6)
       .attr("font-size", 16)
       .attr("font-weight", 300)
-      .text("Experiments Difference Over Time");
+      .text("Feature Area Difference Over Time");
 
     this.svg
       .append("text")

src/views/comparison/ChartC.js renamed to src/views/comparison/SlopeChart.js

@@ -7,7 +7,7 @@ const MARGINS = {
   right: 45,
 };
 
-export class ChartC {
+export class SlopeChart {
   topData = null;
   botData = null;
 
@@ -29,7 +29,7 @@ export class ChartC {
       .attr("y", 24)
       .attr("font-size", 16)
       .attr("font-weight", 300)
-      .text("Experiments Trend Comparison");
+      .text("Area Change Start-to-End");
 
     const xlength = 0.5 * (this.width - 2 * MARGINS.left - 2 * MARGINS.right);
 

src/views/comparison/ChartB.js renamed to src/views/comparison/ViolinChart.js

@@ -7,7 +7,7 @@ const MARGINS = {
   bottom: 25,
   right: 45,
 };
-export class ChartB {
+export class ViolinChart {
   topData = null;
   botData = null;
 
@@ -29,7 +29,7 @@ export class ChartB {
       .attr("y", MARGINS.top - 28)
       .attr("font-size", 16)
       .attr("font-weight", 300)
-      .text("Experiments Overall Comparison");
+      .text("Feature Area Distribution");
 
     const xScale_length = 0.3 * (this.width - MARGINS.left - MARGINS.right);
     const gap = 0.1 * (this.width - MARGINS.left - MARGINS.right);

src/views/experiment/ImageView.js

@@ -79,13 +79,13 @@ export class ImageView {
                 const center = centers[id];
                 const points = paths[id];
 
-                g.selectAll("circle")
-                  .data([null])
-                  .join("circle")
-                  .attr("cx", center[0])
-                  .attr("cy", center[1])
-                  .attr("r", 2)
-                  .attr("fill", "white");
+                // g.selectAll("circle")
+                //   .data([null])
+                //   .join("circle")
+                //   .attr("cx", center[0])
+                //   .attr("cy", center[1])
+                //   .attr("r", 2)
+                //   .attr("fill", "white");
 
                 g.selectAll("path")
                   .data([null])