2b:null 2c:["$","title",null,{"children":"Axes / Observable Plot | Observable | Observable"}] 31:T41b,If the default behavior isn’t what you want, use the *mark*.**facetAnchor** option to control which facets show an axis. (This option applies not just to Plot’s axis and grid mark, but any mark; for example, you can use it to place a text mark at the bottom of each facet column.) The supported values for this option are: * _top_ - show only on the top facets * _right_ - show only on the right facets * _bottom_ - show only on the bottom facets * _left_ - show only on the left facets * _top-empty_ - show on any facet with space above (a superset of _top_) * _right-empty_ - show on any facet with space to the right (a superset of _right_) * _bottom-empty_ - show on any facet with space to below (a superset of _below_) * _left-empty_ - show on any facet with space to the left (a superset of _left_) * null - show on every facet The interactive chart below shows the different possibilities. Note that we place the facet *fx*-axis (in blue) opposite the *x*-axis (in red).32:[] 2f:{"id":"31a7ca1f4fc98d27","slug":"plot-axes","title":"Axes / Observable Plot","thumbnail":"61ef43e3641638a2c8745ff587efd2b9976e70ea8ad94b7e6e5dca4023214d85","access_level":"public","create_time":"$D2023-01-05T18:07:57.724Z","update_time":"$D2023-02-07T17:51:34.195Z","view_time":null,"first_public_time":"$D2023-02-07T17:51:56.864Z","fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":1197,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"8371eda7bd0cd599","reply_to_id":null,"content":"I don’t like the use of a hard-coded interval (1) here because it won’t behave well if the scale domain changes. It’d also be nice if we could achieve the minor/major grid lines using a single grid mark; this example currently draws major lines atop minor lines, which isn’t always an acceptable solution.","create_time":"$D2023-01-30T22:31:16.441Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"c0bc013d8f261022","reply_to_id":"8371eda7bd0cd599","content":"it's possible with a variable strokeOpacity, that depends on the tick (d) or on the tick rank (i), but it has to be refined by hand, since it's not easy to know (generically) which tick is major or minor.","create_time":"$D2023-01-31T17:01:12.088Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"30d887a86f60704a","reply_to_id":"8371eda7bd0cd599","content":"For the sake of moving forward quickly, I’m going to drop the minor grid lines from this example, but leave the use of interval (1).","create_time":"$D2023-01-31T20:22:19.900Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Axes / Observable Plot","cells":[{"id":273,"value":"

Axes / Observable Plot

Observable Plot › Axes · API

\n\n# Plot: Axes\n\nPlot’s axes convey the meaning of position [scales](/@observablehq/plot-scales): _x_ and _y_, and _fx_ and _fy_ when [faceting](/@observablehq/plot-facets). Plot automatically adds a default axis mark for position scales; you can customize the appearance of axes either through scale options or by instantiating **axis** or **grid** marks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":681,"value":"Axes are important! Tailoring axes may help readers more quickly and easily interpret plots. For example, you can draw grid lines atop rather than below bars.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1151,"value":"viewof grid = Inputs.toggle({label: \"Show grid\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"Plot.plot({\n height: 546,\n x: {percent: true},\n marks: [\n Plot.axisX({anchor: \"top\", label: \"Frequency (%) →\"}),\n Plot.axisY({anchor: \"left\", label: null}),\n Plot.barX(alphabet, {x: \"frequency\", y: \"letter\", fill: \"steelblue\", sort: {y: \"width\"}}),\n grid ? Plot.gridX({interval: 1, stroke: \"#fff\", strokeOpacity: 1}) : null,\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"The **interval** option above instructs the grid lines to be drawn at unit intervals, _i.e._ whole percentages. As an alternative, you can use the **ticks** option to specify the desired number of ticks or the **tickSpacing** option to specify the desired separation between adjacent ticks in pixels.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":279,"value":"You can add a second axis for a given scale to repeat axes on both sides of a plot. The orientation of the axis is controlled by the **anchor** option.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":281,"value":"Plot.plot({\n height: 556,\n x: {percent: true},\n marks: [\n Plot.gridX({interval: 1}),\n Plot.axisX({anchor: \"top\", label: \"Frequency (%) →\"}),\n Plot.axisX({anchor: \"bottom\", label: null}),\n Plot.axisY({anchor: \"left\", label: null}),\n Plot.barX(alphabet, {x: \"frequency\", y: \"letter\", fill: \"steelblue\"}),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"If you don’t declare an axis mark for a position scale, Plot will implicitly add one for you below (before) all other marks. To disable an implicit axis, set the _scale_.**axis** option to null for the corresponding scale; or, set the top-level **axis** option to null to disable all implicit axes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":308,"value":"Plot’s axis mark is a composite mark comprised of:\n\n* a [vector](/@observablehq/plot-vector) for ticks\n* a [text](/@observablehq/plot-text) for tick labels\n* a [text](/@observablehq/plot-text) for an axis label\n\nPlot’s grid mark is a specially-configured [rule](/@observablehq/plot-rule).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":120,"value":"As such, you can take advantage of the full capabilities of these marks. For example, you can use the text mark’s **lineWidth** option to wrap long tick labels (and even soft hyphens). Note this option is expressed in ems, not pixels, and you may have to reserve additional **marginBottom** to make room for multiple lines.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":106,"value":"Plot.plot({\n y: {percent: true},\n caption: md`Data: *The Onion*’s “Why Are We Leaving Facebook?”`,\n marks: [\n Plot.axisX({label: null, lineWidth: 8, marginBottom: 40}),\n Plot.axisY({label: \"↑ Responses (%)\"}),\n Plot.barY(responses, {x: \"name\", y: \"value\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":424,"value":"Or, you can use the **textAnchor** option to extend the *y*-axis tick labels to the right and into the frame, and the **fill** option to specify the color of the text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":427,"value":"Plot.plot({\n marginTop: 0,\n marginLeft: 4,\n x: {ticks: 4, label: \"Yield (kg) →\"},\n marks: [\n Plot.barX([42, 17, 32], {y: [\"🍌 banana\", \"🍎 apple\", \"🍐 pear\"]}),\n Plot.axisY({textAnchor: \"start\", fill: \"white\", fontWeight: \"bold\", dx: 14})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"Layering several marks makes it possible to create [ggplot2-style axes](https://ggplot2.tidyverse.org/reference/guide_axis.html) with a filled frame and white grid lines.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":80,"value":"Plot.plot({\n inset: 10,\n marks: [\n Plot.frame({fill: \"#eaeaea\"}),\n Plot.gridY({stroke: \"#fff\", strokeOpacity: 1}),\n Plot.gridX({stroke: \"#fff\", strokeOpacity: 1}),\n Plot.line(aapl, {x: \"Date\", y: \"Close\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"Or you could emulate the style of *The New York Times*, with tick labels above dashed grid lines, and a custom tick format to show units (here dollars) on the first tick.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":50,"value":"Plot.plot({\n round: true,\n marginLeft: 0, // don’t need left-margin since labels are inset\n x: {label: null, insetLeft: 36}, // reserve space for inset labels\n marks: [\n Plot.gridY({\n strokeDasharray: \"0.75,2\", // dashed\n strokeOpacity: 1 // opaque\n }),\n Plot.axisY({\n tickSize: 0, // don’t draw ticks\n dx: 38, // offset right\n dy: -6, // offset up\n lineAnchor: \"bottom\", // draw labels above grid lines\n tickFormat: (d, i, _) => (i === _.length - 1 ? `$${d}` : d)\n }),\n Plot.ruleY([0]),\n Plot.line(aapl, {x: \"Date\", y: \"Close\", markerEnd: \"dot\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"You can emulate [Datawrapper’s time axes](https://blog.datawrapper.de/new-axis-ticks/) using `\\n` (the newline character) for multi-line tick labels, plus a bit of date math to detect the first month of each year.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":144,"value":"Plot.plot({\n marks: [\n Plot.ruleY([0]),\n Plot.line(aapl, {x: \"Date\", y: \"Close\"}),\n Plot.gridX(),\n Plot.axisX({\n ticks: 20,\n tickFormat: (\n (formatYear, formatMonth) => (x) =>\n d3.utcMonth.count(d3.utcYear(x), x) < 1\n ? `${formatMonth(x)}\\n${formatYear(x)}`\n : formatMonth(x)\n )(d3.utcFormat(\"%Y\"), d3.utcFormat(\"%b\"))\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"Alternatively, you can add multiple axes with options for hierarchical time intervals, here showing weeks, months, and years.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":40,"value":"Plot.plot({\n width: 960,\n x: {round: true, nice: d3.utcWeek},\n y: {inset: 6},\n marks: [\n Plot.frame({fill: \"#eaeaea\"}),\n Plot.frame({anchor: \"bottom\"}),\n Plot.axisX({ticks: \"year\", tickSize: 28, tickPadding: -11, tickFormat: \" %Y\", textAnchor: \"start\"}),\n Plot.axisX({ticks: \"month\", tickSize: 16, tickPadding: -11, tickFormat: \" %b\", textAnchor: \"start\"}),\n Plot.gridX({ticks: \"week\", stroke: \"#fff\", strokeOpacity: 1, insetBottom: -0.5}),\n Plot.line(aapl.slice(-340, -10), {x: \"Date\", y: \"Close\", curve: \"step\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"You can even style an axis dynamically based on data! The data associated with an axis or grid mark are the tick values sampled from the associated scale’s domain. If you don’t specify the data explicitly, the ticks will be chosen through a combination of the **ticks**, **tickSpacing**, and **interval** options.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":31,"value":"Plot.plot({\n marginRight: 0,\n marks: [\n Plot.ruleY([0]),\n Plot.line(aapl, {x: \"Date\", y: \"Close\"}),\n Plot.gridY({x: (y) => aapl.find((d) => d.Close >= y)?.Date, insetLeft: -6}),\n Plot.axisY({x: (y) => aapl.find((d) => d.Close >= y)?.Date, insetLeft: -6, textStroke: \"white\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"The color of an axis can be controlled with the **color**, **stroke**, and **fill** options, which affect the axis’ component marks differently. The **stroke** option affects the tick vector; the **fill** option affects the label texts. The **color** option is shorthand for setting both **fill** and **stroke**. While these options are typically set to constant colors (such as _red_ or the default _currentColor_), they can be specified as channels to assign colors dynamically based on the associated tick value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":706,"value":"Plot.axisX(d3.ticks(0, 1, 10), {color: \"red\"}).plot() // text fill and tick stroke","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":735,"value":"Plot.axisX(d3.ticks(0, 1, 10), {stroke: Plot.identity, strokeWidth: 3, tickSize: 10}).plot() // tick stroke","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":729,"value":"Plot.axisX(d3.ticks(0, 1, 10), {fill: \"red\"}).plot() // text fill","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":757,"value":"To draw an outline around the tick labels, say to improve legibility when drawing an axes atop other marks, use the **textStroke** (default _none_), **textStrokeWidth** (default 3), and **textStrokeOpacity** (default 1) options.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":737,"value":"Plot.plot({\n height: 40,\n style: \"background: #777;\",\n x: {domain: [0, 100]},\n marks: [\n Plot.axisX({\n stroke: \"white\",\n textStroke: \"white\",\n textStrokeWidth: 3,\n textStrokeOpacity: 0.6\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":986,"value":"When faceting, the *x*- and *y*-axes are typically repeated across facets. A *bottom*-anchored *x*-axis is by default drawn on any facet _with empty space below it_; conversely, a *top*-anchored *x*-axis is drawn on any facet _with empty space above it_. Similarly, a *left*-anchored *y*-axis is drawn on facets with empty space to the left, and a *right*-anchored *y*-axis is drawn on facets with empty space to the right.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":352,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":790,"value":"viewof anchor = Inputs.select([\"bottom\", \"top\"], {label: htl.html`x-axis anchor`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":785,"value":"viewof facetAnchor = Inputs.select([\"auto\", \"bottom-empty\", \"bottom\", \"top-empty\", \"top\", null], {label: \"facetAnchor\", format: String})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"chart = Plot.plot({\n facet: {marginRight: 80},\n grid: true,\n marks: [\n Plot.frame(),\n Plot.dot(penguins, {x: \"culmen_length_mm\", y: \"culmen_depth_mm\", fx: \"sex\", fy: \"species\"}),\n Plot.axisX({color: \"red\", anchor, facetAnchor: facetAnchor === \"auto\" ? undefined : facetAnchor}),\n Plot.axisFx({color: \"blue\", anchor: anchor === \"top\" ? \"bottom\" : \"top\"}) // place fx axis opposite x\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1121,"value":"The **labelAnchor** option controls the position of the axis label. For the *x* or *fx* axis, the label anchor may be *left*, *center*, or *right*. It defaults to *center* for ordinal scales and *right* for quantitative scales.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1093,"value":"Plot.plot({\n height: 80,\n grid: true,\n x: {type: \"linear\"},\n marks: [\n Plot.axisX({anchor: \"top\", label: \"top-left\", labelAnchor: \"left\"}),\n Plot.axisX({anchor: \"top\", label: \"top-center\", labelAnchor: \"center\", ticks: []}),\n Plot.axisX({anchor: \"top\", label: \"top-right\", labelAnchor: \"right\", ticks: []}),\n Plot.axisX({anchor: \"bottom\", label: \"bottom-left\", labelAnchor: \"left\"}),\n Plot.axisX({anchor: \"bottom\", label: \"bottom-center\", labelAnchor: \"center\", ticks: []}),\n Plot.axisX({anchor: \"bottom\", label: \"bottom-right\", labelAnchor: \"right\", ticks: []})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1123,"value":"For the *y* and *fy* axis, the label anchor may be *top*, *center*, or *bottom*. It defaults to *center* for ordinal scales and *top* for quantitative scales. When the label anchor is *center*, the label is rotated by 90° to fit, though you may need to adjust the margins to avoid overlap between the tick labels and the axis label.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1110,"value":"Plot.plot({\n grid: true,\n y: {type: \"linear\"},\n marks: [\n Plot.axisY({anchor: \"left\", label: \"left-top\", labelAnchor: \"top\"}),\n Plot.axisY({anchor: \"left\", label: \"left-center\", labelAnchor: \"center\", ticks: []}),\n Plot.axisY({anchor: \"left\", label: \"left-bottom\", labelAnchor: \"bottom\", ticks: []}),\n Plot.axisY({anchor: \"right\", label: \"right-top\", labelAnchor: \"top\"}),\n Plot.axisY({anchor: \"right\", label: \"right-center\", labelAnchor: \"center\", ticks: []}),\n Plot.axisY({anchor: \"right\", label: \"right-bottom\", labelAnchor: \"bottom\", ticks: []})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"---\n\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":108,"value":"responses = d3.tsvParse(`name\\tvalue\nFamily in feud with Zucker\\u00adbergs\\t.17\nCommitted 671 birthdays to memory\\t.19\nEx is doing too well\\t.10\nHigh school friends all dead now\\t.15\nDiscovered how to “like” things mentally\\t.27\nNot enough politics\\t.12\n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"