30:[{"id":"30bd1e85d3949a6c31d852ba43226c4ddc721f4390520f5e1bac1877010eee58d6bfa3cac990da16e116a9ce23dd4ed0547729a6e07a086a68da7388f2cb5c98","href":"https://static.observableusercontent.com/files/30bd1e85d3949a6c31d852ba43226c4ddc721f4390520f5e1bac1877010eee58d6bfa3cac990da16e116a9ce23dd4ed0547729a6e07a086a68da7388f2cb5c98","name":"cities.json","type":"application/json","lastModified":1771431640017.183,"size":210427},{"id":"4ad8191820ea1b175eb088999f5b4cde18dff69c0350181ed0b24a288b7599b8d23b9e924a8330180d9ddf90b4bf8aab7e0fb7a1b6611b088e35cf84708a6b2f","href":"https://static.observableusercontent.com/files/4ad8191820ea1b175eb088999f5b4cde18dff69c0350181ed0b24a288b7599b8d23b9e924a8330180d9ddf90b4bf8aab7e0fb7a1b6611b088e35cf84708a6b2f","name":"all.csv","type":"text/csv","lastModified":1771431640257.221,"size":1547969}] 2e:{"title":"Smooth","cells":[{"id":0,"value":"# Smooth","pinned":false,"hidden":false,"mode":"md"},{"id":348,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"Thanks to `d3.contourDensity`, it is now possible to create smoothed maps in geoviz. `d3.contourDensity()` is a function from the d3-contour module that computes density contours (isodensity lines) from a set of points. It is the equivalent of a 2D kernel density estimation (KDE), but returned as GeoJSON polygons representing areas of equal density. ","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"## type = \"contour\"","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"In `geoviz`, you can simply use `type: \"contour\"`. When zooming, coutour lines are recalculated according to the visible extent. The level of detail increases, unless you set the `fixbandwidth` parameter to `true`.","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"viewof fixbandwidth = Inputs.toggle({ label: \"fixbandwidth\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":" let svg = viz.create({ projection: \"EqualEarth\", zoomable: true });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n svg.plot({ type: \"graticule\", step: 60, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n svg.plot({\n data: cities,\n fill: \"#014214\",\n stroke: \"none\",\n pointRadius: 1.5,\n fillOpacity: 0.7\n });\n svg.plot({\n type: \"contour\",\n data: cities,\n stroke: \"#001205\",\n strokeWidth: 1.3,\n fixbandwidth\n });\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":108,"value":"By varying the `bandwidth`, `thresholds`, and `cellSize` parameters, you can change the level of generalization of the map.","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"let bandwidth = view(Inputs.range([10, 50], {\n label: \"bandwidth\",\n step: 1,\n value: 20\n}))","pinned":false,"hidden":false,"mode":"js"},{"id":134,"value":"let thresholds = view(Inputs.range([5, 20], {\n label: \"thresholds\",\n step: 1,\n value: 10\n}))","pinned":false,"hidden":false,"mode":"js"},{"id":140,"value":"let cellSize = view(Inputs.range([1, 10], {\n label: \"cellSize\",\n step: 1,\n value: 1\n}))","pinned":false,"hidden":false,"mode":"js"},{"id":111,"value":"let svg = viz.create({\n projection: \"EqualEarth\",\n zoomable: false,\n domain: chn,\n margin: 100\n });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n svg.plot({ type: \"graticule\", step: 60, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n svg.plot({\n data: cities,\n fill: \"#014214\",\n stroke: \"none\",\n pointRadius: 1.5,\n fillOpacity: 0.7\n });\n svg.plot({\n type: \"contour\",\n data: cities,\n bandwidth,\n thresholds,\n cellSize,\n stroke: \"#001205\",\n strokeWidth: 1.3\n });\n display(svg.render())\n","pinned":false,"hidden":false,"mode":"js"},{"id":151,"value":"In practice, we often have points with weights. In that case, you can use the `var` parameter to specify the variable containing the stock data. Here `\"population\"`.","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"\n let svg = viz.create({\n projection: \"EqualEarth\",\n zoomable: true,\n domain: chn,\n margin: 100\n });\n svg.plot({ type: \"outline\", fill: \"#38896F\" });\n svg.plot({ type: \"graticule\", step: 60, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n svg.plot({\n type: \"circle\",\n data: cities,\n r: \"population\",\n k: 20,\n fill: \"#014214\",\n stroke: \"ndataone\",\n pointRadius: 1.5,\n fillOpacity: 0.4\n });\n svg.plot({\n type: \"contour\",\n data: cities,\n var: \"population\",\n stroke: \"#001205\",\n strokeWidth: 1.3\n });\n display(svg.render())","pinned":false,"hidden":false,"mode":"js"},{"id":166,"value":"## type = \"smooth\" (or \"heatmap\")","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"When using `type = \"smooth\"` or `type = \"heatmap\"` type, `geoviz` allows you to create a map with colored isobands and an associated legend. For colors, you can choose a single color using `fill` or any sequential palette contained in the [**dicopal**](https://observablehq.com/@neocartocnrs/dicopal-library) library with the `colors` parameter.","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":" let svg = viz.create({\n projection: \"EqualEarth\",\n zoomable: true,\n domain: chn,\n margin: 100\n });\n svg.plot({ type: \"outline\" });\n svg.plot({ type: \"graticule\", step: 60, stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.3 });\n\n svg.plot({\n type: \"heatmap\",\n data: cities,\n var: \"population\"\n });\n display(svg.render())","pinned":false,"hidden":false,"mode":"js"},{"id":185,"value":"Here find another example on Dead and missing migrants in the Mediterranean.","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"let svg = viz.create({\n projection: \"Mercator\",\n domain: [\n [-12, 29],\n [32, 40]\n ],\n margin: 20,\n background: \"#bde1f0\",\n zoomable: true\n });\n\n svg.tile({\n url: \"worldimagery\",\n zoomDelta: 1\n });\n\n svg.plot({\n type: \"heatmap\",\n data: missingmigrants,\n colors: \"Reds\",\n fillOpacity: 0.3,\n var: \"nb\",\n bandwidth: 15,\n thresholds: 40,\n cellSize: 1,\n strokeOpacity: 0.1,\n leg_rect_height: 5,\n leg_values_fontSize: 10,\n leg_title: \"Border\\nlethality\",\n leg_frame: true,\n leg_frame_stroke: \"none\"\n });\n\n display(svg.render())\n","pinned":false,"hidden":false,"mode":"js"},{"id":9,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":155,"value":"let chn = viz.tool.featurecollection(\n world.features.filter((d) => d.properties.ISO3 == \"CHN\")\n)","pinned":true,"hidden":false,"mode":"js"},{"id":26,"value":"let cities = FileAttachment(\"cities.json\").json()","pinned":true,"hidden":false,"mode":"js"},{"id":31,"value":"let missingmigrants = viz.tool.featurecollection(\n await FileAttachment(\"all.csv\").csv(),\n { lat: \"lat\", lon: \"lng\" }\n)","pinned":true,"hidden":false,"mode":"js"},{"id":12,"value":"import { style, world, disclaimer, viz } from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":18,"value":"style","pinned":true,"hidden":false,"mode":"js"}],"files":"$W30","stdlib":"2","titling":"auto"}