histogram - updated demo, layer.exit

bower.json

@@ -25,6 +25,7 @@
     "simple-statistics": "^2.0.0",
     "d3-legend": "^1.10.0",
     "moment": "^2.14.1",
-    "lodash": "^4.15.0"
+    "lodash": "^4.15.0",
+    "jquery": "^3.1.0"
   }
 }

examples/histogram/demo.js

@@ -1,15 +1,16 @@
+var flowerGroups = {
+    key: 'species',
+    label: "Species"
+};
+
 var confFlowers = {
     x:{
-        key: 'petal length',
-        label: 'petal length'
+        key: 'sepal width',
+        label: 'sepal width'
     },
-    groups:{
-        key: 'species',
-        label: "Species"
-    }
-    // groups: false
-
+    groups:flowerGroups
 };
+
 // conf = new  ODCD3.ScatterPlotConfig();
 // conf.guides = true;
 
@@ -49,5 +50,15 @@ d3.csv("../data/flowers.csv", function(error, data) {
     plot2 = new ODCD3.Histogram("#plot2", data, conf);
 
 });
+$("#plot2-stacked").change(function(){
 
+    confFlowers.groups = this.checked ?  flowerGroups : false;
 
+    plot2.setConfig(confFlowers).init();
+});
+
+$("#plot2-x-key").change(function(){
+
+    confFlowers.x.label = confFlowers.x.key =  $(this).val();
+    plot2.setConfig(confFlowers).init();
+});

examples/histogram/index.html

@@ -9,11 +9,24 @@
 <h1>Histogram demo</h1>
 
 <div id="plot" style=" max-width: 600px;margin-bottom: 40px"></div>
+<p>
+    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="plot2-stacked">
+        <input type="checkbox" id="plot2-stacked" class="mdl-checkbox__input" checked>
+        <span class="mdl-checkbox__label">Stacked</span>
+    </label>
+    <select id="plot2-x-key">
+        <option value="sepal width">sepal width</option>
+        <option value="sepal length">sepal length</option>
+        <option value="petal width">petal width</option>
+        <option value="petal length">petal length</option>
+    </select>
+</p>
 <div id="plot2" style=" max-width: 600px;margin-bottom: 40px"></div>
 
 
 <script src="../../bower_components/d3/d3.min.js" charset="utf-8"></script>
 <script src="../../dist/odc-d3.js" charset="utf-8"></script>
+<script src="../../bower_components/jquery/dist/jquery.min.js" charset="utf-8"></script>
 <script src="demo.js"></script>
 </body>
 </html>

src/chart.js

@@ -140,13 +140,12 @@ export class Chart {
 
     initPlot() {
         var margin = this.config.margin;
-        this.plot={
-            margin:{
-                top: margin.top,
-                bottom: margin.bottom,
-                left: margin.left,
-                right: margin.right
-            }
+        this.plot = this.plot || {};
+        this.plot.margin = {
+            top: margin.top,
+            bottom: margin.bottom,
+            left: margin.left,
+            right: margin.right
         };
     }
 

src/histogram.js

@@ -65,7 +65,6 @@ export class Histogram extends Chart{
             color: null//color scale mapping function
         };
 
-
         this.plot.showLegend = conf.showLegend;
         if(this.plot.showLegend){
             this.plot.margin.right = conf.margin.right + conf.legend.width+conf.legend.margin*2;
@@ -267,7 +266,7 @@ export class Histogram extends Chart{
                     .style("opacity", 0);
             });
         }
-
+        layer.exit().remove();
         bar.exit().remove();
     }