text: $(document).ready(function() {
      loadData();
  });
  
  function loadData(){
      var margin = {top: 20, right: 20, bottom: 30, left: 40},
          width = 800 - margin.left - margin.right,
          height = 450 - margin.top - margin.bottom;
  
      var svg = d3.select("#p3_2").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom);
  
      var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
      // set x scale
      var x = d3.scaleBand().domain(["Males", "Females"]).range([0, width-100]).padding([0.5]);
  
      // set y scale
      var y = d3.scaleLinear().rangeRound([height, 0]);
  
      // set the colors
      var z = d3.scaleOrdinal()
          .range(["#608FD9", "#0AC1CF", "#FFA500", "#A52A2A"]);
  
      // load the csv and create the chart
      d3.csv("suicide_method_new.csv", function(d, i, columns) {
          for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
          d.total = t;
          return d;
      }, function(error, data) {
          if (error) throw error;
  
          var keys = data.columns.slice(1);
  
          data.sort(function(a, b) { return b.total - a.total; });
          x.domain(data.map(function(d) { return d.Sex; }));
          y.domain([0, 1]);
          z.domain(keys);
  
          g.append("g")
              .selectAll("g")
              .data(d3.stack().keys(keys)(data))
              .enter().append("g")
              .attr("fill", function(d) { return z(d.key); })
              .selectAll("rect")
              .data(function(d) { return d; })
              .enter().append("rect")
              .attr("x", function(d) { return x(d.data.Sex); })
              .attr("y", function(d) {
                  return y(d[1]/d.data.total); })
              .attr("height", function(d) { return y(d[0]/d.data.total) - y(d[1]/d.data.total); })
              .attr("width", x.bandwidth())
              .on("mouseover", function() { tooltip.style("display", null); })
              .on("mouseout", function() { tooltip.style("display", "none"); })
              .on("mousemove", function(d) {
                  // console.log(d[0]);
                  var xPosition = d3.mouse(this)[0] - 5;
                  var yPosition = d3.mouse(this)[1] - 5;
                  tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
                  tooltip.select("text").text(d[1]-d[0]);
              });
  
          g.append("g")
              .attr("class", "axis")
              .attr("transform", "translate(0," + height + ")")
              .call(d3.axisBottom(x));
  
          g.append("g")
              .attr("class", "axis")
              .call(d3.axisLeft(y).tickFormat(d3.format(".0%")))
              .append("text")
              .attr("x", 2)
              .attr("y", y(y.ticks().pop()) + 0.5)
              .attr("dy", "0.32em")
              .attr("fill", "#000")
              .attr("font-weight", "bold")
              .attr("text-anchor", "start");
  
          var legend = g.append("g")
              .attr("font-family", "sans-serif")
              .attr("font-size", 10)
              .attr("text-anchor", "end")
              .selectAll("g")
              .data(keys.slice().reverse())
              .enter().append("g")
              .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  
          legend.append("rect")
              .attr("x", width - 19)
              .attr("width", 19)
              .attr("height", 19)
              .attr("fill", z);
  
          legend.append("text")
              .attr("x", width - 24)
              .attr("y", 9.5)
              .attr("dy", "0.32em")
              .text(function(d) { return d; });
      });
  
      // Prep the tooltip bits, initial display is hidden
      var tooltip = svg.append("g")
          .attr("class", "tooltip")
          .style("display", "none");
  
      tooltip.append("rect")
          .attr("width", 60)
          .attr("height", 20)
          .attr("fill", "white")
          .style("opacity", 0.5);
  
      tooltip.append("text")
          .attr("x", 30)
          .attr("dy", "1.2em")
          .style("text-anchor", "middle")
          .attr("font-size", "12px")
          .attr("font-weight", "bold");
  }
  