2f:T551,md`# Layers and Facets and Concat, Oh My! _Many of these examples are drawn from Vega-Lite’s own [examples gallery](https://vega.github.io/vega-lite/examples/#layered-plots). And for a more thorough and formal introduction, be sure to check out UW IDL’s [Multi-View Composition](https://observablehq.com/@uwdata/multi-view-composition?collection=@uwdata/visualization-curriculum)._ We’ve been gradually adding complexity as we go from simple charts to more sophisticated ones. In this notebook, you’ll learn how to combine multiple chart definitions to create richer and clearer visualizations via: Type | Examples | Methods ---- | -------- | ------- [Layers](#layer):
Stack charts on top of each other | [${thumbnail(layeredBar)}](#layeredBar) [${thumbnail(layeredTrend)}](#layeredTrend) | \`layer\` [Facets](#facet):
Partition data, organized in rows or columns | [${thumbnail(facetedCars)}](#facetedCars) [${thumbnail(facetedWeather)}](#facetedWeather) | \`row\`, \`column\`, \`facet\` [Repetition](#repeat):
A repeated chart for multiple fields | [${thumbnail(repeatedQuantities)}](#repeatedQuantities) [${thumbnail(splom)}](#splom) | \`repeat\` [Concatenation](#concat):
Place charts side-by-side | [${thumbnail(marginalHistograms)}](#marginalHistograms) [${thumbnail(variousCharts)}](#variousCharts) | \`hconcat\`, \`vconcat\` `30:[{"id":"15efd91760d0d4e41178e1df9623331b6bf519122ff44ff6837e776471a1d4c58f035eafc13b2c66112dbb79f0a1d4dcea50bbfd2609ac5f79ce74b3b60fb3e5","href":"https://static.observableusercontent.com/files/15efd91760d0d4e41178e1df9623331b6bf519122ff44ff6837e776471a1d4c58f035eafc13b2c66112dbb79f0a1d4dcea50bbfd2609ac5f79ce74b3b60fb3e5","name":"alphabet.csv","type":"text/csv","lastModified":1697555444376.829,"size":275},{"id":"6f8011ba66728271a83cae0f6df7fe12d223ac73e80a79f55a723f86725b9d936ac8a3c242865b0df0839e0f5a5da73d6bcc3a7921b1dc81b8d5fa0d0a680915","href":"https://static.observableusercontent.com/files/6f8011ba66728271a83cae0f6df7fe12d223ac73e80a79f55a723f86725b9d936ac8a3c242865b0df0839e0f5a5da73d6bcc3a7921b1dc81b8d5fa0d0a680915","name":"pwm-weather.csv","type":"text/csv","lastModified":1697555444376.829,"size":31922},{"id":"1c2c8f12f99ab5d1f9bd36419c49fbbb9c6fcf808ec98df7fd2377187fd38bdfcd20bb7c32ccb043e6a0a85011dd4377128d2a5d1bd4d6d48079ab5d8fbc3186","href":"https://static.observableusercontent.com/files/1c2c8f12f99ab5d1f9bd36419c49fbbb9c6fcf808ec98df7fd2377187fd38bdfcd20bb7c32ccb043e6a0a85011dd4377128d2a5d1bd4d6d48079ab5d8fbc3186","name":"cars.json","type":"application/json","lastModified":1697555444376.829,"size":100492},{"id":"535a9a3c9c983834b9a44a989d414b22d4fb4d241f4b6301fb0248e2a2d6004225b7453e1df3cbb9db4c9c3f93925f9db16f4e9f892b85a6015d300b0b5dc1a6","href":"https://static.observableusercontent.com/files/535a9a3c9c983834b9a44a989d414b22d4fb4d241f4b6301fb0248e2a2d6004225b7453e1df3cbb9db4c9c3f93925f9db16f4e9f892b85a6015d300b0b5dc1a6","name":"penguins.csv","type":"text/csv","lastModified":1697555444376.829,"size":13518}] 2d:{"title":"Layers and Facets and Concat, Oh My!","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"layer = md`---\n## Layers\n\nThink of [layers](https://vega.github.io/vega-lite/docs/layer.html) as layering chart types on top of a shared canvas (literally and metaphorically). Each layer can share data, scales, axes, and encoding channels.\n\nLet’s start with adding value labels to the letter frequency bar chart to increase its legibility. For each bar, we want a _text_ label placed at the _x_ position of its value.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"alphabet = d3.csvParse(await FileAttachment(\"alphabet.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof layeredBar = vl\n .data(alphabet)\n .layer(\n vl.markBar()\n .encode(\n vl.y().fieldN(\"letter\"),\n vl.x().fieldQ(\"frequency\").axis({ format: \"%\", grid: false })\n ),\n vl.markText({ align: \"left\", dx: 5, dy: 1 })\n .encode(\n vl.y().fieldN(\"letter\"),\n vl.x().fieldQ(\"frequency\"),\n vl.text().fieldN(\"frequency\").format(\".2%\")\n )\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`### layer(...)\n\nThe [\\`layer()\\`](https://vega.github.io/vega-lite/docs/layer.html) method takes as many “sub-charts” as you want. It can even take sub-layers! Each of them share the definitions higher up in the heirarchy (here, the \\`data()\\` definition).\n\n${tryIt(`\nMove the repeated definitions for _y_ and _x_ up a level to share them among the bar and text layers.\n`)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`### Layer on layer on layer\n\nWhy stop there? We can layer several types of marks on top of each other. Let’s revisit the weather data, this time adding a line indicating average maximum temperature for the month and a shaded area representing the standard deviation of the samples.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"weather = d3.csvParse(await FileAttachment(\"pwm-weather.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof layeredTrend = vl.data(weather)\n .encode(\n vl.x().fieldO(\"date\").timeUnit(\"utcmonth\"),\n vl.y().fieldQ(\"tmax\")\n )\n .layer(\n vl.markCircle()\n .encode(\n vl.color().fieldN(\"condition\").scale({ range: weatherColors })\n ),\n vl.markErrorband({ extent: \"stdev\" }),\n vl.markLine()\n .encode(\n vl.y().mean(\"tmax\")\n )\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`### markErrorband()\n[\\`markErrorband\\`](https://vega.github.io/vega-lite/docs/errorband.html) visualizes an error range of values. It takes [several options](https://vega.github.io/vega-lite/docs/errorband.html#properties) including control of the summary statistic used.\n\n${tryIt(`\nChange \"stdev\" to \"iqr\" for the [interquartile range](https://en.wikipedia.org/wiki/Interquartile_range). \nSet \\`{ interpolate: \"basis\" }\\` on both the errorband and line. \n`)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"facet = md`---\n## Facets\n\nWhen we have a dataset that lends itself to grouping by a certain dimension, we can use _faceting_ to create separate, repeated charts for each group.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`### Row, Column\n\nOne of the quickest ways to accomplish grouping is using the \\`row\\` and \\`column\\` encoding channels. If you’re using \\`color\\` on a nominal / categorical variable, you can also try switching to \\`row\\` or \\`column\\` for a related but different view.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"cars = FileAttachment(\"cars.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"viewof facetedCars = vl.markCircle()\n .data(cars)\n .encode(\n vl.column().fieldN(\"Origin\"),\n vl.x().fieldQ(\"Horsepower\"),\n vl.y().fieldQ(\"Miles_per_Gallon\")\n )\n .width(200).height(200)\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"md`### column()\n\nThe \\`column()\\` encoding channel will repeat the same chart across multiple columns, one for each field value. This can be a great alternative to coloring within a single chart.\n\n${tryIt(`\nReplace \\`column\\` with \\`color\\` to compare visualizations. \nLayout into \\`row\\`s instead. \nFacet by \"Cylinders\" instead of \"Origin\". \n`)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"md`Another example using the weather data to tease apart weather conditions and their associated temperatures.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":603,"value":"viewof facetedWeather = vl.markCircle({ size: 10 })\n .data(weather)\n .encode(\n vl.x().fieldT(\"date\"),\n vl.y().fieldQ(\"tmax\"),\n vl.column().fieldN(\"condition\"),\n vl.color().fieldN(\"condition\").scale({ range: weatherColors }).legend(false)\n )\n .width(200)\n .height(100)\n .render();","pinned":true,"hidden":false,"mode":"ojs"},{"id":637,"value":"md`${tryIt(`\nRemove the \\`column\\` facet and compare the ability to see low snow temperatures. \n`)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"repeat = md`---\n## Repetition\nWhen your data contains multiple fields of similar or related variables, we can rapidly reuse the same chart definition across all of the different fields. The car fields of Horsepower, Acceleration, Displacement, and Miles_per_Gallon are ideal examples.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"viewof repeatedQuantities = vl.markBar()\n .data(cars)\n .encode(\n vl.x().fieldQ(vl.repeat(\"repeat\")).bin(true),\n vl.y().count(),\n vl.color().fieldN(\"Origin\")\n )\n .width(width / 3 - 100)\n .height(width / 4)\n .repeat([\"Horsepower\", \"Acceleration\", \"Displacement\", \"Miles_per_Gallon\"])\n .columns(3)\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"md`---\n### Scatter Plot Matrix\nAnother version of repetition is to create a [scatter plot matrix](https://en.wikipedia.org/wiki/Scatter_plot#Scatter_plot_matrices), creating all pairwise comparisons among a set of variables.\n\nThe canonical example is categorizing penguins by culmen and flipper dimensions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"penguins = d3.csvParse(await FileAttachment(\"penguins.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"viewof splom = vl.markCircle()\n .data(penguins)\n .encode(\n vl.x().fieldQ(vl.repeat(\"row\")).scale({ zero: false }),\n vl.y().fieldQ(vl.repeat(\"column\")).scale({ zero: false }),\n vl.color().fieldN(\"species\").scale({ scheme: \"set2\" })\n )\n .width(Math.max(width / 4 - 80, 100))\n .height(Math.max(width / 4 - 80, 100))\n .repeat({\n row: [\"culmen_length_mm\", \"culmen_depth_mm\", \"flipper_length_mm\", \"body_mass_g\"],\n column: [\"culmen_length_mm\", \"culmen_depth_mm\", \"flipper_length_mm\", \"body_mass_g\"]\n })\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"concat = md`---\n## Concatenation\nConcatenation allows us to place multiple charts in a shared layout.\n\nIn the previous examples of faceting and repetition, you may have noticed the shared axes helped in comparing across related charts. Simple choices in layout can facilitate easier interpretation.\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"viewof marginalHistograms = {\n const x = vl.x().fieldQ(\"culmen_length_mm\").scale({ zero: false });\n const y = vl.y().fieldQ(\"flipper_length_mm\").scale({ zero: false });\n const color = vl.color().fieldN(\"species\").scale({ scheme: \"set2\" });\n \n const scatter = vl.markCircle()\n .encode(x, y, color);\n \n const right = vl.markBar()\n .encode(\n y.axis(null),\n vl.x().count(),\n color\n )\n .width(50);\n const top = vl.markBar()\n .encode(\n x.axis(null),\n vl.y().count(),\n color\n )\n .height(50);\n \n return vl.vconcat(top, vl.hconcat(scatter, right))\n .data(penguins)\n .config({ concat: { spacing: 0 } })\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"md`Of course, we may simply want to place unrelated charts next to each other. That’s okay too.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"viewof variousCharts = {\n const temperatures = vl.markArea({ interpolate: \"basis\", color: \"darkseagreen\" })\n .data(weather)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"utcyearmonth\"),\n vl.y2().average(\"tmax\"),\n vl.y().average(\"tmin\")\n )\n .width(220)\n .height(150);\n \n const species = vl.markCircle()\n .data(penguins)\n .encode(\n vl.x().fieldQ(\"culmen_length_mm\").scale({ zero: false }),\n vl.y().fieldQ(\"flipper_length_mm\").scale({ zero: false }),\n vl.color().fieldN(\"species\").scale({ scheme: \"set2\" })\n )\n .width(220)\n .height(150);\n \n const letters = vl.markBar()\n .data(alphabet)\n .encode(\n vl.x().fieldN(\"letter\"),\n vl.y().fieldQ(\"frequency\")\n )\n .width(500)\n .height(200);\n \n return vl.vconcat(vl.hconcat(temperatures, species), letters).render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":693,"value":"md`---\n## Next\nWe’re nearing the end of this rapid tour through creating charts in Observable using Vega-Lite. In the [next notebook](after-vega-lite), we’ll reflect on Vega-Lite’s strengths and weaknesses and when you might want to start thinking about breaking out and creating visualizations with something like D3 directly.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":780,"value":"html`Next`","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3-dsv@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"import { thumbnail, tryIt, weatherColors } from \"a9a4b43c00769b31\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}