30:[] 2e:{"title":"Legends","cells":[{"id":0,"value":"# Legends","pinned":false,"hidden":false,"mode":"md"},{"id":2197,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":2205,"value":"To make a pretty and efficient map, it's also often a matter of designing a well-organized legend. in `geoviz`, you have access to several functions that allow you to draw legends. They are listed here:","pinned":false,"hidden":false,"mode":"md"},{"id":2208,"value":"viz.legend","pinned":true,"hidden":false,"mode":"ojs"},{"id":2210,"value":"## 1 - Box","pinned":false,"hidden":false,"mode":"md"},{"id":2214,"value":"The legend.box() function displays a simple legend box. ","pinned":false,"hidden":false,"mode":"md"},{"id":2216,"value":"viz.legend.box()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2597,"value":"Or","pinned":false,"hidden":false,"mode":"md"},{"id":2599,"value":"viz.plot({ type: \"leg_box\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2218,"value":"To change the appearance of the rectangle, you can use the rect_foo arguments. To change the text, you can use label_foo.","pinned":false,"hidden":false,"mode":"md"},{"id":2212,"value":"This principle applies to all other legends.","pinned":false,"hidden":false,"mode":"md"},{"id":2224,"value":"viz.legend.box({\n rect_fill: \"#38896F\",\n rect_width: 30,\n rect_height: 30,\n rect_strokeWidth: 2,\n label: \"Hello Geoviz\",\n label_fill: \"#38896F\",\n label_fontSize: 20\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2237,"value":"To this legend, you can add a title, a subtitle and a note. These elements can themselves be configured with title_foo, a subtitle_foo and a note_foo. You can use the gap parameter to space out the various elements. ","pinned":false,"hidden":false,"mode":"md"},{"id":2256,"value":"viz.legend.box({\n gap: 10,\n rect_fill: \"#38896F\",\n rect_width: 30,\n rect_height: 30,\n rect_strokeWidth: 2,\n label: \"Hello Geoviz\",\n label_fill: \"#38896F\",\n label_fontSize: 13,\n title: \"Title\",\n title_textDecoration: \"underline\",\n subtitle: \"Subtitle\",\n note: \"Made with geoviz\",\n note_fill: \"#38896F\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2264,"value":"If you want to change the attributes of all the texts at once, then you can use texts_foo.","pinned":false,"hidden":false,"mode":"md"},{"id":2266,"value":"viz.legend.box({\n text_fill: \"#38896F\",\n text_fontSize: 12,\n rect_fill: \"#38896F\",\n rect_width: 30,\n rect_height: 30,\n rect_strokeWidth: 2,\n label: \"Hello Geoviz\",\n label_fontSize: 13,\n title: \"Title\",\n subtitle: \"Subtitle\",\n note: \"Made with geoviz\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2277,"value":"Finally, to position a legend on a map, you can use the pos attribute. With frame and frame_foo, you can also add a frame below the legend.","pinned":false,"hidden":false,"mode":"md"},{"id":2279,"value":"{\n let svg = viz.create({ width: 800, domain: world });\n svg.path({ datum: world, fill: \"#38896F\" });\n svg.legend.box({\n pos: [60, 220],\n rect_fill: \"#38896F\",\n rect_width: 30,\n rect_height: 30,\n label: \"Hello Geoviz\",\n label_fontSize: 13,\n title: \"Title\",\n subtitle: \"Subtitle\",\n note: \"Made with geoviz\",\n frame: true,\n frame_fill: \"#38896F\",\n frame_fillOpacity: 0.2,\n frame_margin: 10\n });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2304,"value":"All the principles outlined here can be applied to other types of legend.","pinned":false,"hidden":false,"mode":"md"},{"id":2308,"value":"## 2 - Choropleth","pinned":false,"hidden":false,"mode":"md"},{"id":2310,"value":"In `geoviz`, there are two functions for displaying legends for choropleth maps : legend.choro_vertical() and legend.choro_horizontal().","pinned":false,"hidden":false,"mode":"md"},{"id":2315,"value":"viz.legend.choro_horizontal()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2605,"value":"Or","pinned":false,"hidden":false,"mode":"md"},{"id":2603,"value":"viz.plot({ type: \"leg_choro_horizontal\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2320,"value":"viz.legend.choro_vertical({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2322,"value":"These legends are designed to work with the viz.tool.choro().","pinned":false,"hidden":false,"mode":"md"},{"id":2324,"value":"choro = viz.tool.choro(\n world.features.map((d) => d.properties.gdppc),\n { method: \"q6\", palette: \"BluGrn\", nb: 6 }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2735,"value":"viz.plot({ type: \"leg_choro_vertical\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2330,"value":"Then","pinned":false,"hidden":false,"mode":"md"},{"id":2332,"value":"viz.legend.choro_horizontal({ breaks: choro.breaks, colors: choro.colors })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2335,"value":"Or directly","pinned":false,"hidden":false,"mode":"md"},{"id":2337,"value":"viz.legend.choro_horizontal(choro)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2343,"value":"As before, this legend is fully customizable.","pinned":false,"hidden":false,"mode":"md"},{"id":2346,"value":"viz.legend.choro_horizontal({\n title: \"GDP per capita\",\n subtitle: \"(in thousands)\",\n breaks: choro.breaks,\n colors: choro.colors,\n values_fill: \"#38896F\",\n values_factor: 0.001, // to convert into thousands\n values_round: 1,\n rect_height: 20,\n rect_spacing: 2,\n missing: false\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2358,"value":"As before, if you want to add this legend to a map, use the pos parameter.","pinned":false,"hidden":false,"mode":"md"},{"id":2360,"value":"## 3 - Typo","pinned":false,"hidden":false,"mode":"md"},{"id":2362,"value":"If you have qualitative data, you can use the functions legend.typo_horizontal and legend.typo_horizontaverticall.","pinned":false,"hidden":false,"mode":"md"},{"id":2364,"value":"viz.legend.typo_horizontal()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2371,"value":"viz.legend.typo_vertical()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2374,"value":"These legends are designed to work with the viz.tool.typo().","pinned":false,"hidden":false,"mode":"md"},{"id":2376,"value":"typo = viz.tool.typo(\n world.features.map((d) => d.properties.region),\n { palette: \"Bold\" }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2385,"value":"viz.legend.typo_horizontal({ types: typo.types, colors: typo.colors })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2388,"value":"Or directly","pinned":false,"hidden":false,"mode":"md"},{"id":2390,"value":"viz.legend.typo_horizontal(typo)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2392,"value":"Everything is customable","pinned":false,"hidden":false,"mode":"md"},{"id":2394,"value":"viz.legend.typo_horizontal({\n ...typo,\n title: \"The 6 continents\",\n subtitle: \"(Even if continents are a geographical nonsense...)\",\n rect_transform: \"translate(0,20)\",\n alphabetical: false,\n rect_width: 20,\n rect_spacing: 30,\n values_dy: -27\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2400,"value":"## 4 - Circles","pinned":false,"hidden":false,"mode":"md"},{"id":2405,"value":"Here again, there are two functions for displaying legends for proportional symbols : legend.circles() and legend.circles_nested().","pinned":false,"hidden":false,"mode":"md"},{"id":2437,"value":"viz.legend.circles()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2439,"value":"viz.legend.circles_nested()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2462,"value":"With real data","pinned":false,"hidden":false,"mode":"md"},{"id":2459,"value":"viz.legend.circles_nested({\n circle_stroke: \"red\",\n line_stroke: \"red\",\n data: world.features.map((d) => d.properties.pop),\n k: 40\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2444,"value":"Here again, another `geoviz` function is linked to this type of legend. ","pinned":false,"hidden":false,"mode":"md"},{"id":2447,"value":"radius = viz.tool.radius(\n world.features.map((d) => d.properties.pop),\n { k: 50 }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2453,"value":"Then","pinned":false,"hidden":false,"mode":"md"},{"id":2457,"value":"viz.legend.circles_nested(radius)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2468,"value":"Everything is customable","pinned":false,"hidden":false,"mode":"md"},{"id":2470,"value":"viz.legend.circles_nested({\n ...radius,\n nb: 6,\n gap: 25,\n title: \"Population in inh.\",\n circle_fill: \"#38896F\",\n circle_fillOpacity: 0.5,\n circle_stroke: \"white\",\n line_stroke: \"#38896F\",\n line_width: 50,\n line_length: 80,\n values_dy: -5,\n values_textAnchor: \"end\",\n values_fill: \"#38896F\",\n note: \"Made with Geoviz\",\n note_dy: -15\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2501,"value":"## 5 - Spikes","pinned":false,"hidden":false,"mode":"md"},{"id":2507,"value":"The legend.spikes() allow to design legends for spikes layers. In works on the same principle.","pinned":false,"hidden":false,"mode":"md"},{"id":2503,"value":"viz.legend.spikes()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2511,"value":"Let's customize it","pinned":false,"hidden":false,"mode":"md"},{"id":2543,"value":"viewof spike_straight = Inputs.range([0, 1], {\n label: \"spike_straight\",\n value: 0,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2513,"value":"viz.legend.spikes({\n data: world.features.map((d) => d.properties.pop / 1000000),\n spike_stroke: \"#38896F\",\n spike_width: 30,\n spike_fill: \"#38896F\",\n spike_fillOpacity: 0.3,\n nb: 8,\n k: 100,\n spike_straight,\n values_round: 0,\n title: \"Population\",\n subtitle: \"(in million inh.)\",\n note: \"Made with Geoviz\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2740,"value":"viz.legend.spikes({\n //data: world.features.map((d) => d.properties.pop / 1000000),\n // spike_stroke: \"#38896F\",\n // spike_width: 30,\n // spike_fill: \"#38896F\",\n // spike_fillOpacity: 0.3,\n // nb: 8,\n // k: 100,\n // spike_straight,\n // values_round: 0,\n // title: \"Population\",\n // subtitle: \"(in million inh.)\",\n // note: \"Made with Geoviz\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2555,"value":"## 6 - Half-circles","pinned":false,"hidden":false,"mode":"md"},{"id":2559,"value":"The legend.circles_half() allow to design legends with half circles.","pinned":false,"hidden":false,"mode":"md"},{"id":2564,"value":"viewof circle_cornerRadius = Inputs.range([0, 10], {\n label: \"circle_cornerRadius\",\n step: 1,\n value: 5\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2562,"value":"viz.legend.circles_half({\n title: \"World population\",\n subtitle: \"(in thousands inh.)\",\n data: world.features.map((d) => d.properties.pop / 1000),\n circle_cornerRadius,\n circle_fill: \"#38896F\",\n circle_fillOpacity: 0.7\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2571,"value":"On the same principle, the function legend.mushrooms() allow to design legends for mushrooms maps.","pinned":false,"hidden":false,"mode":"md"},{"id":2575,"value":"viz.legend.mushrooms({\n title: \"Population and Wealth\",\n\n // TOP\n top_title: \"Population\",\n top_data: world.features.map((d) => d.properties.pop / 1000000),\n\n // BOTTOM\n bottom_title: \"GDP\",\n bottom_data: world.features.map((d) => d.properties.gdp / 1000000000)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2588,"value":"More examples are available [here](https://observablehq.com/@neocartocnrs/half-circle-mark). ","pinned":false,"hidden":false,"mode":"md"},{"id":2691,"value":"## 7 - squares","pinned":false,"hidden":false,"mode":"md"},{"id":2695,"value":"There are two functions for displaying legends for proportional symbols : legend.squares() and legend.squares_nested().","pinned":false,"hidden":false,"mode":"md"},{"id":2693,"value":"viz.legend.squares({\n data: world.features.map((d) => d.properties.pop),\n values_factor: 1 / 1000000,\n values_round: 0,\n title: \"Population\",\n subtitle: \"(in million inh.)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2698,"value":"viz.legend.squares_nested({\n data: world.features.map((d) => d.properties.pop),\n values_factor: 1 / 1000000,\n values_round: 0,\n title: \"Population\",\n subtitle: \"(in million inh.)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2700,"value":"See also [here](https://observablehq.com/@neocartocnrs/square-mark). ","pinned":false,"hidden":false,"mode":"md"},{"id":2705,"value":"## 8 - symbols","pinned":false,"hidden":false,"mode":"md"},{"id":2707,"value":"There are two functions for displaying legends for symbols : llegend.symbol_horizontal() and legend.symbol_vertical().","pinned":false,"hidden":false,"mode":"md"},{"id":2709,"value":"viz.legend.symbol_horizontal()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2717,"value":"viz.legend.symbol_vertical()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2723,"value":"Available symbols are : ","pinned":false,"hidden":false,"mode":"md"},{"id":2725,"value":"viz.tool.symbols()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2727,"value":"Then, you can build legends with specific values and custom symbols.","pinned":false,"hidden":false,"mode":"md"},{"id":2729,"value":"viz.legend.symbol_horizontal({\n title: \"A legend with symbols\",\n subtitle: \"subtitle\",\n note: \"source\",\n types: [\"pin\", \"hospital\", \"flower\", \"cloud\", \"human\", \"tent\"],\n symbols: [\"pin\", \"hospital\", \"flower\", \"cloud\", \"human\", \"tent\"],\n symbol_fill: \"#38896F\",\n symbol_stroke: \"none\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2720,"value":"See also [here](https://observablehq.com/@neocartocnrs/symbols). ","pinned":false,"hidden":false,"mode":"md"},{"id":2165,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":2167,"value":"import {\n style,\n world,\n disclaimer,\n aus_ports,\n aus,\n aus_roads,\n viz\n} from \"@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2169,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}