2d:["$","title",null,{"children":"Interactivity | Nicolas Lambert | Observable"}] 32:[] 30:{"id":"0f8af3c0a55d8e4b","slug":"interactivity","title":"Interactivity","thumbnail":"405d05be741b04062ff2b968d8bb008769c4c8fa431f8170fe7b55dae1183f02","access_level":"public","create_time":"$D2023-12-05T08:20:14.203Z","update_time":"$D2026-09-04T13:22:19.686Z","view_time":null,"first_public_time":"$D2023-12-15T12:20:46.613Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":646,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"bfb3f0e24e42a069","slug":"geoviz","title":"geoviz","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"Interactivity","cells":[{"id":0,"value":"# Interactivity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":483,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"## 1 - Observable Inputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"## 2 - Update the entire map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"let fill = view(Inputs.color({ label: \"Favorite color\", value: \"#38896F\" }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"let mapwidth = view(Inputs.range([100, 1000], {\n label: \"Map width\",\n step: 1,\n value: 800\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"let title = view(Inputs.text({ label: \"Map title\", value: \"Hello World\" }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"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 display(svg.render())","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"## 3 - Split by cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"let svg2 = viz.create({\n zoomable: true,\n width: 800,\n projection: d3.geoNaturalEarth1()\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"let outline = svg2.outline({ id: \"outline\" })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"let graticule = svg2.graticule({ stroke: \"white\" })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"let header = svg2.header({ text: title2, id: \"title\" })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"let countries = svg2.path({\n id: \"countries\",\n datum: world,\n fill: fill2\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"This preserves the zoom level and speeds up calculation and display times. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":225,"value":"let fill2 = view(Inputs.color({ label: \"Favorite color\", value: \"#38896F\" }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"let title2 = view(Inputs.text({ label: \"Map title\", value: \"Hello World\" }))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"svg2.render({ order: [outline, graticule, countries, header] })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"## 4 - Update a specific attribute","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"An update function :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"d3.selectAll(`#countriesid > path`).transition().delay(50).attr(\"fill\", fill3)","pinned":true,"hidden":true,"mode":"js","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"That's all.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":254,"value":"let fill3 = view(Inputs.color({ label: \"Favorite color\", value: \"#38896F\" }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"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 display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"## 5 - A more complexe example with circles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":332,"value":"We use the tool.radius() function to calculate the size of the circles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":335,"value":"let radius = viz.tool.radius(\n world.features.map((d) => d.properties[field]),\n { k }\n)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"Update functions :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"d3\n .selectAll(`#bubble > circle`)\n .transition()\n .delay(50)\n .attr(\"r\", (d) => radius.r(d.properties[field]))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"d3\n .selectAll(`#worldtitle > text`)\n .transition()\n .delay(50)\n .text(field == \"pop\" ? \"World Population\" : \"Gross Domestic Product\")","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"Et voilà!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"let k = view(Inputs.range([10, 100], { label: \"Radius max\", step: 1, value: 30 }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"let field = view(Inputs.radio([\"pop\", \"gdp\"], { label: \"Field\", value: \"pop\" }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"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 display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"## 6 - Views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"let svg = viz.create({projection: \"EqualEarth\"})\nsvg.path({data: world, fill: \"#CCC\", view: true})\nlet map = view(svg.render())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"Here, *map* returns the properties of the polygon hovered over.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"map","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"import { style, world, disclaimer, viz } from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"2","titling":"auto"}} 31:"$30:body" 2c:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/interactivity;307;"}