2b:null 2c:["$","title",null,{"children":"Test | yunhsinkuo | Observable"}] 31:T5b9,{ let width = 1600 let height = 800 let svg = d3.create('svg').attr("viewBox", [[0, 0], [width, height]]) let projection = d3.geoMercator().scale(400).center([-123,40]) let createPath = d3.geoPath(projection) let land = topojson.feature(world, world.objects.countries) let borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b) const zoom = d3.zoom() .scaleExtent([1, 8]) .translateExtent([[0, 0], [width, height]]) .on('zoom', zoomed); function zoomed(event){ console.log(event) svg.selectAll('path').attr('transform', event.transform) svg.selectAll('circle').attr('transform', event.transform) } let landPolygon = svg.append('g') .selectAll('path') .data(land.features) .join('path') .attr('d', d => createPath(d)) .attr('fill', (d, i) => { //console.log(d, i, d.properties.name) return (i % 2 == 0) ? '#757575' : '#000000' }) let bordersLine = svg.append('path') .attr('d', createPath(borders)) .attr('stroke', '#ff0000') .attr('fill', 'none') const getCentroid = (feature) => createPath.centroid(feature) let points = svg.append('g') .selectAll('circle') .data(land.features) .join('circle') .attr('r', 10) .attr("fill", '#ff0000') .attr('cx', d => { //console.log(getCentroid(d)) return getCentroid(d)[0] }) .attr('cy', d => getCentroid(d)[1]) svg.call(zoom) return svg.node() }32:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1701467065766.684,"size":756420}] 2f:{"id":"9efcaeb2f506e5cc","slug":null,"title":"Test","thumbnail":"dc65ac2f3c15c898ddda30daf35d2629cd98b162db5ca0e80339054d3b6ddb9b","access_level":"public","create_time":"$D2023-12-01T21:44:25.766Z","update_time":"$D2023-12-01T22:31:54.705Z","view_time":null,"first_public_time":"$D2023-12-01T21:44:25.766Z","has_unpublished_edits":null,"fork":{"id":"305227651b1938c9","slug":"d3-world-map","title":"D3 world map","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"8866ec4562bf16d9","login":"yunhsinkuo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/30b4b8b10734956ebf08d4f7a4af5e4bf3b8ef04bae40a075fceb3ae40d5f398","tier":"starter_2024"},"version":168,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd5bcf6548c41c14","login":"yunhsinkuo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/30b4b8b10734956ebf08d4f7a4af5e4bf3b8ef04bae40a075fceb3ae40d5f398","tier":null}],"members":[{"type":"individual","id":"bd5bcf6548c41c14","login":"yunhsinkuo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/30b4b8b10734956ebf08d4f7a4af5e4bf3b8ef04bae40a075fceb3ae40d5f398","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Test","cells":[{"id":0,"value":"# Test","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"map = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"projection = d3.geoMercator().scale(140).center([123, 23])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"Many other projections are available. [Browse them here](https://observablehq.com/collection/@d3/d3-geo-projection).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"