Make bar chart with only one bar

Author: sxywu

src/visualizations/BarChart.js

@@ -8,12 +8,11 @@ const margin = {top: 20, right: 10, bottom: 20, left: 25};
 const red = '#eb6a5b';
 const green = '#b6e86f';
 const blue = '#52b6ca';
-const colors = chroma.scale([blue, green, red]);
+const colors = chroma.scale([blue, green, red]).mode('hsl');
 
-class LineChart extends Component {
+class BarChart extends Component {
   state = {
-    highs: [], // array of rects for high temps
-    lows: [], // array of rects for low temps
+    bars: [], // array of rects
     // d3 helpers
     xScale: d3.scaleTime().range([margin.left, width - margin.right]),
     yScale: d3.scaleLinear().range([height - margin.bottom, margin.top]),
@@ -32,30 +31,24 @@ class LineChart extends Component {
     // data has changed, so recalculate scale domains
     const timeDomain = d3.extent(data, d => d.date);
     const tempMax = d3.max(data, d => d.high);
-    const tempMin = d3.min(data, d => d.low);
+    const colorDomain = d3.extent(data, d => d.avg);
     xScale.domain(timeDomain);
     yScale.domain([0, tempMax]);
-    colorScale.domain([tempMin, tempMax]);
+    colorScale.domain(colorDomain);
 
     // calculate x and y for each rectangle
-    const highs = data.map(d => {
-      const y = yScale(d.high);
+    const bars = data.map(d => {
+      const y1 = yScale(d.high);
+      const y2 = yScale(d.low);
       return {
         x: xScale(d.date),
-        y, height: height - margin.bottom - y,
-        fill: colors(colorScale(d.high)),
-      }
-    });
-    const lows = data.map(d => {
-      const y = yScale(d.low);
-      return {
-        x: xScale(d.date),
-        y, height: height - margin.bottom - y,
-        fill: colors(colorScale(d.low)),
+        y: y1,
+        height: y2 - y1,
+        fill: colors(colorScale(d.avg)),
       }
     });
 
-    return {lows, highs};
+    return {bars};
   }
 
   componentDidUpdate() {
@@ -67,9 +60,7 @@ class LineChart extends Component {
 
     return (
       <svg width={width} height={height}>
-        {this.state.highs.map(d =>
-          (<rect x={d.x} y={d.y} width='2' height={d.height} fill={d.fill} />))}
-        {this.state.lows.map(d =>
+        {this.state.bars.map(d =>
           (<rect x={d.x} y={d.y} width='2' height={d.height} fill={d.fill} />))}
         <g>
           <g ref='xAxis' transform={`translate(0, ${height - margin.bottom})`} />
@@ -80,4 +71,4 @@ class LineChart extends Component {
   }
 }
 
-export default LineChart;
+export default BarChart;