2c:["$","title",null,{"children":"Spike mark | Nicolas Lambert | Observable"}] 31:[] 2f:{"id":"3eeafa45ee920b1f","slug":"spike-mark","title":"Spike mark","thumbnail":"f20320bc178427c734ff0c01dc524b248617d228d7f8b34f0370a50e471aa7e2","access_level":"public","create_time":"$D2024-01-23T14:12:42.018Z","update_time":"$D2026-09-04T09:57:45.521Z","view_time":null,"first_public_time":"$D2024-01-24T09:57:21.876Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":406,"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":"Spike mark","cells":[{"id":0,"value":"# Spike mark","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":358,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"## 1 - A simple spike","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":23,"value":"As the name implies, the **spike mark** is used to draw spikes. The **`width`** and the **`height`** attributes allows to define the size of the spike. To customize the style, you can use svg attributes with camelcase notation such as **`stroke`**, **`fill`**, **`strokeWidth`**, **`fillOpacity`**, **`strokeDasharray`**...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":29,"value":"viz.spike({\n height: 100,\n width: 40,\n fill: \"#38896F\",\n stroke: \"#38896F\"\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":357,"value":"Or","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":355,"value":"viz.plot({\n type: \"spike\",\n height: 100,\n width: 40,\n fill: \"#38896F\",\n stroke: \"#38896F\"\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":35,"value":"The **`straight`** attribute allow to customize the curve (0 = curved ; 1 = straight). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":40,"value":"let straight = view(Inputs.range([0, 1], { label: \"straight\", step: 0.05 }))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":38,"value":"viz.spike({\n height: 100,\n width: 40,\n fill: \"#38896F\",\n stroke: \"#38896F\",\n straight\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":47,"value":"You can use this mark to add a spike to the map, giving its x,y position with the **`pos`** attribute. In this case, the spike is static, it doesn't move when you zoom in on the map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":52,"value":"let position = [300, 100]","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":50,"value":"// Container\n let svg = viz.create({\n width: 500,\n domain: world,\n zoomable: true\n });\n\n // Basemap\n svg.path({ datum: world, fill: \"#CCC\" });\n\n // Spike\n svg.spike({\n pos: position,\n fill: \"#38896F\",\n stroke: \"#38896F\"\n });\n\n // Render\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":57,"value":"You can also give a geographic position in latitude and longitude. In this case, set **`coords`** to `\"geo\"`. In this case, the spike move when you zoom in on the map. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":59,"value":"let mumbai = [72.88, 19.07]","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":62,"value":"\n // Container\n let svg = viz.create({\n width: 500,\n domain: world,\n zoomable: true\n });\n\n // Basemap\n svg.path({ datum: world, fill: \"#CCC\" });\n\n // Spike\n svg.spike({\n coords: \"geo\",\n pos: mumbai,\n fill: \"#38896F\",\n stroke: \"#38896F\"\n });\n\n // Render\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":65,"value":"## 2 - Display spikes from a geoJSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":67,"value":"The mark spike can also be used to draw circles from a geoJSON, using the **`data`** attribute instead of the `pos` attribute. If the input geoJSON contains points, the spikes are mapped onto these points. In the case of polygons or multipolygons, the spike is drawn at the center of the largest polygon. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":72,"value":"// Container\n let svg = viz.create({\n width: 500,\n zoomable: true,\n domain: world\n });\n\n // Basemap\n svg.path({ datum: world, fill: \"#CCC\" });\n\n // Spikes\n svg.spike({\n data: world,\n width: 10,\n stroke: \"#38896F\",\n straight: 0.5,\n height: 10,\n fill: \"#38896F\"\n });\n\n // Render\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":92,"value":"## 3 - Proportional spikes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":94,"value":"To vary the height proportionally to an absolute quantitative data, all you have to do is specify the variable name in the **`height`** attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":98,"value":"The **`k`** parameter lets you define the height of the highest spike. The **`fixmax`** parameter allows you to set this height to a specific value. This one is very useful for comparing different maps or for time evolution. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":144,"value":"viewof k = Inputs.range([10, 100], { label: \"k\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":" // Container\n let svg = viz.create({\n width: 1000,\n zoomable: true,\n domain: world\n });\n\n // Basemap\n svg.path({ datum: world, fill: \"#CCC\" });\n\n // Spikes\n svg.spike({\n data: world,\n width: 10,\n k,\n fillOpacity: 1,\n stroke: \"#38896F\",\n straight: 0.5,\n height: \"pop\",\n fill: \"#38896F\",\n tip: true\n });\n\n // Render\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":107,"value":"## 4 - Legends","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":148,"value":"To add a legend corresponding to the mark spike, you can use the functions legend.spikes(). See the [legend](https://observablehq.com/@neocartocnrs/legends) section in the documentation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":124,"value":"viz.legend.spikes({ spike_stroke: \"#38896F\", title: \"Number of inhabitants\" })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":198,"value":"You can set specific values with the data parameter. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":203,"value":"viz.legend.spikes({\n data: world.features.map((d) => d.properties.pop),\n values_round: 0,\n spike_stroke: \"#38896F\"\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":210,"value":"You can also set your own values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":212,"value":"viz.legend.spikes({\n data: [1, 500, 1000, 1402],\n nb: 4,\n spike_stroke: \"#38896F\"\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":159,"value":"Thanks to the nb parameter, you can define the number of spikes to display. With spike_spacing, you can affect the gap between spikes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":155,"value":"let nb = view(Inputs.range([2, 10], { label: \"nb\", step: 1, value: 7 }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":180,"value":"let spike_spacing = view(Inputs.range([0, 100], {\n label: \"spike_spacing\",\n step: 1,\n value: 0\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":185,"value":"let spike_width = view(Inputs.range([5, 100], {\n label: \"spike_width\",\n step: 1,\n value: 75\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":328,"value":"let spike_straight = view(Inputs.range([0, 1], {\n label: \"spike_straight\",\n step: 0.1,\n value: 0\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":151,"value":"viz.legend.spikes({\n spike_strokeWidth: 2,\n spike_stroke: \"#38896F\",\n nb,\n gap: 10,\n spike_spacing,\n spike_straight,\n spike_width\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":9,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"import { style, world, disclaimer, viz } from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":13,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"2","titling":"auto"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/spike-mark;307;"}