30:[{"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}] 2e:{"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"},{"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"},{"id":26,"value":"barley = FileAttachment(\"barley.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":14,"value":"anscombe = FileAttachment(\"anscombe.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":31,"value":"penguins = FileAttachment(\"penguins.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":153,"value":"Note that empty facets are not rendered.","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}