2c:null 2d:["$","title",null,{"children":"SVG World map | Víctor Pascual | Observable"}] 32:[] 30:{"id":"323245e571eea5c1","slug":"first-attempt-of-drawing-a-svg-world-map-with-orthographic-p","title":"SVG World map","thumbnail":"3fbfde007d2f4d2d0fb88fba74ac649a3b177f3ac8cc3d1aac17cb7190fc0ea9","access_level":"public","create_time":"$D2020-05-05T11:07:59.469Z","update_time":"$D2022-03-01T12:15:58.946Z","view_time":null,"first_public_time":"$D2020-05-05T11:17:50.018Z","fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"9140f0838d171de0","login":"vpascual","name":"Víctor Pascual","avatar_url":"https://avatars-next.observableusercontent.com/153c0f1e34b01ae9f0eca434a5b3ae760f40f547c7e56b41e13429bed0609999","tier":"starter_2024"},"version":193,"publish_version":193,"role":null,"authored":false,"authors":[{"type":"individual","id":"73b83c7ba3998551","login":"vpascual","name":"Víctor Pascual","avatar_url":"https://avatars-next.observableusercontent.com/153c0f1e34b01ae9f0eca434a5b3ae760f40f547c7e56b41e13429bed0609999","tier":null}],"members":[{"type":"individual","id":"73b83c7ba3998551","login":"vpascual","name":"Víctor Pascual","avatar_url":"https://avatars-next.observableusercontent.com/153c0f1e34b01ae9f0eca434a5b3ae760f40f547c7e56b41e13429bed0609999","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"SVG World map","cells":[{"id":0,"value":"md`# SVG World map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof projection = projectionInput({\n value: new URLSearchParams(location.search).get(\"projection\") || \"orthographic\",\n name: \"projection\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md `This is code kindly provided by [Fil](https://observablehq.com/@fil). Thanks!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"map = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md `And this is my version, adapted to \"clasical\" d3 code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", `0 0 ${width} ${height}`)\n \n svg.append(\"path\")\n .datum(graticule)\n .attr(\"d\", path)\n .attr(\"stroke\", \"#ccc\")\n .attr(\"fill\", \"none\")\n\n const countriesPath = svg.append(\"g\")\n .attr(\"id\", \"countries\")\n .selectAll(\"path\")\n .data(countries.features)\n .enter()\n .append(\"path\")\n .attr(\"d\", path)\n .attr(\"stroke\", \"#ccc\")\n .attr(\"fill\", \"steelblue\")\n .on(\"mouseover\", function(d) { d3.select(this).attr(\"fill\", \"red\")})\n .on(\"mouseout\", function() { d3.select(this).attr(\"fill\", \"steelblue\")})\n \n svg.append(\"path\")\n .datum(outline)\n .attr(\"d\", path)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#222\")\n \n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"d3.select(\"#countries\").selectAll(\"path\").on(\"mouseover\", function(d) {console.log(d)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"path = d3.geoPath(projection.rotate([80, 0]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":22,"value":"outline = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"countries = fetch(\n \"https://unpkg.com/visionscarto-world-atlas@0.0.6/world/110m_countries.geojson\"\n).then(d => d.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-geo-projection@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"import {projectionInput} from \"@d3/projection-comparison\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"