30:[{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1608138281163.268,"size":92399},{"id":"75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","href":"https://static.observableusercontent.com/files/75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","name":"alphabet.csv","type":"text/csv","lastModified":1608160935293.143,"size":275},{"id":"831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","href":"https://static.observableusercontent.com/files/831732e8332e141e39aca2776edfdb19b2d43308d4974f5ad4a21fad007faa0518fe5bc4a0fc4f57422689a161dc27b82073403cee0e29ebf6ccb75d0ec4aeb3","name":"seattle-weather.csv","type":"text/csv","lastModified":1615845010123.54,"size":48219},{"id":"f0aaa8353b80ce8d9261a3fcf5c489f90c4c0c9a4f9f76e3d220d21f181daa69c2d3517e520633540ea763d08abce81b99089f5611b55ba1ffc7f2be4005f70c","href":"https://static.observableusercontent.com/files/f0aaa8353b80ce8d9261a3fcf5c489f90c4c0c9a4f9f76e3d220d21f181daa69c2d3517e520633540ea763d08abce81b99089f5611b55ba1ffc7f2be4005f70c","name":"simpsons.csv","type":"text/csv","lastModified":1615844864090.664,"size":119729}] 2e:{"title":"Rule Mark / Observable Plot","cells":[{"id":0,"value":"

Rule Mark / Observable Plot

Observable Plot › Marks › Rule · API

\n\n# Plot: Rule\n\nRules are horizontal or vertical lines. A **ruleY**↔︎ has a *y*-value, while a **ruleX**↕︎ has an *x*-value. Rules are often used as annotations, say to mark the *y* = 0 baseline (in red below for emphasis) in a line chart.","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"aapl = FileAttachment(\"aapl.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.ruleY([0], {stroke: \"red\"}),\n Plot.line(aapl, {x: \"Date\", y: \"Close\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"As annotations, rules often have hard-coded data (above, the value zero, or below, the value one). The default position definition of the rule (*y* for ruleY and *x* for ruleX) is the identity function, allowing the rule’s data to be a literal array of values.","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Change in price (%)\",\n type: \"log\",\n tickFormat: d => d3.format(\"+d\")((d - 1) * 100)\n },\n marks: [\n Plot.ruleY([1], {stroke: \"red\"}),\n Plot.line(aapl, Plot.normalizeY({basis: \"first\", x: \"Date\", y: \"Close\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"Yet rules can also be used to visualize data. Below, a random normal distribution is plotted with rules, looking a bit like the [emission spectrum of Hydrogen](https://en.wikipedia.org/wiki/Hydrogen_spectral_series). Reducing opacity allows better perception of density when rules are coincident.","pinned":false,"hidden":false,"mode":"md"},{"id":275,"value":"Plot.plot({\n x: {\n domain: [-4, 4]\n },\n marks: [\n Plot.ruleX({length: 500}, {x: d3.randomNormal(), strokeOpacity: 0.2}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"Rules can also be an alternative to an [area mark](/@observablehq/plot-area?collection=@observablehq/plot) as in a band chart, provided the data is sufficiently dense: using the *y1* and *y2* channels, you can limit the extent of a rule along the secondary dimension. And rules support a *stroke* color encoding. The rules below plot the daily minimum and maximimum temperature for Seattle.","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"seattle = FileAttachment(\"seattle-weather.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":225,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Temperature (°F)\",\n transform: d => d * 9 / 5 + 32 // Celsius to Fahrenheit\n },\n color: {\n scheme: \"BuRd\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.ruleX(seattle, {x: \"date\", y1: \"temp_min\", y2: \"temp_max\", stroke: \"temp_max\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"In the candlestick chart below, three rules are drawn for each trading day: a gray rule spans the chart, showing gaps for weekends and holidays; a black rule spans the day’s low and high; and a green or red rule spans the day’s open and close.","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"aapl120 = aapl.slice(-120) // the most recent 120 days","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"Plot.plot({\n width,\n inset: 6,\n x: {\n label: null\n },\n y: {\n grid: true,\n label: \"↑ Stock price ($)\"\n },\n color: {\n range: [\"#e41a1c\", \"#000000\", \"#4daf4a\"]\n },\n marks: [\n Plot.ruleX(aapl120, {\n x: \"Date\",\n strokeOpacity: 0.1\n }),\n Plot.ruleX(aapl120, {\n x: \"Date\",\n y1: \"Low\",\n y2: \"High\"\n }),\n Plot.ruleX(aapl120, {\n x: \"Date\",\n y1: \"Open\",\n y2: \"Close\",\n stroke: d => Math.sign(d.Close - d.Open),\n strokeWidth: 4,\n strokeLinecap: \"round\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"Rules can also be used for visually grouping, such as in the [dot plot](/@observablehq/plot-dot?collection=@observablehq/plot) below showing the decline of *The Simpsons*. The rules indicate the extent (minimum and maximum) for each season, while a red line shows the median rating trend.","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"simpsons = FileAttachment(\"simpsons.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"Plot.plot({\n x: {\n type: \"point\",\n label: \"Season →\",\n labelAnchor: \"right\"\n },\n y: {\n label: \"↑ IMDb rating\"\n },\n marks: [\n Plot.ruleX(simpsons, Plot.groupX({y1: \"min\", y2: \"max\"}, {x: \"season\", y: \"imdb_rating\"})),\n Plot.line(simpsons, Plot.groupX({y: \"median\"}, {x: \"season\", y: \"imdb_rating\", stroke: \"red\"})),\n Plot.dot(simpsons, {x: \"season\", y: \"imdb_rating\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"Rules can also be a stylistic choice, as in the lollipop chart below, serving the role of a pixel-wide skinny [bar](/@observablehq/plot-bar?collection=@observablehq/plot) topped with a [dot](/@observablehq/plot-dot?collection=@observablehq/plot).","pinned":false,"hidden":false,"mode":"md"},{"id":184,"value":"alphabet = FileAttachment(\"alphabet.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"Plot.plot({\n x: {\n label: null,\n tickSize: 0\n },\n y: {\n label: \"↑ Frequency (%)\",\n transform: d => d * 100\n },\n marks: [\n Plot.ruleY([0]),\n Plot.ruleX(alphabet, {x: \"letter\", y: \"frequency\", fill: \"black\"}),\n Plot.dot(alphabet, {x: \"letter\", y: \"frequency\", fill: \"black\", r: 4})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}