bar charts bug

[brandly]

hey! happy to see this data rendered, but some things look suspect! here's FL:

compare the FL bar, which is dominated by the blue portion, to the pie chart, which looks like an even split.

NC, GA, MI, and maybe others suffer from the same thing. hopefully it's an easy fix! thanks.

[brandly]

the stacked bar charts were overlapping one another. they each started at y=0 instead of really stacking.

i made this change, where i choose a y based on the sum of all remaining votes i.e. i add up the votes for all yet-to-be-rendered parties:

diff --git a/frontend/components/graphs/bar_chart.jsx b/frontend/components/graphs/bar_chart.jsx
index fc2ecaa..6279d3f 100644
--- a/frontend/components/graphs/bar_chart.jsx
+++ b/frontend/components/graphs/bar_chart.jsx
@@ -99,12 +99,15 @@ class BarChart extends React.Component{
   }

   populateBars(state, xScale, yScale, data, chart, height){
+    const votesAtIndex = (index) =>
+      data.slice(index).map(({votes}) => votes).reduce((a, b) => a + b, 0)
+
     const bars = chart.selectAll("." + state)
       .data(data)
     .enter().append("rect")
       .attr("class", (d) => ("bar " + state + " " + d.party))
       .attr("x", (d) => (xScale(state)))
-      .attr("y", (d) => (yScale(d.votes)))
+      .attr("y", (d, index) => (yScale(votesAtIndex(index))))
       .on("click", () => {this.props.click({currentState: state})});

     bars.transition()

resulting in these nice bars:

my understanding of d3 is not that great, so there may be a better way. but i think this is the right idea!

the top of the chart is getting cut off, i believe, so there are other details to figure out still. thanks again

[brandly]

okay, i'm walking away now lol

i'm finding the max total votes of any state:

diff --git a/frontend/components/graphs/bar_chart.jsx b/frontend/components/graphs/bar_chart.jsx
index fc2ecaa..18fa769 100644
--- a/frontend/components/graphs/bar_chart.jsx
+++ b/frontend/components/graphs/bar_chart.jsx
@@ -39,9 +39,15 @@ class BarChart extends React.Component{
             .padding(0.1)
             .domain(labels);

+        const mostTotalVotes = Math.max.apply(Math,
+          Object.entries(filteredData).map(([state, list]) =>
+            list.map(({votes}) => votes).reduce((a, b) => a + b, 0)
+          )
+        )
+
         const y = d3.scaleLinear()
             .range([height, 0])
-            .domain(([0, Math.max.apply(null, JSON.stringify(filteredData).match(/\d+/g).map(el => parseInt(el)))]));
+            .domain(([0, mostTotalVotes]));

         // x axis ticks
         chart.append("g")
@@ -99,12 +105,15 @@ class BarChart extends React.Component{
   }

   populateBars(state, xScale, yScale, data, chart, height){
+    const votesAtIndex = (index) =>
+      data.slice(index).map(({votes}) => votes).reduce((a, b) => a + b, 0)
+
     const bars = chart.selectAll("." + state)
       .data(data)
     .enter().append("rect")
       .attr("class", (d) => ("bar " + state + " " + d.party))
       .attr("x", (d) => (xScale(state)))
-      .attr("y", (d) => (yScale(d.votes)))
+      .attr("y", (d, index) => (yScale(votesAtIndex(index))))
       .on("click", () => {this.props.click({currentState: state})});

     bars.transition()

which accommodates california's growing population: