30:T468,{ // Container let svg = viz.create({ width: 800, domain: africa, zoomable: true, background: "#b7e9f7", margin: 30 }); svg.path({ datum: world, fill: "white", fillOpacity: 0.4 }); svg.path({ datum: africa, fill: "#F5DA7E", stroke: "white" }); svg.header({ text: "Population and wealth in Africa" }); // Circles (population) svg.circle({ data: africa, r: (d) => popradius.r(d.properties.poppct), sort: "poppct", fill: "#38896F", stroke: "white" }); // Nested circles (GDP) svg.circle({ data: africa, r: (d) => gdpradius.r(d.properties.gdppct), transform: (d) => `translate(0, ${ popradius.r(d.properties.poppct) - gdpradius.r(d.properties.gdppct) })`, sort: "gdppct", fill: "#893852", stroke: "none" }); // Legend svg.legend.box({ pos: [100, 400], rect_fill: "#38896F", label: "Share of world\npopulation in this\ncountry" }); svg.legend.box({ pos: [100, 440], rect_fill: "#893852", label: "Share of world\nGDP in this\ncountry" }); // Legend // Render return svg.render(); }31:[] 2e:{"title":"Circle mark","cells":[{"id":0,"value":"# Circle mark","pinned":false,"hidden":false,"mode":"md"},{"id":3158,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":2969,"value":"## 1 - A simple circle","pinned":false,"hidden":false,"mode":"md"},{"id":2924,"value":"As the name implies, the **circle mark** is used to draw 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"},{"id":2926,"value":"viz.circle({ r: 40, fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":3639,"value":"Or","pinned":false,"hidden":false,"mode":"md"},{"id":3641,"value":"viz.plot({ type: \"circle\", r: 40, fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2931,"value":"You can use this mark to add a 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.","pinned":false,"hidden":false,"mode":"md"},{"id":2958,"value":"position = [300, 100]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2956,"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 // Circle\n svg.circle({\n pos: position,\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2954,"value":"You can also give a geographic position in latitude and longitude. In this case, set **`coords`** to `\"geo\"`. In this case, the circle move when you zoom in on the map. ","pinned":false,"hidden":false,"mode":"md"},{"id":3645,"value":"mumbai = [72.88, 19.07]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3242,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":2934,"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 // Circle\n svg.circle({\n coords: \"geo\",\n pos: mumbai,\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2971,"value":"## 2 - Display circles from a geoJSON","pinned":false,"hidden":false,"mode":"md"},{"id":2973,"value":"The mark circle can also be used to draw circles 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"},{"id":2979,"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 // Circles\n svg.circle({\n data: world,\n r: 4,\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3011,"value":"If the coordinates are already projected onto the map plane, then set the **`coords`** attribute to \"svg\". The map remains zoomable. ","pinned":false,"hidden":false,"mode":"md"},{"id":3013,"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 // Here we create points at the centroid of the countries in the map coordinates.\n const centroids_latlon = viz.tool.centroid(world);\n const centroids_xy = viz.tool.project(centroids_latlon, {\n projection: svg.projection\n });\n\n // Circles\n svg.circle({\n data: centroids_xy,\n coords: \"svg\",\n r: 4,\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2987,"value":"## 3 - Proportional symbols","pinned":false,"hidden":false,"mode":"md"},{"id":3047,"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"},{"id":3077,"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"},{"id":3270,"value":"In thematic cartography, it's customary to display small circles on top of large ones. But you can change this rule using the parameters **`sort`** et **`decending`**.","pinned":false,"hidden":false,"mode":"md"},{"id":3050,"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 // Circles\n svg.circle({\n data: world,\n r: \"pop\",\n k: 30,\n sort: \"pop\",\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3073,"value":"You can also use your own functions to define the size of circles and define how the circles are sorted","pinned":false,"hidden":false,"mode":"md"},{"id":3095,"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 // Circles\n svg.circle({\n data: world,\n r: (d) => Math.sqrt(d.properties.pop / 2000000),\n sort: (a, b) =>\n d3.descending(Math.abs(+a.properties.pop), Math.abs(+b.properties.pop)),\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3118,"value":"Note that you have accès to the internal `geoviz` radius function.","pinned":false,"hidden":false,"mode":"md"},{"id":3123,"value":"radius = viz.tool.radius(\n world.features.map((d) => d.properties.pop),\n { k: 40, fixmax: undefined }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3129,"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 // Circles\n svg.circle({\n data: world,\n r: (d) => radius.r(d.properties.pop),\n sort: \"pop\",\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3538,"value":"## 4 - Legends","pinned":false,"hidden":false,"mode":"md"},{"id":3554,"value":"To add a legend corresponding to the mark circle, you can use the functions legend.circles() and legend.circles_nested(). See the [legend](https://observablehq.com/@neocartocnrs/legends) section in the documentation.","pinned":false,"hidden":false,"mode":"md"},{"id":3556,"value":"viz.legend.circles({ circle_fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":3560,"value":"viz.legend.circles_nested({ circle_fill: \"#38896F\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3566,"value":"Let's go back to the previous map","pinned":false,"hidden":false,"mode":"md"},{"id":3568,"value":"{\n // Container\n let svg = viz.create({\n width: 1000,\n zoomable: true,\n domain: world\n });\n\n // Basemap\n svg.path({ datum: world, fill: \"#CCC\" });\n\n // Circles\n svg.circle({\n data: world,\n r: (d) => radius.r(d.properties.pop),\n sort: \"pop\",\n fill: \"#38896F\"\n });\n\n // Legend\n svg.legend.circles_nested({\n pos: [70, 260],\n gap: 10,\n title: \"Number of inh.\",\n data: radius.data,\n k: radius.k\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2985,"value":"## 5 - Modify circle placement","pinned":false,"hidden":false,"mode":"md"},{"id":3295,"value":"Proportional circle maps are very popular in cartography. But they have one weakness: the circles overlap, masking some of the information. Using the dodge argument solves this problem (but the circles are no longer positioned in the right place). The iteration argument is used to define the precision of displacements (200 by default). ","pinned":false,"hidden":false,"mode":"md"},{"id":3299,"value":"viz.circle({\n data: world,\n r: 8,\n dodge: true,\n fill: \"#38896F\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3304,"value":"It works also with proportionnal circles","pinned":false,"hidden":false,"mode":"md"},{"id":3307,"value":"viz.circle({\n data: world,\n r: \"pop\",\n dodge: true,\n fill: \"#38896F\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3378,"value":"To alter circle positions, you can also use the transform attribute.","pinned":false,"hidden":false,"mode":"md"},{"id":3310,"value":"{\n // Container\n let svg = viz.create({\n width: 500,\n domain: world\n });\n\n // Basemap\n svg.path({ datum: world, fill: \"#CCC\" });\n\n // Circle\n svg.circle({\n r: 20,\n fillOpacity: 0.5,\n pos: position,\n fill: \"#38896F\"\n });\n\n // Translated circle\n svg.circle({\n r: 20,\n pos: position,\n fill: \"#38896F\",\n\n transform: \"translate(40,0)\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3492,"value":"## 6 - Nested circles","pinned":false,"hidden":false,"mode":"md"},{"id":3398,"value":"Use the transform argument can be usefull (but a little bit tricky) to draw nesting circles.","pinned":false,"hidden":false,"mode":"md"},{"id":3495,"value":"First, a little bit data handling (*skip this section if you are not interested*)","pinned":false,"hidden":false,"mode":"md"},{"id":3402,"value":"world2 = {\n const worldpop = d3.sum(world.features.map((d) => d.properties.pop));\n const worldgdp = d3.sum(world.features.map((d) => d.properties.gdp));\n return {\n type: \"FeatureCollection\",\n features: world.features\n //.filter((d) => d.properties.region == \"Africa\")\n .map((d) => ({\n type: \"Feature\",\n properties: {\n id: d.properties.ISO3,\n name: d.properties.name,\n region: d.properties.region,\n poppct: (d.properties.pop / worldpop) * 10000,\n gdppct: (d.properties.gdp / worldgdp) * 10000\n },\n geometry: d.geometry\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3479,"value":"popradius = viz.tool.radius(\n world2.features.map((d) => d.properties.poppct),\n { k }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3481,"value":"gdpradius = viz.tool.radius(\n world2.features.map((d) => d.properties.gdppct),\n { k }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3483,"value":"africa = viz.tool.featurecollection(\n world2.features.filter((d) => d.properties.region == \"Africa\")\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3504,"value":"And the map","pinned":false,"hidden":false,"mode":"md"},{"id":3512,"value":"viewof k = Inputs.range([50, 200], {\n label: \"Circle size\",\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3450,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":3150,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":3152,"value":"import { style, world, disclaimer, viz } from \"@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3154,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}