29:null 2a:["$","title",null,{"children":"View composition in Vega-Lite | Ayaan Kazerouni | Observable"}] 2f:T565,{ const row_order = ['wind_avg', 'precipitation', 'temp_max']; const splom = vl.markCircle({ size: 30 }) .encode( vl.x().fieldQ(vl.repeat('column')), vl.y().fieldQ(vl.repeat('row')) ) .width(140) .height(125) .repeat({ row: row_order, column: row_order.toReversed() }); const monthBars = vl.layer( vl.markBar() .encode( vl.x().month('date'), vl.y().average(vl.repeat('row')) ), vl.markRule({ color: 'firebrick', strokeWidth: 2 }) .encode( vl.y().average(vl.repeat('row')) ) ) .width(125) .height(125) .repeat({ row: row_order }); const colors = { domain: ['drizzle', 'fog', 'rain', 'hazy', 'sun'], range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52'] }; const weatherFacets = vl.markBar() .encode( vl.x().fieldQ('temp_max').bin(true), vl.y().count().title('Number of days'), vl.color().fieldN('weather').scale(colors) ) .width(125) .height(125) .facet({column: vl.field('weather')}); return vl.data(weather) .transform(vl.filter('datum.city === "San Luis Obispo"')) .title('San Luis Obispo Weather Dashboard') .vconcat( vl.hconcat(splom, monthBars), weatherFacets ) .resolve({ legend: { color: 'independent' } }) .render() }30:T745,## Appendix I downloaded a dataset about Daily Summaries from the [NOAA website](https://www.ncei.noaa.gov/cdo-web/datasets) and used the following code to tidy it up in a separate project. Comments are interspersed in the code. Provided here for transparency. ```js const dt = (await loadCSV('3995217.csv', { parse: { 'TMAX': d => d !== null ? parseFloat(d) : -1, 'TMIN': d => d !== null ? parseFloat(d) : NaN, 'TOBS': d => d !== null ? parseFloat(d) : NaN, 'PRCP': d => d !== null ? parseFloat(d) : NaN, 'TAVG': d => d !== null ? parseFloat(d) : NaN, 'AWND': d => d !== null ? parseFloat(d) : NaN, } })) .rename({ 'NAME': 'station_name', 'DATE': 'date', 'TMAX': 'temp_max', 'TMIN': 'temp_min', 'PRCP': 'precipitation', 'AWND': 'wind_avg' }) .filter(d => d.temp_max !== null && d.precipitation != null && d.temp_min !== null && d.wind_avg !== null) .filter(d => op.includes(['SAN LUIS OBISPO MCCHESNEY FIELD, CA US', 'SEATTLE TACOMA AIRPORT, WA US', 'BOSTON LOGAN INTERNATIONAL AIRPORT, MA US'], d.station_name)) .derive({ 'temp_min': d => (5 / 9) * (d.temp_min - 32), 'temp_max': d => (5 / 9) * (d.temp_max - 32), 'precipitation': d => d.precipitation * 2.54, 'city': d => op.includes(op.lower(d.station_name), 'san luis obispo') ? 'San Luis Obispo' : ( op.includes(op.lower(d.station_name), 'boston') ? 'Boston' : 'Seattle' ), 'weather': d => d.precipitation > 0 && d.precipitation <= 0.3 ? 'drizzle' : d.precipitation > 0.3 ? 'rain' : d.WT01 || d.WT02 ? 'fog' : d.WT03 ? 'rain' : // Assuming if there was thunder there was rain d.WT04 || d.WT05 || d.WT06 ? 'icy' : d.WT08 ? 'hazy' : d.WT11 ? 'windy' : 'sun' }) .select('city', 'date', 'wind_avg', 'precipitation', 'temp_max', 'temp_min', 'weather'); ```31:[{"id":"6bcd2086045e0c84c8c4828a945218cf8320229b2396ac81cf995fdd19161a75a84d3294c44233832b7ca7107091f5392e2a326f5a030fcf745f31bf32f44fc7","href":"https://static.observableusercontent.com/files/6bcd2086045e0c84c8c4828a945218cf8320229b2396ac81cf995fdd19161a75a84d3294c44233832b7ca7107091f5392e2a326f5a030fcf745f31bf32f44fc7","name":"slo-boston-seattle@3.json","type":"application/json","lastModified":1744932505528.404,"size":160539},{"id":"6aca4d4020f14d14be2f5f2bc77228bd744a26de5923439dc15d1aa8af3fb8becbc0e8953d35ef6173f8865b4c9f4de0a1e963ff2d8217803e5661a73def881c","href":"https://static.observableusercontent.com/files/6aca4d4020f14d14be2f5f2bc77228bd744a26de5923439dc15d1aa8af3fb8becbc0e8953d35ef6173f8865b4c9f4de0a1e963ff2d8217803e5661a73def881c","name":"image@2.png","type":"image/png","lastModified":1745009473222.706,"size":272997}] 2d:{"id":"3d293217286af02e","slug":"csc477-view-composition","title":"View composition in Vega-Lite","thumbnail":"8a0ae4c59b062ce8ae9c02660a7122991d9a7404ddb945b54bfdf1906f13c570","access_level":"unlisted","create_time":"$D2025-04-17T16:45:46.184Z","update_time":"$D2026-09-16T17:50:55.767Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024"},"version":521,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null}],"members":[{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":32,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"title":"View composition in Vega-Lite","cells":[{"id":0,"value":"# View composition in Vega-Lite\n\n*Notebook accompanying [these lecture slides](https://cpslo-my.sharepoint.com/:p:/g/personal/ayaank_calpoly_edu/EdXo8E2Df_xMkYjwkynfH-0BaVQrglw4mshE7hoeZmgydQ?e=WUjI0m).*\n\n*This notebook contains re-creations of figures from Jeffrey's Heer's [Multi-view Composition](https://observablehq.com/@uwdata/multi-view-composition) notebook with different data. Please work through Heer's notebook yourselves, it is extremely instructive.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"This activity uses the following weather data from the [National Oceanic and Atmospheric Atmosphere (NOAA)](https://www.ncei.noaa.gov/access) website. It contains daily data for the cities of San Luis Obispo, Boston, and Seattle in the year 2024.\n\nHere's a sample of the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"Inputs.table(weather.slice(0, 8))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"## Layering\n\nThe following two cells are chart specifications _without data_. Which means if you tried to `render` them, no figure would appear. The charts are bound to data in the cell that follows.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"tempMinMax = vl.markArea({ opacity: 0.3 })\n .encode(\n vl.x().month('date'),\n vl.y().average('temp_max').title('Temperature ºC'),\n vl.y2().average('temp_min'),\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"tempMiddle = vl.markLine()\n .transform(\n vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_avg')\n )\n .encode(\n vl.x().month('date'),\n vl.y().average('temp_avg').title('Temperature ºC'),\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"vl\n // Instead of duplicating the data and filter in each layer, we can specify it at the \"top level\"\n .data(weather)\n .transform(\n vl.filter('datum.city === \"Boston\" || datum.city === \"San Luis Obispo\"')\n )\n // Can also add encodings to the top level. What happens if you remove this color encoding?\n .encode(\n vl.color().fieldN('city')\n )\n .layer(tempMinMax, tempMiddle)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"### Layering with incompatible domains","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"precipitationAvg = vl.markLine({ interpolate: 'monotone', color: 'grey' })\n .encode(\n vl.x().month('date'),\n vl.y().average('precipitation')\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"viewof rainTemp = vl\n .data(weather)\n .transform(vl.filter('datum.city === \"Boston\"'))\n .layer(precipitationAvg, tempMinMax)\n .resolve({ scale: { y: 'independent' }})\n .title('Boston weather')\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"## Faceting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"vl.markBar()\n .encode(\n vl.x().fieldQ('temp_max').bin(true)\n .title('Temperature ºC'),\n vl.y().count()\n .title('Number of days')\n )\n .width(200)\n .height(150)\n .facet(vl.column().fieldN('city').header({ title: null}))\n .resolve({ axis: { y: 'independent' }})\n .data(weather)\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"{\n const colors = {\n domain: ['drizzle', 'fog', 'rain', 'hazy', 'sun'],\n range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']\n };\n return vl.markBar()\n .encode(\n vl.x().fieldQ('temp_max')\n .bin(true)\n .title('Max. temperature ºC'),\n vl.y().count().title('Number of days'),\n vl.color().fieldN('weather').scale(colors)\n )\n .width(150)\n .height(150)\n .facet({column: vl.field('weather'), row: vl.field('city')})\n .resolve({ scale: { x: 'independent' } })\n .data(weather)\n .render()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"## Repeat","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"vl.markLine({ interpolate: 'monotone' })\n .encode(\n vl.x().month('date'),\n vl.y().average(vl.repeat('column')), // <-- The y encoding will be set to the average of the repeat variables specified below\n vl.color().fieldN('city')\n )\n .width(250)\n .height(180)\n .data(weather)\n .repeat({ column: ['precipitation', 'wind_avg', 'temp_min'] }) // <-- Repeat the chart with each of these variables\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"### Scatterplot matrix (SPLOM)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"$${flag()} Can you use the `repeat` operator to re-create the following [Scatterplot matrix (SPLOM)](https://en.wikipedia.org/wiki/Scatter_plot#Scatter_plot_matrices)? (Only showing Seattle data.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"FileAttachment(\"image@2.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"_The errors below will disappear once we fill this in as a class._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"vl.markCircle({ size: 30 })\n .transform(\n // Filter to Seattle data\n )\n .encode(\n // x, using a repeat variable\n // y, using a repeat variable\n )\n // width and height should come here (they are properties of the chart that will get repeated)\n .repeat({\n // row\n // column\n })\n .data(weather) // <--- Data must come after the repeat\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"## Concatenation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"The most general operator. It simply stitches charts together horizontally or vertically. We could, technically, do faceting or repeating by simply concatenating charts together. But thankfully those abstractions exist (in our heads and in the Vega-Lite grammar).\n\nConcatenation is still useful for creating complex, multi-view visualizations.\n\n`vl.hconcat` concatenates horizontally, `vl.concat` concatenates vertically.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"vl.hconcat(\n vl.markBoxplot({ size: 50 })\n .encode(\n vl.y().fieldQ('wind_avg')\n )\n .width(75),\n vl.markBar()\n .encode(\n vl.x().count(),\n vl.y().fieldQ('wind_avg').bin(true),\n )\n .width(200)\n )\n .data(weather)\n .resolve({ scale: { y: 'shared' }})\n .render()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"## Putting it all together\n\nAll of these operators together form a View Composition Algebra. They can be used together to compose multi-view visualizations.
\n_(This is a re-creation of [this wonderful example](https://observablehq.com/@uwdata/multi-view-composition), using San Luis Obispo weather data instead.)_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"const weather = aq.from(await FileAttachment(\"slo-boston-seattle@3.json\").json())","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"import {flag} from 'observable:@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"2","titling":"auto"}} 2e:"$2d:body"