28:null 29:["$","title",null,{"children":"Facets / Observable Plot | Observable | Observable"}] 2e:[{"id":"72277359049b092757a163ca1fa10aab48b61f626c7cf1ed103155a6d063e58e17128cb4d4e19d62341d363ec3a471b5a3b92e0e4fcad2fa4e29fb2dfbe858bf","href":"https://static.observableusercontent.com/files/72277359049b092757a163ca1fa10aab48b61f626c7cf1ed103155a6d063e58e17128cb4d4e19d62341d363ec3a471b5a3b92e0e4fcad2fa4e29fb2dfbe858bf","name":"anscombe.csv","type":"text/csv","lastModified":1617222843103.496,"size":422},{"id":"9d649f498cd3adf3166f89c4b181b96aed310760f4ba8becb038b7e3c58e2d766040a63f30caf30874b1bbf6408cb80e4193337bf4587f3211e8c3048cbf65a2","href":"https://static.observableusercontent.com/files/9d649f498cd3adf3166f89c4b181b96aed310760f4ba8becb038b7e3c58e2d766040a63f30caf30874b1bbf6408cb80e4193337bf4587f3211e8c3048cbf65a2","name":"barley.csv","type":"text/csv","lastModified":1617222891121.034,"size":3831},{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1617222968100.766,"size":13506}] 2c:{"id":"171f9752c24bedc4","slug":"plot-facets","title":"Facets / Observable Plot","thumbnail":"e58c30cf3f770a5b5b2c1b1cb76ac20b77dc5364c713158e044324c785233f3e","access_level":"public","create_time":"$D2021-03-18T02:28:00.433Z","update_time":"$D2023-04-05T20:42:38.015Z","view_time":null,"first_public_time":"$D2021-05-04T05:15:28.396Z","has_unpublished_edits":null,"fork":false,"stars":22,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":267,"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":"6e8c8298bf5674cd","reply_to_id":null,"content":"This notebook needs to be updated to document the new mark.fx and mark.fy options.","create_time":"$D2022-12-11T18:34:58.016Z","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":"7e3c202ec73c1c81","reply_to_id":"6e8c8298bf5674cd","content":"I made a substantial revision here as a suggestion https://observablehq.com/compare/171f9752c24bedc4...d8547ced0edc0f89","create_time":"$D2022-12-12T10:47:44.493Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":18,"collection":{"id":"febc26eef760de7c","slug":"plot","title":"Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Facets / Observable Plot","cells":[{"id":0,"value":"

Facets / Observable Plot

Observable Plot › Facets · API

\n\n# Plot: Facets\n\nFaceting produces horizontal and/or vertical [small multiples](https://en.wikipedia.org/wiki/Small_multiple) by partitioning data into discrete sets and repeating the plot for each set, allowing comparison.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"Faceting may either be specified at the top level of the plot or on individual marks. The mark-level **fx** and **fy** options allow marks to define facet channels. For example, we can recreate the “trellis” plot of Barley yields constructed by [Becker *et al.*](https://hci.stanford.edu/courses/cs448b/papers/becker-trellis-jcgs.pdf)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"barley = FileAttachment(\"barley.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"Plot.plot({\n height: 800,\n marginLeft: 110,\n grid: true,\n x: {nice: true},\n y: {inset: 5},\n color: {type: \"categorical\"},\n facet: {data: barley, y: \"site\", marginRight: 90},\n marks: [\n Plot.frame(),\n Plot.dot(barley, {\n x: \"yield\",\n y: \"variety\",\n stroke: \"year\",\n sort: {\n y: {value: \"x\", reduce: \"median\", reverse: true},\n fy: {value: \"x\", reduce: \"median\", reverse: true}\n }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"The plot above uses the mark **sort** option to order the points within each subplot (the *y* domain) and likewise to order the facets (the *fy* domain). In both cases the domains are ordered by descending median yield (the *x* value). As with all ordinal scales in Plot, if the domain is not specified explicitly, it defaults to the union of values in natural order—merging mark-level and top-level facet channels.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"The top-level **facet** option is an alternative to the mark **fx** and **fy** option and is useful when multiple marks share the same data; the facet.**x** and facet.**y** channels are then shared by all marks that use the facet data. (Other marks will be repeated across facets.) For example, we can visualize the famous [Anscombe’s quartet](https://en.wikipedia.org/wiki/Anscombe's_quartet) as a scatterplot with horizontal facets.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"anscombe = FileAttachment(\"anscombe.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Plot.plot({\n grid: true,\n inset: 10,\n width: 928,\n height: 240,\n facet: {\n data: anscombe,\n x: \"series\"\n },\n marks: [\n Plot.frame(),\n Plot.line(anscombe, {x: \"x\", y: \"y\", stroke: \"#ccc\"}),\n Plot.dot(anscombe, {x: \"x\", y: \"y\", stroke: \"currentColor\", fill: \"white\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"You can also mix datasets with different structures, for example to add an annotation on a specific facet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"Plot.plot({\n marginLeft: 75,\n marginRight: 70,\n x: {insetRight: 10},\n y: {grid: true},\n facet: {marginRight: 70},\n marks: [\n Plot.ruleX([0]),\n Plot.barX(penguins, Plot.groupY({x: \"count\"}, {fy: \"island\", y: \"species\", fill: \"sex\"})),\n Plot.text([`Did you know? The Adelie species is the only one on Torgersen Island.`], {\n fy: [\"Torgersen\"],\n frameAnchor: \"right\",\n lineWidth: 16,\n dx: -4\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"To make room for the facet axes, you may need to specify the facet.**marginTop**, facet.**marginRight**, facet.**marginBottom**, or facet.**marginLeft** option.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"When faceting, two additional band scales may be configured: _fx_ and _fy_. These are driven by the facet.**x** and facet.**y** channels, respectively, which must be supplied strictly ordinal (*i.e.*, discrete) values; each distinct value defines a facet. Quantitative data must be discretized for faceting, say by rounding or binning. This can be done through the *scale*.**transform** option on the relevant facet scale. The example below shows a box plot of athlete’s weights, faceted by height—with classes created by binning heights every 10cm.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"Plot.plot({\n height: 400,\n marginTop: 0,\n marginLeft: 50,\n x: {inset: 10, grid: true, label: \"weight (kg) →\"},\n y: {axis: null, inset: 2},\n color: {legend: true},\n fy: {\n transform: (d) => d ? Math.floor(d * 10) / 10 : \"\",\n tickFormat: (d) => d ? d.toFixed(1) : \"N/A\",\n label: \"height (m) →\",\n reverse: true\n },\n facet: {\n data: olympians,\n y: \"height\",\n marginLeft: 50\n },\n marks: [\n Plot.frame({stroke: \"#aaa\", strokeWidth: 0.5}),\n Plot.boxX(olympians, {x: \"weight\", y: \"sex\", stroke: \"sex\", r: 1})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"When using top-level faceting, if your data is parallel to the facet data (*i.e.*, the same length and order) but not strictly equal (``===``), you can enable faceting by specifying the *mark*.**facet** option to *include* (or equivalently true). Likewise you can disable faceting by setting the *mark*.**facet** option to null or false. Finally, the mark.**facet** option supports the _exclude_ option to select all data points that are _not_ part of the current facet, allowing “background” marks for context.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"penguins = FileAttachment(\"penguins.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Plot.plot({\n height: 600,\n grid: true,\n facet: {\n data: penguins,\n x: \"sex\",\n y: \"species\",\n marginRight: 80\n },\n marks: [\n Plot.frame(),\n Plot.dot(penguins, {\n x: \"culmen_depth_mm\",\n y: \"culmen_length_mm\",\n r: 1.5,\n fill: \"#ccc\",\n facet: \"exclude\"\n }),\n Plot.dot(penguins, {\n x: \"culmen_depth_mm\",\n y: \"culmen_length_mm\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"Note that empty facets are not rendered.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"