2c:["$","title",null,{"children":"Half-circle mark | Nicolas Lambert | Observable"}] 31:[] 2f:{"id":"fa526e9d2190444f","slug":"half-circle-mark","title":"Half-circle mark","thumbnail":"d580247c88b8a5b17661ae4c37b020ec2dde3876733914286104bdc2eaa4ac89","access_level":"public","create_time":"$D2024-02-12T15:13:40.591Z","update_time":"$D2026-09-04T09:54:19.721Z","view_time":null,"first_public_time":"$D2024-02-13T14:41:10.575Z","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":561,"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"},{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Half-circle mark","cells":[{"id":0,"value":"# Half-circle mark","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":511,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"## 1 - A simple half-circle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":37,"value":"The halfcircle mark is used to draw half-circles. The **`r`** attribute allows to define the radius. 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":35,"value":"viz.halfcircle({ r: 40, fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"Or","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":500,"value":"viz.plot({ type: \"halfcircle\", r: 40, fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"Half-circles are fully customizable. The cornerRadius parameter allows you to to round off the corners. The angle parameter rotates the half-circle. With innerRadius, you can also play with two nested radius.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":49,"value":"let angle = view(Inputs.range([-180, 180], { label: \"angle\", step: 1 }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":53,"value":"let cornerRadius = view(Inputs.range([0, 15], {\n label: \"cornerRadius\",\n step: 1,\n value: 2\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":61,"value":"let innerRadius = view(Inputs.range([0, 35], {\n label: \"innerRadius\",\n step: 1,\n value: 0\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":47,"value":"viz.halfcircle({ r: 40, fill: \"#38896F\", angle, cornerRadius, innerRadius })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":69,"value":"You can use this mark to add a half-circle 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. with dx and dy, you can also shift the position.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":73,"value":"let position = [300, 100]","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":71,"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 // Half-circle\n svg.halfcircle({\n pos: position,\n dx: 0,\n dy: 0,\n fill: \"#38896F\"\n });\n\n // Render\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":75,"value":"You can also give a geographic position in latitude and longitude. In this case, set **`coords`** to `\"geo\"`. In this case, the hal-circle move when you zoom in on the map. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":78,"value":"let yaounde = [3.92, 11.63]","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":80,"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 // Half-circle\n svg.halfcircle({\n coords: \"geo\",\n pos: yaounde,\n fill: \"#38896F\"\n });\n\n // Render\n display(svg.render())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":14,"value":"## 2 - Display half-circles from a geoJSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":92,"value":"The mark *halfcircle* 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 circles are mapped onto these points. In the case of polygons or multipolygons, the circle is drawn at the center of the largest polygon. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":96,"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 svg.halfcircle({\n data: world,\n tip: true,\n r: 10,\n fill: \"#38896F\",\n fillOpacity: 0.4,\n stroke: \"#38896F\"\n });\n\n // Render\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":18,"value":"## 3 - Proportional symbols","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":124,"value":"To vary the radius proportionally to an absolute quantitative data, all you have to do is specify the variable name in the **`r`** attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":126,"value":"The **`k`** parameter lets you define the radius of the largest circle. The **`fixmax`** parameter allows you to set this radius 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":128,"value":"In thematic cartography, it's customary to display small symbols on top of large ones. But you can change this rule using the parameters **`sort`** et **`decending`**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":248,"value":"let angle2 = view(Inputs.range([-180, 180], { label: \"rotate\", step: 1 }))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":132,"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 // Half-circles\n svg.halfcircle({\n data: world,\n r: \"pop\",\n k: 40,\n angle: angle2,\n descending: true,\n fill: \"#38896F\",\n fillOpacity: 0.4,\n stroke: \"#38896F\"\n });\n\n // Render\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"## 4 - Mushroom map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":271,"value":"*Mushroom maps* are a way to compare 2 quantitative data. This type of map was invented (to be confirmed) by Emile Cheysson in 1886 [[see](https://www.davidrumsey.com/luna/servlet/detail/RUMSEY~8~1~309243~90079146:Resultats-D-Exploitation-des-Chemin?sort=pub_list_no_initialsort%2Cpub_date%2Cpub_list_no%2Cseries_no&qvq=q:Cheysson%2C%20%C3%89mile;sort:pub_list_no_initialsort%2Cpub_date%2Cpub_list_no%2Cseries_no;lc:RUMSEY~8~1&mi=183&trs=587)]. Here we compare GDP (in red) and population (in blue). with dy, you can space out the two half-circles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":224,"value":"let dy = view(Inputs.range([0, 10], { label: \"dy\", step: 1, value: 0 }))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":191,"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 // TOP\n svg.halfcircle({\n data: world,\n r: \"gdp\",\n k: 30,\n dy: -dy,\n descending: true,\n fill: \"#F13C47\",\n fillOpacity: 0.7,\n stroke: \"white\",\n tip: (d) => `${d.properties.name}\n${Math.round(d.properties.gdp / 1000000000)} billions USD`\n });\n\n // BOTTOM\n svg.halfcircle({\n data: world,\n r: \"pop\",\n k: 30,\n dy: dy,\n angle: 180,\n descending: true,\n fill: \"#319ABF\",\n fillOpacity: 0.7,\n stroke: \"white\",\n tip: (d) => `${d.properties.name}\n${Math.round(d.properties.pop / 1000000)} million inh.`\n });\n\n // Render\n display(svg.render())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":20,"value":"## 5 - Legends","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":279,"value":"In geoviz, the function `legend.circles_half()` allows to draw a legend with half-circles. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":353,"value":"let circle_cornerRadius = view(Inputs.range([0, 10], {\n label: \"circle_cornerRadius\",\n step: 1,\n value: 5\n}))","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":269,"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":"js","author":"$undefined","summary":"$undefined"},{"id":315,"value":"A specific legend for mushroom maps called `mushrooms` is also available.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":334,"value":"viz.legend.mushrooms()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":416,"value":"To build a legend for the previous map, you can do as follows.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":419,"value":"viz.legend.mushrooms({\n title: \"Population and Wealth\",\n subtitle: \"(in 2020)\",\n gap: 5,\n // TOP\n top_title: \"GDP (in bilions USD)\",\n top_title_fill: \"#F13C47\",\n top_circle_fill: \"#F13C47\",\n top_data: world.features.map((d) => d.properties.gdp / 1000000000),\n\n // BOTTOM\n bottom_title: \"Population (in million inh.)\",\n bottom_title_fill: \"#319ABF\",\n bottom_circle_fill: \"#319ABF\",\n bottom_data: world.features.map((d) => d.properties.pop / 1000000),\n\n note: \"Source: world bank, 2022\"\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":441,"value":"In the previous case, at the top and bottom, the largest circle is 50 pixels. But in practice, it won't always be like that. Feel free to use the k and fixmax parameters.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":412,"value":"let africapop = world.features\n .map((d) => d.properties)\n .filter((d) => d.region == \"Africa\")\n .map((d) => d.pop / 1000000)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":447,"value":"let asiapop = world.features\n .map((d) => d.properties)\n .filter((d) => d.region == \"Asia\")\n .map((d) => d.pop / 1000000)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":449,"value":"viz.legend.mushrooms({\n title: \"Population in two world regions\",\n\n // TOP\n top_title: \"Population (african countries)\",\n top_data: africapop,\n top_fixmax: 1402,\n top_nb: 3,\n top_k: 80,\n\n // BOTTOM\n bottom_title: \"Population (asian countries)\",\n bottom_data: asiapop,\n bottom_fixmax: 1402,\n bottom_k: 80,\n frame: true\n})","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":22,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":24,"value":"import { style, world, disclaimer, viz } from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":26,"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/half-circle-mark;307;"}