From db936ff8b1327fdb6f205ea00f8aed21f45d3e99 Mon Sep 17 00:00:00 2001
From: eitan <eitan@spotify.com>
Date: Tue, 20 Dec 2016 13:46:48 -0500
Subject: [PATCH 1/2] [Histogram] Change method of calculating x and y for d3
 v4

---
 src/Histogram.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/Histogram.js b/src/Histogram.js
index 26db6060..2afad535 100644
--- a/src/Histogram.js
+++ b/src/Histogram.js
@@ -24,8 +24,12 @@ export default class Histogram extends React.Component {
   }
 
   componentWillMount() {
-    const histogramData = d3.layout.histogram().bins(30)(this.props.data);
-    //console.log('histogram', this.props.data, histogramData);
+    const histogram = d3.histogram()
+      .domain(this.props.domain.x)
+      .thresholds(30);
+
+    const histogramData = histogram(this.props.data);
+
     this.setState({histogramData});
   }
 
@@ -35,9 +39,9 @@ export default class Histogram extends React.Component {
 
     return <AreaBarChart
       data={this.state.histogramData}
-      getX="x"
-      getXEnd={d => d.x + d.dx}
-      getY="y"
+      getX={d => d.x0}
+      getXEnd={d => d.x1}
+      getY={d => d.length}
       {...{name, scale, axisType, scaleWidth, scaleHeight, plotWidth, plotHeight}}
     />;
   }

From 478edd016334dc31dc0b795106048bd9d454a7a0 Mon Sep 17 00:00:00 2001
From: eitan <eitan@spotify.com>
Date: Tue, 20 Dec 2016 14:19:36 -0500
Subject: [PATCH 2/2] [Histogram] Add comments to go back to

---
 src/Histogram.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Histogram.js b/src/Histogram.js
index 2afad535..08e089d5 100644
--- a/src/Histogram.js
+++ b/src/Histogram.js
@@ -28,6 +28,7 @@ export default class Histogram extends React.Component {
       .domain(this.props.domain.x)
       .thresholds(30);
 
+    // why is `histogram` returning an array of length 40+ when it should be exactly 30???
     const histogramData = histogram(this.props.data);
 
     this.setState({histogramData});