Public
Edited
Nov 21, 2023
chart = {
const states = topojson.feature(us, us.objects.states);
const statemap = new Map(states.features.map(d => [d.id, d]));
const statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b);
const projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])
const path = d3.geoPath()
const width = 975
const height = 610
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
const g = svg.append("g");
g.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.join("path")
.attr("fill", 'lightgrey')
.attr("d", path)
g.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
g.selectAll("path")
.data(states.features)
.join("path")
.attr("fill", 'lightgrey')
.attr("stroke", 'blue')
.attr("d", path);
// Calculate the SVG's offset on the page
const svgRect = document.querySelector('svg').getBoundingClientRect()
// Calculate the top-left position for each state and adjust with the SVG's offset
states.features.forEach(d => {
const [[x, y]] = path.bounds(d);
const adjustedX = x + svgRect.left;
const adjustedY = y + svgRect.top;
const dot = document.createElement('div');
dot.style.position = 'absolute';
dot.style.left = `${adjustedX + window.scrollX}px`;
dot.style.top = `${adjustedY + window.scrollY}px`;
dot.style.width = '5px';
dot.style.height = '5px';
dot.style.borderRadius = '50%';
dot.style.backgroundColor = 'red';
dot.innerText = d.properties.name
document.body.appendChild(dot);
});
return svg.node()
}
us = FileAttachment("counties-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.
