2c:["$","title",null,{"children":"square | Nicolas Lambert | Observable"}] 31:[] 2f:{"id":"05f902102de27d3e","slug":"square-mark","title":"square","thumbnail":"871b495edf6e9956bdcad26b93d8915cfdfb26e29db41598a3c39c566ce62746","access_level":"public","create_time":"$D2024-03-19T10:56:40.252Z","update_time":"$D2026-09-04T10:00:40.501Z","view_time":null,"first_public_time":"$D2024-03-19T15:59:57.100Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":416,"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":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"bfb3f0e24e42a069","slug":"geoviz","title":"geoviz","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"square","cells":[{"id":0,"value":"# square","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":277,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"## 1 - A simple square","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":22,"value":"As the name implies, the **square mark** is used to draw squares. The **`side`** attribute allows to define the size of the square (side length). 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":29,"value":"viz.square({ fill: \"#38896F\", side: 50 })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":51,"value":"Or, with the plot function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":53,"value":"viz.plot({ type: \"square\", side: 50, fill: \"#38896F\", angle: 45 })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":61,"value":"You can use this mark to add a square 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","author":"$undefined","summary":"$undefined"},{"id":63,"value":"let position = [300, 100]","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":65,"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 // Square\n svg.square({\n pos: position,\n angle: 45,\n fill: \"#38896F\"\n });\n\n // Render\n display(svg.render())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":69,"value":"You can also give a geographic position in latitude and longitude. In this case, set **`coords`** to `\"geo\"`. In this case, the square move when you zoom in on the map. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":72,"value":"let abuja = [7.54, 9.19]","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":74,"value":"// 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.square({\n coords: \"geo\",\n angle: 45,\n pos: abuja,\n\n fill: \"#38896F\"\n });\n\n // Render\n\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":98,"value":"## 2 - Display squares from a geoJSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":100,"value":"The mark square can also be used to draw squares from a geoJSON, using the **`data`** attribute instead of the `pos` attribute. If the input geoJSON contains points, the squares are mapped onto these points. In the case of polygons or multipolygons, the squares is drawn at the center of the largest polygon. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":250,"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 // Squares\n svg.square({\n data: world,\n side: 10,\n fill: \"#38896F\"\n });\n\n // Render\n display(svg.render())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":253,"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","author":"$undefined","summary":"$undefined"},{"id":255,"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 // 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 // Squares\n svg.square({\n data: centroids_xy,\n coords: \"svg\",\n side: 10,\n fill: \"#38896F\"\n });\n\n // Render\n display(svg.render())","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":238,"value":"## 3 - Proportional symbols","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":240,"value":"To vary the size proportionally to an absolute quantitative data, all you have to do is specify the variable name in the **`side`** attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":243,"value":"The **`k`** parameter lets you define the size of the largest square. The **`fixmax`** parameter allows you to set this side 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":245,"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":127,"value":"viewof angle = Inputs.range([-180, 180], { label: \"angle\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"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 // Squares\n svg.square({\n data: world,\n k: 20,\n side: \"pop\",\n angle,\n fill: \"#38896F\"\n });\n\n // Render\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":158,"value":"You can also use your own functions to define the size of squares and define how the squares are sorted","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":178,"value":"let gradsizes = d3.scaleThreshold([10000000, 20000000], [5, 10, 20])","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":200,"value":"let gradcol = d3.scaleThreshold(\n [10000000, 20000000],\n [\"#fed976\", \"#fd8d3c\", \"#b10026\"]\n)","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":163,"value":"\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.square({\n data: world,\n side: (d) => gradsizes(d.properties.pop),\n sort: (a, b) =>\n d3.descending(Math.abs(+a.properties.pop), Math.abs(+b.properties.pop)),\n fill: (d) => gradcol(d.properties.pop)\n });\n\n // Render\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":235,"value":"## 4 - Legends","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":265,"value":"To add a legend corresponding to the mark square, you can use the functions legend.squares() and legend.squares_nested(). See the [legend](https://observablehq.com/@neocartocnrs/legends) section in the documentation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":267,"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":"js","author":"$undefined","summary":"$undefined"},{"id":276,"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":"js","author":"$undefined","summary":"$undefined"},{"id":9,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":13,"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/square-mark;307;"}