05 view composition

%23%20%2F%2F%2F%20script%0A%23%20requires-python%20%3D%20%22%3E%3D3.11%22%0A%23%20dependencies%20%3D%20%5B%0A%23%20%20%20%20%20%22altair%3D%3D6.0.0%22%2C%0A%23%20%20%20%20%20%22marimo%22%2C%0A%23%20%20%20%20%20%22pandas%3D%3D3.0.1%22%2C%0A%23%20%5D%0A%23%20%2F%2F%2F%0A%0Aimport%20marimo%0A%0A__generated_with%20%3D%20%220.21.1%22%0Aapp%20%3D%20marimo.App()%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%0A%20%20%20%20return%20(mo%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%20Multi-View%20Composition%0A%0A%20%20%20%20When%20visualizing%20a%20number%20of%20different%20data%20fields%2C%20we%20might%20be%20tempted%20to%20use%20as%20many%20visual%20encoding%20channels%20as%20we%20can%3A%20%60x%60%2C%20%60y%60%2C%20%60color%60%2C%20%60size%60%2C%20%60shape%60%2C%20and%20so%20on.%20However%2C%20as%20the%20number%20of%20encoding%20channels%20increases%2C%20a%20chart%20can%20rapidly%20become%20cluttered%20and%20difficult%20to%20read.%20An%20alternative%20to%20%22over-loading%22%20a%20single%20chart%20is%20to%20instead%20_compose%20multiple%20charts_%20in%20a%20way%20that%20facilitates%20rapid%20comparisons.%0A%0A%20%20%20%20In%20this%20notebook%2C%20we%20will%20examine%20a%20variety%20of%20operations%20for%20_multi-view%20composition_%3A%0A%0A%20%20%20%20-%20_layer_%3A%20place%20compatible%20charts%20directly%20on%20top%20of%20each%20other%2C%0A%20%20%20%20-%20_facet_%3A%20partition%20data%20into%20multiple%20charts%2C%20organized%20in%20rows%20or%20columns%2C%0A%20%20%20%20-%20_concatenate_%3A%20position%20arbitrary%20charts%20within%20a%20shared%20layout%2C%20and%0A%20%20%20%20-%20_repeat_%3A%20take%20a%20base%20chart%20specification%20and%20apply%20it%20to%20multiple%20data%20fields.%0A%0A%20%20%20%20We'll%20then%20look%20at%20how%20these%20operations%20form%20a%20_view%20composition%20algebra_%2C%20in%20which%20the%20operations%20can%20be%20combined%20to%20build%20a%20variety%20of%20complex%20multi-view%20displays.%0A%0A%20%20%20%20_This%20notebook%20is%20part%20of%20the%20%5Bdata%20visualization%20curriculum%5D(https%3A%2F%2Fgithub.com%2Fuwdata%2Fvisualization-curriculum)._%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20pandas%20as%20pd%0A%20%20%20%20import%20altair%20as%20alt%0A%0A%20%20%20%20return%20alt%2C%20pd%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Weather%20Data%0A%0A%20%20%20%20We%20will%20be%20visualizing%20weather%20statistics%20for%20the%20U.S.%20cities%20of%20Seattle%20and%20New%20York.%20Let's%20load%20the%20dataset%20and%20peek%20at%20the%20first%20and%20last%2010%20rows%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20weather%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvega-datasets%401%2Fdata%2Fweather.csv'%0A%20%20%20%20return%20(weather%2C)%0A%0A%0A%40app.cell%0Adef%20_(pd%2C%20weather)%3A%0A%20%20%20%20df%20%3D%20pd.read_csv(weather)%0A%20%20%20%20df.head(10)%0A%20%20%20%20return%20(df%2C)%0A%0A%0A%40app.cell%0Adef%20_(df)%3A%0A%20%20%20%20df.tail(10)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20We%20will%20create%20multi-view%20displays%20to%20examine%20weather%20within%20and%20across%20the%20cities.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Layer%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20One%20of%20the%20most%20common%20ways%20of%20combining%20multiple%20charts%20is%20to%20*layer*%20marks%20on%20top%20of%20each%20other.%20If%20the%20underlying%20scale%20domains%20are%20compatible%2C%20we%20can%20merge%20them%20to%20form%20_shared%20axes_.%20If%20either%20of%20the%20%60x%60%20or%20%60y%60%20encodings%20is%20not%20compatible%2C%20we%20might%20instead%20create%20a%20_dual-axis%20chart_%2C%20which%20overlays%20marks%20using%20separate%20scales%20and%20axes.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%23%20Shared%20Axes%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Let's%20start%20by%20plotting%20the%20minimum%20and%20maximum%20average%20temperatures%20per%20month%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20alt.Chart(weather).mark_area().encode(%0A%20%20%20%20%20%20alt.X('month(date)%3AT')%2C%0A%20%20%20%20%20%20alt.Y('average(temp_max)%3AQ')%2C%0A%20%20%20%20%20%20alt.Y2('average(temp_min)%3AQ')%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_The%20plot%20shows%20us%20temperature%20ranges%20for%20each%20month%20over%20the%20entirety%20of%20our%20data.%20However%2C%20this%20is%20pretty%20misleading%20as%20it%20aggregates%20the%20measurements%20for%20both%20Seattle%20and%20New%20York!_%0A%0A%20%20%20%20Let's%20subdivide%20the%20data%20by%20location%20using%20a%20color%20encoding%2C%20while%20also%20adjusting%20the%20mark%20opacity%20to%20accommodate%20overlapping%20areas%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20alt.Chart(weather).mark_area(opacity%3D0.3).encode(%0A%20%20%20%20%20%20alt.X('month(date)%3AT')%2C%0A%20%20%20%20%20%20alt.Y('average(temp_max)%3AQ')%2C%0A%20%20%20%20%20%20alt.Y2('average(temp_min)%3AQ')%2C%0A%20%20%20%20%20%20alt.Color('location%3AN')%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_We%20can%20see%20that%20Seattle%20is%20more%20temperate%3A%20warmer%20in%20the%20winter%2C%20and%20cooler%20in%20the%20summer._%0A%0A%20%20%20%20In%20this%20case%20we've%20created%20a%20layered%20chart%20without%20any%20special%20features%20by%20simply%20subdividing%20the%20area%20marks%20by%20color.%20While%20the%20chart%20above%20shows%20us%20the%20temperature%20ranges%2C%20we%20might%20also%20want%20to%20emphasize%20the%20middle%20of%20the%20range.%0A%0A%20%20%20%20Let's%20create%20a%20line%20chart%20showing%20the%20average%20temperature%20midpoint.%20We'll%20use%20a%20%60calculate%60%20transform%20to%20compute%20the%20midpoints%20between%20the%20minimum%20and%20maximum%20daily%20temperatures%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20alt.Chart(weather).mark_line().transform_calculate(%0A%20%20%20%20%20%20temp_mid%3D'(%2Bdatum.temp_min%20%2B%20%2Bdatum.temp_max)%20%2F%202'%0A%20%20%20%20).encode(%0A%20%20%20%20%20%20alt.X('month(date)%3AT')%2C%0A%20%20%20%20%20%20alt.Y('average(temp_mid)%3AQ')%2C%0A%20%20%20%20%20%20alt.Color('location%3AN')%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_Aside_%3A%20note%20the%20use%20of%20%60%2Bdatum.temp_min%60%20within%20the%20calculate%20transform.%20As%20we%20are%20loading%20the%20data%20directly%20from%20a%20CSV%20file%20without%20any%20special%20parsing%20instructions%2C%20the%20temperature%20values%20may%20be%20internally%20represented%20as%20string%20values.%20Adding%20the%20%20%60%2B%60%20in%20front%20of%20the%20value%20forces%20it%20to%20be%20treated%20as%20a%20number.%0A%0A%20%20%20%20We'd%20now%20like%20to%20combine%20these%20charts%20by%20layering%20the%20midpoint%20lines%20over%20the%20range%20areas.%20Using%20the%20syntax%20%60chart1%20%2B%20chart2%60%2C%20we%20can%20specify%20that%20we%20want%20a%20new%20layered%20chart%20in%20which%20%60chart1%60%20is%20the%20first%20layer%20and%20%60chart2%60%20is%20a%20second%20layer%20drawn%20on%20top%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20tempMinMax%20%3D%20alt.Chart(weather).mark_area(opacity%3D0.3).encode(%0A%20%20%20%20%20%20alt.X('month(date)%3AT')%2C%0A%20%20%20%20%20%20alt.Y('average(temp_max)%3AQ')%2C%0A%20%20%20%20%20%20alt.Y2('average(temp_min)%3AQ')%2C%0A%20%20%20%20%20%20alt.Color('location%3AN')%0A%20%20%20%20)%0A%0A%20%20%20%20tempMid%20%3D%20alt.Chart(weather).mark_line().transform_calculate(%0A%20%20%20%20%20%20temp_mid%3D'(%2Bdatum.temp_min%20%2B%20%2Bdatum.temp_max)%20%2F%202'%0A%20%20%20%20).encode(%0A%20%20%20%20%20%20alt.X('month(date)%3AT')%2C%0A%20%20%20%20%20%20alt.Y('average(temp_mid)%3AQ')%2C%0A%20%20%20%20%20%20alt.Color('location%3AN')%0A%20%20%20%20)%0A%0A%20%20%20%20tempMinMax%20%2B%20tempMid%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_Now%20we%20have%20a%20multi-layer%20plot!%20However%2C%20the%20y-axis%20title%20(though%20informative)%20has%20become%20a%20bit%20long%20and%20unruly..._%0A%0A%20%20%20%20Let's%20customize%20our%20axes%20to%20clean%20up%20the%20plot.%20If%20we%20set%20a%20custom%20axis%20title%20within%20one%20of%20the%20layers%2C%20it%20will%20automatically%20be%20used%20as%20a%20shared%20axis%20title%20for%20all%20the%20layers%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20tempMinMax_1%20%3D%20alt.Chart(weather).mark_area(opacity%3D0.3).encode(alt.X('month(date)%3AT'%2C%20title%3DNone%2C%20axis%3Dalt.Axis(format%3D'%25b'))%2C%20alt.Y('average(temp_max)%3AQ'%2C%20title%3D'Avg.%20Temperature%20%C2%B0C')%2C%20alt.Y2('average(temp_min)%3AQ')%2C%20alt.Color('location%3AN'))%0A%20%20%20%20tempMid_1%20%3D%20alt.Chart(weather).mark_line().transform_calculate(temp_mid%3D'(%2Bdatum.temp_min%20%2B%20%2Bdatum.temp_max)%20%2F%202').encode(alt.X('month(date)%3AT')%2C%20alt.Y('average(temp_mid)%3AQ')%2C%20alt.Color('location%3AN'))%0A%20%20%20%20tempMinMax_1%20%2B%20tempMid_1%0A%20%20%20%20return%20tempMid_1%2C%20tempMinMax_1%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_What%20happens%20if%20both%20layers%20have%20custom%20axis%20titles%3F%20Modify%20the%20code%20above%20to%20find%20out..._%0A%0A%20%20%20%20Above%20used%20the%20%60%2B%60%20operator%2C%20a%20convenient%20shorthand%20for%20Altair's%20%60layer%60%20method.%20We%20can%20generate%20an%20identical%20layered%20chart%20using%20the%20%60layer%60%20method%20directly%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20tempMid_1%2C%20tempMinMax_1)%3A%0A%20%20%20%20alt.layer(tempMinMax_1%2C%20tempMid_1)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Note%20that%20the%20order%20of%20inputs%20to%20a%20layer%20matters%2C%20as%20subsequent%20layers%20will%20be%20drawn%20on%20top%20of%20earlier%20layers.%20_Try%20swapping%20the%20order%20of%20the%20charts%20in%20the%20cells%20above.%20What%20happens%3F%20(Hint%3A%20look%20closely%20at%20the%20color%20of%20the%20%60line%60%20marks.)_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%23%20Dual-Axis%20Charts%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_Seattle%20has%20a%20reputation%20as%20a%20rainy%20city.%20Is%20that%20deserved%3F_%0A%0A%20%20%20%20Let's%20look%20at%20precipitation%20alongside%20temperature%20to%20learn%20more.%20First%20let's%20create%20a%20base%20plot%20the%20shows%20average%20monthly%20precipitation%20in%20Seattle%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20alt.Chart(weather).transform_filter(%0A%20%20%20%20%20%20'datum.location%20%3D%3D%20%22Seattle%22'%0A%20%20%20%20).mark_line(%0A%20%20%20%20%20%20interpolate%3D'monotone'%2C%0A%20%20%20%20%20%20stroke%3D'grey'%0A%20%20%20%20).encode(%0A%20%20%20%20%20%20alt.X('month(date)%3AT'%2C%20title%3DNone)%2C%0A%20%20%20%20%20%20alt.Y('average(precipitation)%3AQ'%2C%20title%3D'Precipitation')%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20To%20facilitate%20comparison%20with%20the%20temperature%20data%2C%20let's%20create%20a%20new%20layered%20chart.%20Here's%20what%20happens%20if%20we%20try%20to%20layer%20the%20charts%20as%20we%20did%20earlier%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20tempMinMax_2%20%3D%20alt.Chart(weather).transform_filter('datum.location%20%3D%3D%20%22Seattle%22').mark_area(opacity%3D0.3).encode(alt.X('month(date)%3AT'%2C%20title%3DNone%2C%20axis%3Dalt.Axis(format%3D'%25b'))%2C%20alt.Y('average(temp_max)%3AQ'%2C%20title%3D'Avg.%20Temperature%20%C2%B0C')%2C%20alt.Y2('average(temp_min)%3AQ'))%0A%20%20%20%20_precip%20%3D%20alt.Chart(weather).transform_filter('datum.location%20%3D%3D%20%22Seattle%22').mark_line(interpolate%3D'monotone'%2C%20stroke%3D'grey').encode(alt.X('month(date)%3AT')%2C%20alt.Y('average(precipitation)%3AQ'%2C%20title%3D'Precipitation'))%0A%20%20%20%20alt.layer(tempMinMax_2%2C%20_precip)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_The%20precipitation%20values%20use%20a%20much%20smaller%20range%20of%20the%20y-axis%20then%20the%20temperatures!_%0A%0A%20%20%20%20By%20default%2C%20layered%20charts%20use%20a%20*shared%20domain*%3A%20the%20values%20for%20the%20x-axis%20or%20y-axis%20are%20combined%20across%20all%20the%20layers%20to%20determine%20a%20shared%20extent.%20This%20default%20behavior%20assumes%20that%20the%20layered%20values%20have%20the%20same%20units.%20However%2C%20this%20doesn't%20hold%20up%20for%20this%20example%2C%20as%20we%20are%20combining%20temperature%20values%20(degrees%20Celsius)%20with%20precipitation%20values%20(inches)!%0A%0A%20%20%20%20If%20we%20want%20to%20use%20different%20y-axis%20scales%2C%20we%20need%20to%20specify%20how%20we%20want%20Altair%20to%20*resolve*%20the%20data%20across%20layers.%20In%20this%20case%2C%20we%20want%20to%20resolve%20the%20y-axis%20%60scale%60%20domains%20to%20be%20%60independent%60%20rather%20than%20use%20a%20%60shared%60%20domain.%20The%20%60Chart%60%20object%20produced%20by%20a%20layer%20operator%20includes%20a%20%60resolve_scale%60%20method%20with%20which%20we%20can%20specify%20the%20desired%20resolution%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20tempMinMax_3%20%3D%20alt.Chart(weather).transform_filter('datum.location%20%3D%3D%20%22Seattle%22').mark_area(opacity%3D0.3).encode(alt.X('month(date)%3AT'%2C%20title%3DNone%2C%20axis%3Dalt.Axis(format%3D'%25b'))%2C%20alt.Y('average(temp_max)%3AQ'%2C%20title%3D'Avg.%20Temperature%20%C2%B0C')%2C%20alt.Y2('average(temp_min)%3AQ'))%0A%20%20%20%20_precip%20%3D%20alt.Chart(weather).transform_filter('datum.location%20%3D%3D%20%22Seattle%22').mark_line(interpolate%3D'monotone'%2C%20stroke%3D'grey').encode(alt.X('month(date)%3AT')%2C%20alt.Y('average(precipitation)%3AQ'%2C%20title%3D'Precipitation'))%0A%20%20%20%20alt.layer(tempMinMax_3%2C%20_precip).resolve_scale(y%3D'independent')%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_We%20can%20now%20see%20that%20autumn%20is%20the%20rainiest%20season%20in%20Seattle%20(peaking%20in%20November)%2C%20complemented%20by%20dry%20summers._%0A%0A%20%20%20%20You%20may%20have%20noticed%20some%20redundancy%20in%20our%20plot%20specifications%20above%3A%20both%20use%20the%20same%20dataset%20and%20the%20same%20filter%20to%20look%20at%20Seattle%20only.%20If%20you%20want%2C%20you%20can%20streamline%20the%20code%20a%20bit%20by%20providing%20the%20data%20and%20filter%20transform%20to%20the%20top-level%20layered%20chart.%20The%20individual%20layers%20will%20then%20inherit%20the%20data%20if%20they%20don't%20have%20their%20own%20data%20definitions%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20tempMinMax_4%20%3D%20alt.Chart().mark_area(opacity%3D0.3).encode(alt.X('month(date)%3AT'%2C%20title%3DNone%2C%20axis%3Dalt.Axis(format%3D'%25b'))%2C%20alt.Y('average(temp_max)%3AQ'%2C%20title%3D'Avg.%20Temperature%20%C2%B0C')%2C%20alt.Y2('average(temp_min)%3AQ'))%0A%20%20%20%20_precip%20%3D%20alt.Chart().mark_line(interpolate%3D'monotone'%2C%20stroke%3D'grey').encode(alt.X('month(date)%3AT')%2C%20alt.Y('average(precipitation)%3AQ'%2C%20title%3D'Precipitation'))%0A%20%20%20%20alt.layer(tempMinMax_4%2C%20_precip%2C%20data%3Dweather).transform_filter('datum.location%20%3D%3D%20%22Seattle%22').resolve_scale(y%3D'independent')%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20While%20dual-axis%20charts%20can%20be%20useful%2C%20_they%20are%20often%20prone%20to%20misinterpretation_%2C%20as%20the%20different%20units%20and%20axis%20scales%20may%20be%20incommensurate.%20As%20is%20feasible%2C%20you%20might%20consider%20transformations%20that%20map%20different%20data%20fields%20to%20shared%20units%2C%20for%20example%20showing%20%5Bquantiles%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FQuantile)%20or%20relative%20percentage%20change.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Facet%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20*Faceting*%20involves%20subdividing%20a%20dataset%20into%20groups%20and%20creating%20a%20separate%20plot%20for%20each%20group.%20In%20earlier%20notebooks%2C%20we%20learned%20how%20to%20create%20faceted%20charts%20using%20the%20%60row%60%20and%20%60column%60%20encoding%20channels.%20We'll%20first%20review%20those%20channels%20and%20then%20show%20how%20they%20are%20instances%20of%20the%20more%20general%20%60facet%60%20operator.%0A%0A%20%20%20%20Let's%20start%20with%20a%20basic%20histogram%20of%20maximum%20temperature%20values%20in%20Seattle%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20alt.Chart(weather).mark_bar().transform_filter(%0A%20%20%20%20%20%20'datum.location%20%3D%3D%20%22Seattle%22'%0A%20%20%20%20).encode(%0A%20%20%20%20%20%20alt.X('temp_max%3AQ'%2C%20bin%3DTrue%2C%20title%3D'Temperature%20(%C2%B0C)')%2C%0A%20%20%20%20%20%20alt.Y('count()%3AQ')%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_How%20does%20this%20temperature%20profile%20change%20based%20on%20the%20weather%20of%20a%20given%20day%20%E2%80%93%20that%20is%2C%20whether%20there%20was%20drizzle%2C%20fog%2C%20rain%2C%20snow%2C%20or%20sun%3F_%0A%0A%20%20%20%20Let's%20use%20the%20%60column%60%20encoding%20channel%20to%20facet%20the%20data%20by%20weather%20type.%20We%20can%20also%20use%20%60color%60%20as%20a%20redundant%20encoding%2C%20using%20a%20customized%20color%20range%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20_colors%20%3D%20alt.Scale(domain%3D%5B'drizzle'%2C%20'fog'%2C%20'rain'%2C%20'snow'%2C%20'sun'%5D%2C%20range%3D%5B'%23aec7e8'%2C%20'%23c7c7c7'%2C%20'%231f77b4'%2C%20'%239467bd'%2C%20'%23e7ba52'%5D)%0A%20%20%20%20alt.Chart(weather).mark_bar().transform_filter('datum.location%20%3D%3D%20%22Seattle%22').encode(alt.X('temp_max%3AQ'%2C%20bin%3DTrue%2C%20title%3D'Temperature%20(%C2%B0C)')%2C%20alt.Y('count()%3AQ')%2C%20alt.Color('weather%3AN'%2C%20scale%3D_colors)%2C%20alt.Column('weather%3AN')).properties(width%3D150%2C%20height%3D150)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_Unsurprisingly%2C%20those%20rare%20snow%20days%20center%20on%20the%20coldest%20temperatures%2C%20followed%20by%20rainy%20and%20foggy%20days.%20Sunny%20days%20are%20warmer%20and%2C%20despite%20Seattle%20stereotypes%2C%20are%20the%20most%20plentiful.%20Though%20as%20any%20Seattleite%20can%20tell%20you%2C%20the%20drizzle%20occasionally%20comes%2C%20no%20matter%20the%20temperature!_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20In%20addition%20to%20%60row%60%20and%20%60column%60%20encoding%20channels%20*within*%20a%20chart%20definition%2C%20we%20can%20take%20a%20basic%20chart%20definition%20and%20apply%20faceting%20using%20an%20explicit%20%60facet%60%20operator.%0A%0A%20%20%20%20Let's%20recreate%20the%20chart%20above%2C%20but%20this%20time%20using%20%60facet%60.%20We%20start%20with%20the%20same%20basic%20histogram%20definition%2C%20but%20remove%20the%20data%20source%2C%20filter%20transform%2C%20and%20column%20channel.%20We%20can%20then%20invoke%20the%20%60facet%60%20method%2C%20passing%20in%20the%20data%20and%20specifying%20that%20we%20should%20facet%20into%20columns%20according%20to%20the%20%60weather%60%20field.%20The%20%60facet%60%20method%20accepts%20both%20%60row%60%20and%20%60column%60%20arguments.%20The%20two%20can%20be%20used%20together%20to%20create%20a%202D%20grid%20of%20faceted%20plots.%0A%0A%20%20%20%20Finally%20we%20include%20our%20filter%20transform%2C%20applying%20it%20to%20the%20top-level%20faceted%20chart.%20While%20we%20could%20apply%20the%20filter%20transform%20to%20the%20histogram%20definition%20as%20before%2C%20that%20is%20slightly%20less%20efficient.%20Rather%20than%20filter%20out%20%22New%20York%22%20values%20within%20each%20facet%20cell%2C%20applying%20the%20filter%20to%20the%20faceted%20chart%20lets%20Vega-Lite%20know%20that%20we%20can%20filter%20out%20those%20values%20up%20front%2C%20prior%20to%20the%20facet%20subdivision.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20_colors%20%3D%20alt.Scale(domain%3D%5B'drizzle'%2C%20'fog'%2C%20'rain'%2C%20'snow'%2C%20'sun'%5D%2C%20range%3D%5B'%23aec7e8'%2C%20'%23c7c7c7'%2C%20'%231f77b4'%2C%20'%239467bd'%2C%20'%23e7ba52'%5D)%0A%20%20%20%20alt.Chart().mark_bar().encode(alt.X('temp_max%3AQ'%2C%20bin%3DTrue%2C%20title%3D'Temperature%20(%C2%B0C)')%2C%20alt.Y('count()%3AQ')%2C%20alt.Color('weather%3AN'%2C%20scale%3D_colors)).properties(width%3D150%2C%20height%3D150).facet(data%3Dweather%2C%20column%3D'weather%3AN').transform_filter('datum.location%20%3D%3D%20%22Seattle%22')%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Given%20all%20the%20extra%20code%20above%2C%20why%20would%20we%20want%20to%20use%20an%20explicit%20%60facet%60%20operator%3F%20For%20basic%20charts%2C%20we%20should%20certainly%20use%20the%20%60column%60%20or%20%60row%60%20encoding%20channels%20if%20we%20can.%20However%2C%20using%20the%20%60facet%60%20operator%20explicitly%20is%20useful%20if%20we%20want%20to%20facet%20composed%20views%2C%20such%20as%20layered%20charts.%0A%0A%20%20%20%20Let's%20revisit%20our%20layered%20temperature%20plots%20from%20earlier.%20Instead%20of%20plotting%20data%20for%20New%20York%20and%20Seattle%20in%20the%20same%20plot%2C%20let's%20break%20them%20up%20into%20separate%20facets.%20The%20individual%20chart%20definitions%20are%20nearly%20the%20same%20as%20before%3A%20one%20area%20chart%20and%20one%20line%20chart.%20The%20only%20difference%20is%20that%20this%20time%20we%20won't%20pass%20the%20data%20directly%20to%20the%20chart%20constructors%3B%20we'll%20wait%20and%20pass%20it%20to%20the%20facet%20operator%20later.%20We%20can%20layer%20the%20charts%20much%20as%20before%2C%20then%20invoke%20%60facet%60%20on%20the%20layered%20chart%20object%2C%20passing%20in%20the%20data%20and%20specifying%20%60column%60%20facets%20based%20on%20the%20%60location%60%20field%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20tempMinMax_5%20%3D%20alt.Chart().mark_area(opacity%3D0.3).encode(alt.X('month(date)%3AT'%2C%20title%3DNone%2C%20axis%3Dalt.Axis(format%3D'%25b'))%2C%20alt.Y('average(temp_max)%3AQ'%2C%20title%3D'Avg.%20Temperature%20(%C2%B0C)')%2C%20alt.Y2('average(temp_min)%3AQ')%2C%20alt.Color('location%3AN'))%0A%20%20%20%20tempMid_2%20%3D%20alt.Chart().mark_line().transform_calculate(temp_mid%3D'(%2Bdatum.temp_min%20%2B%20%2Bdatum.temp_max)%20%2F%202').encode(alt.X('month(date)%3AT')%2C%20alt.Y('average(temp_mid)%3AQ')%2C%20alt.Color('location%3AN'))%0A%20%20%20%20alt.layer(tempMinMax_5%2C%20tempMid_2).facet(data%3Dweather%2C%20column%3D'location%3AN')%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20The%20faceted%20charts%20we%20have%20seen%20so%20far%20use%20the%20same%20axis%20scale%20domains%20across%20the%20facet%20cells.%20This%20default%20of%20using%20*shared*%20scales%20and%20axes%20helps%20aid%20accurate%20comparison%20of%20values.%20However%2C%20in%20some%20cases%20you%20may%20wish%20to%20scale%20each%20chart%20independently%2C%20for%20example%20if%20the%20range%20of%20values%20in%20the%20cells%20differs%20significantly.%0A%0A%20%20%20%20Similar%20to%20layered%20charts%2C%20faceted%20charts%20also%20support%20_resolving_%20to%20independent%20scales%20or%20axes%20across%20plots.%20Let's%20see%20what%20happens%20if%20we%20call%20the%20%60resolve_axis%60%20method%20to%20request%20%60independent%60%20y-axes%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20tempMinMax_6%20%3D%20alt.Chart().mark_area(opacity%3D0.3).encode(alt.X('month(date)%3AT'%2C%20title%3DNone%2C%20axis%3Dalt.Axis(format%3D'%25b'))%2C%20alt.Y('average(temp_max)%3AQ'%2C%20title%3D'Avg.%20Temperature%20(%C2%B0C)')%2C%20alt.Y2('average(temp_min)%3AQ')%2C%20alt.Color('location%3AN'))%0A%20%20%20%20tempMid_3%20%3D%20alt.Chart().mark_line().transform_calculate(temp_mid%3D'(%2Bdatum.temp_min%20%2B%20%2Bdatum.temp_max)%20%2F%202').encode(alt.X('month(date)%3AT')%2C%20alt.Y('average(temp_mid)%3AQ')%2C%20alt.Color('location%3AN'))%0A%20%20%20%20alt.layer(tempMinMax_6%2C%20tempMid_3).facet(data%3Dweather%2C%20column%3D'location%3AN').resolve_axis(y%3D'independent')%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_The%20chart%20above%20looks%20largely%20unchanged%2C%20but%20the%20plot%20for%20Seattle%20now%20includes%20its%20own%20axis._%0A%0A%20%20%20%20What%20if%20we%20instead%20call%20%60resolve_scale%60%20to%20resolve%20the%20underlying%20scale%20domains%3F%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20tempMinMax_7%20%3D%20alt.Chart().mark_area(opacity%3D0.3).encode(alt.X('month(date)%3AT'%2C%20title%3DNone%2C%20axis%3Dalt.Axis(format%3D'%25b'))%2C%20alt.Y('average(temp_max)%3AQ'%2C%20title%3D'Avg.%20Temperature%20(%C2%B0C)')%2C%20alt.Y2('average(temp_min)%3AQ')%2C%20alt.Color('location%3AN'))%0A%20%20%20%20tempMid_4%20%3D%20alt.Chart().mark_line().transform_calculate(temp_mid%3D'(%2Bdatum.temp_min%20%2B%20%2Bdatum.temp_max)%20%2F%202').encode(alt.X('month(date)%3AT')%2C%20alt.Y('average(temp_mid)%3AQ')%2C%20alt.Color('location%3AN'))%0A%20%20%20%20alt.layer(tempMinMax_7%2C%20tempMid_4).facet(data%3Dweather%2C%20column%3D'location%3AN').resolve_scale(y%3D'independent')%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_Now%20we%20see%20facet%20cells%20with%20different%20axis%20scale%20domains.%20In%20this%20case%2C%20using%20independent%20scales%20seems%20like%20a%20bad%20idea!%20The%20domains%20aren't%20very%20different%2C%20and%20one%20might%20be%20fooled%20into%20thinking%20that%20New%20York%20and%20Seattle%20have%20similar%20maximum%20summer%20temperatures._%0A%0A%20%20%20%20To%20borrow%20a%20clich%C3%A9%3A%20just%20because%20you%20*can*%20do%20something%2C%20doesn't%20mean%20you%20*should*...%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Concatenate%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Faceting%20creates%20%5Bsmall%20multiple%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSmall_multiple)%20plots%20that%20show%20separate%20subdivisions%20of%20the%20data.%20However%2C%20we%20might%20wish%20to%20create%20a%20multi-view%20display%20with%20different%20views%20of%20the%20*same*%20dataset%20(not%20subsets)%20or%20views%20involving%20*different*%20datasets.%0A%0A%20%20%20%20Altair%20provides%20*concatenation*%20operators%20to%20combine%20arbitrary%20charts%20into%20a%20composed%20chart.%20The%20%60hconcat%60%20operator%20(shorthand%20%60%7C%60%20)%20performs%20horizontal%20concatenation%2C%20while%20the%20%60vconcat%60%20operator%20(shorthand%20%60%26%60)%20performs%20vertical%20concatenation.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Let's%20start%20with%20a%20basic%20line%20chart%20showing%20the%20average%20maximum%20temperature%20per%20month%20for%20both%20New%20York%20and%20Seattle%2C%20much%20like%20we've%20seen%20before%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20alt.Chart(weather).mark_line().encode(%0A%20%20%20%20%20%20alt.X('month(date)%3AT'%2C%20title%3DNone)%2C%0A%20%20%20%20%20%20alt.Y('average(temp_max)%3AQ')%2C%0A%20%20%20%20%20%20color%3D'location%3AN'%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_What%20if%20we%20want%20to%20compare%20not%20just%20temperature%20over%20time%2C%20but%20also%20precipitation%20and%20wind%20levels%3F_%0A%0A%20%20%20%20Let's%20create%20a%20concatenated%20chart%20consisting%20of%20three%20plots.%20We'll%20start%20by%20defining%20a%20%22base%22%20chart%20definition%20that%20contains%20all%20the%20aspects%20that%20should%20be%20shared%20by%20our%20three%20plots.%20We%20can%20then%20modify%20this%20base%20chart%20to%20create%20customized%20variants%2C%20with%20different%20y-axis%20encodings%20for%20the%20%60temp_max%60%2C%20%60precipitation%60%2C%20and%20%60wind%60%20fields.%20We%20can%20then%20concatenate%20them%20using%20the%20pipe%20(%60%7C%60)%20shorthand%20operator%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20base%20%3D%20alt.Chart(weather).mark_line().encode(alt.X('month(date)%3AT'%2C%20title%3DNone)%2C%20color%3D'location%3AN').properties(width%3D240%2C%20height%3D180)%0A%20%20%20%20temp%20%3D%20base.encode(alt.Y('average(temp_max)%3AQ'))%0A%20%20%20%20_precip%20%3D%20base.encode(alt.Y('average(precipitation)%3AQ'))%0A%20%20%20%20wind%20%3D%20base.encode(alt.Y('average(wind)%3AQ'))%0A%20%20%20%20temp%20%7C%20_precip%20%7C%20wind%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Alternatively%2C%20we%20could%20use%20the%20more%20explicit%20%60alt.hconcat()%60%20method%20in%20lieu%20of%20the%20pipe%20%60%7C%60%20operator.%20_Try%20rewriting%20the%20code%20above%20to%20use%20%60hconcat%60%20instead._%0A%0A%20%20%20%20Vertical%20concatenation%20works%20similarly%20to%20horizontal%20concatenation.%20_Using%20the%20%60%26%60%20operator%20(or%20%60alt.vconcat%60%20method)%2C%20modify%20the%20code%20to%20use%20a%20vertical%20ordering%20instead%20of%20a%20horizontal%20ordering._%0A%0A%20%20%20%20Finally%2C%20note%20that%20horizontal%20and%20vertical%20concatenation%20can%20be%20combined.%20_What%20happens%20if%20you%20write%20something%20like%20%60(temp%20%7C%20precip)%20%26%20wind%60%3F_%0A%0A%20%20%20%20_Aside_%3A%20Note%20the%20importance%20of%20those%20parentheses...%20what%20happens%20if%20you%20remove%20them%3F%20Keep%20in%20mind%20that%20these%20overloaded%20operators%20are%20still%20subject%20to%20%5BPython's%20operator%20precendence%20rules%5D(https%3A%2F%2Fdocs.python.org%2F3%2Freference%2Fexpressions.html%23operator-precedence)%2C%20and%20so%20vertical%20concatenation%20with%20%60%26%60%20will%20take%20precedence%20over%20horizontal%20concatenation%20with%20%60%7C%60!%0A%0A%20%20%20%20As%20we%20will%20revisit%20later%2C%20concatenation%20operators%20let%20you%20combine%20any%20and%20all%20charts%20into%20a%20multi-view%20dashboard!%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Repeat%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20The%20concatenation%20operators%20above%20are%20quite%20general%2C%20allowing%20arbitrary%20charts%20to%20be%20composed.%20Nevertheless%2C%20the%20example%20above%20was%20still%20a%20bit%20verbose%3A%20we%20have%20three%20very%20similar%20charts%2C%20yet%20have%20to%20define%20them%20separately%20and%20then%20concatenate%20them.%0A%0A%20%20%20%20For%20cases%20where%20only%20one%20or%20two%20variables%20are%20changing%2C%20the%20%60repeat%60%20operator%20provides%20a%20convenient%20shortcut%20for%20creating%20multiple%20charts.%20Given%20a%20*template*%20specification%20with%20some%20free%20variables%2C%20the%20repeat%20operator%20will%20then%20create%20a%20chart%20for%20each%20specified%20assignment%20to%20those%20variables.%0A%0A%20%20%20%20Let's%20recreate%20our%20concatenation%20example%20above%20using%20the%20%60repeat%60%20operator.%20The%20only%20aspect%20that%20changes%20across%20charts%20is%20the%20choice%20of%20data%20field%20for%20the%20%60y%60%20encoding%20channel.%20To%20create%20a%20template%20specification%2C%20we%20can%20use%20the%20*repeater%20variable*%20%60alt.repeat('column')%60%20as%20our%20y-axis%20field.%20This%20code%20simply%20states%20that%20we%20want%20to%20use%20the%20variable%20assigned%20to%20the%20%60column%60%20repeater%2C%20which%20organizes%20repeated%20charts%20in%20a%20horizontal%20direction.%20(As%20the%20repeater%20provides%20the%20field%20name%20only%2C%20we%20have%20to%20specify%20the%20field%20data%20type%20separately%20as%20%60type%3D'quantitative'%60.)%0A%0A%20%20%20%20We%20then%20invoke%20the%20%60repeat%60%20method%2C%20passing%20in%20data%20field%20names%20for%20each%20column%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20alt.Chart(weather).mark_line().encode(%0A%20%20%20%20%20%20alt.X('month(date)%3AT'%2Ctitle%3DNone)%2C%0A%20%20%20%20%20%20alt.Y(alt.repeat('column')%2C%20aggregate%3D'average'%2C%20type%3D'quantitative')%2C%0A%20%20%20%20%20%20color%3D'location%3AN'%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20width%3D240%2C%0A%20%20%20%20%20%20height%3D180%0A%20%20%20%20).repeat(%0A%20%20%20%20%20%20column%3D%5B'temp_max'%2C%20'precipitation'%2C%20'wind'%5D%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Repetition%20is%20supported%20for%20both%20columns%20and%20rows.%20_What%20happens%20if%20you%20modify%20the%20code%20above%20to%20use%20%60row%60%20instead%20of%20%60column%60%3F_%0A%0A%20%20%20%20We%20can%20also%20use%20%60row%60%20and%20%60column%60%20repetition%20together!%20One%20common%20visualization%20for%20exploratory%20data%20analysis%20is%20the%20%5Bscatter%20plot%20matrix%20(or%20SPLOM)%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FScatter_plot%23Scatterplot_matrices).%20Given%20a%20collection%20of%20variables%20to%20inspect%2C%20a%20SPLOM%20provides%20a%20grid%20of%20all%20pairwise%20plots%20of%20those%20variables%2C%20allowing%20us%20to%20assess%20potential%20associations.%0A%0A%20%20%20%20Let's%20use%20the%20%60repeat%60%20operator%20to%20create%20a%20SPLOM%20for%20the%20%60temp_max%60%2C%20%60precipitation%60%2C%20and%20%60wind%60%20fields.%20We%20first%20create%20our%20template%20specification%2C%20with%20repeater%20variables%20for%20both%20the%20x-%20and%20y-axis%20data%20fields.%20We%20then%20invoke%20%60repeat%60%2C%20passing%20in%20arrays%20of%20field%20names%20to%20use%20for%20both%20%60row%60%20and%20%60column%60.%20Altair%20will%20then%20generate%20the%20%5Bcross%20product%20(or%2C%20Cartesian%20product)%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FCartesian_product)%20to%20create%20the%20full%20space%20of%20repeated%20charts%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20alt.Chart().mark_point(filled%3DTrue%2C%20size%3D15%2C%20opacity%3D0.5).encode(%0A%20%20%20%20%20%20alt.X(alt.repeat('column')%2C%20type%3D'quantitative')%2C%0A%20%20%20%20%20%20alt.Y(alt.repeat('row')%2C%20type%3D'quantitative')%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20width%3D150%2C%0A%20%20%20%20%20%20height%3D150%0A%20%20%20%20).repeat(%0A%20%20%20%20%20%20data%3Dweather%2C%0A%20%20%20%20%20%20row%3D%5B'temp_max'%2C%20'precipitation'%2C%20'wind'%5D%2C%0A%20%20%20%20%20%20column%3D%5B'wind'%2C%20'precipitation'%2C%20'temp_max'%5D%0A%20%20%20%20).transform_filter(%0A%20%20%20%20%20%20'datum.location%20%3D%3D%20%22Seattle%22'%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20_Looking%20at%20these%20plots%2C%20there%20does%20not%20appear%20to%20be%20a%20strong%20association%20between%20precipitation%20and%20wind%2C%20though%20we%20do%20see%20that%20extreme%20wind%20and%20precipitation%20events%20occur%20in%20similar%20temperature%20ranges%20(~5-15%C2%B0%20C).%20However%2C%20this%20observation%20is%20not%20particularly%20surprising%3A%20if%20we%20revisit%20our%20histogram%20at%20the%20beginning%20of%20the%20facet%20section%2C%20we%20can%20plainly%20see%20that%20the%20days%20with%20maximum%20temperatures%20in%20the%20range%20of%205-15%C2%B0%20C%20are%20the%20most%20commonly%20occurring._%0A%0A%20%20%20%20*Modify%20the%20code%20above%20to%20get%20a%20better%20understanding%20of%20chart%20repetition.%20Try%20adding%20another%20variable%20(%60temp_min%60)%20to%20the%20SPLOM.%20What%20happens%20if%20you%20rearrange%20the%20order%20of%20the%20field%20names%20in%20either%20the%20%60row%60%20or%20%60column%60%20parameters%20for%20the%20%60repeat%60%20operator%3F*%0A%0A%20%20%20%20_Finally%2C%20to%20really%20appreciate%20what%20the%20%60repeat%60%20operator%20provides%2C%20take%20a%20moment%20to%20imagine%20how%20you%20might%20recreate%20the%20SPLOM%20above%20using%20only%20%60hconcat%60%20and%20%60vconcat%60!_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20A%20View%20Composition%20Algebra%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Together%2C%20the%20composition%20operators%20%60layer%60%2C%20%60facet%60%2C%20%60concat%60%2C%20and%20%60repeat%60%20form%20a%20*view%20composition%20algebra*%3A%20the%20various%20operators%20can%20be%20combined%20to%20construct%20a%20variety%20of%20multi-view%20visualizations.%0A%0A%20%20%20%20As%20an%20example%2C%20let's%20start%20with%20two%20basic%20charts%3A%20a%20histogram%20and%20a%20simple%20line%20(a%20single%20%60rule%60%20mark)%20showing%20a%20global%20average.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20basic1%20%3D%20alt.Chart(weather).transform_filter(%0A%20%20%20%20%20%20'datum.location%20%3D%3D%20%22Seattle%22'%0A%20%20%20%20).mark_bar().encode(%0A%20%20%20%20%20%20alt.X('month(date)%3AO')%2C%0A%20%20%20%20%20%20alt.Y('average(temp_max)%3AQ')%0A%20%20%20%20)%0A%0A%20%20%20%20basic2%20%3D%20alt.Chart(weather).transform_filter(%0A%20%20%20%20%20%20'datum.location%20%3D%3D%20%22Seattle%22'%0A%20%20%20%20).mark_rule(stroke%3D'firebrick').encode(%0A%20%20%20%20%20%20alt.Y('average(temp_max)%3AQ')%0A%20%20%20%20)%0A%0A%20%20%20%20basic1%20%7C%20basic2%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20We%20can%20then%20combine%20the%20two%20charts%20using%20a%20%60layer%60%20operator%2C%20and%20then%20%60repeat%60%20that%20layered%20chart%20to%20show%20histograms%20with%20overlaid%20averages%20for%20multiple%20fields%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20alt.layer(%0A%20%20%20%20%20%20alt.Chart().mark_bar().encode(%0A%20%20%20%20%20%20%20%20alt.X('month(date)%3AO'%2C%20title%3D'Month')%2C%0A%20%20%20%20%20%20%20%20alt.Y(alt.repeat('column')%2C%20aggregate%3D'average'%2C%20type%3D'quantitative')%0A%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20alt.Chart().mark_rule(stroke%3D'firebrick').encode(%0A%20%20%20%20%20%20%20%20alt.Y(alt.repeat('column')%2C%20aggregate%3D'average'%2C%20type%3D'quantitative')%0A%20%20%20%20%20%20)%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20width%3D200%2C%0A%20%20%20%20%20%20height%3D150%0A%20%20%20%20).repeat(%0A%20%20%20%20%20%20data%3Dweather%2C%0A%20%20%20%20%20%20column%3D%5B'temp_max'%2C%20'precipitation'%2C%20'wind'%5D%0A%20%20%20%20).transform_filter(%0A%20%20%20%20%20%20'datum.location%20%3D%3D%20%22Seattle%22'%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Focusing%20only%20on%20the%20multi-view%20composition%20operators%2C%20the%20model%20for%20the%20visualization%20above%20is%3A%0A%0A%20%20%20%20%60%60%60%0A%20%20%20%20repeat(column%3D%5B...%5D)%0A%20%20%20%20%7C-%20layer%0A%20%20%20%20%20%20%20%7C-%20basic1%0A%20%20%20%20%20%20%20%7C-%20basic2%0A%20%20%20%20%60%60%60%0A%0A%20%20%20%20Now%20let's%20explore%20how%20we%20can%20apply%20*all*%20the%20operators%20within%20a%20final%20%5Bdashboard%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDashboard_%2528business%2529)%20that%20provides%20an%20overview%20of%20Seattle%20weather.%20We'll%20combine%20the%20SPLOM%20and%20faceted%20histogram%20displays%20from%20earlier%20sections%20with%20the%20repeated%20histograms%20above%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20weather)%3A%0A%20%20%20%20splom%20%3D%20alt.Chart().mark_point(filled%3DTrue%2C%20size%3D15%2C%20opacity%3D0.5).encode(%0A%20%20%20%20%20%20alt.X(alt.repeat('column')%2C%20type%3D'quantitative')%2C%0A%20%20%20%20%20%20alt.Y(alt.repeat('row')%2C%20type%3D'quantitative')%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20width%3D125%2C%0A%20%20%20%20%20%20height%3D125%0A%20%20%20%20).repeat(%0A%20%20%20%20%20%20row%3D%5B'temp_max'%2C%20'precipitation'%2C%20'wind'%5D%2C%0A%20%20%20%20%20%20column%3D%5B'wind'%2C%20'precipitation'%2C%20'temp_max'%5D%0A%20%20%20%20)%0A%0A%20%20%20%20dateHist%20%3D%20alt.layer(%0A%20%20%20%20%20%20alt.Chart().mark_bar().encode(%0A%20%20%20%20%20%20%20%20alt.X('month(date)%3AO'%2C%20title%3D'Month')%2C%0A%20%20%20%20%20%20%20%20alt.Y(alt.repeat('row')%2C%20aggregate%3D'average'%2C%20type%3D'quantitative')%0A%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20alt.Chart().mark_rule(stroke%3D'firebrick').encode(%0A%20%20%20%20%20%20%20%20alt.Y(alt.repeat('row')%2C%20aggregate%3D'average'%2C%20type%3D'quantitative')%0A%20%20%20%20%20%20)%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20width%3D175%2C%0A%20%20%20%20%20%20height%3D125%0A%20%20%20%20).repeat(%0A%20%20%20%20%20%20row%3D%5B'temp_max'%2C%20'precipitation'%2C%20'wind'%5D%0A%20%20%20%20)%0A%0A%20%20%20%20tempHist%20%3D%20alt.Chart(weather).mark_bar().encode(%0A%20%20%20%20%20%20alt.X('temp_max%3AQ'%2C%20bin%3DTrue%2C%20title%3D'Temperature%20(%C2%B0C)')%2C%0A%20%20%20%20%20%20alt.Y('count()%3AQ')%2C%0A%20%20%20%20%20%20alt.Color('weather%3AN'%2C%20scale%3Dalt.Scale(%0A%20%20%20%20%20%20%20%20domain%3D%5B'drizzle'%2C%20'fog'%2C%20'rain'%2C%20'snow'%2C%20'sun'%5D%2C%0A%20%20%20%20%20%20%20%20range%3D%5B'%23aec7e8'%2C%20'%23c7c7c7'%2C%20'%231f77b4'%2C%20'%239467bd'%2C%20'%23e7ba52'%5D%0A%20%20%20%20%20%20))%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20width%3D115%2C%0A%20%20%20%20%20%20height%3D100%0A%20%20%20%20).facet(%0A%20%20%20%20%20%20column%3D'weather%3AN'%0A%20%20%20%20)%0A%0A%20%20%20%20alt.vconcat(%0A%20%20%20%20%20%20alt.hconcat(splom%2C%20dateHist)%2C%0A%20%20%20%20%20%20tempHist%2C%0A%20%20%20%20%20%20data%3Dweather%2C%0A%20%20%20%20%20%20title%3D'Seattle%20Weather%20Dashboard'%0A%20%20%20%20).transform_filter(%0A%20%20%20%20%20%20'datum.location%20%3D%3D%20%22Seattle%22'%0A%20%20%20%20).resolve_legend(%0A%20%20%20%20%20%20color%3D'independent'%0A%20%20%20%20).configure_axis(%0A%20%20%20%20%20%20labelAngle%3D0%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20The%20full%20composition%20model%20for%20this%20dashboard%20is%3A%0A%0A%20%20%20%20%60%60%60%0A%20%20%20%20vconcat%0A%20%20%20%20%7C-%20hconcat%0A%20%20%20%20%7C%20%20%7C-%20repeat(row%3D%5B...%5D%2C%20column%3D%5B...%5D)%0A%20%20%20%20%7C%20%20%7C%20%20%7C-%20splom%20base%20chart%0A%20%20%20%20%7C%20%20%7C-%20repeat(row%3D%5B...%5D)%0A%20%20%20%20%7C%20%20%20%20%20%7C-%20layer%0A%20%20%20%20%7C%20%20%20%20%20%20%20%20%7C-%20dateHist%20base%20chart%201%0A%20%20%20%20%7C%20%20%20%20%20%20%20%20%7C-%20dateHist%20base%20chart%202%0A%20%20%20%20%7C-%20facet(column%3D'weather')%0A%20%20%20%20%20%20%20%7C-%20tempHist%20base%20chart%0A%20%20%20%20%60%60%60%0A%0A%20%20%20%20_Phew!_%20The%20dashboard%20also%20includes%20a%20few%20customizations%20to%20improve%20the%20layout%3A%0A%0A%20%20%20%20-%20We%20adjust%20chart%20%60width%60%20and%20%60height%60%20properties%20to%20assist%20alignment%20and%20ensure%20the%20full%20visualization%20fits%20on%20the%20screen.%0A%20%20%20%20-%20We%20add%20%60resolve_legend(color%3D'independent')%60%20to%20ensure%20the%20color%20legend%20is%20associated%20directly%20with%20the%20colored%20histograms%20by%20temperature.%20Otherwise%2C%20the%20legend%20will%20resolve%20to%20the%20dashboard%20as%20a%20whole.%0A%20%20%20%20-%20We%20use%20%60configure_axis(labelAngle%3D0)%60%20to%20ensure%20that%20no%20axis%20labels%20are%20rotated.%20This%20helps%20to%20ensure%20proper%20alignment%20among%20the%20scatter%20plots%20in%20the%20SPLOM%20and%20the%20histograms%20by%20month%20on%20the%20right.%0A%0A%20%20%20%20_Try%20removing%20or%20modifying%20any%20of%20these%20adjustments%20and%20see%20how%20the%20dashboard%20layout%20responds!_%0A%0A%20%20%20%20This%20dashboard%20can%20be%20reused%20to%20show%20data%20for%20other%20locations%20or%20from%20other%20datasets.%20_Update%20the%20dashboard%20to%20show%20weather%20patterns%20for%20New%20York%20instead%20of%20Seattle._%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Summary%0A%0A%20%20%20%20For%20more%20details%20on%20multi-view%20composition%2C%20including%20control%20over%20sub-plot%20spacing%20and%20header%20labels%2C%20see%20the%20%5BAltair%20Compound%20Charts%20documentation%5D(https%3A%2F%2Faltair-viz.github.io%2Fuser_guide%2Fcompound_charts.html).%0A%0A%20%20%20%20Now%20that%20we've%20seen%20how%20to%20compose%20multiple%20views%2C%20we're%20ready%20to%20put%20them%20into%20action.%20In%20addition%20to%20statically%20presenting%20data%2C%20multiple%20views%20can%20enable%20interactive%20multi-dimensional%20exploration.%20For%20example%2C%20using%20_linked%20selections_%20we%20can%20highlight%20points%20in%20one%20view%20to%20see%20corresponding%20values%20highlight%20in%20other%20views.%0A%0A%20%20%20%20In%20the%20next%20notebook%2C%20we'll%20examine%20how%20to%20author%20*interactive%20selections*%20for%20both%20individual%20plots%20and%20multi-view%20compositions.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A