chart_Malaga = {
const svg = d3.select(DOM.svg(width, height));
// EJE X ABAJO
svg
.append("g")
.call(xAxis2)
.attr("class", "x-axis")
.selectAll("text")
.attr("y", height - 60);
// EJE Y
svg.append("g").call(yAxis).attr("class", "y-axis");
// TITULOS CIUDAD
svg
.append("text")
.attr("class", "label_y")
.attr("text-anchor", "start")
.attr("y", 10)
.attr("x", 0)
.text("MÁLAGA");
// TITULOS PARTES abajo
svg
.append("text")
.attr("class", "label_x")
.attr("text-anchor", "start")
.attr("y", height - 5)
.attr("x", 60)
.text("— inmigrantes (%)");
svg
.append("text")
.attr("class", "label_x")
.attr("text-anchor", "end")
.attr("y", height - 5)
.attr("x", width)
.text("+ inmigrantes (%)");
// círculo gol
svg
.append("g")
.attr("opacity", 0.8)
.attr("class", "circulo_gol")
.selectAll("circle")
.data(data)
.join("circle")
.attr("fill", function (d) {
// perdido, empatado o ganado
if (d.renta == "encima") {
return "#AECC83";
} else if (d.renta == "debajo") {
return "#333333";
} else {
return "#BDBDBD";
}
})
.attr("cx", (d) => x(d.porcentaje))
.attr("cy", (d) => y(d.pais))
.attr("r", (d) => 3)
.on("mouseover", (d, i) => {
svg
.append("g")
.attr("class", "tooltip")
.attr("transform", `translate(${x(d.porcentaje)},${y(d.pais)})`)
.call(
popover,
`En esta sección un ${formatNumberES(d.porcentaje)}%
de personas procedentes de ${d.pais}
${d.renta == "media" ? "gana igual que la" : "gana por"} ${
d.renta
} de la renta de Málaga`,
d
);
})
.on("mouseout", () => svg.selectAll(".tooltip").call(popover, null));
return svg.node();
}
popover = (g, value, _d) => {
if (!value) return g.style("display", "none");
// tooltip group
g.style("display", null)
.style("pointer-events", "none")
.style("font", "13px sans-serif");
// tooltip container stroke
const rect = g
.selectAll("rect")
.data([null])
.join("rect")
.attr("fill", "white")
.attr("stroke", "#333333")
.attr("opacity", 0.95);
// tooltip content
const text = g
.selectAll("text")
.data([null])
.join("text")
.call((text) =>
text
.selectAll("tspan")
.data((value + "").split(/\n/))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => `${i * 1.1}em`)
.style("text-align", "center")
.style("fill", (_, i) =>
_d.renta == "media" && i == 2
? "#bdbdbd"
: _d.renta == "encima" && i == 2
? "#70894D"
: "#333333"
)
.style("font-weight", (_, i) =>
i == 0 ? "bold" : i == 2 ? "bold" : "regular"
)
.text((d) => d)
);
// tooltip positioning
const { x, y, width: w, height: h } = text.node().getBBox();
if (_d.porcentaje < 10) {
text.attr("transform", `translate(${-w / 2 + 115},${y - 40})`);
} else if (_d.porcentaje > 10) {
text.attr("transform", `translate(${-w / 2 - 110},${y - 40})`);
} else {
text.attr("transform", `translate(${-w / 2 + 10},${y - 40})`);
}
if (_d.pais == "Marruecos" && _d.porcentaje < 10) {
text.attr("transform", `translate(${-w / 2 + 115},${y + 40})`);
}
if (_d.pais == "Marruecos" && _d.porcentaje > 10) {
text.attr("transform", `translate(${-w / 2 - 110},${y + 40})`);
}
// tooltip container path
if (_d.porcentaje < 10) {
rect
.attr("width", w + 20)
.attr("height", h + 20)
.attr("transform", `translate(${-w / 2 + 105},${y - 60})`);
} else if (_d.porcentaje > 10) {
rect
.attr("width", w + 20)
.attr("height", h + 20)
.attr("transform", `translate(${-w / 2 - 120},${y - 60})`);
} else {
rect
.attr("width", w + 20)
.attr("height", h + 20)
.attr("transform", `translate(${-w / 2},${y - 60})`);
}
if (_d.pais == "Marruecos" && _d.porcentaje < 10) {
rect
.attr("width", w + 20)
.attr("height", h + 20)
.attr("transform", `translate(${-w / 2 + 105},${y + 20})`);
}
if (_d.pais == "Marruecos" && _d.porcentaje > 10) {
rect
.attr("width", w + 20)
.attr("height", h + 20)
.attr("transform", `translate(${-w / 2 - 120},${y + 20})`);
}
}
margin = ({ top: 32, right: 10, bottom: 20, left: 70 })
x = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => d.porcentaje)])
.nice()
.range([margin.left, width - margin.right])
xAxis2 = (g) =>
g
.attr("class", "x-axis")
.attr("transform", `translate(0,20)`)
.call(
d3
.axisBottom(x)
.scale(x)
.tickSize(height - 90)
)
d3 = require("d3@5")
import { select } from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
