30:[] 2e:{"title":"Typology","cells":[{"id":0,"value":"# Typology","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"To create a typology map, you can use the \"typo\" type. 2 arguments are required: data and var.","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"viz.plot({ type: \"typo\", data: world, var: \"region\" })","pinned":true,"hidden":false,"mode":"js"},{"id":51,"value":"Withe the attribute colors, you can defane a color palette available in the [dicopal](https://observablehq.com/@neocartocnrs/dicopal-library) library. You can also define an array of colors. With alphabetical, you can arrange the legend in an alphabetical order.","pinned":false,"hidden":false,"mode":"md"},{"id":55,"value":"viz.typo({\n data: world,\n var: \"region\",\n alphabetical: true\n})","pinned":true,"hidden":false,"mode":"js"},{"id":60,"value":"You can also choose the order you want to match the colors you want. ","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"viz.plot({\n type: \"typo\",\n data: world,\n var: \"region\",\n order: [\"Antarctica\", \"Oceania\", \"Africa\", \"America\", \"Asia\", \"Europe\"],\n colors: [\"grey\", \"green\", \"blue\", \"orange\", \"purple\", \"red\"]\n})","pinned":true,"hidden":false,"mode":"js"},{"id":74,"value":"Everything is customizable. For example: ","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"let svg = viz.create({\n projection: d3.geoOrthographic().rotate([-30, -60]),\n zoomable: \"versor\",\n width: 600\n });\n svg.plot({ type: \"outline\" });\n svg.plot({ type: \"graticule\", stroke: \"white\" });\n svg.plot({\n type: \"typo\",\n data: world,\n var: \"region\",\n strokeWidth: 0.3,\n leg_title: null,\n leg_pos: [20, 20],\n leg_frame: true,\n leg_frame_stroke: \"none\"\n });\n\n display(svg.render())\n","pinned":false,"hidden":false,"mode":"js"},{"id":16,"value":"You can also build this kind of map with lower level function.","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"const typo = viz.tool.typo(world.features.map((d) => d.properties.region));\n let svg = viz.create({\n width: 700,\n margin: [20, 0, 0, 0],\n zoomable: true,\n projection: d3.geoNaturalEarth1()\n });\n svg.outline();\n svg.path({\n strokeWidth: 0.2,\n data: world,\n fill: (d) => typo.colorize(d.properties.region),\n tip: (d) => `${d.properties.name} (${d.properties.region})`\n });\n svg.legend.typo_vertical({\n pos: [80, 180],\n title: \"Continents\",\n alphabetical: true,\n colors: typo.colors,\n types: typo.types,\n missing: false\n });\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":9,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"import {\n style,\n world,\n disclaimer,\n aus,\n aus_roads,\n viz\n} from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":13,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"2","titling":"auto"}