30:[{"id":"0b32a66e06662e37e575e32a98d1b1e92a274700f70ca7044e81844beed5dac4600c64ba0a84952f6387c24248bd2ba6e96dca51a4eefc340dda81e8c41f4314","href":"https://static.observableusercontent.com/files/0b32a66e06662e37e575e32a98d1b1e92a274700f70ca7044e81844beed5dac4600c64ba0a84952f6387c24248bd2ba6e96dca51a4eefc340dda81e8c41f4314","name":"nuclear_power_plants.csv","type":"text/csv","lastModified":1718891348688.482,"size":108458}] 2e:{"title":"Symbols","cells":[{"id":0,"value":"# Symbols","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"## 1 - A simple symbol","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":25,"value":"viz.symbol({ fill: \"#38896F\", r: 50 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"You can change the symbol type with the symbol attribute","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"viz.symbol({ symbol: \"fist\", fill: \"#38896F\", r: 50 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"To get the list of available symbols, use the function tool.symbols()","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"symbols = viz.tool.symbols()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":65,"value":"## 2 - A simple symbol on a map","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":74,"value":"position = [300, 100]","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":87,"value":"sfax = [10.76, 34.741]","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":99,"value":"## 3 - Display symbols from a geoJSON","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":114,"value":"With the dodge and dodgegap attributes, you can avoid the overlapping of symbols.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":139,"value":"## 4 - Draw a map with several symbols","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":530,"value":"## 5 - Custom symbols","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":241,"value":"## 6 - Legends","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":368,"value":"viz.legend.symbol_vertical({ symbol_fill: \"#38896F\", rotate: 30 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"With specific symbols","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":795,"value":"An example on a map","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":525,"value":"## 7 - The `plot` function","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":532,"value":"viz.plot({ type: \"symbol\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"The picto type allows you to use this mark with the appropriate legend. ","pinned":true,"hidden":false,"mode":"md"},{"id":553,"value":"viz.plot({ type: \"symbol\", data: world, symbol: \"region\" })","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":4,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":481,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}