30:[{"id":"9f076f4ff48f7a4bc39a04bbd617126058331ef815c33758902296ec0a79a391b6fad1879b638b93b0e3b6d9cc5aafc6e4b52909d13d094bfdab8de73c6ab2f1","href":"https://static.observableusercontent.com/files/9f076f4ff48f7a4bc39a04bbd617126058331ef815c33758902296ec0a79a391b6fad1879b638b93b0e3b6d9cc5aafc6e4b52909d13d094bfdab8de73c6ab2f1","name":"Orbitron-VariableFont_wght.ttf","type":"font/ttf","lastModified":1702033014708.663,"size":38012},{"id":"02c298b3d409245c2538593ea8a711c3d1d0dd2ef352e6ea35f8da7e050bc3fe0fc0220543876e4188d76428f97cf149b580f0833230551161ab7ca451632d0d","href":"https://static.observableusercontent.com/files/02c298b3d409245c2538593ea8a711c3d1d0dd2ef352e6ea35f8da7e050bc3fe0fc0220543876e4188d76428f97cf149b580f0833230551161ab7ca451632d0d","name":"land.json","type":"application/json","lastModified":1771600981933.011,"size":2401184},{"id":"ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","href":"https://static.observableusercontent.com/files/ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","name":"world@1.json","type":"application/json","lastModified":1771600981680.497,"size":278391}] 2e:{"title":"Text mark","cells":[{"id":0,"value":"# Text mark","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"## 1 - A simple text","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"As the name implies, the **text mark** is used to add texts on a map. The text attribute allows to define the text to be displayed. To customize the style, you can use svg attributes with camelcase notation such as stroke, fill, fontSize, fontFamily, wordSpacing, letterSpacing, textLength, textDecoration, fontStyle... ","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"viz.text({\n fill: \"#38896F\",\n text: \"cogito ergo sum\",\n fontSize: 20,\n textDecoration: \"underline\",\n letterSpacing: 10,\n wordSpacing: 30\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"Or","pinned":false,"hidden":false,"mode":"md"},{"id":470,"value":"viz.plot({\n type: \"text\",\n fill: \"#38896F\",\n text: \"cogito ergo sum\",\n fontSize: 20,\n textDecoration: \"underline\",\n letterSpacing: 10,\n wordSpacing: 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"You can write text on more than one line by using the \\n separator or by using the backticks ``. You can change the spacing between lines with lineSpacing.","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"viz.text({\n fill: \"#38896F\",\n text: \"Ideas are the source\\nof all things (Platon)\",\n fontSize: 20,\n fontStyle: \"italic\",\n lineSpacing: 10\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"You can position text at a particular position on the map using the pos attribute defining x,y coordinates.","pinned":false,"hidden":false,"mode":"md"},{"id":34,"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 // Text\n svg.text({\n pos: [200, 50],\n text: \"Hello geoviz\",\n fontSize: 30,\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"You can also define a position in latitude and longitude by setting the coords attribute to `\"geo\"`. In this case, the text moves with the zoom.","pinned":false,"hidden":false,"mode":"md"},{"id":170,"value":"abuja = [7.396, 9.076]","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"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 // Text\n svg.text({\n pos: abuja,\n coords: \"geo\",\n text: \"Abuja\",\n fontSize: 30,\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"## 2 - Labels","pinned":false,"hidden":false,"mode":"md"},{"id":184,"value":"You can also use the text mark to generate labels from a geoJSON. To do this, you need to fill in the data attribute and the text attribute.","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"viz.text({ data: world, text: \"ISO3\", fill: \"#38896F\", svg_zoomable: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"Note that if your coordinates are already projected, it works also if you set the coords parameter to `\"svg\"`.","pinned":false,"hidden":false,"mode":"md"},{"id":346,"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 // Text\n svg.text({\n coords: \"svg\",\n data: centroids_xy,\n text: \"ISO3\",\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"Labels are customizable. For example, you can display country names, vary font size and the size of the halo according to the population and sort to put the labels of the most populous countries on top. To do this, use the sort and descending parameters.","pinned":false,"hidden":false,"mode":"md"},{"id":203,"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 // Linear scale functions\n const popextent = d3.extent(\n world.features.map((d) => Number(d.properties.pop))\n );\n const sizeFont = d3.scaleLinear(popextent, [2, 70]);\n const sizeStroke = d3.scaleLinear(popextent, [0.5, 10]);\n\n // Text\n svg.text({\n data: world,\n text: \"name\",\n fontSize: (d) => sizeFont(d.properties.pop),\n strokeWidth: (d) => sizeStroke(d.properties.pop),\n fill: \"#38896F\",\n stroke: \"white\",\n strokeOpacity: 0.8,\n sort: \"pop\",\n descending: false\n });\n\n // Render\n return svg.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"## 3 - Fonts","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"In the `geoviz` library, you can change the font-family of all texts at any level. Far that, you have to use the fontFamily attribute. To load a new font, use the addfonts() function.","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"font = viz.tool.addfonts([\n {\n fontFamily: \"Orbitron\",\n url: await FileAttachment(\"Orbitron-VariableFont_wght.ttf\").url()\n }\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"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 // Only countries with more than 100 million inh.\n const bigcountries = viz.tool.featurecollection(\n world.features.filter((d) => d.properties.pop >= 100000000)\n );\n\n // Text\n svg.text({\n data: bigcountries,\n text: \"name\",\n fontSize: 20,\n fontFamily: \"Orbitron\",\n fill: \"#38896F\"\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"## 4 - Positioning","pinned":false,"hidden":false,"mode":"md"},{"id":284,"value":"To alter the position of a text, you can play with the parameters textAnchor, dominantBaseline, dx and dy.","pinned":false,"hidden":false,"mode":"md"},{"id":325,"value":"viewof textAnchor = Inputs.radio(\n [\n \"start\",\n \"middle\",\n \"end\"\n ],\n { label: \"textAnchor\", value: \"middle\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"viewof dominantBaseline = Inputs.radio(\n [\"auto\", \"middle\", \"central\", \"hanging\"],\n { label: \"dominantBaseline\", value: \"middle\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"viewof dx = Inputs.range([-50, 50], { label: \"dx\", step: 1 })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"viewof dy = Inputs.range([-50, 50], { label: \"dy\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"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 // Position marker\n const pos = [250, 120];\n svg\n .append(\"circle\")\n .attr(\"cx\", pos[0])\n .attr(\"cy\", pos[1])\n .attr(\"r\", 5)\n .attr(\"fill\", \"#616161\")\n .attr(\"stroke\", \"none\");\n\n // Text\n svg.text({\n pos: pos,\n text: `\"In that Empire, the Art of Cartography\nattained such Perfection that the map\nof a single Province occupied the entirety\nof a City, and the map of the Empire, the\nentirety of a Province\"\n(Jorge Luis Borges)`,\n fontSize: 13,\n fill: \"#38896F\",\n dominantBaseline: dominantBaseline,\n textAnchor: textAnchor,\n dx: dx,\n dy: dy\n });\n\n // Render\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"import { style, world, disclaimer, viz } from \"@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}