state
viewof state = {
let value = null;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
const projection = d3.geoAlbersUsa()
.scale(1300)
.translate([487.5, 305]);
const path = d3.geoPath().projection(projection);
const clients = [
{ name: "Client A", city: "New York", state: "NY", work: "Project A", url: "https://example.com/projectA", coordinates: [-74.006, 40.7128] },
{ name: "Client B", city: "Los Angeles", state: "CA", work: "Project B", url: "https://example.com/projectB", coordinates: [-118.2437, 34.0522] },
// Add more clients here
];
svg.append("g")
.attr("fill", "#ccc")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path)
.on("click", (event, d) => {
const node = svg.node();
node.value = value = value === d.id ? null : d.id;
node.dispatchEvent(new Event("input", {bubbles: true}));
outline.attr("d", value ? path(d) : null);
});
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none")
.attr("d", path);
const outline = svg.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none");
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("text-align", "center")
.style("width", "120px")
.style("height", "auto")
.style("padding", "5px")
.style("font", "12px sans-serif")
.style("background", "lightsteelblue")
.style("border", "0px")
.style("border-radius", "8px")
.style("pointer-events", "none")
.style("opacity", 0);
svg.append("g")
.selectAll("circle")
.data(clients)
.enter().append("circle")
.attr("cx", d => projection(d.coordinates)[0])
.attr("cy", d => projection(d.coordinates)[1])
.attr("r", 5)
.attr("fill", "red")
.on("mouseover", function(event, d) {
tooltip.transition().duration(200).style("opacity", .9);
tooltip.html(`${d.name}<br/>${d.city}, ${d.state}<br/>${d.work}<br/><a href="${d.url}" target="_blank">More Info</a>`)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function() {
tooltip.transition().duration(500).style("opacity", 0);
});
return Object.assign(svg.node(), {value: null});
}
path = d3.geoPath()
us = FileAttachment("states-albers-10m.json").json()
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.
