2e:null 2f:["$","title",null,{"children":"Auto Mark / Observable Plot | Observable | Observable"}] 34:[] 32:{"id":"8909ec7a980a6666","slug":"plot-auto","title":"Auto Mark / Observable Plot","thumbnail":"b8118f4945bbeec180e55a4c6a2f96ab0ae1ad93b1d77dd62329f98f7f1ef523","access_level":"public","create_time":"$D2023-02-03T17:43:53.082Z","update_time":"$D2023-04-01T20:43:58.942Z","view_time":null,"first_public_time":"$D2023-02-07T17:52:10.759Z","has_unpublished_edits":null,"fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":425,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","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":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","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":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Auto Mark / Observable Plot","cells":[{"id":14,"value":"

Auto Mark / Observable Plot

Observable Plot › Marks › Auto · API

\n\n# Plot: Auto\n\nThe special **auto** mark automatically selects a mark type that best represents the given dimensions of the data according to some simple heuristics. For example, two quantitative dimensions make a scatterplot:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"Plot.auto(penguins, {x: \"body_mass_g\", y: \"flipper_length_mm\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"While Plot.auto will respect the options you provide, you shouldn’t rely on its behavior being stable over time; if you want to guarantee a specific chart type, you should specify the marks and transforms explicitly (like Plot.dot or Plot.bin). Plot.auto is intended to support fast exploratory analysis where the goal is to get a useful plot as quickly as possible.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"A monotonically increasing dimension (here *Date*, as the data is ordered chronologically), paired with a numeric column (*Close*), makes a line chart:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"Plot.auto(aapl, {x: \"Date\", y: \"Close\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"Given only one dimension of data, it makes a histogram:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"Plot.auto(olympians, {x: \"height\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Plot.auto(penguins, {x: \"island\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"This is easier than deciding whether to use bin and rect, or group and bar: Plot.auto chooses the right one based on whether the data is quantitative or ordinal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"If you’d like to explicitly avoid grouping the data, you can opt out of the reducer, and get a one-dimensional plot:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"Plot.auto(penguins, {x: \"body_mass_g\", y: {reduce: null}}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"As you can see from that _reduce_ property, the auto mark has some special syntax that lets you specify a reducer without explicitly specifying a transform. For example, the scatterplot above can be made into a heatmap by adding a color reducer. You can pass the name of a reducer to that property, or pass a shorthand string:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"Plot.auto(olympians, {x: \"height\", y: \"weight\", color: \"count\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"That’s equivalent to this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"Plot.rect(olympians, Plot.bin({fill: \"count\"}, {x: \"height\", y: \"weight\"})).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"Notice that the code above makes you think about nested functions and two different options objects, which Plot.auto flattens. Plot.auto infers that it should use a _rect_; that it should _bin_ on x and y; that the kind of color should be a _fill_; and that fill is an “output” of the reducer, whereas x and y are “inputs”. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"This saves you a little bit of typing, but, more importantly, it means that switching from showing one dimension to another only involves changing _one thing_. In the code above, if you change y from “weight” to “sex”, it’ll break, because sex is ordinal instead of quantitative. (You’d also have to change rect to barX, and bin to binX.) With Plot.auto, it just works:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"Plot.auto(olympians, {x: \"height\", y: \"sex\", color: \"count\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"Similarly, with explicit marks and transforms, changing a vertical histogram to a horizontal histogram involves switching rectY to rectX, binX to binY, x to y, and y to x. With Plot.auto, just specify y instead of x:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"Plot.auto(penguins, {y: \"island\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"For the sake of seamless switching, Plot.auto has just one color channel, which it assigns to either fill or stroke depending on the mark. We can see that clearly by overriding a line chart with the _mark_ property to make an area chart:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":211,"value":"Plot.auto(industries, {x: \"date\", y: \"unemployed\", color: \"industry\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"Plot.auto(industries, {x: \"date\", y: \"unemployed\", color: \"industry\", mark: \"area\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"The _mark_ override option supports dot, line, area, rule, and bar (which automatically chooses among barX, barY, rectX, rectY, rect, and cell).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"You can get a more elaborate aggregated chart by passing an object with both a _value_ (the input dimension) and a _reduce_ (the reducer). For example, here’s the average heights of Olympians over time by sex:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"Plot\n .auto(olympians, {x: \"date_of_birth\", y: {value: \"height\", reduce: \"mean\"}, color: \"sex\", mark: \"line\"})\n .plot({color: {legend: true}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"The reducer can be first, last, count, distinct, sum, proportion, proportion-facet, deviation, min, min-index, max, max-index, mean, median, variance, or mode.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"You can similarly pass a *zero* option to indicate that zero is meaningful for either _x_ or _y_. This adds a corresponding rule to the returned mark.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"Plot.auto(industries, {x: \"date\", y: {value: \"unemployed\", zero: true}, color: \"industry\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"Finally, Plot.auto has a _size_ channel, which (currently) always results in a dot mark. For now, it’s an alias for the dot’s _r_ channel; in the future it will also represent a vector’s _length_ channel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"Plot.auto(aapl, {x: \"Date\", y: \"Close\", size: \"Volume\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"Finally, like with any other mark, you can also use _fx_ or _fy_, and pass additional global options in the plot method. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"Plot.auto(penguins, {\n x: \"body_mass_g\",\n y: \"culmen_length_mm\",\n fx: \"island\",\n fy: \"species\"\n}).plot({\n x: {label: \"Body mass →\", ticks: 5},\n y: {label: \"↑ Culmen length (mm)\"},\n marginRight: 70\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"You could combine the auto mark with other marks, but the combination may be brittle, because Plot.auto may pick encodings that don’t play well with the others.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":332,"value":"Plot.auto is supposed to be fast and fluid, so don’t overthink it. If you need precise control, use the explicit marks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"