0
220
ViewsD3.js Colores del mapa de calor basados en el valor de la variable en lugar del valor de toda la tabla
Quiero crear un mapa de calor que muestre el calor/color basado en el valor de una variable sobre todos los grupos pero no sobre todas las variables. Actualmente tengo lo siguiente, donde el color se basa en el valor sobre todos los valores en el mapa: 
Es por eso que casi todo es amarillo porque la riqueza neta de los hogares en Luxemburgo es demasiado alta. Mi código para los rectángulos es el siguiente:
// Color Scale var myColor = d3.scaleSequential() .interpolator(d3.interpolateViridis) .domain([d3.max(data, d=>d.value),d3.min(data, d=>d.value)]); // add the squares svg.selectAll() .data(data, function (d) { return d.Country + ':' + d.variable; }) .enter() .append("rect") .attr("x", function (d) { return x(d.Country) }) .attr("y", function (d) { return y(d.variable) }) .attr("rx", 4) .attr("ry", 4) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .style("fill", function (d) { return myColor(d.value) }) .style("stroke-width", 4) .style("stroke", "none") .style("opacity", 0.8) .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave) }Mis datos están en formato largo como este:
| País | Variable | Valor |
|---|---|---|
| Australia | Var 1 | Valor 1 |
| Australia | Var 2 | Valor 2 |
| ... | ... | ... |
| Australia | Var 24 | Valor 24 |
| Austria | Var 1 | Valor 25 |
| ... | ... | ... |
| Sudáfrica | Var 24 | Valor 960 |
¿Tienes alguna idea de cómo cambiar esto para que funcione? También podría transformar los datos.
¡Muchas gracias por tu ayuda y que tengas un excelente martes!
1 answers
Answer question0
Cambié los datos que proporciono al frente, agregando dos columnas: una columna sobre el valor mínimo de la variable en todos los grupos/países y una columna sobre el valor máximo de la variable en todos los grupos/países. Mi conjunto de datos ahora se ve de la siguiente manera:
| País | Variable | Valor | min | máximo |
|---|---|---|---|---|
| Australia | Var 1 | Valor 1 | Min(Var1) | Máx(Var1) |
| Australia | Var 2 | Valor 2 | Min(Var2) | Máx(Var2) |
| ... | ... | ... | ... | ... |
| Australia | Var 24 | Valor 24 | Min(Var24) | Máx(Var24) |
| Austria | Var 1 | Valor 25 | Min(Var1) | Máx(Var1) |
| ... | ... | ... | ... | ... |
| Sudáfrica | Var 24 | Valor 960 | Min(Var24) | Máx(Var24) |
Al incluir una función que me da la variable de color basada en el valor mínimo y máximo de las variables actuales, cambié el código a lo siguiente:
//Color scale function function colorPerVariable(minimun, maximum, value) { var myColor = d3.scaleSequential() .interpolator(d3.interpolateViridis) .domain([minimum, maximum]); return myColor(value); } // add the squares svg.selectAll() .data(data, function (d) { return d.Country + ':' + d.variable; }) .enter() .append("rect") .attr("x", function (d) { return x(d.Country) }) .attr("y", function (d) { return y(d.variable) }) .attr("rx", 4) .attr("ry", 4) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) //Changed part .style("fill", function (d) { return colorPerVariable(minimum = d.min, maximum = d.max, value = d.value) }) // .style("stroke-width", 4) .style("stroke", "none") .style("opacity", 0.8) .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave) }