Stacked Bar Chart with Tooltip and Color Change D3.v4

D3js v4 Stacked Bar Chart - with Tooltip Hover

Based on D3 Stacked Bar Chart by Mike Bostock https://bl.ocks.org/mbostock/3886208

Tooltip code based on D3 Stacked Bar Chart with Tooltips by Michael Stanaland /mstanaland/6100713

forked from mjfoster83's block: D3js v4 Stacked Bar Chart - with Tooltip Hover

<!DOCTYPE html>
<style>
body {
  font-family: 'Open Sans', sans-serif;
}
#main {
  width: 1000px;
}
.axis .domain {
  display: none;
}
  
</style>
<div id="main">
<svg width="1000" height="500"></svg>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
  
//Dimensiones del objeto SVG y consideraciones de márgenes para el caso particular. 
  
var bottomLabelMargin = 70,
    rightLabelMargin = 300;
  
var svg = d3.select("svg"),
    margin = {top: 20, right: 50, bottom: 50, left: 40},
    width = +svg.attr("width") - margin.left - margin.right - rightLabelMargin,
    height = +svg.attr("height") - margin.top - margin.bottom - bottomLabelMargin,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Selección de la escala del eje x
var x = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.05)
    .align(0.1);

// Selección de la escala del eje y
var y = d3.scaleLinear()
    .rangeRound([height, 0]);

//Selección de los colores de las barras 
var z = d3.scaleOrdinal()
    .range(["#bd0026","#f03b20","#fd8d3c","#fecc5c","#ffffb2"]);

//Carga de los datos para la visualización. Son datos procesados derivados de los 
d3.csv("viz2.csv", function(d, i, columns) {
  for (i = 1, t = 0; i < 6; ++i) t += d[columns[i]] = +d[columns[i]];
  d.total = t;
  return d;
}, function(error, data) {
  if (error) throw error;

//Selección de las columnas del conjunto de datos que utilizaré
  var keys = data.columns.slice(1, 6);

//Ordenamiento de los datos según la categoría de riesgo y definiciones del dominio de los ejes
  data.sort(function(a, b) { return b.sinRiesgoPerc - a.sinRiesgoPerc; });
  x.domain(data.map(function(d) { return d.departamento; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
  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.departamento); })
      .attr("y", function(d) { return y(d[1]); })
      .attr("height", function(d) { return y(d[0]) - y(d[1]); })
      .attr("width", x.bandwidth())
    .on("mouseover", function() { tooltip.style("display", null); d3.select(this).attr("fill", "#588C73")})
    .on("mouseout", function(d, i) { tooltip.style("display", "none");d3.select(this).attr("fill", function() {
                return "";
            });})
    .on("mousemove", function(d) {
      console.log(d);
      var xPosition = d3.mouse(this)[0]- 10;
      var yPosition = d3.mouse(this)[1]- 10;
      tooltip.attr("transform", "translate(" + (xPosition + 10) + "," + yPosition + ")");
      tooltip.select("text").text("Porcentaje de municipios en esta categoría de riesgo: " + d3.format(".4")(d[1]-d[0]) + "%");
    })
  	.attr("class", "bar");

//Definiciones del eje X con rotación de etiquetas.
  g.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    	.selectAll("text")
  		.attr("transform", "rotate(45)")
      .attr("text-anchor", "start")
  		.attr("font-size", "12");
  
  //Definiciones del eje Y: Etiquetas, rótulo del eje y tamaño.
  g.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y).ticks(null, "s"))
    .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")
  		.text("Porcentaje de municipios por rangos de riesgo del IRCA (%)")
  		.attr("font-size", 12)
    	.attr("text-anchor", "middle")
  		.attr("transform", "rotate(-90)")
  		.attr("x", 0 - (height/2))
  		.attr("y", 5 - margin.left);

//Definiciones de las convenciones, fuente y posición
  var legend = g.append("g")
      .attr("font-family", "helvetica")
      .attr("font-size", 12)
      .attr("text-anchor", "start")
    .selectAll("g")
    .data(keys.slice())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 26 + ")"; });

legend.append("rect")
      .attr("x", width - 10)
      .attr("width", 19)
      .attr("height", 19)
      .attr("fill", z);

//Nombrando las convenciones
  legend.append("text")
      .attr("x", width + 20)
      .attr("y", 9.5)
      .attr("dy", "0.32em")
      .text(function(d) { t = ""; if(d == "inviablePerc"){ t = "Sanitariamente inviable"} else if (d == "altoPerc"){ t = "Riesgo alto"} else if (d == "medioPerc"){ t = "Riesgo medio"} else if (d == "bajoPerc"){ t = "Riesgo bajo"} else {t = "Sin riesgo"}; return t });
});

//Preparación de la forma de los tooltips
  var tooltip = svg.append("g")
    .attr("class", "tooltip")
    .style("display", "none");
      
  //Creación del rectángulo del tooltip
  tooltip.append("rect")
    .attr("width", 360)
    .attr("height", 22)
    .attr("fill", "white")
    .style("opacity", 0.4);

//Justificación del texto en el rectángulo
  tooltip.append("text")
    .attr("x", 2)
    .attr("dy", "1.2em")
    .style("text-anchor", "center")
    .attr("font-size", "12px")
    .attr("font-weight", "bold");

</script>

https://d3js.org/d3.v4.min.js