31:[{"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}] 2f:{"title":"Text mark","cells":[{"id":0,"value":"# Text mark","pinned":false,"hidden":false,"mode":"md"},{"id":480,"value":"🆕 *Updated for Notebook 2.0*","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":"js"},{"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":"js"},{"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":"// 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 display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"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":"const abuja = [7.396, 9.076]","pinned":true,"hidden":false,"mode":"js"},{"id":172,"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 // Text\n svg.text({\n pos: abuja,\n coords: \"geo\",\n text: \"Abuja\",\n fontSize: 30,\n fill: \"#38896F\"\n });\n\n // Render\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"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":"js"},{"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":"// 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 display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"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":"// 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 display(svg.render())","pinned":false,"hidden":false,"mode":"js"},{"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":"const font = viz.tool.addfonts([\n {\n fontFamily: \"Orbitron\",\n url: await FileAttachment(\"Orbitron-VariableFont_wght.ttf\").url()\n }\n])","pinned":true,"hidden":false,"mode":"js"},{"id":262,"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 // 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 display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"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":"let textAnchor = view(Inputs.radio(\n [\n \"start\",\n \"middle\",\n \"end\"\n ],\n { label: \"textAnchor\", value: \"middle\" }\n))","pinned":false,"hidden":false,"mode":"js"},{"id":319,"value":"let dominantBaseline = view(Inputs.radio(\n [\"auto\", \"middle\", \"central\", \"hanging\"],\n { label: \"dominantBaseline\", value: \"middle\" }\n))","pinned":false,"hidden":false,"mode":"js"},{"id":333,"value":"let dx = view(Inputs.range([-50, 50], { label: \"dx\", step: 1 }))\n","pinned":false,"hidden":false,"mode":"js"},{"id":335,"value":"let dy = view(Inputs.range([-50, 50], { label: \"dy\", step: 1 }))","pinned":false,"hidden":false,"mode":"js"},{"id":286,"value":"// 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 view(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":90,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"import { style, world, disclaimer, viz } from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":103,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"2","titling":"auto"}