30:[] 2e:{"title":"Interactivity","cells":[{"id":0,"value":"# Interactivity","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"## 1 - Observable Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"As you already know, Observable provides lightweight interface components called Inputs (buttons, sliders, drop-down menus, tables and more) to help you explore data and create interactive displays. Don't forget to use the viewof keyword.\n\n- https://observablehq.com/documentation/inputs/overview\n- https://observablehq.com/@observablehq/hello-inputs\n\nObservable Inputs will be used to make the maps interactive.","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"## 2 - Update the entire map","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"The easiest way to create a map with `geoviz` is to design it in single cell. In this case, each time you interact with an Input, the map will be entirety updated (And the zoom level is reset to zero). ","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"viewof fill = Inputs.color({ label: \"Favorite color\", value: \"#38896F\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"viewof mapwidth = Inputs.range([100, 1000], {\n label: \"Map width\",\n step: 1,\n value: 800\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof title = Inputs.text({ label: \"Map title\", value: \"Hello World\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"{\n let svg = viz.create({\n zoomable: true,\n width: mapwidth,\n projection: d3.geoNaturalEarth1()\n });\n svg.outline();\n svg.graticule({ stroke: \"white\" });\n svg.header({ text: title });\n svg.path({\n datum: world,\n fill: fill\n });\n return svg.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"## 3 - Split by cells","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"Another approach is to spread the different layers of the map over the individual cells of the notebook. Thanks to the id attribute (*if you don't enter an id, it takes on a random unique value*), you can update a specific layer without having to redraw the rest.","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"In this case, you must use the order attribute in the render() function to tell Observable in which order to display the layers (because cells have no order in Observable).","pinned":false,"hidden":false,"mode":"md"},{"id":199,"value":"svg = viz.create({\n zoomable: true,\n width: 800,\n projection: d3.geoNaturalEarth1()\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"outline = svg.outline({ id: \"outline\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"graticule = svg.graticule({ stroke: \"white\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"header = svg.header({ text: title2, id: \"title\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"countries = svg.path({\n id: \"countries\",\n datum: world,\n fill: fill2\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"This preserves the zoom level and speeds up calculation and display times. ","pinned":false,"hidden":false,"mode":"md"},{"id":225,"value":"viewof fill2 = Inputs.color({ label: \"Favorite color\", value: \"#38896F\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"viewof title2 = Inputs.text({ label: \"Map title\", value: \"Hello World\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"svg.render({ order: [outline, graticule, countries, header] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"## 4 - Update a specific attribute","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"In the previous case, when you change the country color, the entire country layer is redrawn. We could still save calculation time by modifying only the fill attribute of this layer. This is possible thanks to selectors. This will allow you to play with transitions and delays. ","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"An update function :","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"d3.selectAll(`#countriesid > path`).transition().delay(50).attr(\"fill\", fill3)","pinned":false,"hidden":true,"mode":"ojs"},{"id":283,"value":"That's all.","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"viewof fill3 = Inputs.color({ label: \"Favorite color\", value: \"#38896F\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"{\n let svg = viz.create({\n zoomable: true,\n width: 800,\n projection: d3.geoNaturalEarth1()\n });\n svg.outline();\n svg.graticule({ stroke: \"white\" });\n svg.header({ text: \"Hello World\" });\n svg.path({\n id: \"countriesid\",\n datum: world,\n fill: \"#38896f\"\n });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"## 5 - A more complexe example with circles","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"We have two variables at our disposal. The Gross Domestic Product and the number of inhabitants.","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"We use the tool.radius() function to calculate the size of the circles","pinned":false,"hidden":false,"mode":"md"},{"id":335,"value":"radius = viz.tool.radius(\n world.features.map((d) => d.properties[field]),\n { k }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"Update functions :","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"d3\n .selectAll(`#bubble > circle`)\n .transition()\n .delay(50)\n .attr(\"r\", (d) => radius.r(d.properties[field]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"d3\n .selectAll(`#worldtitle > text`)\n .transition()\n .delay(50)\n .text(field == \"pop\" ? \"World Population\" : \"Gross Domestic Product\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"Et voilà!","pinned":false,"hidden":false,"mode":"md"},{"id":296,"value":"viewof k = Inputs.range([10, 100], { label: \"Radius max\", step: 1, value: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"viewof field = Inputs.radio([\"pop\", \"gdp\"], { label: \"Field\", value: \"pop\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"{\n let svg = viz.create({\n zoomable: true,\n width: 800,\n projection: d3.geoNaturalEarth1()\n });\n svg.outline();\n\n svg.header({ text: \"World Population\", id: \"worldtitle\" });\n\n // Countries layer\n svg.path({\n datum: world,\n fill: \"white\",\n fillOpacity: 0.4\n });\n // Circle layer with default parameters\n svg.circle({\n id: \"bubble\",\n data: world,\n fill: \"#38896f\",\n r: \"pop\"\n });\n\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"## 6 - Views","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"Geoviz maps can also be used as Inputs. To do this, use the view attribute and the Observable *viewof* keyword.","pinned":false,"hidden":false,"mode":"md"},{"id":412,"value":"viewof map = viz.path({\n data: world,\n fill: fill,\n view: true // Here 🪄🪄🪄🪄🪄\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"Here, *map* returns the properties of the polygon hovered over.","pinned":false,"hidden":false,"mode":"md"},{"id":414,"value":"map","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"import { style, world, disclaimer, viz } from \"@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}