Week 9: "Stacked Bars."

<!DOCTYPE html>

#form {
        position: relative;
        right: 10px;
        top: 10px;
        padding-bottom: 20px;
  }

.axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

.bar {
    fill: steelblue;
  }

text {
    font-size: 11px;
  }

.x.axis path {
    display: none;
  }

.axis text {
    font-size: 11px;
    fill: rgba(75,75,75,1);
    margin-right: 10px;
  }

</style>
</head>
<body>
  <h2>Deaths from Illnesses in 2013 in Latin America and Caribbean countries</h2>
  <p><a href="https://apps.who.int/gho/data/node.main.ghe100-by-cause?lang=en">WHO data</a>, deaths of children 0-4 years old in Latin America and Caribbean countries.</p>
    <div id="form">
      <label><input type="radio" name="mode" value="bycount" checked>Raw Count</label>
      <label><input type="radio" name="mode" value="bypercent">Percent of Illness</label>
    </div>
  <div id="chart"></div>

var xScale = d3.scale.ordinal()
      .rangeRoundBands([0, width], .3);

var yScale = d3.scale.linear()
      .rangeRound([height, 0]);

/*var color = d3.scale.category20();*/

var color = d3.scale.ordinal().range(["#8C703A", "#ABACDB", "#B574B5", "#DBABC4", "#DBBFAB", "#ACD7E3", "#E6E687", "#FA9D91", "#D6C789", "#72A886", "#8A5F76", "#92A147", "#E3E2AF", "#A5BBD1"]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .innerTickSize([0]);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .innerTickSize(d3.format(".1"));

var stack = d3.layout
    .stack();

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("diarrhoeal.csv", function(error, data) {

if (error) {
      console.log(error);
    }

my2013 = [];
				  data.forEach(function (d) {
				      if (d.year === "2013" && d.region === "Latin America & Caribbean" /*|| d.region === "Middle East & North Africa" || d.region === "East Asia & Pacific"*/) {
				      my2013.push(d);
				        }
				      });

console.log(my2013);

data.sort(function(a,b) {
      return b.country - b.country;
    });

var illnesses = ["diarrhoeal_diseases","hiv","pertussis","measles","meningitis_encephalitis","malaria","respiratory_infections","prematurity","birth_asphixia","sepsis_infectious_newborn","perinatal_nutritional","congenital_anomalies","injuries","other"];

var stacked = stack(makeData(illnesses, my2013));

console.log(stacked);

xScale.domain(my2013.map(function(d) {
    return d.country;
  }));

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .selectAll("text")
        .attr("dy", ".5em")
        .attr("transform", "rotate(-45)")
        .style("text-anchor", "end");

svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate("+ margin.right - width + ",0)")
      .call(yAxis);

svg.append("text")
        .attr("class", "y label")
        .attr("transform", "translate(" + (margin.right - margin.left - 90) + " ," +
                (margin.top - 7) + ") rotate(-90)")
        .attr("y", -40)
        .attr("dy", ".11em")
        .style("text-anchor", "middle")
        .text("Deaths");

var country = svg.selectAll(".country")
      .data(stacked)
      .enter().append("g")
          .attr("class", "country")
          .style("fill", function(d,i) {
              return color(i);
          });

country.selectAll("rect")
        .data(function(d) {
          console.log("array for a rectangle");
          return d;
        })
        .enter().append("rect")
          .attr("width", xScale.rangeBand());

transitionCount();

drawLegend();

d3.selectAll("input").on("change", handleFormClick);

function handleFormClick() {
      if (this.value === "bypercent") {
        transitionPercent();
      } else {
        transitionCount();
      }
    }

function makeData(illnesses, my2013) {
      return illnesses.map(function(illness) {
        return my2013.map(function(d) {
          return {x: d["country"], y: +d[illness]};
        })
      });
    }

function transitionPercent () {
      yAxis.tickFormat(d3.format("%"));
      stack.offset("expand"); // use this to get it to be relative/normalized!
      var stacked = stack(makeData(illnesses, my2013));
      transitionRects(stacked);
    }

function transitionCount() {
      yAxis.tickFormat(d3.format(".2s")); // for the stacked totals version
      stack.offset("zero");
      var stacked = stack(makeData(illnesses, my2013));
      transitionRects(stacked);
    }

function transitionRects(stacked) {
      yScale.domain([0, d3.max(stacked[stacked.length-1], function(d) {
        return d.y0 + d.y;
      })]);

var country = svg.selectAll(".country")
        .data(stacked);

country.selectAll("rect")
        .data(function(d) {
          console.log("array for a recatangle");
          return d;
        })

svg.selectAll("g.country rect")
        .transition()
        .duration(350)
        .attr("x", function(d) {
          return xScale(d.x);
        })
        .attr("y", function(d) {
          return yScale(d.y0 + d.y);
        })
        .attr("height", function(d) {
          return yScale(d.y0) - yScale(d.y0 + d.y); //height is base - tallness
        });
      svg.selectAll(".y.axis")
        .transition()
        .call(yAxis)
        .selectAll("text")
          .attr("dy", ".1em")
          .attr("x", -10)
          .style("text-anchor", "end");
    }

function drawLegend() {
      var legend = svg.selectAll(".legend")
          .data(color.domain().slice())
          .enter().append("g")
          .attr("class", "legend")
          .attr("transform", function(d,i){
            return "translate(0," + i * 20 + ")";
          });

legend.append("rect")
          .attr("x", width + 15)
          .attr("width", 15)
          .attr("height", 15)
          .style("fill", color);

legend.append("text")
           .attr("x", width + 44)
           .attr("y", 6)
           .attr("dy", ".5em")
           .style("text-anchor", "start")
           .text(function(d, i) {
             return illnesses[i];
           });
    }
});

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js