Published
Edited
Mar 8, 2022
1 fork
1 star
chart = {
const width = 1450;
const height = 610;
const zoom = d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 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());
g.selectAll("path")
.data(topojson.feature(world, world.objects.countries).features)
.enter().append("path")
.attr("d", path);
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();
}
world= FileAttachment("world-110m.json").json()
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.
