30:T434,Plot.plot({ width: 240, axis: null, y: { domain: d3.range(4, 25).map(String) }, color: { domain: "NLB", range: ["currentColor", "peru", "brown"], legend: true }, marks: [ Plot.text([[1, "4"]], { text: ["Northbound"], textAnchor: "start" }), Plot.text([[-1, "4"]], { text: ["Southbound"], textAnchor: "end" }), Plot.text(new Set(caltrain.map(d => d.hours)), { x: 0, y: d => d, text: d => `${(d - 1) % 12 + 1}${(d % 24) >= 12 ? "p": "a"}` }), Plot.text(caltrain, Plot.stackX2({ filter: d => d.orientation === "N", x: 1, y: "hours", text: d => d.minutes.padStart(2, "0"), title: d => `${d.time} ${d.line}`, fill: "type", textAnchor: "start" })), Plot.text(caltrain, Plot.stackX2({ filter: d => d.orientation === "S", x: -1, y: "hours", text: d => d.minutes.padStart(2, "0"), title: d => `${d.time} ${d.line}`, fill: "type", textAnchor: "end" })), Plot.ruleX([-0.5, 0.5]) ] })31:Ta31,Plot.plot({ height: 200, marginBottom: 12, x: { type: "point", align: 0, axis: "top", tickSize: 0 }, marks: [ Plot.text( [ "Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before cof\xadfin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.", "There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.", "Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?" ], { frameAnchor: "top", fontSize: 9, x: (d, i) => 1 + i, // paragraph number lineWidth: 20, textAnchor: "start", lineHeight: 1.3, // monospace: true, clip: true } ) ] })32:[{"id":"75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","href":"https://static.observableusercontent.com/files/75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","name":"alphabet.csv","type":"text/csv","lastModified":1616034801828.281,"size":275},{"id":"df346b6e60d18054eb2c5fae318ffb4bfb2f89f173cfa3ef5f8d397b8aa4b767874e9dea2595f5277ed0259fdfcefb22c2bc5703e0132f2e46d95aacb1921a35","href":"https://static.observableusercontent.com/files/df346b6e60d18054eb2c5fae318ffb4bfb2f89f173cfa3ef5f8d397b8aa4b767874e9dea2595f5277ed0259fdfcefb22c2bc5703e0132f2e46d95aacb1921a35","name":"caltrain.csv","type":"text/csv","lastModified":1616085124170.641,"size":2529},{"id":"3e136b4525bb1d1bb50a29092c102423fd7d3a2526c07a40d92d90c95598a81dee3fdfcafb7561b132b0618adbd046dc6ff21d4c7884d1914a5fec44ff773cff","href":"https://static.observableusercontent.com/files/3e136b4525bb1d1bb50a29092c102423fd7d3a2526c07a40d92d90c95598a81dee3fdfcafb7561b132b0618adbd046dc6ff21d4c7884d1914a5fec44ff773cff","name":"travelers.csv","type":"text/csv","lastModified":1616083276505.281,"size":7836},{"id":"f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","href":"https://static.observableusercontent.com/files/f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","name":"driving.csv","type":"text/csv","lastModified":1616083155041.668,"size":1546}] 2e:{"title":"Text Mark / Observable Plot","cells":[{"id":0,"value":"

Text Mark / Observable Plot

Observable Plot › Marks › Text · API

\n\n# Plot: Text\n\nThe **text** mark draws text at the given *xy* position. It is often used to label other marks, such as to show the value of a bar; when space is available, this can allow faster and more accurate reading of values than an axis alone (or a tooltip).","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"alphabet = FileAttachment(\"alphabet.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"Plot.plot({\n x: {\n label: null\n },\n y: {\n grid: true,\n label: \"↑ Frequency (%)\",\n transform: d => d * 100\n },\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\"}),\n Plot.text(alphabet, {x: \"letter\", y: \"frequency\", text: d => (d.frequency * 100).toFixed(1), dy: -5}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"If there are too many data points, labels may be hard to read due to occlusion. The [*filter* transform](/@observablehq/plot-transforms?collection=@observablehq/plot) can be used to label only some data. In the connected scatterplot below (recreating Hannah Fairfield’s [“Driving Shifts Into Reverse”](http://www.nytimes.com/imagepages/2010/05/02/business/02metrics.html) from 2009), every fifth year is labeled. In the future, we expect Plot will have an automatic labeling transform, perhaps similar to Philippe Rivière’s [Occlusion](/@fil/occlusion).","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"driving = FileAttachment(\"driving.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"Plot.plot({\n grid: true,\n x: {\n label: \"Miles driven (per capita per year) →\"\n },\n y: {\n label: \"↑ Price of gas (average per gallon, adjusted)\"\n },\n marks: [\n Plot.line(driving, {x: \"miles\", y: \"gas\", curve: \"catmull-rom\"}),\n Plot.dot(driving, {x: \"miles\", y: \"gas\", fill: \"currentColor\"}),\n Plot.text(driving, {filter: d => d.year % 5 === 0, x: \"miles\", y: \"gas\", text: d => `${d.year}`, dy: -8})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"For line charts with multiple series, you often wish to label only the start or end of the line. This can be done by slicing the data, as below (note this data is in reverse chronological order, so the first element in the data is the most recent), or by using the [select transform](/@observablehq/plot-select?collection=@observablehq/plot).","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"travelers = FileAttachment(\"travelers.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"Plot.plot({\n y: {\n grid: true,\n nice: true,\n label: \"↑ Travelers per day (millions)\",\n transform: d => d / 1e6\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(travelers, {\n x: \"date\",\n y: \"previous\",\n stroke: \"#bab0ab\"\n }),\n Plot.line(travelers, {\n x: \"date\",\n y: \"current\"\n }),\n Plot.text(travelers.slice(0, 1), {\n x: \"date\",\n y: \"previous\",\n text: [\"2019\"],\n fill: \"#8a817c\",\n dy: \"-0.5em\"\n }),\n Plot.text(travelers.slice(0, 1), {\n x: \"date\",\n y: \"current\",\n text: [\"2020\"],\n dy: \"1.2em\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"travelers.slice(0, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"A text mark can also be used to visualize data directly, similar to a [dot mark](/@observablehq/plot-dot?collection=@observablehq/plot) in a scatterplot. Below a “stem and leaf” plot of Caltrain’s Palo Alto station schedule uses [stacked](/@observablehq/plot-stack?collection=@observablehq/plot) text. The *fill* channel provides a color encoding to distinguish local trains that make every stop (*N* in black), limited trains that make fewer stops (*L* in orange), and “baby bullet” trains that make the fewest stops (*B* in red).","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"caltrain = FileAttachment(\"caltrain.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"The *title* channel specifies a tooltip to be displayed when the user mouses over the text. This is used above to show the time and number of each train.","pinned":false,"hidden":false,"mode":"md"},{"id":241,"value":"The text mark provides channels for *x*, *y*, *z* (for *z*-order), *text*, *title*, *fill*, and *rotate*. All other options are constants. So, if you want some labels to be left-aligned and others to be right-aligned, as above, use separate text marks with different *textAnchor* options.","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"The *x* and *y* channels are optional; a one-dimensional text mark can be produced by specifying only one of *x* or *y*. If both the *x* and *y* channels are not defined, the text mark assumes that the data is an iterable of points [[*x₁*, *y₁*], [*x₂*, *y₂*], …], allowing for shorthand. Furthermore, the default *text* channel is the associated datum’s index. (This is rarely what you want, but at least it gets something on the screen.)","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"points = Array.from({length: 10}, (_, i) => [1.2 - Math.sin(1 + i / 5), Math.cos(i / 6)])","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"Plot.plot({\n grid: true,\n x: {\n domain: [0, 1]\n },\n y: {\n domain: [0, 1]\n },\n marks: [\n Plot.line(points),\n Plot.dot(points, {fill: \"white\", r: 6}),\n Plot.text(points)\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"The text mark exposes the following SVG text attributes as options: [*textAnchor*](https://www.w3.org/TR/SVG11/text.html#TextAnchorProperty), [*fontFamily*](https://www.w3.org/TR/SVG11/text.html#FontFamilyProperty), [*fontSize*](https://www.w3.org/TR/SVG11/text.html#FontSizeProperty), [*fontStyle*](https://www.w3.org/TR/SVG11/text.html#FontStyleProperty), [*fontVariant*](https://www.w3.org/TR/SVG11/text.html#FontVariantProperty), [*fontWeight*](https://www.w3.org/TR/SVG11/text.html#FontWeightProperty), and [*rotate*](https://www.w3.org/TR/SVG11/text.html#TSpanElementRotateAttribute). The [*dx*](https://www.w3.org/TR/SVG11/text.html#TSpanElementDXAttribute) and [*dy*](https://www.w3.org/TR/SVG11/text.html#TSpanElementDYAttribute) attributes are supported, and must be specified in pixels. If the *x* or *y* channels are not specified, the *frameAnchor* option indicates where the text should go in the chart: top-left, middle, bottom-right, etc. ","pinned":false,"hidden":false,"mode":"md"},{"id":335,"value":"The text mark supports the creation of multiple lines of text with [tspan](https://www.w3.org/TR/SVG11/text.html#TSpanElement) elements, in two ways. First, you can provide the line information with newline characters:","pinned":false,"hidden":false,"mode":"md"},{"id":334,"value":"Plot.plot({\n height: 200,\n marks: [\n Plot.frame(),\n Plot.text([`This Is Just To Say\nWilliam Carlos Williams, 1934\n\nI have eaten\nthe plums\nthat were in\nthe icebox\n\nand which\nyou were probably\nsaving\nfor breakfast\n\nForgive me\nthey were delicious\nso sweet\nand so cold`], {frameAnchor: \"middle\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"Second, if the text is not already wrapped, the *lineWidth* option triggers a line wrapping algorithm. This option must be specified as a number in *em* (i.e. font-size) units. For performance and simplicity, Plot does not measure the text exactly, but instead uses a heuristic to evaluate the length of each character. When a word contains a [soft-hyphen](https://en.wikipedia.org/wiki/Soft_hyphen) (\\\\xad), it might be replaced by a dash and a line feed. Using the *monospace* option overrides that heuristic for fixed-width fonts, and counts the characters instead.","pinned":false,"hidden":false,"mode":"md"},{"id":332,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"The *lineAnchor* option controls the line anchor for vertical position; top, bottom, or middle; and the *lineHeight* option specifies the line height in ems.","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}