41:null 42:["$","title",null,{"children":"Symbols | a-k | Observable"}] 48:[{"id":"0b32a66e06662e37e575e32a98d1b1e92a274700f70ca7044e81844beed5dac4600c64ba0a84952f6387c24248bd2ba6e96dca51a4eefc340dda81e8c41f4314","href":"https://static.observableusercontent.com/files/0b32a66e06662e37e575e32a98d1b1e92a274700f70ca7044e81844beed5dac4600c64ba0a84952f6387c24248bd2ba6e96dca51a4eefc340dda81e8c41f4314","name":"nuclear_power_plants.csv","type":"text/csv","lastModified":1718891348688.482,"size":108458}] 46:{"id":"60a1a2b56a95f563","slug":"symbols","title":"Symbols","thumbnail":"2511e8d760074697e75c3da5d202a0e245ec04801999884c32b99f39d55289d6","access_level":"public","create_time":"$D2026-08-17T15:08:56.797Z","update_time":"$D2026-08-17T15:09:01.887Z","view_time":null,"first_public_time":"$D2026-08-17T15:09:05.179Z","has_unpublished_edits":null,"fork":{"id":"6ffa282beb101035","slug":"symbols","title":"Symbols","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"stars":1,"starred":false,"owner":{"type":"team","id":"0d89ff0d43911832","login":"a-kyselova","name":"a-k","avatar_url":"https://avatars-next.observableusercontent.com/c17731a6346b5dfce53e427b1b871e127393f84a1789e18931f02dc51f940fcc","tier":"starter_2024","bio":"","following":false},"version":829,"publish_version":829,"role":null,"authored":false,"authors":[{"type":"individual","id":"4abdd3c5ac6f602a","login":"akyselova","name":"Anastasiia","avatar_url":"https://avatars-next.observableusercontent.com/f400c814810bb16bc0121a8537885d2f84ff777dc43a704664ad27987b43d9df","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"0d89ff0d43911832","login":"a-kyselova","name":"a-k","avatar_url":"https://avatars-next.observableusercontent.com/c17731a6346b5dfce53e427b1b871e127393f84a1789e18931f02dc51f940fcc","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Symbols","cells":[{"id":0,"value":"# Symbols","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## 1 - A simple symbol","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"As the name implies, the **symbol mark** is used to draw symbols. The **`r`** attribute allows to define the size of the symbol (radius of the circle including the symbol). 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"viz.symbol({ fill: \"#38896F\", r: 50 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"You can change the symbol type with the symbol attribute","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"viz.symbol({ symbol: \"fist\", fill: \"#38896F\", r: 50 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"To get the list of available symbols, use the function tool.symbols()","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"symbols = viz.tool.symbols()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"You can also add a background to this symbol by setting the attribute background to `true`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"You can change the background style with the `background_` prefix. You can alse change the scale inside the circle and rotate the symbol.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"viz.symbol({\n symbol: \"clover\",\n fill: \"#38896F\",\n r: 50,\n background: true,\n background_fill: \"red\",\n scale: 3,\n rotate: 180\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"## 2 - A simple symbol on a map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"You can use this mark to add a symbol to the map, giving its x,y position with the **`pos`** attribute. In this case, the circle is static, it doesn't move when you zoom in on the map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"position = [300, 100]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"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 // Square\n svg.symbol({\n pos: position,\n symbol: \"heart\",\n r: 30,\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"You can also give a geographic position in latitude and longitude. In this case, set **`coords`** to `\"geo\"`. In this case, the symbol move when you zoom in on the map. ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"sfax = [10.76, 34.741]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"{\n // Container\n let svg = viz.create({\n domain: world,\n width: 500,\n zoomable: true\n });\n\n // Basemap\n svg.path({ datum: world, fill: \"#CCC\" });\n\n // Square\n svg.symbol({\n coords: \"geo\",\n r: 20,\n symbol: \"human\",\n pos: sfax,\n fill: \"#38896F\"\n });\n\n // Render\n\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"## 3 - Display symbols from a geoJSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"The mark *symbol* can also be used to draw symbols from a geoJSON, using the **`data`** attribute instead of the `pos` attribute. If the input geoJSON contains points, the symbols are mapped onto these points. In the case of polygons or multipolygons, the symbols is drawn at the center of the largest polygon. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"{\n // 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 // Symbols\n svg.symbol({\n data: world,\n width: 10,\n r: 10,\n stroke: \"white\",\n strokeWidth: 1,\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"With the dodge and dodgegap attributes, you can avoid the overlapping of symbols.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"{\n // 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.symbol({\n data: world,\n symbol: \"pentagon\",\n width: 10,\n r: 5,\n dodge: true,\n dodgegap: -0.5,\n stroke: \"white\",\n strokeWidth: 1,\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"## 4 - Draw a map with several symbols","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"Symbols are often used in cartography to draw nominal qualitative data. Each symbol corresponds to a type. In `geoviz`, all you need to do is define the field corresponding to your data in the symbol attribute. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"{\n // Container\n let svg = viz.create({\n zoomable: true,\n domain: world\n });\n\n // Basemap\n svg.path({ datum: world, fill: \"#CCC\" });\n\n const typo = viz.tool.typo(world.features.map((d) => d.properties.region));\n // Spikes\n svg.symbol({\n data: world,\n symbol: \"region\",\n width: 10,\n dodge: true,\n r: 10,\n stroke: \"white\",\n strokeWidth: 1,\n fill: (d) => typo.colorize(d.properties.region)\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"## 5 - Custom symbols","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":665,"value":"{\n let svg = viz.create({ projection: d3.geoNaturalEarth1(), zoomable: true });\n svg.outline();\n svg.graticule({ stroke: \"white\", step: 30 });\n svg.path({ datum: world, fill: \"white\", fillOpacity: 0.3 });\n svg.header({ text: \"Nuclear Power Plants worldwide\" });\n svg.footer({\n text: \"source: https://github.com/cristianst85/GeoNuclearData\"\n });\n svg.symbol({\n data,\n //dodge: true,\n symbol: \"nuke\",\n //fill: \"#ebac00\",\n fill: \"black\",\n background_fill: \"#ebac00\",\n background_fillOpacity: 1,\n background_stroke: \"black\",\n background_strokeWidth: 1,\n r: 12,\n background: true,\n tip: true\n });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"data = viz.tool.featurecollection(\n await FileAttachment(\"nuclear_power_plants.csv\").csv(),\n {\n latitude: \"Latitude\",\n longitude: \"Longitude\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"## 6 - Legends","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":366,"value":"To add a legend corresponding to the mark symbol, you can use the functions legend.symbol_vertical() and legend.symbol_horizontal(). See the [legend](https://observablehq.com/@neocartocnrs/legends) section in the documentation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"viz.legend.symbol_vertical({ symbol_fill: \"#38896F\", rotate: 30 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"With specific symbols","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":256,"value":"viz.legend.symbol_vertical({\n subtitle: \"subtitle\",\n note: \"source\",\n types: [\"pin\", \"hospital\", \"flower\", \"cloud\", \"human\", \"tent\"],\n symbols: [\"pin\", \"hospital\", \"flower\", \"cloud\", \"human\", \"tent\"],\n symbol_background: true,\n symbol_rotate: 180,\n symbol_fill: \"#38896F\",\n symbol_stroke: \"none\",\n symbol_scale: 1,\n symbol_size: 20\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"viz.legend.symbol_horizontal({\n subtitle: \"subtitle\",\n note: \"source\",\n types: [\"pin\", \"hospital\", \"flower\", \"cloud\", \"human\", \"tent\"],\n symbols: [\"pin\", \"hospital\", \"flower\", \"cloud\", \"human\", \"tent\"],\n symbol_background: true,\n symbol_spacing: 45,\n values_textAnchor: \"start\",\n values_dx: 23,\n values_dy: -25,\n symbol_rotate: 18,\n symbol_fill: \"#38896F\",\n symbol_stroke: \"none\",\n symbol_scale: 1,\n symbol_size: 20\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"An example on a map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"{\n // Container\n let svg = viz.create({\n zoomable: true,\n domain: world\n });\n\n // Basemap\n svg.path({ datum: world, fill: \"#CCC\" });\n\n // Symbols\n svg.symbol({\n data: world,\n symbol: \"region\",\n order: [\"Africa\", \"America\", \"Oceania\"],\n symbols: [\"hospital\", \"flower\", \"cloud\"],\n r: 10,\n background: true,\n fill: \"#38896F\"\n });\n\n svg.legend.symbol_vertical({\n pos: [20, 20],\n frame: true,\n symbol_background: true,\n alphabetical: false,\n types: [\"Africa\", \"America\", \"Oceania\", \"Missing\"],\n symbols: [\"hospital\", \"flower\", \"cloud\", \"missing\"]\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"## 7 - The `plot` function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":535,"value":"You can also create a symbol map using the plot function. The symbol type is used to call the mark symbol.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":532,"value":"viz.plot({ type: \"symbol\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"The picto type allows you to use this mark with the appropriate legend. ","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":553,"value":"viz.plot({ type: \"symbol\", data: world, symbol: \"region\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"viz.plot({\n type: \"picto\",\n r: 6.5,\n data: world,\n fill: \"black\",\n var: \"region\",\n legend: true,\n symbols: [\"human\", \"heart\", \"fist\", \"clover\", \"rocket\", \"plane\"],\n dodge: true,\n svg_margin: 20,\n leg_type: \"horizontal\",\n leg_pos: [400, 350],\n leg_symbol_spacing: 40\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"import {\n style,\n world,\n disclaimer,\n aus,\n aus_roads,\n aus_ports,\n viz\n} from \"@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"2"}} 47:"$46:body"