add styles

styles/_D33dDeaggregationBin.scss

+@import '_GraphVariables.scss';
+
+.D33dDeaggregationBin {
+  > g {
+    > path {
+      stroke: #666;
+      stroke-width: 0.5px;
+    }
+
+    > text {
+      fill: #666;
+      font-size: 0.7em;
+      line-height: 1;
+    }
+  }
+
+  [data-bin-index='0'] > path {
+    fill: $graphColor0;
+  }
+
+  [data-bin-index='1'] > path {
+    fill: $graphColor1;
+  }
+
+  [data-bin-index='2'] > path {
+    fill: $graphColor2;
+  }
+
+  [data-bin-index='3'] > path {
+    fill: $graphColor3;
+  }
+
+  [data-bin-index='4'] > path {
+    fill: $graphColor4;
+  }
+
+  [data-bin-index='5'] > path {
+    fill: $graphColor5;
+  }
+
+  [data-bin-index='6'] > path {
+    fill: $graphColor6;
+  }
+
+  [data-bin-index='7'] > path {
+    fill: $graphColor7;
+  }
+
+  [data-bin-index='8'] > path {
+    fill: $graphColor8;
+  }
+
+  [data-bin-index='9'] > path {
+    fill: $graphColor9;
+  }
+
+  [data-bin-index='10'] > path {
+    fill: $graphColor10;
+  }
+
+  [data-bin-index='11'] > path {
+    fill: $graphColor11;
+  }
+}

styles/_D3View.scss

+.D3BaseView {
+  height: 0;
+  overflow: hidden;
+  /**
+    padding-bottom is set to `(100 * height / width)%` by the D3View class.
+    This preserves aspect ratio, but allows plots to be responsive in IE.
+   */
+  position: relative;
+  width: 100%;
+
+  /**
+    work around suggested by
+    https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3723601/
+   */
+  &.ms-render-fix {
+    font-size: 101%;
+  }
+
+  > svg {
+    fill: none;
+    left: 0;
+    position: absolute;
+    stroke: none;
+    stroke-width: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  /* text */
+  .plot-title,
+  .tooltip-content > text {
+    fill: #000;
+  }
+
+  .tooltip-content {
+    .value {
+      font-weight: bold;
+    }
+  }
+
+  .tooltip-outline {
+    stroke: #000;
+    stroke-width: 1;
+  }
+
+  .legend,
+  .tooltip-outline {
+    fill: #fff;
+  }
+}

styles/_DeaggregationGraphView.scss

+.DeaggregationGraphView {
+  .axis {
+    path {
+      stroke: #999;
+      stroke-width: 1px;
+    }
+
+    text {
+      fill: #999;
+      font-size: 0.7em;
+    }
+  }
+
+  .grid-line {
+    stroke: #efefef;
+    stroke-width: 1px;
+  }
+}

styles/_GraphVariables.scss

+$lineStroke: 2;
+$pointStroke: 3;
+$selectedStrokeOffset: 3;
+
+$selectedGraphColor: #444;
+
+/*
+ * Using a diverging (red-yellow-blue) color scheme from:
+ * http://colorbrewer2.org/#type=diverging&scheme=RdYlBu&n=11
+ */
+
+$graphColor0: #a50026;
+$graphColor1: #d73027;
+$graphColor2: #f46d43;
+$graphColor3: #fdae61;
+$graphColor4: #fee090;
+$graphColor5: #ffffbf;
+$graphColor6: #e0f3f8;
+$graphColor7: #abd9e9;
+$graphColor8: #74add1;
+$graphColor9: #4575b4;
+$graphColor10: #313695;
+$graphColor11: #081d58;
+
+$curveColor0: #1f77b4;
+$curveColor1: #ff7f0e;
+$curveColor2: #2ca02c;
+$curveColor3: #d62728;
+$curveColor4: #9467bd;
+$curveColor5: #e377c2;
+$curveColor6: #bcbd22;
+$curveColor7: #17becf;
+$curveColor8: #aec7e8;
+$curveColor9: #ffbb78;
+$curveColor10: #98df8a;
+$curveColor11: #ff9896;

styles/disagg-d3.scss

+@import './D33dDeaggregationBin';
+@import './D3View';
+@import './DeaggregationGraphView';
+@import './GraphVariables';