30:T480,multiMarkMethods = md`### Multi-mark methods These methods can add multiple marks in a single call: | Mark | Description | |-----------|-------------| | circle | circles | | point | points | | hBar | horizontal bars | | vBar | vertical bars | | rect | rectangles | | arc | circular/annular sectors | | segment | line segments | | hLink | horizontal links | | vLink | vertical links | | edge | circular edges | | text | text | | path | path | The circle and point marks are the same except that circle marks can use the transition channels (see [updates](https://observablehq.com/@gjmcn/teapot-updates-docs)), whereas point marks can use the [shape](#shape) channel. edge marks are primarily used for curves that do not represent data, such as when annotating a plot. The shape of an edge does not change when the aspect ratio of the plot changes — e.g. a semicircle stays a semicircle. `31:Ta01,commonChannels = md`### Common Channels | Channel | Units/Range | Default | |---------|-------------|---------| | x | (x axis) | 0 | | y | (y axis) | 0 | | xOffset | pixels | 0 | | yOffset | pixels | 0 | | fill | | 'black' ('#000000'): circle, point, text
'gray' (#808080'): hBar, vBar, rect, arc, hBand, vBand
'none': segment, hLink, vLink, edge, path, line | | fillOpacity | 0-1 | 0.7: circle, point
1: all other marks | | stroke | | 'black' | | strokeOpacity | 0-1 | 1 | | strokeWidth | pixels | 1.5: segment, hLink, vLink, edge, path, line
0: all other marks | | strokeCap | | null | | strokeDash | pixels | null | | front | | 0 | | class | | null | | name | | null | | listen | | true | | click | | null | | mouseenter | | null | | mouseleave | | null | These channels can be used with any mark method, with the exception that [path](#pathsAndMaps) does not use x, y, xOffset and yOffset. strokedash values should be numbers or strings that specify a [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray). strokeCap values should be 'butt', 'round' or 'square' — the [stroke-linecap](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap) SVG attribute. The front channel specifies where mark elements are inserted. Use a negative number to insert a mark before existing marks; otherwise, the mark is added after existing marks. The class, name, listen and event channels such as click are discussed [here](#classNameAndEvents).`32:T433,textChannels = md`### Text Channels | Channel | Units | Default | Description | |---------|-------------|---------|-------------| | fontSize | pixels | title and label [fontSize](#fontOptions) | font size | | fontFamily| | title and label [fontfamily](#fontOptions) | font family | | fontStyle | | title and label [fontStyle](#fontOptions) | font style | | fontWeight| | title and label [fontWeight](#fontOptions) | font weight | | hAlign | | mark-dependent ( 'middle' for text) | horizontal alignment ('start', 'middle', 'end') | | vAlign | | mark-dependent ( 'middle' for text) | vertical alignment ([dominant-baseline](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline) SVG attribute)| | rotate | degrees | null | rotation | See [Text and Notes](#textAndNotes) for usage. `33:Tf10,specialChannels = md`### Special Channels These channels can only be used with specific marks: | Channel | Mark | Units/Range | Default | Description | |---------|------|-------------|---------|-------------| | area | circle
point | square pixels | 36 | [area](#area) | | shape | point | | 0 (circle) | [shape](#shape) | | size | hBar | (y axis) | 0.9 | bar height | | size | vBar | (x axis) | 0.9 | bar width | | size | edge | | 0.5 | size of edge (see below) | | width | rect | depends on pixels option (see [Rectangles](#rectangles)) | 1 | width | | height| rect | depends on pixels option (see [Rectangles](#rectangles)) | 1 | height | | xx | hBar
segment
hLink
vLink
edge
vBand| (x axis) | 0 | other x | | yy | vBar
segment
hLink
vLink
edge
hBand | (y axis) | 0 | other y | | cornerRadius| hBar
vBar
rect
arc | pixels | null | corner radius | | outerRadius | arc | pixels | 100 | radius of circle | | innerRadius | arc | pixels | 0 | radius of hole in circle | | padRadius | arc | pixels | 0 | [pad radius](https://github.com/d3/d3-shape#arc_padRadius) | | startAngle | arc | radians | 0 | start angle | | endAngle | arc | radians | 2 * Math.PI | end angle | | padAngle | arc | radians | 0 | [pad angle](https://github.com/d3/d3-shape#arc_padAngle) | | pie | arc | | null | see [Arcs and Pies](#arcsAndPies) | | clockwise | edge | | true | clockwise edge | | text | text | | '' | text to display | | path | path | | null | path string (see [Paths and Maps](#pathsAndMaps)) | | subplot | rect | | null | [subplot](#subplots) | | delay | circle
hBar
vBar
rect
text | milliseconds | 0 | transition delay | | duration | circle
hBar
vBar
rect
text | milliseconds | 0 | transition duration | | ease | circle
hBar
vBar
rect
text | | 'linear' | transition easing function | The xOffSet channel affects x and xx values; yOffSet affects y and yy values. An edge is taken from the circle centered halfway between x, y and xx, yy. A size of 1 represents the maximum length edge — a semicircle. For smaller values of size, the edge is pulled closer to a straight line. The transition channels delay, duration and ease are used with [updates](https://observablehq.com/@gjmcn/teapot-updates-docs). `34:T41e,curvesAndPolygons = md`## Curves and Polygons [](#sections) By default, [single-mark methods](#singleMarkMethods) connect points with straight line segments. Use the curve mark option to specify a curve type: * open curves: 'basis', 'basisOpen', 'bundle', 'cardinal', 'cardinalOpen', 'catmullRom', 'catmullRomOpen', 'linear' (default), 'monotoneX', 'monotoneY', 'natural', 'curveStep', 'curveStepAfter', 'curveStepBefore' * closed curves: 'basisClosed', 'cardinalClosed', 'catmullRomClosed', 'linearClosed' See [d3-shape: curves](https://github.com/d3/d3-shape#curves) for details on each type of curve. (Some D3 curves take a paramater. There is currently no way to set the curve parameter in Teapot so the default is used.) Here is an example of using a natural cubic spline:`35:T59b,md`The note channel provides a quick way to add text to any mark type (except text and path). Notes can use any of the [text channels](#textChannels) and [note channels](#noteChannels). Notes do not use [common channels](#commonChannels) or [special channels](#specialChannels) since these are used by the mark itself. The noteColor channel sets the color of the note text. noteColor can be used to pass actual colors (or a constant color), or can be '_fill' or '_stroke': each note is the fill or stroke color of the corresponding mark. The noteOpacity channel behaves in a similar way: it can be an opacity value (or values) or one of the special values '_fillOpacity' or '_strokeOpacity'. The relative position of a note depends on the mark type: * above: circle, point, vBar, vLink, vBand * right: hBar, segment, hLink, edge, line (open), hBand * center: rect, arc, line (closed) The position of notes can be modified using the \`hAlign\`, \`vAlign\`, \`noteXOffset\` and \`noteYOffset\` channels, but use text marks when more flexibility is required. Here are a couple of examples that use notes:`36:T630,classNameAndEvents = md`## Class, Name and Events [](#sections) The class channel adds one or more classes to the SVG elements representing the marks. The channel value(s) should be a class name, or a space-separated list of class names. The name channel adds a data-tp-name attribute to SVG elements. class is often used as a constant channel to add the same class(es) to all marks generated by the mark method, whereas name is often used to add a unique identifier to each mark. However, these channels are flexible. For example, if there are subgroups in a set of marks, we could use class or name to store a group name with each element. Event channels such as click attach an event listener to mark elements. An accessor function (see [Data](#data)) must be used for an event channel. In this case, the accessor behaves as an event handler: it is passed the relevant datum and index as usual, but is only called when the corresponding mark element 'hears' an event of the relevant type. Inside the function, this is the mark element that heard the event. The boolean listen channel specifies whether a mark element hears mouse and touch events. If listen is falsy, events are heard by the mark element below instead (if there is one). The class, name, listen and event channels are typically used with [updates](https://observablehq.com/@gjmcn/teapot-updates-docs).`37:Tb77,legend = md`## Legend [](#sections) The fill and stroke channels can be shown in the legend if they use a [color scheme](#color). Additionally, the area channel can be shown for circle marks; the area and shape channels can be shown for point marks. By default, only non-constant channels appear in the legend. Use the boolean mark options fillLegend, strokeLegend, areaLegend and shapeLegend to override this default behavior. __Note__: If (for example) stroke does not appear in the legend when expected to, check that strokeScheme is being used and that strokeLegend is true. In particular, when using a [single-mark method](#singleMarkMethods) such as line, stroke is constant for each line so strokeLegend: true is required. The continuous area channel is represented with 3 symbols by default: the minimum, midpoint and maximum of the area values. Use the mark option areaTickValues to pass an alternative array of values to use. Legend labels can be formatted using [format functions](#labelFormattingOptions). Use the fillTitle, strokeTitle, areaTitle and shapeTitle mark options to add titles to the legend. Set the top-level option legend to false to hide the legend. The functionality and behavior of the legend is somewhat limited in the current version of Teapot. In particular: * Continuous color ramps only have labels at the minimum and maximum values, and there is currently no way to specify alternative values. ([Label format functions](#labelFormattingOptions) can be used as normal to format the values that are shown.) * If two channels represent the same variable (e.g. the fill and shape of points both represent the type of fruit), the two channels appear separately in the legend. * If a legend symbol has a fill/stroke, the fillOpacity/strokeOpacity channel of the mark method is used if it is constant; otherwise the channel default is used. To get a non-constant opacity shown in the legend, use 1 for the the fillOpacity/strokeOpacity and an RGBA (or similar) based color scheme for fillScheme/strokeScheme. * If a legend symbol has a stroke, the strokeWidth and strokeDash channels of the mark method are used if they are constant; otherwise the channel defaults are used. __Note__: The last two points are not an issue for [single-mark methods](#singleMarkMethods) such as line since each mark is created with a separate method call with constant fill and stroke channels.`38:T827,limits = md`## Limits [](#sections) The [limits option](#basicOptions) sets the axes limits. If limits is '_data', limits are computed from the plotted marks. If limits is '_nice' (the default), limits are also computed from the marks, but minimum limits are rounded down to a 'nice' number, and maximum limits are rounded up — for axis that use a data map (see [Categorial Data](#categoricalData)), the limits are reduced/increased by 0.1. The limits option can be a single value or an array: [xMin, xMax, yMin, yMax]. Each element should be one of: * number: the limit. * non-number (other than '_data' or '_nice'): is converted to an integer using the x or y data map (see [Categorial Data](#categoricalData)) and the integer is the limit. * '_data' or '_nice'. Empty, null and undefined array elements default to '_nice'. The following information is _not_ used when computing limits from the plotted marks: * path marks. * The curves of edge marks (the end points _are_ used). * The curves of line, hBand and vBand marks. (The data points _are_ used, so this limitation is only relevant for nonlinear curves). * Channels that use pixels as units. For example, the positions of point marks _are_ used to compute limits, but the areas of the points are _not_ used. * The length, alignment and rotation of text marks and notes. The minimum limit of a dimension must be less than the maximum, but there is one important exception: if the limits on the relevant dimension are '_nice' (the default) and the limits computed from the plotted marks are 0, the limits are set to -1 and 1. This is useful when the values on a dimension are constant (and typically not of interest):`39:Td1c,basicOptions = md`### Basic Options | Property | Default | Description | |----------|---------|-------------| | plot | true | if false, the plot method returns the <g> element containing the legend | | width | 260 | total plot width; use 'preserve' to compute the width from the height so as to preserve aspect ratio. | | height | 260 | total plot height; use 'preserve' to compute the height from the width so as to preserve aspect ratio. | | setPaneSize | false | if true, the width and height options set the pane size rather than the total plot size | | fit | | use 'preserve' to fit width of container while preserving aspect ratio | | background | transparent | plot background color | | cornerRadius | | corner radius | | class | | space-separated list of classes to add to plot <svg> (or subplot

<g>) |
| paneBackground | 'transparent' | pane background color |
| paneBorderColor | '#888' | pane border color |
| paneBorderWidth | 0 | pane border width | 
| limits | '_nice' | x and y [limits](#limits) |
| clean |  | if truthy, no x or y axis, grid, ticks, labels or titles (options related to these are ignored) |
| xClean |  | as clean, but for x only |
| yClean |  | as clean, but for y only |
| clip   | false | clip marks to pane |  
| paneSpace | | number or array: top, right, bottom, left space around pane (see below). Missing, undefined and null array elements are computed automatically. |
| plotSpace | 12 | number or array: top, right, bottom, left space around plot and legend. Missing, undefined and null array elements use the default value. |

By default, the plot method computes the minimum required space around the pane, but the current approach has some limitations:

* When computing the left or right space, the x labels, x title and plot title are ignored. Also, y label rotation is ignored. 

* When computing the top and bottom space, the y labels and y title are ignored. Also, x label rotation is ignored.

* The legend's width and height is only considered if the legend is outside the pane. 

* Pixel-based channels are not considered when computing space. For example, when using the note channel with a line mark , the note is added to the right of the line's end so the note text often sticks out the side of the plot.

If these limitations cause issues, use paneSpace or plotSpace as required. Note that pane space starts at the edge of the pane and is added before the legend (if the legend is outside the pane); plot space is added after both pane space and the legend.

__Note__: If the plot has a fixed height (i.e. setPaneSize is false), the legend will be cropped if the plot height is too small.`3a:T48b,paddingOptions = md`### Padding Options

| Property | Default | Description |
|----------|---------|-------------|
| xAxisPadding  | 0 | x axis vertical padding (separates axis from pane) |
| yAxisPadding  | 0 | y axis horizontal padding (separates axis from pane) |
| xLabelPadding | 3 | x label vertical padding |
| yLabelPadding | 2 | y label horizontal padding|
| plotTitlePadding | 12 | plot title vertical padding |
| xTitlePadding | 5 | x title vertical padding |
| yTitlePadding | 10 | y title horizontal padding |
| legendGap  | 20  | gap from legend to edge of pane (if legend inside pane) or to edge of pane space (if legend outside pane) |
| legendPadding | 0 | number or array: top, right, bottom, left padding inside legend. Missing, undefined and null array elements use the default value.|
| legendLabelPadding | 4 | padding between legend symbols and labels |`3b:T61b,alignmentOptions = md`### Alignment Options

| Property | Default | Description |
|----------|---------|-------------|
| plotTitleAlign | 'middle' | plot title horizontal alignment ('start', 'middle', 'end') |
| plotTitleOffset | '0' | plot title horizontal offset |
| xTitleAlign | 'middle' | x title horizontal alignment ('start', 'middle', 'end') |
| xTitleOffset | 0 | x title horizontal offset |
| yTitleAlign | 'middle' | y title vertical alignment ('start', 'middle', 'end')
| yTitleOffset | 0 | y title vertical offset |
| xLabelAlign | 'middle' | x label horizontal alignment ('start', 'middle', 'end') |
| xLabelOffset | 0 | x label horizontal offset |
| xLabelRotate | | x label rotation (degrees) |
| yLabelAlign | 'middle' | y label vertical alignment ([dominant-baseline](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline) SVG attribute)
| yLabelOffset | 0 | y label vertical offset |
| yLabelRotate | | y label rotation (degrees) 

When rotating labels, adjust the label alignment and padding accordingly, as well as the [space options](#basicOptions) if necessary:`3c:T995,AxisGridAndTicksOptions = md`### Axes, Grid and Tick Options

The following options apply to the x and y axes:

| Property | Default | Description |
|----------|---------|-------------|
| axis | true | show axis |
| axisWidth | 1 | axis width |
| axisColor | #888 | axis color |
| axisOpacity | 1 | axis opacity |
| grid | true | show grid |
| gridWidth | 1 | grid width |
| gridColor | '#ddd' | grid color
| gridOpacity | 1 | grid opacity
| ticks | true | show ticks |
| tickLength | 5 | tick length |
| tickWidth | 1 | tick width |
| tickColor | '#888' | tick color |
| tickOpacity | 1 | tick opacity |
 
__Note__: Use tickLength: 0 to hide ticks, but show labels. When ticks: false is used, neither ticks nor labels are added to the plot.

Use an x or y prefix to override the above options on a given dimension, e.g. xTicks.

The following options always have an x or y prefix (only the x are shown):

| Property | Default | Description |
|----------|---------|-------------|
| xOrder | | array of ordered values for [categorical](#categoricalData) x |
| xTickStep | | x tick step (must be an integer for categorical x) |
| xTickValues | | array of x tick values (overrides xTickStep) |
| xTickMin | false | Add minimum x axis value to ticks (ignored for categorical x) |
| xTickMax | false | Add maximum x axis value to ticks (ignored for categorical x) |
| xReverse | \`false\` | [reverse](#reverseAxes) the x-axis |
| xAxisPosition | 'bottom' | position of x axis ('bottom', 'top')

If x has a data map (see [categorical data](#categoricalData)), each value in xTickValues must correspond to a value in the data — the categorical (non-numeric) value or the integer that it maps to can be used.

The valid values for yAxisPosition are 'left' (default) and 'right'.`3d:[{"id":"a2b367149950f533db9f04260097dad54ce264f65a2afae1a1b75f6fdf72b28e95c781f08b2cb4c4cb2fb49617997bfd965b7ff3a200b658ebfcde42582c62a9","href":"https://static.observableusercontent.com/files/a2b367149950f533db9f04260097dad54ce264f65a2afae1a1b75f6fdf72b28e95c781f08b2cb4c4cb2fb49617997bfd965b7ff3a200b658ebfcde42582c62a9","name":"threeLondonBoroughs.json","type":"application/json","lastModified":1620153742924.06,"size":4615}]
2e:{"title":"Teapot: Docs","cells":[{"id":1819,"value":"md`# Teapot: Docs\n\n[Teapot](https://github.com/gjmcn/teapot) is a high-level library for creating SVG plots.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2781,"value":"sections = md`## Sections\n\n* [Introduction](#introduction)\n* [Data](#data)\n* [Marks](#marks)\n* [Channels](#channels)\n* [Categorical Data](#categoricalData)\n* [Color](#color)\n* [Area](#area)\n* [Shape](#shape)\n* [Rectangles](#rectangles)\n* [Curves and Polygons](#curvesAndPolygons)\n* [Arcs and Pies](#arcsAndPies)\n* [Text and Notes](#textAndNotes)\n* [Paths and Maps](#pathsAndMaps)\n* [Invalid and Missing Data](#invalidAndMissingData)\n* [Class, Name and Events](#classNameAndEvents)\n* [Legend](#legend)\n* [Limits](#limits)\n* [Subplots](#subplots)\n* [Reverse Axes](#reverseAxes)\n* [Top-level Options](#topLevelOptions)\n\nAlso see:\n\n* [Teapot Helpers: Docs](https://observablehq.com/@gjmcn/teapot-helpers-docs)\n* [Teapot Updates: Docs](https://observablehq.com/@gjmcn/teapot-updates-docs)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"introduction = md`## Introduction [](#sections)\n\nTo create a plot, call one or more [mark methods](#marks) (point, line etc.) and in each case, specify the x and y [data](#data) as the first two arguments. Data for additional channels (fill, stroke, shape etc.) is passed along with any mark options as the third argument — an object.\n\nThe plot method creates the plot <svg>:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"x = [0, 1, 2, 3, 4, 5]","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"y = [1, 5, 2, 0, 3, 4]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"tp.line(x, y, {stroke: 'green'})\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`If the plot method is passed an HTML element, the SVG is inserted into the element (after any current content). If the plot method is passed a CSS selector string, the SVG is inserted into the first corresponding element.\n\nThe option method sets [top-level options](#topLevelOptions):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"tp.line(x, y) \n  .point(x, y)\n  .option({width: 400, height: 200})\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`Use new tp to create a blank plot object to be modified at a later time.\n\nA plot object can be reused:`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"{\n  const container = DOM.element('div');\n  \n  // plot object\n  const po = tp.option({width: 240, height: 180});\n\n  po.line(x, y)\n    .option({plotTitle: 'Line'})\n    .plot(container);\n  \n  po.point(x, y)\n    .option({plotTitle: 'Line and Points'})\n    .plot(container);\n  \n  return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"data = md`## Data [](#sections)\n\n'Direct data' is passed to mark methods as separate arrays:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"tp.line(x, y)\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`With a 'column-based' dataset, pass the individual columns:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"{\n  const data = {x, y};  // {x: [0, 1, 2, ...], y: [1, 5, 2, ...]}\n  \n  return tp\n    .line(data.x, data.y)\n    .plot();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"md`A 'row-based' dataset can be attached to a plot object using the data method. Refer to variables in the data by their name/index prefixed with ~:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"{\n  const data = [\n    {x: 0, y: 1}, {x: 1, y: 5}, {x: 2, y: 2},\n    {x: 3, y: 0}, {x: 4, y: 3}, {x: 5, y: 4}\n  ];\n\n  return tp\n    .data(data)\n    .line('~x', '~y')\n    .plot();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"{ \n  const data = [\n    [0, 1], [1, 5], [2, 2], [3, 0], [4, 3], [5, 4]\n  ];\n\n  return tp\n    .data(data)\n    .line('~0', '~1')\n    .plot();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`Accessor functions can be used to get/compute values from a dataset. An accessor function is called on each element of the dataset and is passed the element and its index:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"fruit = [\n  {name: 'apple',  eat: 3},\n  {name: 'banana', eat: 2},\n  {name: 'cherry', eat: 5}\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"tp.data(fruit)\n  .vBar(d => d.name, d => d.eat + 2)\n  .plot();","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"md`__Note__: When a *~string* is used, the property name is used as the [axis title](#titlesAndLabelsOptions). Using an accessor function is one way to hide the title.\n\nA dataset can be a 'flat array':`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2247,"value":"tp.data([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])\n  .point(d => d, d => d ** 2)\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2078,"value":"md`A dataset can be a positive integer n; this is shorthand for [0, 1, 2, ..., n-1]:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2083,"value":"tp.data(11)\n  .point(d => d, d => d ** 2)\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"md`A plot object can only have one 'top-level' dataset. However, we can pass a mark method its own dataset using the data mark option. Also, mark methods can use a dataset and direct data in the same call:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"tp.vBar('~name', [10, 20, 30], {data: fruit})\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"md`If a channel's value is not an array, function or ~string, the channel is _constant_:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"tp.point(0, [3, 7, 9])  // constant x channel\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`To summarize, the values passed to a channel are interpreted as follows:\n\n* An array: data values.\n\n* A string starting with ~: property/index of the dataset.\n\n* A function: dataset accessor function.\n\n* null or undefined: constant channel, default is used.\n\n* Anything else: constant channel with this value.\n\n__Note__: Mutating an attached dataset or an array that has been passed to a channel directly _does_ affect subsequent renderings of the plot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3026,"value":"marks = md`## Marks [](#sections)\n\nMark methods can be passed a single argument: an object containing [channel](#channels) data and mark options:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"tp.line({x: [2, 5, 3, 7], y: [10, 20, 30, 40]})\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1351,"value":"md`If a mark method is called with more than one argument, the first two arguments are the x and y values; the third argument (if used) is an object containing values for other channels and mark options.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"singleMarkMethods = md`### Single-mark methods\n\nThese methods add a single mark:\n\n| Mark    | Description |\n|---------|-------------|\n| line  | line |\n| hBand | horizontal band |\n| vBand | vertical band |\n\nExcept for x, y, xx and yy, all channels of a single-mark type must be constant. Accessor functions can still be used for these constant channels, but each function is only called once, and is passed the entire dataset and null as the index. When an accessor is used, the channel is still constant in that the channel default is used if the accessor returns null or undefined.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"channels = md`## Channels [](#sections)\n\nWhen calling a mark method, we map data to one or more _channels_:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"noteChannels = md`### Note Channels\n\n| Channel |  Units/Range | Default | Description |\n|---------|--------------|---------|-------------|\n| note |   |  null | text to display |\n| noteColor  |  | 'black' | color  |\n| noteOpacity | 0-1 | 1 | opacity |\n| noteXOffset  | pixels | mark-dependent | horizontal offset |\n| noteYOffset  | pixels | mark-dependent | vertical offset |\n\nSee [Text and Notes](#textAndNotes) for usage.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"categoricalData = md`## Categorical Data [](#sections)\n\nThe x and y channels represent numeric data. Numbers are used as is; non-numeric (_categorical_) values are mapped to 0, 1, 2, ... in the order they first appear:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"tp.data(fruit)\n  .vBar('~name', '~eat')\n  .vBar(['orange', 'pear'], [3, 8])       // new categories are added\n  .line([-0.6, 4.6], 6, {strokeDash: 3})  // numeric x\n  .option({width: 400, limits: '_data'})\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"md`As the above example shows, categories (i.e. the non-numeric values) are shown on the axis rather than the corresponding integers.\n\nThe xOrder and yOrder options specify _data maps_ from categories to integers. xOrder and yOrder are [top-level options](#topLevelOptions) (since the same x and y data maps apply to all marks) so are passed using the option method: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"{\n  const name = ['banana', 'apple', 'cherry'];  // note that banana is first\n  const eat  = [       2,       3,        5];\n\n  return tp\n    .option({xOrder: ['apple', 'banana', 'cherry']})\n    .vBar(name, eat)\n    .plot();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"md`__Note__: Extra integers are added to data maps if there are values in the data that are not included in xOrder or yOrder.\n\nIf the categories and integers match: '0' => 0, '1' => 1, ... we call the data _sequential_. In this case, xSeq and ySeq can be used instead of xOrder and yOrder. For example, xSeq: 5 is equivalent to xOrder: ['0', '1', '2', '3', '4'].\n\nBe careful with 'integer string' data since this can be interpreted in various ways:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"{\n  const container = DOM.element('div');\n  const u = ['4', '1', '3'];\n  const v = [10 , 20 , 30 ];\n  const ops = {width: 160, height: 160};\n  \n  tp.vBar(u, v)\n    .option({...ops, xTitle: 'categorical x'})\n    .plot(container);\n\n  tp.vBar(u, v)\n    .option({...ops, xOrder: ['1', '3', '4'], xTitle: 'ordered categories'})\n    .plot(container);\n\n  tp.vBar(u, v)\n    .option({...ops, xSeq: 5, xTitle: 'sequential categories'})\n    .plot(container);\n  \n  tp.vBar(u.map(q => +q), v)\n    .option({...ops, xTitle: 'numeric x'})\n    .plot(container);\n    \n  return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1905,"value":"md`The xx and yy channels also map non-numeric values to integers. The x and xx channels share the same data map, as do the y and yy channels.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"color = md`## Color [](#sections)\n\nThe fill and stroke channels specify colors, but there are various fill and stroke options which determine the colors that are actually shown. Here we describe the fill options; stroke options behave in the same way.\n\nBy default, fill values are used as is:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"fruitColors = ['green', 'gold', 'crimson']","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"tp.data(fruit)\n  .vBar('~name', '~eat', {fill:  fruitColors})\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"md` \nRather than using fill values directly, we can use the fillScheme mark option to pass a _color scheme_. If the fill values are continuous, a color scheme should be a function that takes a value in [0,1] and returns a valid color string. By default, the min and max of the fill values correspond to the start and end of the scheme. To specify different limits, use the fillLimits mark option:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"tp.data(fruit)\n  .vBar('~name', '~eat', {\n    fill: '~eat',\n    fillScheme: v => `rgb(${v * 255}, 0, 0)`,\n    fillLimits: [0, 6]  // comment this line to use limits [2, 5]\n  })\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`Missing, undefined and null elements of fillLimits are replaced by the min/max values of the data.\n\n__Note__: When calling a [single-mark method](#singleMarkMethods) such as hBand multiple times, be sure to use the same fillScheme and fillLimits with each call if appropriate.\n\nIf fill values are categorical, specify a discrete scheme: an array of colors. Numeric fill values should be valid indices for the scheme: 0, 1, 2 ... Non-numeric fill values are mapped to 0, 1, 2 ... based on when each value first appears in the data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"tp.circle(x, y, {\n    fill: ['b', 'a', 'a', 'c', 'b', 'a'],\n    fillScheme: ['red', 'green', 'blue']\n  })\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"md`The fillOrder mark option specifies a data map explicitly:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"tp.circle(x, y, {\n    fill: ['b', 'a', 'a', 'c', 'b', 'a'],\n    fillOrder: ['a', 'b', 'c'],\n    fillScheme: ['red', 'green', 'blue']\n  })\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1974,"value":"md`For sequential data (see [Categorical Data](#categoricalData)), fillSeq can be used instead of fillOrder:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1971,"value":"tp.rect({\n    x:    ['running', 'tennis', 'running',  'tennis'],\n    y:    [  'skill',  'skill', 'stamina', 'stamina'],\n    fill: [        1,        5,         5,         3],\n    fillScheme: d3.schemeGreens[6],  // see below\n    fillSeq: 6\n  })\n  .option({\n    limits: '_data',\n    width: 120,\n    height: 120,\n    setPaneSize: true\n  })\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1978,"value":"md`In the above example, we can use strings or numbers for the fill values, but the fillSeq option is required either way. Without it, string values will map to the wrong colors; numbers will map to the correct colors, but will not be shown in the [legend](#legend) (which shows category names when a discrete color scheme is used).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"md`The fillScheme option can be a [D3 color scheme](https://github.com/d3/d3-scale-chromatic). For convenience, Teapot includes the categorical scheme d3.schemeCategory10 as tp.cat:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"{\n  const v = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n  \n  return tp\n    .rect(v, 0, {fill: v, fillScheme: tp.cat})\n    .rect(v, 1, {fill: v, fillScheme: d3.schemePaired})\n    .option({limits: '_data', width: 400, height: 80, setPaneSize: true})\n    .plot();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`If the fill channel is constant, we can still use a 1-color scheme rather than passing a fill color directly. A string can be used instead of a 1-element array:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"tp.circle(x, y, {fillScheme: 'purple'})\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"md`__Note__: a color scheme must be used for fill to be shown in the [legend](#legend). In contrast, passing colors directly with fill is one possible way to keep fill out of the legend.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"area = md`## Area [](#sections)\n\nThe area channel can be used with circle or point marks. By default, the area values are used as the actual point areas (square pixels). The areaScale mark option can be used to scale the area values. If areaScale is an array, it specifies the minimum and maximum areas of points — the area values are linearly scaled to fit between these limits:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"tp.point(x, y, {\n    area: [1200, 650, 200, 500, 830, 900],\n    areaScale: [30, 300]\n  })\n  .plot();","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"md`Missing, undefined and null elements of areaScale are replaced by the minimum/maximum of the area values.\n\nIf areaScale is a function, it is applied to each area value: it is passed the value, the minimum area value and the maximum area value; the result is used as the actual area.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"shape = md`## Shape [](#sections)\n\nThe shape channel can only be used with point marks. The default _shape scheme_ is: \n\n0 – circle
1 – square
2 – triangle-up
3 – plus
4 – diamond
5 – star
6 – wye
7 – triangle-down
8 – triangle-right
9 – triangle-left
10 – times\n\nIf shape values are non-numeric, they are mapped to 0, 1, 2 ... based on when each value first appears in the data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"tp.point(x, y, {shape: ['b', 'a', 'a', 'c', 'b', 'a'], area: 64})\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"md`The shapeOrder mark option specifies a data map explicitly. The shapeScheme option specifies a shape scheme:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"tp.point(x, y, {\n    shape: ['b', 'a', 'a', 'c', 'b', 'a'],\n    shapeOrder: ['a', 'b', 'c'],\n    shapeScheme: ['star', 'times', 'wye'],\n    area: 64\n  })\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`A string can be used instead of an array for a 1-shape scheme, e.g. {shapeScheme: 'square'}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2036,"value":"md`For sequential data (see [Categorical Data](#categoricalData)), shapeSeq can be used instead of shapeOrder.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"rectangles = md`## Rectangles [](#sections)\n\nrect marks have two boolean options:\n\n* corner: if truthy, the x and y channels specify the bottom-left corner of the rectangle — instead of the center.\n\n* pixels: if truthy, the width and height channels are in pixels — instead of x,y units.\n\nHere's an example that uses the pixels option:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"tp.rect({\n    x: [1, 4, 5, 6, 7, 10, 12],\n    fill: 'steelblue',\n    pixels: true,\n    width: 2,\n    height: 10,\n  })\n  .option({\n    grid: false,\n    yClean: true,\n    height: 60,\n  })\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"tp.line(x, y, {curve: 'natural'})\n  .plot();","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"md`And here are some closed curves:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"{\n  const u = [2, 5, 7, 3];\n  const v = [4, 1, 6, 8];\n\n  return tp\n    .line(u, v, {curve: 'linearClosed',     fill: 'plum'})\n    .line(u, v, {curve: 'catmullRomClosed', stroke: 'green'})\n    .plot();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"md`Do not use a closed curve type for an hBand or vBand mark. Bands are automatically closed by joining the ends with vertical or horizontal line segments.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"arcsAndPies = md`## Arcs and Pies [](#sections)\n\narc marks can be used to create pie charts and donut charts. If we use the startAngle and endAngle channels, we need to calculate the cumulative sum of the data, and then convert these values to angles. Instead, we can use the pie channel which takes care of this for us:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"tp.data(fruit)\n  .arc({\n    pie:'~eat',\n    fill: '~name',\n    fillScheme: fruitColors\n  })\n  .option({clean: true})\n  .plot();","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"md`When pie is used, the startAngle, endAngle and padAngle channels must be constant. startAngle and endAngle specify the start and end angle of the pie chart itself, and padAngle specifies the angular seperation between arcs.\n\nBy default, the order of arcs created with pie matches the data, but we can change this using the pieSort option. pieSort can be 'asc' (ascending), 'desc' (descending) or a [comparison function](https://github.com/d3/d3-shape#pie_sortValues). In the following example, we order slices from largest to smallest, and use additional channels and a text mark to polish the chart:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"tp.data(fruit)\n  .arc({\n    pie: '~eat',\n    pieSort: 'desc',\n    outerRadius: 100,\n    innerRadius: 40,\n    cornerRadius: 5,\n    padAngle: 0.01,\n    padRadius: 300,\n    fill: fruitColors,\n    note: '~name',\n    fontSize: 13\n  })\n  .text({text: 'Fruit', fontSize: 16})\n  .option({clean: true})\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"textAndNotes = md`## Text and Notes [](#sections)\n\nUse text marks to add text to plots. Here is an example that uses text marks and some of the [text channels](#textChannels):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"tp.data(fruit)\n  .hBar('~eat', '~name')\n  .text({\n    y: '~name',\n    text: '~name',\n    hAlign: 'start',\n    xOffset: 8,\n    fill: '#fff'\n  })\n  .option({\n    yClean: true,\n    yReverse: true,\n    height: 180\n  })\n  .plot(); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"tp.data(fruit)\n  .hBar('~eat', '~name', {note: '~eat'}) \n  .option({\n    xClean: true,\n    yReverse: true,\n    yGrid: false,\n    yTitle: false,\n    height: 180\n  })\n  .plot(); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"tp.data(fruit)\n  .hBar('~eat', '~name', {\n    fill: fruitColors,\n    note: d => `${d.eat} ${d.name === 'cherry' ? 'cherries' : `${d.name}s`}`,\n    hAlign: 'end',\n    noteXOffset: -8,\n    fontSize: 13\n  })\n  .option({\n    clean: true,\n    height: 180,\n    yReverse: true\n  })\n  .plot();","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"md`__Note__:  If the note channel itself is not used (i.e. is absent, null or undefined), other note channels and the text channels are ignored. For example, they are not considered when assessing missing values.\n\n__Note__: <text> elements are only added for notes that are (or convert to) non-empty strings. In contrast, a <text> element is always added for a text mark.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2420,"value":"pathsAndMaps = md`## Paths and Maps [](#sections)\n\nThe path mark is somewhat different to other mark types:\n\n* path marks do not use the x and y channels (or the xOffset and yOffset channels). Instead, the path channel is used to specify [path strings](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d).\n\n* [Notes](#textAndNotes) cannot be used with paths — use separate text marks.\n\n* Paths do not contribute to [limits](#limits) — specify limits explicitly as required.\n\nPaths are particularly useful for drawing maps. In the following example, we use [d3-geo](https://github.com/d3/d3-geo) to generate path strings from geoJSON data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2458,"value":"boroughs = FileAttachment('threeLondonBoroughs.json').json()  // geoJSON data","pinned":false,"hidden":false,"mode":"ojs"},{"id":2487,"value":"pathFunction = d3.geoPath(d3.geoMercator())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2466,"value":"boroughsLimits = d3.permute(pathFunction.bounds(boroughs).flat(), [0, 2, 1, 3])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2443,"value":"tp.data(boroughs.features)\n  .path({\n    path: pathFunction,\n    fill: tp.cat.slice(0, 3)\n  })\n  .option({\n    limits: boroughsLimits,\n    height: 'preserve',\n    clean: true,\n    yReverse: true\n  })\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"invalidAndMissingData = md`## Invalid and Missing Data [](#sections)\n\nThe plot method throws if a channel has a NaN, Infinity or -Infinity value.\n\nFor constant channels, if the value is null or undefined, the default channel value is used. For non-constant channels, the mark option missing specifies how null and undefined (and empty array slots) are handled. missing can be:\n\n* 'throw': throw an error (default).\n\n* 'skip': skip the datum.\n\n* 'gap': for line, hBand and vBand marks, skip the datum and create a gap in the line/band (behaves like 'skip' for other mark types).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"{\n  const u = [0, 1, 2, null, 4, 5, 6, 7, 8];\n  const v = [5, 7, 4,    6, 8, 3,  , 7, 4];\n\n  return tp\n    .hBand( u, v, {missing: 'gap'})\n    .line(  u, v, {missing: 'skip'})\n    .circle(u, v, {missing: 'skip'})\n    .plot();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2222,"value":"md`__Note__: The above discussion of invalid and missing values refers to the actual values used for a channel. A dataset can have have invalid or missing elements (or element properties), but the accessor function for the channel may still provide valid values — e.g. a reasonable default value.\n\nThe subplot channel and event channels such as click use accessor functions, but the return value is irrelevant: NaN, Infinity and -Infinity do not trigger an error, and null and undefined do not cause the datum to be flagged as missing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":978,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"tp.arc({  // x and y default to 0 so can be omitted\n    startAngle: 2/3 * Math.PI,  \n    endAngle: 7/3 * Math.PI,\n    fill: 'gold'\n  })\n  .option({\n    width: 200,\n    height: 200,\n    clean: true  // comment this line to see the limits\n  })\n  .plot();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"subplots = md`## Subplots [](#sections)\n\nThe subplot channel can be used with rect marks to add subplots instead of rectangles. An accessor function (see [Data](#data)) must be used for the subplot channel. The accessor is passed the relevant datum and index as usual, but inside the function, this is the subplot — a plot object with the width and height of the rectangular mark:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1018,"value":"tp.data([\n    {x: 1, y: 1, p: [3, 2, 1]},\n    {x: 3, y: 5, p: [3, 4, 3]},\n    {x: 6, y: 3, p: [1, 1, 1]},\n    {x: 8, y: 7, p: [1, 1, 2]}\n  ])\n  .option({limits: [0,,0]})\n  .line('~x', '~y')\n  .rect('~x', '~y', {\n    pixels: true,\n    width: 24,\n    height: 24,\n    subplot: function(d, i) {\n      this.arc({\n          outerRadius: 12,\n          pie: d.p,  \n          fill: tp.cat.slice(0, 3)\n        })\n        .option({clean: true, plotSpace: 0})\n    }\n  })\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1058,"value":"md`__Note__: Do *not* call the plot method inside the subplot function.\n\nThe stroke, fill, text, note and transition related channels of rect are ignored when subplot is used. The cornerRadius channel is also ignored; use the [cornerRadius option](#basicOptions) of the subplot(s) instead. The front, class, name, listen and event channels such as click can be used as normal — these set attributes/listeners on the <g> elements that contain the subplots.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2918,"value":"reverseAxes = md`## Reverse Axes [](#sections)\n\nThe top-level options \\`xReverse\\` and \\`yReverse\\` reverse the x and y axes respectively.\n\n\\`xAxisPosition\\` (\\`'top'\\` or \\`'bottom'\\`) and \\`yAxisPosition\\` (\\`'left'\\` or \\`'right'\\`) set the positions of the axes:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2922,"value":"tp.vBar('~name', '~eat', {data: fruit})\n  .option({yReverse: true, xAxisPosition: 'top'})\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2950,"value":"md`\\`xReverse\\` and \\`yReverse\\` only act on the \\`x\\`, \\`y\\`, \\`xx\\` and \\`yy\\` channels, and the \\`path\\` channel of [\\`path\\`](#pathsAndMaps) marks. Hence, reversing an axis _does not_ flip the:\n\n* Shape of \\`point\\` and \\`arc\\` marks.\n\n* Text or alignment of \\`text\\` marks, notes, labels and titles.\n\n* Offsets of marks, notes, labels and titles.\n\n__Note__: When the \\`corner\\` option is used with [rectangles](#rectangles), the \\`x\\` channel specifies the right of the rectangle  if \\`xReverse\\` is \\`true\\`, and \\`y\\` specifies the top of the rectangle if \\`yReverse\\` is \\`true\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"topLevelOptions = md`## Top-level Options [](#sections)\n\nThe option method takes an object:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1098,"value":"tp.circle(x, y)\n  .option({width: 200, height: 160})\n  .plot();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"md`Calling option with no argument, or passing null or undefined resets all options to their defaults.\n\n__Note__: Options for widths, length, heights etc. are in pixels. The option value should be a number, e.g. 20, not '20px'.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"titlesAndLabelsOptions = md`### Title and Label Options\n\n| Property | Default | Description |\n|----------|---------|-------------|\n| plotTitle |  | plot title text |\n| xTitle |  | x title text |\n| yTitle |  | y title text |\n| labels | true | show x labels and y labels |\n| xLabels |  | show x labels (overrides labels) |\n| yLabels |  | show y labels (overrides labels) |\n\nThe plot method automatically adds an x title if the x channel of the first mark is a _~string_ (see [Data](#data)). Use the xTitle option to override the automatic title; use xTitle: false to hide it. The yTitle option behaves similarly. An alternative way to hide the title is to use an accessor function instead of a ~string (e.g. d => d.someProp instead of '~someProp').\n\nThe plot title can be used as a y title:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1131,"value":"tp.data(fruit)\n  .vBar(d => d.name, d => d.eat)\n  .option({\n    plotTitle: 'Eat',\n    plotTitleAlign: 'start',\n    plotTitleFontSize: 11\n  })\n  .plot();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"md`The plot title appears below the plot when the x axis is above the plot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1139,"value":"fontOptions = md`### Font Options\n\n| Property | Default | Description |\n|----------|---------|-------------|\n| fontFamily | 'sans-serif' | font family |\n| fontSize | 11 (12 for plot title) | font size |\n| fontStyle | 'normal' | font style |\n| fontWeight | 'normal' ('bolder' for titles) | font weight |\n| color  | 'black' | color | \n| opacity | 1 | opacity |  \n\nUse a prefix to override one of these options, e.g. xLabelFontSize to override fontSize. The valid prefixes are: plotTitle, xTitle, yTitle, legendTitle, xLabel, yLabel, legendLabel.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1143,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"tp.data(fruit)\n  .vBar(d => d.name, d => d.eat)\n  .option({\n    width: 130,\n    xLabelAlign: 'end',\n    xLabelRotate: -45,\n    xLabelPadding: -2,\n    plotSpace: [,, 30]\n  })\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1171,"value":"labelFormattingOptions = md`### Label Formatting\n\nThe xFormat and yFormat options are used to pass label format functions. A format function is applied to each label of the corresponding dimension and the result is what is actually shown. If x or y has a data map (see [categorical data](#categoricalData)), the non-numeric value of the label is passed to the format function as the first argument, and the corresponding integer is passed as the second argument.\n\n[d3-format](https://github.com/d3/d3-format) is useful for formatting labels: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"tp.vBar(['a', 'b', 'c'], [1234567, 4321098, 3456789])\n  .option({\n    xFormat: (v, i) => v + i,\n    yFormat: d3.format(\".1s\")\n  })\n  .plot()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1182,"value":"md`Legend format functions are passed using the options fillFormat, strokeFormat, shapeFormat, areaFormat. These are mark options — i.e. they are used with a mark method rather than the option method:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"tp.circle(x, y, {\n    fill: ['a', 'b', 'a', 'c', 'c', 'b'],\n    fillScheme: tp.cat,\n    fillFormat: v => v.toUpperCase()\n  })\n  .plot();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"legendOptions = md`### Legend Options\n\n| Property | Default | Description |\n|----------|---------|-------------|\n| legend | true  | show legend |\n| legendPosition | 'out-right' | legend position ('out-left', 'out-right', 'center', 'top', bottom, 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right') |\n| legendBackground | 'transparent'  | legend background color |\n| legendBackgroundOpacity | 1 | legend background opacity |\n| legendBorderColor | '#888'  | legend border color |\n| legendBorderWidth | 0  | legend border width |\n| legendCornerRadius | 0  | legend corner radius |\n| legendRampHeight | 80  | color ramp height |`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2835,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2830,"value":"tp = (await import('https://cdn.skypack.dev/@gjmcn/teapot@0.3.2')).tp","pinned":false,"hidden":false,"mode":"ojs"},{"id":1772,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}