"Week 10: tooltips."

<!DOCTYPE html>

body {
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 13px;
    padding: 50px;
  }

#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;
  }

.tooltip {
    position: absolute;
    z-index: 10;
    opacity:1;
  }
  .tooltip p {
    font-family: "Open Sans", sans-serif;
    line-height: 1.4;
    color: black;
    font-size: 13px;
		background-color: rgba(255,255,255,0.8);
		border: rgba(230,230,230,1) 1px solid;
		padding: 5px 7px 5px 7px;
  }

</style>
</head>
<body>
  <h2>Deaths in children aged under 5 (per 1,000 live births) in 2013</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, by causes.</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 tooltip = d3.select("body")
      .append("div")
      .attr("class", "tooltip");

var percentClicked = false;

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 and encephalitis","Malaria","Respiratory infections","Prematurity","Birth asphixia","Sepsis and infections","Perinatal and 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")
      .call(yAxis)
      .append("text")
        .attr("class", "y label")
        .attr("transform", "rotate(-90)")
        .attr("y", -60)
        .attr("dy", ".5em")
        .attr("dx", 5)
        .style("text-anchor", "end")
        .text("Mortality rate under 5");

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

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

transitionCount();

drawLegend();

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

function makeData(illnesses, data) {
      return illnesses.map(function(illness) {
        return data.map(function(d) {
          return {
            x: d["country"],
            y: +d[illness],
            illness: 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(".2n")); // 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) {
          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")
          .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];
           });
    }

//tooltip and interaction

rectangles
            .on("mouseover", mouseoverFunc)
            .on("mousemove", mousemoveFunc)
            .on("mouseout", mouseoutFunc);

function mousemoveFunc(d) {
            tooltip
                .style("top", (d3.event.pageY - 5) + "px")
                .style("left", (d3.event.pageX + 10) + "px");
        }

function mouseoutFunc(d) {
            return tooltip.style("display", "none"); // this sets it to invisible!
        }

});

</script>

</body>
</html>

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