Data Engineer, México
chart = {
const width = 1015;
const height = 472;
const projection = d3.geoMercator().fitSize([width, height], topojson.feature(mx, mx.objects.states));
const path = d3.geoPath().projection(projection);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const g = svg.append("g");
const states = g.append("g")
.attr("fill", "#1C9099")//#444
.attr("cursor", "pointer")
.selectAll("path")
.data(topojson.feature(mx, mx.objects.states).features)
.join("path")
.attr("class", "county")
.attr("id", function(d){return "e"+d.properties.state_code})
.attr("d", path);
states.append("title")
.text(d => d.properties.name);
g.append("path")
.attr("fill", "none")
.attr("stroke", "#F8F2F2")
.attr("stroke-linejoin", "round")
.attr("d", path(topojson.mesh(mx, mx.objects.states, (a, b) => a !== b)));
const tooltip = svg.append("g");
svg
.selectAll(".county")
.on("touchmove mousemove", function(event, d) {
tooltip.call(callout,`${d.properties.state_name}`);
tooltip.attr("transform", `translate(${d3.pointer(event, this)})`);
d3.select(this)
.attr("stroke", "#37AFA9")
.attr("fill", "#A6BDDB")
.raise();
})
.on("touchend mouseleave", function() {
tooltip.call(callout, null);
d3.select(this)
.attr("stroke", null)
.attr("fill", null)
.lower();
});
return svg.node();
}
callout = (g, value) => {
if (!value) return g.style("display", "none");
g.style("display", null)
.style("pointer-events", "none")
.style("font", "10px sans-serif");
const path = g.selectAll("path")
.data([null])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
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("font-weight", (_, i) => i ? null : "bold")
.text(d => d));
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}
d3 = require("d3@6")
mx = FileAttachment("modMx_tj.json").json()
topojson = require("topojson-client@3")
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.
