chart = {
const width = 400;
const height = 400;
// var b = path.bounds(world),
// s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
// t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
//const zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed);
const svg = d3
.create("svg")
.attr("viewBox", [400, 150, width, height])
.attr("width", width)
.attr("height", height);
// .on("click", reset);
const g = svg.append("g");
// const states = g.append("g")
// .attr("fill", "#444")
// .attr("cursor", "pointer")
// .selectAll("path")
// .data(topojson.feature(us, us.objects.states).features)
// .join("path")
// .on("click", clicked)
// .attr("d", path);
// states.append("title")
// .text(d => d.properties.name);
var path = d3
.geoPath()
.projection(d3.geoMercator().center([-125.13, 54.8]).scale(300));
g.selectAll("path")
.data(world.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "black")
.style("fill", "none");
// svg.call(zoom);
// function reset() {
// // states.transition().style("fill", null);
// svg
// .transition()
// .duration(750)
// .call(
// zoom.transform,
// d3.zoomIdentity,
// d3.zoomTransform(svg.node()).invert([width / 2, height / 2])
// );
// }
// function zoomed(event) {
// const { transform } = event;
// g.attr("transform", transform);
// g.attr("stroke-width", 1 / transform.k);
// }
return svg.node();
}
wo rld= FileAttachment("world-110m.json").json()
world = FileAttachment("test.json").json()
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
topojson = require("topojson-client@3")
d3 = require("d3@6","d3-geo@3", "d3-geo-projection@4")
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.
