30:T48a,let k = 80; let scale = d3.scaleSqrt( [0, d3.max(world.features.map((d) => +d.properties.pop))], [0, k * 0.8] ); viz.tool.addfonts([ { fontFamily: "TiltNeon", url: await FileAttachment( "TiltNeon-Regular-VariableFont_XROT,YROT.ttf" ).url() } ]); let svg = viz.create({ zoomable: "versor", //zoomable: true, margin: 50, width: 800, projection: d3.geoOrthographic().rotate([-20, -25]).clipAngle(90) }); svg.outline({ fill: viz.effect.radialGradient(svg) }); svg.graticule(); svg.path({ datum: world, id: "test", fill: "#317370" }); svg.circle({ id: "bubbles", data: world, r: "pop", fill: "#c95fa9", tip: "$NAMEen", k }); svg.text({ id: "lab", data: world, text: "ISO3", fill: "white", fontFamily: "TiltNeon", fontSize: (d) => scale(d.properties.pop) }); svg.legend.circles_nested({ id: "legend", pos: [5, 5], data: world.features.map((d) => d.properties.pop), title: "Population", gap: 10, values_dx: 3, frame: true, frame_stroke: "none", k }); display(svg.render()) 31:[{"id":"7344de8d4cd115191c69817263b326a1c5f32ad76bad8759bfce9df94c70c3660b951c479c3e40f92b470505a14ae59491bf224b72d4d93e1f42fb63a044b385","href":"https://static.observableusercontent.com/files/7344de8d4cd115191c69817263b326a1c5f32ad76bad8759bfce9df94c70c3660b951c479c3e40f92b470505a14ae59491bf224b72d4d93e1f42fb63a044b385","name":"TiltNeon-Regular-VariableFont_XROT,YROT.ttf","type":"font/ttf","lastModified":1697113435028.8,"size":582400}] 2e:{"title":"Pan and zoom","cells":[{"id":0,"value":"# Pan and zoom","pinned":false,"hidden":false,"mode":"md"},{"id":573,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md"},{"id":441,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"## 1 - Make maps zoomable","pinned":false,"hidden":false,"mode":"md"},{"id":471,"value":"Thanks to the zoomable parameter, you can now move within the maps. When you use the **mouse wheel**, you zoom in on the map. When you **click**, the map returns to its initial state.","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"let svg = viz.create({\n projection: d3.geoEqualEarth(),\n zoomable: true // 🪄🪄🪄🪄🪄\n });\n\n svg.outline();\n svg.graticule({ stroke: \"white\" });\n svg.path({ datum: world, fill: \"white\", fillOpacity: 0.5 });\n svg.circle({\n data: cities,\n r: \"population\",\n k: 10,\n fill: \"#38896F\",\n strokeWidth: 0.5,\n tip: \"$city\"\n });\n svg.header({ text: \"A Zoomable Map of World Cities\" });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":572,"value":"*NB: with the control parameter, you can choose to display (true) or not (false) the buttons. Using an array of 2 values, you can also position it exactly where you want it. *","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"## 2 - Zoomable tiles","pinned":false,"hidden":false,"mode":"md"},{"id":482,"value":"Zooming also works with raster tiles. ","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"map = {\n let svg = viz.create({\n projection: d3.geoMercator(),\n zoomable: true\n });\n svg.tile({\n zoomDelta: 1,\n increasetilesize: 1,\n url: \"worldStreet\"\n });\n\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"js"},{"id":539,"value":"## 3 -Defining zoom levels","pinned":false,"hidden":false,"mode":"md"},{"id":545,"value":"It's in the create() function that you can tell whether the map is zoomable or not. If you set the zoomable argument to true, the map becomes zoomable. But you can also specify an array of 2 values to say from or to or zoom is valid. The default is 1 to 8.","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"let svg = viz.create({\n projection: d3.geoEqualEarth(),\n zoomable: [0.75, 2] // by using an array, you can specify the zoom scale extent\n });\n\n svg.outline();\n svg.graticule({ stroke: \"white\" });\n svg.path({ datum: world, fill: \"white\", fillOpacity: 0.5 });\n\n display(svg.render())","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"## 4 - Combining zooming and reactive maps","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"With `geoviz`, map layers can be split into different cells. This allows you to modify only a specific layer without having to redraw the entire map ([see](https://observablehq.com/@neocartocnrs/interactivity?collection=@neocartocnrs/geoviz)). By doing so, **you can modify the map while maintaining the zoom level**. Cool, isn't it?","pinned":false,"hidden":false,"mode":"md"},{"id":375,"value":"let field = view(Inputs.radio([\"pop\", \"gdp\"], { label: \"Field\", value: \"pop\" }))","pinned":false,"hidden":false,"mode":"js"},{"id":377,"value":"viewof k = Inputs.range([10, 100], { label: \"Radius max\", step: 1, value: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"map.render({ order: [outline, graticule, countries, bubbles] })","pinned":true,"hidden":false,"mode":"js"},{"id":354,"value":"let map = viz.create({\n projection: d3.geoEqualEarth(),\n zoomable: true\n})","pinned":true,"hidden":false,"mode":"js"},{"id":356,"value":"let countries = map.path({\n id: \"countries\",\n datum: world,\n fill: \"#F5DA7E\"\n})","pinned":true,"hidden":false,"mode":"js"},{"id":358,"value":"let graticule = map.graticule({\n id: \"graticule\",\n stroke: \"white\"\n})","pinned":true,"hidden":false,"mode":"js"},{"id":360,"value":"let outline = map.outline({\n id: \"outline\",\n fill: svg.effect.radialGradient()\n})","pinned":true,"hidden":false,"mode":"js"},{"id":366,"value":"let bubbles = map.prop({\n id: \"bubbles\",\n data: world,\n var: field,\n k,\n fill: field == \"pop\" ? \"#374694\" : \"red\",\n fillOpacity: 0.8,\n tip: (d) => d.properties.name,\n leg_title: field == \"pop\" ? \"World population\" : \"World GDP\",\n leg_subtitle: field == \"pop\" ? \"(million inh.)\" : \"(in $)\",\n leg_values_round: 0,\n leg_gap: 5,\n leg_values_dx: 3,\n leg_frame: true,\n leg_frame_stroke: \"none\",\n})","pinned":true,"hidden":false,"mode":"js"},{"id":397,"value":"## 4 - Versor zooming","pinned":false,"hidden":false,"mode":"md"},{"id":399,"value":"By setting a projection and the zoomable to **`\"versor\"`**, you can move the map according to spherical coordinates. This only works with wgs84 coordinates data. See https://github.com/d3/versor","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"$30","pinned":true,"hidden":false,"mode":"js"},{"id":443,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":445,"value":"import {\n style,\n world,\n disclaimer,\n cities,\n viz as viz\n} from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":454,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"2","titling":"auto"}