30:[{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1615911212781.457,"size":92399},{"id":"acdb539785511895ff780946e2f870005c718d1f63ecda757414220af0582ba177a2b5e7c44a5dd544a07b85a3f0195f9f3bee5195d36ca4e922515f62f6bcb9","href":"https://static.observableusercontent.com/files/acdb539785511895ff780946e2f870005c718d1f63ecda757414220af0582ba177a2b5e7c44a5dd544a07b85a3f0195f9f3bee5195d36ca4e922515f62f6bcb9","name":"morley.csv","type":"text/csv","lastModified":1615910732865.734,"size":874},{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1615910450007.661,"size":3516}] 2e:{"title":"Tick Mark / Observable Plot","cells":[{"id":0,"value":"

Tick Mark / Observable Plot

Observable Plot › Marks › Tick · API

\n\n# Plot: Tick\n\nTicks are horizontal or vertical lines. A **tickY**↔︎ has a *y*-value, while a **tickX**↕︎ has an *x*-value. Ticks have an optional secondary position dimension (*x* for tickY and *y* for tickX); this second dimension is ordinal, unlike a [rule](/@observablehq/plot-rule?collection=@observablehq/plot), requiring a [band scale](/@observablehq/plot-scales?collection=@observablehq/plot). Ticks are often used to show one-dimensional distributions, as in the “barcode” plot below showing the proportion of population in each age bracket across U.S. states.","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"states = FileAttachment(\"us-population-state-age.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"ages = states.columns.slice(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"stateages = ages.flatMap(age => states.map(d => ({state: d.name, age, population: d[age]}))) // pivot","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"Plot.plot({\n marginLeft: 50,\n grid: true,\n x: {\n axis: \"top\",\n label: \"Percent (%) →\",\n transform: d => d * 100\n },\n y: {\n domain: ages,\n label: \"Age\"\n },\n marks: [\n Plot.ruleX([0]),\n Plot.tickX(stateages, Plot.normalizeX({basis: \"sum\", z: \"state\", x: \"population\", y: \"age\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"As another example, a random normal distribution is plotted below with ticks. Reducing opacity allows better perception of density when ticks are coincident.","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"Plot.plot({\n x: {\n domain: [-4, 4]\n },\n marks: [\n Plot.tickX({length: 500}, {x: d3.randomNormal(), strokeOpacity: 0.2}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"Ticks can also be used in a [box plot](/@observablehq/plot-box) to mark the median value for each group (the thick black vertical line within the gray bar representing the [interquartile range](https://en.wikipedia.org/wiki/Interquartile_range)). Here the reduce transform is used to group observations by experiment and then compute summary statistics.","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"morley = FileAttachment(\"morley.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"Plot.plot({\n x: {\n grid: true,\n inset: 6\n },\n marks: [\n Plot.ruleY(morley, Plot.groupY({x1: iqr1, x2: iqr2}, {x: \"Speed\", y: \"Expt\"})),\n Plot.barX(morley, Plot.groupY({x1: quartile1, x2: quartile3}, {x: \"Speed\", y: \"Expt\", fill: \"#ccc\"})),\n Plot.tickX(morley, Plot.groupY({x: \"median\"}, {x: \"Speed\", y: \"Expt\", strokeWidth: 2})),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"A one-dimensional tick — *i.e.*, tickX with only an *x* channel or tickY with only a *y* channel — is equivalent to a one-dimensional [rule](/@observablehq/plot-rule?collection=@observablehq/plot). While equivalent, a one-dimensional rule should be preferred to a tick in a two-dimensional plot, if only because the name “rule” is more descriptive.","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"When used as annotations, ticks often have hard-coded data (below, the value zero). The default position definition of the tick (*x* for tickX and *y* for tickY) is the identity function, allowing the tick’s data to be a literal array of values.","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"aapl = FileAttachment(\"aapl.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.tickY([0], {stroke: \"red\"}),\n Plot.line(aapl, {x: \"Date\", y: \"Close\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"iqr1 = V => Math.max(d3.min(V), quartile1(V) * 2.5 - quartile3(V) * 1.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"iqr2 = V => Math.min(d3.max(V), quartile3(V) * 2.5 - quartile1(V) * 1.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"quartile1 = V => d3.quantile(V, 0.25)","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"quartile3 = V => d3.quantile(V, 0.75)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}