3f:null 40:["$","title",null,{"children":"Transforms / Observable Plot | Jerome Ku | Observable"}] 46:T79c,Plot’s built-in options transforms are: * [group](/@observablehq/plot-group?collection=@observablehq/plot) - group ordinal data and derive summary statistics, *e.g.* counts * [bin](/@observablehq/plot-bin?collection=@observablehq/plot) - bin quantitative data and derive summary statistics, *e.g.* counts * [stack](/@observablehq/plot-stack?collection=@observablehq/plot) - stack series, *e.g.* convert *y* to *y1* and *y2* * [map](/@observablehq/plot-map?collection=@observablehq/plot) - map values per series, *e.g.* for a cumulative sum * [window](/@observablehq/plot-window?collection=@observablehq/plot) - map values per windowed series, *e.g.* for a rolling average * [select](/@observablehq/plot-select?collection=@observablehq/plot) - extract a value per series, *e.g.* the last value * [interval](/@observablehq/plot-interval?collection=@observablehq/plot) - convert a single value to an interval [start, stop] * [dodge](/@observablehq/plot-dodge?collection=@observablehq/plot) - lift points from a one-dimensional layout to prevent occlusion * [hexbin](/@observablehq/plot-hexbin?collection=@observablehq/plot) - aggregate two-dimensional points into discrete hexagonal bins Next API Reference47:[{"id":"75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","href":"https://static.observableusercontent.com/files/75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","name":"alphabet.csv","type":"text/csv","lastModified":1655931005273.273,"size":275},{"id":"a139d402230eaac422551e10fd6785ffa6fc986abe2648574a7361c1d93e15a686aee8ab7bfd6105bc1ee3fd3a33c6a1a6683963607ffe71171c325a6e476737","href":"https://static.observableusercontent.com/files/a139d402230eaac422551e10fd6785ffa6fc986abe2648574a7361c1d93e15a686aee8ab7bfd6105bc1ee3fd3a33c6a1a6683963607ffe71171c325a6e476737","name":"bls-metro-unemployment.csv","type":"text/csv","lastModified":1655931005273.273,"size":406211},{"id":"39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","href":"https://static.observableusercontent.com/files/39837ec5121fcc163131dbc2fe8c1a2e0b3423a5d1e96b5ce371e2ac2e20a290d78b71a4fb08b9fa6a0107776e17fb78af313b8ea70f4cc6648fad68ddf06f7a","name":"metros.csv","type":"text/csv","lastModified":1655931005273.273,"size":15389}] 44:{"id":"e31705d9724517a5","slug":"transforms-observable-plot","title":"Transforms / Observable Plot","thumbnail":"0cae20c610afa2634c982342f1c30d369546e21e85ea5b763609a8f1d3ee0d0b","access_level":"public","create_time":"$D2022-06-22T20:50:05.273Z","update_time":"$D2022-06-22T20:50:45.195Z","view_time":null,"first_public_time":"$D2022-06-22T20:50:52.255Z","has_unpublished_edits":null,"fork":{"id":"2e3ea65af40a30c2","slug":"plot-transforms","title":"Transforms / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ed6a480d15253f67","login":"jeromeku","name":"Jerome Ku","avatar_url":"https://avatars-next.observableusercontent.com/103e2327938f60162e6e8941d31d70b8e18a6d0af27b48eb461899e59622fd04","tier":"starter_2024","bio":"","following":false},"version":204,"publish_version":204,"role":null,"authored":false,"authors":[{"type":"individual","id":"5aca967524406f04","login":"jeromeku","name":"Jerome Ku","avatar_url":"https://avatars-next.observableusercontent.com/103e2327938f60162e6e8941d31d70b8e18a6d0af27b48eb461899e59622fd04","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"5aca967524406f04","login":"jeromeku","name":"Jerome Ku","avatar_url":"https://avatars-next.observableusercontent.com/103e2327938f60162e6e8941d31d70b8e18a6d0af27b48eb461899e59622fd04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Transforms / Observable Plot","cells":[{"id":117,"value":"md`

Transforms / Observable Plot

Observable Plot › Transforms · API

\n\n# Plot: Transforms\n\nTransforms provide a convenient mechanism for deriving data while plotting. All marks support the following basic transforms:\n\n* **filter** - filters data according to the specified accessor or values\n* **sort** - sorts data according to the specified comparator, accessor, or values\n* **reverse** - reverses the sorted (or if not sorted, the input) data order\n\nFor example, to take the toy bar chart of English letter frequency and only draw bars for letters that commonly form vowels:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"bar = Plot.barY(alphabet, {filter: d => /[aeiou]/i.test(d.letter), x: \"letter\", y: \"frequency\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"alphabet = FileAttachment(\"alphabet.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`The **filter** transform is similar to filtering the data with [*array*.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), except that it will preserve [faceting](/@observablehq/plot-facets?collection=@observablehq/plot) and will not affect inferred [scale domains](/@observablehq/plot-scales?collection=@observablehq/plot); domains are inferred from the unfiltered channel values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"Plot.barY(alphabet.filter(d => /[aeiou]/i.test(d.letter)), {x: \"letter\", y: \"frequency\"}).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`Here’s another example using a filter transform to control which text labels are displayed in a dense scatterplot.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"metros = FileAttachment(\"metros.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof dofilter = Inputs.toggle({label: \"Filter labels\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"chart = Plot.plot({\n grid: true,\n inset: 10,\n x: {\n type: \"log\",\n label: \"Population →\",\n tickFormat: \"~s\"\n },\n y: {\n label: \"↑ Inequality\"\n },\n marks: [\n Plot.dot(metros, {\n x: \"POP_2015\",\n y: \"R90_10_2015\",\n r: 2.5}),\n Plot.text(metros, {\n x: \"POP_2015\",\n y: \"R90_10_2015\",\n filter: dofilter ? \"highlight\" : null,\n text: \"nyt_display\",\n dy: -6\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`Together the **sort** and **reverse** transforms allow control over *z*-order, which can be important when addressing overplotting. If the sort option is a function but does not take exactly one argument, it is assumed to be a [comparator function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description); otherwise, the sort option is interpreted as a channel value definition and thus may be either a column name, accessor function, or array of values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"bls = FileAttachment(\"bls-metro-unemployment.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"viewof dosort = Inputs.toggle({label: \"Sort lines\", value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployment (%)\"\n },\n color: {\n domain: [false, true],\n range: [\"#ccc\", \"red\"]\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(bls, {\n x: \"date\",\n y: \"unemployment\",\n z: \"division\",\n sort: dosort && (d => /, MI /.test(d.division)),\n stroke: d => /, MI /.test(d.division)\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`The basic transforms are composable: the *filter* transform is applied first, then *sort*, *reverse*, and lastly the custom *transform*, if any.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`For greater control, you can also implement a custom **transform** function. This function takes *data* and *facets* as arguments and returns the same, where *data* is the associated mark’s data and *facets* is an array of indexes into that data. If the mark is not faceted, then *facets* will contain a single facet representing the entire data: [0, 1, … *data*.length - 1].`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployment (%)\"\n },\n color: {\n domain: [false, true],\n range: [\"#ccc\", \"red\"]\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(bls, {\n x: \"date\",\n y: \"unemployment\",\n z: \"division\",\n transform: customTransform\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"function customTransform(data, facets) {\n return {\n data,\n facets: facets.map(facet => {\n return facet.filter(i => {\n return /, MI /.test(data[i].division);\n });\n })\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`Plot’s option transforms, listed below, do more than populate the **transform** function: they derive new mark options and channels. These transforms take a mark’s *options* object (and possibly transform-specific options as the first argument) and return a new, transformed, *options*. Option transforms are composable: you can pass an *options* objects through more than one transform before passing it to a mark. You can also reuse the same transformed *options* on multiple marks.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"