02 marks encoding

%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%20%20%20%20%22vega_datasets%3D%3D0.9.0%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%20Data%20Types%2C%20Graphical%20Marks%2C%20and%20Visual%20Encoding%20Channels%0A%0A%20%20%20%20A%20visualization%20represents%20data%20using%20a%20collection%20of%20_graphical%20marks_%20(bars%2C%20lines%2C%20points%2C%20etc.).%20The%20attributes%20of%20a%20mark%20%26mdash%3B%20such%20as%20its%20position%2C%20shape%2C%20size%2C%20or%20color%20%26mdash%3B%20serve%20as%20_channels_%20through%20which%20we%20can%20encode%20underlying%20data%20values.%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%20With%20a%20basic%20framework%20of%20_data%20types_%2C%20_marks_%2C%20and%20_encoding%20channels_%2C%20we%20can%20concisely%20create%20a%20wide%20variety%20of%20visualizations.%20In%20this%20notebook%2C%20we%20explore%20each%20of%20these%20elements%20and%20show%20how%20to%20use%20them%20to%20create%20custom%20statistical%20graphics.%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%20(alt%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%23%20Global%20Development%20Data%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%20We%20will%20be%20visualizing%20global%20health%20and%20population%20data%20for%20a%20number%20of%20countries%2C%20over%20the%20time%20period%20of%201955%20to%202005.%20The%20data%20was%20collected%20by%20the%20%5BGapminder%20Foundation%5D(https%3A%2F%2Fwww.gapminder.org%2F)%20and%20shared%20in%20%5BHans%20Rosling's%20popular%20TED%20talk%5D(https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DhVimVzgtD6w).%20If%20you%20haven't%20seen%20the%20talk%2C%20we%20encourage%20you%20to%20watch%20it%20first!%0A%0A%20%20%20%20Let's%20first%20load%20the%20dataset%20from%20the%20%5Bvega-datasets%5D(https%3A%2F%2Fgithub.com%2Fvega%2Fvega-datasets)%20collection%20into%20a%20Pandas%20data%20frame.%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%20from%20vega_datasets%20import%20data%20as%20vega_data%0A%20%20%20%20data%20%3D%20vega_data.gapminder()%0A%20%20%20%20return%20(data%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%20How%20big%20is%20the%20data%3F%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(data)%3A%0A%20%20%20%20data.shape%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%20693%20rows%20and%206%20columns!%20Let's%20take%20a%20peek%20at%20the%20data%20content%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(data)%3A%0A%20%20%20%20data.head(5)%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%20For%20each%20%60country%60%20and%20%60year%60%20(in%205-year%20intervals)%2C%20we%20have%20measures%20of%20fertility%20in%20terms%20of%20the%20number%20of%20children%20per%20woman%20(%60fertility%60)%2C%20life%20expectancy%20in%20years%20(%60life_expect%60)%2C%20and%20total%20population%20(%60pop%60).%0A%0A%20%20%20%20We%20also%20see%20a%20%60cluster%60%20field%20with%20an%20integer%20code.%20What%20might%20this%20represent%3F%20We'll%20try%20and%20solve%20this%20mystery%20as%20we%20visualize%20the%20data!%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%20also%20create%20a%20smaller%20data%20frame%2C%20filtered%20down%20to%20values%20for%20the%20year%202000%20only%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(data)%3A%0A%20%20%20%20data2000%20%3D%20data.loc%5Bdata%5B'year'%5D%20%3D%3D%202000%5D%0A%20%20%20%20return%20(data2000%2C)%0A%0A%0A%40app.cell%0Adef%20_(data2000)%3A%0A%20%20%20%20data2000.head(5)%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%20Data%20Types%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%20first%20ingredient%20in%20effective%20visualization%20is%20the%20input%20data.%20Data%20values%20can%20represent%20different%20forms%20of%20measurement.%20What%20kinds%20of%20comparisons%20do%20those%20measurements%20support%3F%20And%20what%20kinds%20of%20visual%20encodings%20then%20support%20those%20comparisons%3F%0A%0A%20%20%20%20We%20will%20start%20by%20looking%20at%20the%20basic%20data%20types%20that%20Altair%20uses%20to%20inform%20visual%20encoding%20choices.%20These%20data%20types%20determine%20the%20kinds%20of%20comparisons%20we%20can%20make%2C%20and%20thereby%20guide%20our%20visualization%20design%20decisions.%0A%0A%20%20%20%20%23%23%23%20Nominal%20(N)%0A%0A%20%20%20%20*Nominal*%20data%20(also%20called%20*categorical*%20data)%20consist%20of%20category%20names.%0A%0A%20%20%20%20With%20nominal%20data%20we%20can%20compare%20the%20equality%20of%20values%3A%20*is%20value%20A%20the%20same%20or%20different%20than%20value%20B%3F%20(A%20%3D%20B)*%2C%20supporting%20statements%20like%20%E2%80%9CA%20is%20equal%20to%20B%E2%80%9D%20or%20%E2%80%9CA%20is%20not%20equal%20to%20B%E2%80%9D.%0A%20%20%20%20In%20the%20dataset%20above%2C%20the%20%60country%60%20field%20is%20nominal.%0A%0A%20%20%20%20When%20visualizing%20nominal%20data%20we%20should%20readily%20be%20able%20to%20see%20if%20values%20are%20the%20same%20or%20different%3A%20position%2C%20color%20hue%20(blue%2C%20red%2C%20green%2C%20*etc.*)%2C%20and%20shape%20can%20help.%20However%2C%20using%20a%20size%20channel%20to%20encode%20nominal%20data%20might%20mislead%20us%2C%20suggesting%20rank-order%20or%20magnitude%20differences%20among%20values%20that%20do%20not%20exist!%0A%0A%20%20%20%20%23%23%23%20Ordinal%20(O)%0A%0A%20%20%20%20*Ordinal*%20data%20consist%20of%20values%20that%20have%20a%20specific%20ordering.%0A%0A%20%20%20%20With%20ordinal%20data%20we%20can%20compare%20the%20rank-ordering%20of%20values%3A%20*does%20value%20A%20come%20before%20or%20after%20value%20B%3F%20(A%20%3C%20B)*%2C%20supporting%20statements%20like%20%E2%80%9CA%20is%20less%20than%20B%E2%80%9D%20or%20%E2%80%9CA%20is%20greater%20than%20B%E2%80%9D.%0A%20%20%20%20In%20the%20dataset%20above%2C%20we%20can%20treat%20the%20%60year%60%20field%20as%20ordinal.%0A%0A%20%20%20%20When%20visualizing%20ordinal%20data%2C%20we%20should%20perceive%20a%20sense%20of%20rank-order.%20Position%2C%20size%2C%20or%20color%20value%20(brightness)%20might%20be%20appropriate%2C%20where%20as%20color%20hue%20(which%20is%20not%20perceptually%20ordered)%20would%20be%20less%20appropriate.%0A%0A%20%20%20%20%23%23%23%20Quantitative%20(Q)%0A%0A%20%20%20%20With%20*quantitative*%20data%20we%20can%20measure%20numerical%20differences%20among%20values.%20There%20are%20multiple%20sub-types%20of%20quantitative%20data%3A%0A%0A%20%20%20%20For%20*interval*%20data%20we%20can%20measure%20the%20distance%20(interval)%20between%20points%3A%20*what%20is%20the%20distance%20to%20value%20A%20from%20value%20B%3F%20(A%20-%20B)*%2C%20supporting%20statements%20such%20as%20%E2%80%9CA%20is%2012%20units%20away%20from%20B%E2%80%9D.%0A%0A%20%20%20%20For%20*ratio*%20data%20the%20zero-point%20is%20meaningful%20and%20so%20we%20can%20also%20measure%20proportions%20or%20scale%20factors%3A%20*value%20A%20is%20what%20proportion%20of%20value%20B%3F%20(A%20%2F%20B)*%2C%20supporting%20statements%20such%20as%20%E2%80%9CA%20is%2010%25%20of%20B%E2%80%9D%20or%20%E2%80%9CB%20is%207%20times%20larger%20than%20A%E2%80%9D.%0A%0A%20%20%20%20In%20the%20dataset%20above%2C%20%60year%60%20is%20a%20quantitative%20interval%20field%20(the%20value%20of%20year%20%22zero%22%20is%20subjective)%2C%20whereas%20%60fertility%60%20and%20%60life_expect%60%20are%20quantitative%20ratio%20fields%20(zero%20is%20meaningful%20for%20calculating%20proportions).%0A%20%20%20%20Vega-Lite%20represents%20quantitative%20data%2C%20but%20does%20not%20make%20a%20distinction%20between%20interval%20and%20ratio%20types.%0A%0A%20%20%20%20Quantitative%20values%20can%20be%20visualized%20using%20position%2C%20size%2C%20or%20color%20value%2C%20among%20other%20channels.%20An%20axis%20with%20a%20zero%20baseline%20is%20essential%20for%20proportional%20comparisons%20of%20ratio%20values%2C%20but%20can%20be%20safely%20omitted%20for%20interval%20comparisons.%0A%0A%20%20%20%20%23%23%23%20Temporal%20(T)%0A%0A%20%20%20%20*Temporal*%20values%20measure%20time%20points%20or%20intervals.%20This%20type%20is%20a%20special%20case%20of%20quantitative%20values%20(timestamps)%20with%20rich%20semantics%20and%20conventions%20(i.e.%2C%20the%20%5BGregorian%20calendar%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FGregorian_calendar)).%20The%20temporal%20type%20in%20Vega-Lite%20supports%20reasoning%20about%20time%20units%20(year%2C%20month%2C%20day%2C%20hour%2C%20etc.)%2C%20and%20provides%20methods%20for%20requesting%20specific%20time%20intervals.%0A%0A%20%20%20%20Example%20temporal%20values%20include%20date%20strings%20such%20as%20%60%E2%80%9C2019-01-04%E2%80%9D%60%20and%20%60%E2%80%9CJan%2004%202019%E2%80%9D%60%2C%20as%20well%20as%20standardized%20date-times%20such%20as%20the%20%5BISO%20date-time%20format%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FISO_8601)%3A%20%60%E2%80%9C2019-01-04T17%3A50%3A35.643Z%E2%80%9D%60.%0A%0A%20%20%20%20There%20are%20no%20temporal%20values%20in%20our%20global%20development%20dataset%20above%2C%20as%20the%20%60year%60%20field%20is%20simply%20encoded%20as%20an%20integer.%20For%20more%20details%20about%20using%20temporal%20data%20in%20Altair%2C%20see%20the%20%5BTimes%20and%20Dates%20documentation%5D(https%3A%2F%2Faltair-viz.github.io%2Fuser_guide%2Ftimes_and_dates.html).%0A%0A%20%20%20%20%23%23%23%20Summary%0A%0A%20%20%20%20These%20data%20types%20are%20not%20mutually%20exclusive%2C%20but%20rather%20form%20a%20hierarchy%3A%20ordinal%20data%20support%20nominal%20(equality)%20comparisons%2C%20while%20quantitative%20data%20support%20ordinal%20(rank-order)%20comparisons.%0A%0A%20%20%20%20Moreover%2C%20these%20data%20types%20do%20_not_%20provide%20a%20fixed%20categorization.%20Just%20because%20a%20data%20field%20is%20represented%20using%20a%20number%20doesn't%20mean%20we%20have%20to%20treat%20it%20as%20a%20quantitative%20type!%20For%20example%2C%20we%20might%20interpret%20a%20set%20of%20ages%20(10%20years%20old%2C%2020%20years%20old%2C%20etc)%20as%20nominal%20(underage%20or%20overage)%2C%20ordinal%20(grouped%20by%20year)%2C%20or%20quantitative%20(calculate%20average%20age).%0A%0A%20%20%20%20Now%20let's%20examine%20how%20to%20visually%20encode%20these%20data%20types!%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%20Encoding%20Channels%0A%0A%20%20%20%20At%20the%20heart%20of%20Altair%20is%20the%20use%20of%20*encodings*%20that%20bind%20data%20fields%20(with%20a%20given%20data%20type)%20to%20available%20encoding%20*channels*%20of%20a%20chosen%20*mark*%20type.%20In%20this%20notebook%20we'll%20examine%20the%20following%20encoding%20channels%3A%0A%0A%20%20%20%20-%20%60x%60%3A%20Horizontal%20(x-axis)%20position%20of%20the%20mark.%0A%20%20%20%20-%20%60y%60%3A%20Vertical%20(y-axis)%20position%20of%20the%20mark.%0A%20%20%20%20-%20%60size%60%3A%20Size%20of%20the%20mark.%20May%20correspond%20to%20area%20or%20length%2C%20depending%20on%20the%20mark%20type.%0A%20%20%20%20-%20%60color%60%3A%20Mark%20color%2C%20specified%20as%20a%20%5Blegal%20CSS%20color%5D(https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2Fcolor_value).%0A%20%20%20%20-%20%60opacity%60%3A%20Mark%20opacity%2C%20ranging%20from%200%20(fully%20transparent)%20to%201%20(fully%20opaque).%0A%20%20%20%20-%20%60shape%60%3A%20Plotting%20symbol%20shape%20for%20%60point%60%20marks.%0A%20%20%20%20-%20%60tooltip%60%3A%20Tooltip%20text%20to%20display%20upon%20mouse%20hover%20over%20the%20mark.%0A%20%20%20%20-%20%60order%60%3A%20Mark%20ordering%2C%20determines%20line%2Farea%20point%20order%20and%20drawing%20order.%0A%20%20%20%20-%20%60column%60%3A%20Facet%20the%20data%20into%20horizontally-aligned%20subplots.%0A%20%20%20%20-%20%60row%60%3A%20Facet%20the%20data%20into%20vertically-aligned%20subplots.%0A%0A%20%20%20%20For%20a%20complete%20list%20of%20available%20channels%2C%20see%20the%20%5BAltair%20encoding%20documentation%5D(https%3A%2F%2Faltair-viz.github.io%2Fuser_guide%2Fencodings%2Findex.html).%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%20X%0A%0A%20%20%20%20The%20%60x%60%20encoding%20channel%20sets%20a%20mark's%20horizontal%20position%20(x-coordinate).%20In%20addition%2C%20default%20choices%20of%20axis%20and%20title%20are%20made%20automatically.%20In%20the%20chart%20below%2C%20the%20choice%20of%20a%20quantitative%20data%20type%20results%20in%20a%20continuous%20linear%20axis%20scale%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point().encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%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%23%23%23%20Y%0A%0A%20%20%20%20The%20%60y%60%20encoding%20channel%20sets%20a%20mark's%20vertical%20position%20(y-coordinate).%20Here%20we've%20added%20the%20%60cluster%60%20field%20using%20an%20ordinal%20(%60O%60)%20data%20type.%20The%20result%20is%20a%20discrete%20axis%20that%20includes%20a%20sized%20band%2C%20with%20a%20default%20step%20size%2C%20for%20each%20unique%20value%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point().encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('cluster%3AO')%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%20happens%20to%20the%20chart%20above%20if%20you%20swap%20the%20%60O%60%20and%20%60Q%60%20field%20types%3F_%0A%0A%20%20%20%20If%20we%20instead%20add%20the%20%60life_expect%60%20field%20as%20a%20quantitative%20(%60Q%60)%20variable%2C%20the%20result%20is%20a%20scatter%20plot%20with%20linear%20scales%20for%20both%20axes%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point().encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%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%20By%20default%2C%20axes%20for%20linear%20quantitative%20scales%20include%20zero%20to%20ensure%20a%20proper%20baseline%20for%20comparing%20ratio-valued%20data.%20In%20some%20cases%2C%20however%2C%20a%20zero%20baseline%20may%20be%20meaningless%20or%20you%20may%20want%20to%20focus%20on%20interval%20comparisons.%20To%20disable%20automatic%20inclusion%20of%20zero%2C%20configure%20the%20scale%20mapping%20using%20the%20encoding%20%60scale%60%20attribute%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point().encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ'%2C%20scale%3Dalt.Scale(zero%3DFalse))%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ'%2C%20scale%3Dalt.Scale(zero%3DFalse))%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%20Now%20the%20axis%20scales%20no%20longer%20include%20zero%20by%20default.%20Some%20padding%20still%20remains%2C%20as%20the%20axis%20domain%20end%20points%20are%20automatically%20snapped%20to%20_nice_%20numbers%20like%20multiples%20of%205%20or%2010.%0A%0A%20%20%20%20_What%20happens%20if%20you%20also%20add%20%60nice%3DFalse%60%20to%20the%20scale%20attribute%20above%3F_%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%20Size%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%20%60size%60%20encoding%20channel%20sets%20a%20mark's%20size%20or%20extent.%20The%20meaning%20of%20the%20channel%20can%20vary%20based%20on%20the%20mark%20type.%20For%20%60point%60%20marks%2C%20the%20%60size%60%20channel%20maps%20to%20the%20pixel%20area%20of%20the%20plotting%20symbol%2C%20such%20that%20the%20diameter%20of%20the%20point%20matches%20the%20square%20root%20of%20the%20size%20value.%0A%0A%20%20%20%20Let's%20augment%20our%20scatter%20plot%20by%20encoding%20population%20(%60pop%60)%20on%20the%20%60size%60%20channel.%20As%20a%20result%2C%20the%20chart%20now%20also%20includes%20a%20legend%20for%20interpreting%20the%20size%20values.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point().encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%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%20In%20some%20cases%20we%20might%20be%20unsatisfied%20with%20the%20default%20size%20range.%20To%20provide%20a%20customized%20span%20of%20sizes%2C%20set%20the%20%60range%60%20parameter%20of%20the%20%60scale%60%20attribute%20to%20an%20array%20indicating%20the%20smallest%20and%20largest%20sizes.%20Here%20we%20update%20the%20size%20encoding%20to%20range%20from%200%20pixels%20(for%20zero%20values)%20to%201%2C000%20pixels%20(for%20the%20maximum%20value%20in%20the%20scale%20domain)%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point().encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%3AQ'%2C%20scale%3Dalt.Scale(range%3D%5B0%2C1000%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%20%23%23%23%20Color%20and%20Opacity%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%20%60color%60%20encoding%20channel%20sets%20a%20mark's%20color.%20The%20style%20of%20color%20encoding%20is%20highly%20dependent%20on%20the%20data%20type%3A%20nominal%20data%20will%20default%20to%20a%20multi-hued%20qualitative%20color%20scheme%2C%20whereas%20ordinal%20and%20quantitative%20data%20will%20use%20perceptually%20ordered%20color%20gradients.%0A%0A%20%20%20%20Here%2C%20we%20encode%20the%20%60cluster%60%20field%20using%20the%20%60color%60%20channel%20and%20a%20nominal%20(%60N%60)%20data%20type%2C%20resulting%20in%20a%20distinct%20hue%20for%20each%20cluster%20value.%20Can%20you%20start%20to%20guess%20what%20the%20%60cluster%60%20field%20might%20indicate%3F%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point().encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%3AQ'%2C%20scale%3Dalt.Scale(range%3D%5B0%2C1000%5D))%2C%0A%20%20%20%20%20%20%20%20alt.Color('cluster%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%20If%20we%20prefer%20filled%20shapes%2C%20we%20can%20can%20pass%20a%20%60filled%3DTrue%60%20parameter%20to%20the%20%60mark_point%60%20method%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point(filled%3DTrue).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%3AQ'%2C%20scale%3Dalt.Scale(range%3D%5B0%2C1000%5D))%2C%0A%20%20%20%20%20%20%20%20alt.Color('cluster%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%20By%20default%2C%20Altair%20uses%20a%20bit%20of%20transparency%20to%20help%20combat%20over-plotting.%20We%20are%20free%20to%20further%20adjust%20the%20opacity%2C%20either%20by%20passing%20a%20default%20value%20to%20the%20%60mark_*%60%20method%2C%20or%20using%20a%20dedicated%20encoding%20channel.%0A%0A%20%20%20%20Here%20we%20demonstrate%20how%20to%20provide%20a%20constant%20value%20to%20an%20encoding%20channel%20instead%20of%20binding%20a%20data%20field%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point(filled%3DTrue).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%3AQ'%2C%20scale%3Dalt.Scale(range%3D%5B0%2C1000%5D))%2C%0A%20%20%20%20%20%20%20%20alt.Color('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.OpacityValue(0.5)%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%23%23%23%20Shape%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%20%60shape%60%20encoding%20channel%20sets%20the%20geometric%20shape%20used%20by%20%60point%60%20marks.%20Unlike%20the%20other%20channels%20we%20have%20seen%20so%20far%2C%20the%20%60shape%60%20channel%20can%20not%20be%20used%20by%20other%20mark%20types.%20The%20shape%20encoding%20channel%20should%20only%20be%20used%20with%20nominal%20data%2C%20as%20perceptual%20rank-order%20and%20magnitude%20comparisons%20are%20not%20supported.%0A%0A%20%20%20%20Let's%20encode%20the%20%60cluster%60%20field%20using%20%60shape%60%20as%20well%20as%20%60color%60.%20Using%20multiple%20channels%20for%20the%20same%20underlying%20data%20field%20is%20known%20as%20a%20*redundant%20encoding*.%20The%20resulting%20chart%20combines%20both%20color%20and%20shape%20information%20into%20a%20single%20symbol%20legend%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point(filled%3DTrue).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%3AQ'%2C%20scale%3Dalt.Scale(range%3D%5B0%2C1000%5D))%2C%0A%20%20%20%20%20%20%20%20alt.Color('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.OpacityValue(0.5)%2C%0A%20%20%20%20%20%20%20%20alt.Shape('cluster%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%23%23%23%20Tooltips%20%26%20Ordering%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%20By%20this%20point%2C%20you%20might%20feel%20a%20bit%20frustrated%3A%20we've%20built%20up%20a%20chart%2C%20but%20we%20still%20don't%20know%20what%20countries%20the%20visualized%20points%20correspond%20to!%20Let's%20add%20interactive%20tooltips%20to%20enable%20exploration.%0A%0A%20%20%20%20The%20%60tooltip%60%20encoding%20channel%20determines%20tooltip%20text%20to%20show%20when%20a%20user%20moves%20the%20mouse%20cursor%20over%20a%20mark.%20Let's%20add%20a%20tooltip%20encoding%20for%20the%20%60country%60%20field%2C%20then%20investigate%20which%20countries%20are%20being%20represented.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point(filled%3DTrue).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%3AQ'%2C%20scale%3Dalt.Scale(range%3D%5B0%2C1000%5D))%2C%0A%20%20%20%20%20%20%20%20alt.Color('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.OpacityValue(0.5)%2C%0A%20%20%20%20%20%20%20%20alt.Tooltip('country')%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%20As%20you%20mouse%20around%20you%20may%20notice%20that%20you%20can%20not%20select%20some%20of%20the%20points.%20For%20example%2C%20the%20largest%20dark%20blue%20circle%20corresponds%20to%20India%2C%20which%20is%20drawn%20on%20top%20of%20a%20country%20with%20a%20smaller%20population%2C%20preventing%20the%20mouse%20from%20hovering%20over%20that%20country.%20To%20fix%20this%20problem%2C%20we%20can%20use%20the%20%60order%60%20encoding%20channel.%0A%0A%20%20%20%20The%20%60order%60%20encoding%20channel%20determines%20the%20order%20of%20data%20points%2C%20affecting%20both%20the%20order%20in%20which%20they%20are%20drawn%20and%2C%20for%20%60line%60%20and%20%60area%60%20marks%2C%20the%20order%20in%20which%20they%20are%20connected%20to%20one%20another.%0A%0A%20%20%20%20Let's%20order%20the%20values%20in%20descending%20rank%20order%20by%20the%20population%20(%60pop%60)%2C%20ensuring%20that%20smaller%20circles%20are%20drawn%20later%20than%20larger%20circles%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point(filled%3DTrue).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%3AQ'%2C%20scale%3Dalt.Scale(range%3D%5B0%2C1000%5D))%2C%0A%20%20%20%20%20%20%20%20alt.Color('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.OpacityValue(0.5)%2C%0A%20%20%20%20%20%20%20%20alt.Tooltip('country%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.Order('pop%3AQ'%2C%20sort%3D'descending')%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%20Now%20we%20can%20identify%20the%20smaller%20country%20being%20obscured%20by%20India%3A%20it's%20Bangladesh!%0A%0A%20%20%20%20We%20can%20also%20now%20figure%20out%20what%20the%20%60cluster%60%20field%20represents.%20Mouse%20over%20the%20various%20colored%20points%20to%20formulate%20your%20own%20explanation.%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%20At%20this%20point%20we've%20added%20tooltips%20that%20show%20only%20a%20single%20property%20of%20the%20underlying%20data%20record.%20To%20show%20multiple%20values%2C%20we%20can%20provide%20the%20%60tooltip%60%20channel%20an%20array%20of%20encodings%2C%20one%20for%20each%20field%20we%20want%20to%20include%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point(filled%3DTrue).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%3AQ'%2C%20scale%3Dalt.Scale(range%3D%5B0%2C1000%5D))%2C%0A%20%20%20%20%20%20%20%20alt.Color('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.OpacityValue(0.5)%2C%0A%20%20%20%20%20%20%20%20alt.Order('pop%3AQ'%2C%20sort%3D'descending')%2C%0A%20%20%20%20%20%20%20%20tooltip%20%3D%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20alt.Tooltip('country%3AN')%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20alt.Tooltip('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20alt.Tooltip('life_expect%3AQ')%0A%20%20%20%20%20%20%20%20%5D%20%20%20%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%20Now%20we%20can%20see%20multiple%20data%20fields%20upon%20mouse%20over!%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%20Column%20and%20Row%20Facets%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%20Spatial%20position%20is%20one%20of%20the%20most%20powerful%20and%20flexible%20channels%20for%20visual%20encoding%2C%20but%20what%20can%20we%20do%20if%20we%20already%20have%20assigned%20fields%20to%20the%20%60x%60%20and%20%60y%60%20channels%3F%20One%20valuable%20technique%20is%20to%20create%20a%20*trellis%20plot*%2C%20consisting%20of%20sub-plots%20that%20show%20a%20subset%20of%20the%20data.%20A%20trellis%20plot%20is%20one%20example%20of%20the%20more%20general%20technique%20of%20presenting%20data%20using%20%5Bsmall%20multiples%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSmall_multiple)%20of%20views.%0A%0A%20%20%20%20The%20%60column%60%20and%20%60row%60%20encoding%20channels%20generate%20either%20a%20horizontal%20(columns)%20or%20vertical%20(rows)%20set%20of%20sub-plots%2C%20in%20which%20the%20data%20is%20partitioned%20according%20to%20the%20provided%20data%20field.%0A%0A%20%20%20%20Here%20is%20a%20trellis%20plot%20that%20divides%20the%20data%20into%20one%20column%20per%20%5C%60cluster%5C%60%20value%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point(filled%3DTrue).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%3AQ'%2C%20scale%3Dalt.Scale(range%3D%5B0%2C1000%5D))%2C%0A%20%20%20%20%20%20%20%20alt.Color('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.OpacityValue(0.5)%2C%0A%20%20%20%20%20%20%20%20alt.Tooltip('country%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.Order('pop%3AQ'%2C%20sort%3D'descending')%2C%0A%20%20%20%20%20%20%20%20alt.Column('cluster%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%20The%20plot%20above%20does%20not%20fit%20on%20screen%2C%20making%20it%20difficult%20to%20compare%20all%20the%20sub-plots%20to%20each%20other!%20We%20can%20set%20the%20default%20%60width%60%20and%20%60height%60%20properties%20to%20create%20a%20smaller%20set%20of%20multiples.%20Also%2C%20as%20the%20column%20headers%20already%20label%20the%20%60cluster%60%20values%2C%20let's%20remove%20our%20%60color%60%20legend%20by%20setting%20it%20to%20%60None%60.%20To%20make%20better%20use%20of%20space%20we%20can%20also%20orient%20our%20%60size%60%20legend%20to%20the%20%60'bottom'%60%20of%20the%20chart.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point(filled%3DTrue).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%3AQ'%2C%20scale%3Dalt.Scale(range%3D%5B0%2C1000%5D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20legend%3Dalt.Legend(orient%3D'bottom'%2C%20titleOrient%3D'left'))%2C%0A%20%20%20%20%20%20%20%20alt.Color('cluster%3AN'%2C%20legend%3DNone)%2C%0A%20%20%20%20%20%20%20%20alt.OpacityValue(0.5)%2C%0A%20%20%20%20%20%20%20%20alt.Tooltip('country%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.Order('pop%3AQ'%2C%20sort%3D'descending')%2C%0A%20%20%20%20%20%20%20%20alt.Column('cluster%3AN')%0A%20%20%20%20).properties(width%3D135%2C%20height%3D135)%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%20Underneath%20the%20hood%2C%20the%20%60column%60%20and%20%60row%60%20encodings%20are%20translated%20into%20a%20new%20specification%20that%20uses%20the%20%60facet%60%20view%20composition%20operator.%20We%20will%20re-visit%20faceting%20in%20greater%20depth%20later%20on!%0A%0A%20%20%20%20In%20the%20meantime%2C%20_can%20you%20rewrite%20the%20chart%20above%20to%20facet%20into%20rows%20instead%20of%20columns%3F_%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%20A%20Peek%20Ahead%3A%20Interactive%20Filtering%0A%0A%20%20%20%20In%20later%20modules%2C%20we'll%20dive%20into%20interaction%20techniques%20for%20data%20exploration.%20Here%20is%20a%20sneak%20peak%3A%20binding%20a%20range%20slider%20to%20the%20%60year%60%20field%20to%20enable%20interactive%20scrubbing%20through%20each%20year%20of%20data.%20Don't%20worry%20if%20the%20code%20below%20is%20a%20bit%20confusing%20at%20this%20point%2C%20as%20we%20will%20cover%20interaction%20in%20detail%20later.%0A%0A%20%20%20%20_Drag%20the%20slider%20back%20and%20forth%20to%20see%20how%20the%20data%20values%20change%20over%20time!_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data)%3A%0A%20%20%20%20select_year%20%3D%20alt.selection_point(%0A%20%20%20%20%20%20%20%20name%3D'select'%2C%20fields%3D%5B'year'%5D%2C%20value%3D%5B%7B'year'%3A%201955%7D%5D%2C%0A%20%20%20%20%20%20%20%20bind%3Dalt.binding_range(min%3D1955%2C%20max%3D2005%2C%20step%3D5)%0A%20%20%20%20)%0A%0A%20%20%20%20alt.Chart(data).mark_point(filled%3DTrue).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ'%2C%20scale%3Dalt.Scale(domain%3D%5B0%2C9%5D))%2C%0A%20%20%20%20%20%20%20%20alt.Y('life_expect%3AQ'%2C%20scale%3Dalt.Scale(domain%3D%5B0%2C90%5D))%2C%0A%20%20%20%20%20%20%20%20alt.Size('pop%3AQ'%2C%20scale%3Dalt.Scale(domain%3D%5B0%2C%201200000000%5D%2C%20range%3D%5B0%2C1000%5D))%2C%0A%20%20%20%20%20%20%20%20alt.Color('cluster%3AN'%2C%20legend%3DNone)%2C%0A%20%20%20%20%20%20%20%20alt.OpacityValue(0.5)%2C%0A%20%20%20%20%20%20%20%20alt.Tooltip('country%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.Order('pop%3AQ'%2C%20sort%3D'descending')%0A%20%20%20%20).add_params(select_year).transform_filter(select_year)%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%20Graphical%20Marks%0A%0A%20%20%20%20Our%20exploration%20of%20encoding%20channels%20above%20exclusively%20uses%20%60point%60%20marks%20to%20visualize%20the%20data.%20However%2C%20the%20%60point%60%20mark%20type%20is%20only%20one%20of%20the%20many%20geometric%20shapes%20that%20can%20be%20used%20to%20visually%20represent%20data.%20Altair%20includes%20a%20number%20of%20built-in%20mark%20types%2C%20including%3A%0A%0A%20%20%20%20-%20%60mark_area()%60%20-%20Filled%20areas%20defined%20by%20a%20top-line%20and%20a%20baseline.%0A%20%20%20%20-%20%60mark_bar()%60%20-%09Rectangular%20bars.%0A%20%20%20%20-%20%60mark_circle()%60%09-%20Scatter%20plot%20points%20as%20filled%20circles.%0A%20%20%20%20-%20%60mark_line()%60%20-%20Connected%20line%20segments.%0A%20%20%20%20-%20%60mark_point()%60%20-%20Scatter%20plot%20points%20with%20configurable%20shapes.%0A%20%20%20%20-%20%60mark_rect()%60%20-%20Filled%20rectangles%2C%20useful%20for%20heatmaps.%0A%20%20%20%20-%20%60mark_rule()%60%20-%20Vertical%20or%20horizontal%20lines%20spanning%20the%20axis.%0A%20%20%20%20-%20%60mark_square()%60%20-%20Scatter%20plot%20points%20as%20filled%20squares.%0A%20%20%20%20-%20%60mark_text()%60%20-%20Scatter%20plot%20points%20represented%20by%20text.%0A%20%20%20%20-%20%60mark_tick()%60%20-%20Vertical%20or%20horizontal%20tick%20marks.%0A%0A%20%20%20%20For%20a%20complete%20list%2C%20and%20links%20to%20examples%2C%20see%20the%20%5BAltair%20marks%20documentation%5D(https%3A%2F%2Faltair-viz.github.io%2Fuser_guide%2Fmarks%2Findex.html).%20Next%2C%20we%20will%20step%20through%20a%20number%20of%20the%20most%20commonly%20used%20mark%20types%20for%20statistical%20graphics.%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%20Point%20Marks%0A%0A%20%20%20%20The%20%60point%60%20mark%20type%20conveys%20specific%20points%2C%20as%20in%20*scatter%20plots*%20and%20*dot%20plots*.%20In%20addition%20to%20%60x%60%20and%20%60y%60%20encoding%20channels%20(to%20specify%202D%20point%20positions)%2C%20point%20marks%20can%20use%20%60color%60%2C%20%60size%60%2C%20and%20%60shape%60%20encodings%20to%20convey%20additional%20data%20fields.%0A%0A%20%20%20%20Below%20is%20a%20dot%20plot%20of%20%60fertility%60%2C%20with%20the%20%60cluster%60%20field%20redundantly%20encoded%20using%20both%20the%20%60y%60%20and%20%60shape%60%20channels.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point().encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.Shape('cluster%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%20In%20addition%20to%20encoding%20channels%2C%20marks%20can%20be%20stylized%20by%20providing%20values%20to%20the%20%60mark_*()%60%20methods.%0A%0A%20%20%20%20For%20example%3A%20point%20marks%20are%20drawn%20with%20stroked%20outlines%20by%20default%2C%20but%20can%20be%20specified%20to%20use%20%60filled%60%20shapes%20instead.%20Similarly%2C%20you%20can%20set%20a%20default%20%60size%60%20to%20set%20the%20total%20pixel%20area%20of%20the%20point%20mark.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_point(filled%3DTrue%2C%20size%3D100).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.Shape('cluster%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%23%23%23%20Circle%20Marks%0A%0A%20%20%20%20The%20%60circle%60%20mark%20type%20is%20a%20convenient%20shorthand%20for%20%60point%60%20marks%20drawn%20as%20filled%20circles.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_circle(size%3D100).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.Shape('cluster%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%23%23%23%20Square%20Marks%0A%0A%20%20%20%20The%20%60square%60%20mark%20type%20is%20a%20convenient%20shorthand%20for%20%60point%60%20marks%20drawn%20as%20filled%20squares.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_square(size%3D100).encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.Shape('cluster%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%23%23%23%20Tick%20Marks%0A%0A%20%20%20%20The%20%60tick%60%20mark%20type%20conveys%20a%20data%20point%20using%20a%20short%20line%20segment%20or%20%22tick%22.%20These%20are%20particularly%20useful%20for%20comparing%20values%20along%20a%20single%20dimension%20with%20minimal%20overlap.%20A%20*dot%20plot*%20drawn%20with%20tick%20marks%20is%20sometimes%20referred%20to%20as%20a%20*strip%20plot*.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_tick().encode(%0A%20%20%20%20%20%20%20%20alt.X('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.Shape('cluster%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%23%23%23%20Bar%20Marks%0A%0A%20%20%20%20The%20%5C%60bar%5C%60%20mark%20type%20draws%20a%20rectangle%20with%20a%20position%2C%20width%2C%20and%20height.%0A%0A%20%20%20%20The%20plot%20below%20is%20a%20simple%20bar%20chart%20of%20the%20population%20(%5C%60pop%5C%60)%20of%20each%20country.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_bar().encode(%0A%20%20%20%20%20%20%20%20alt.X('country%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.Y('pop%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%20The%20bar%20width%20is%20set%20to%20a%20default%20size.%20We%20will%20discuss%20how%20to%20adjust%20the%20bar%20width%20later%20in%20this%20notebook.%20(A%20subsequent%20notebook%20will%20take%20a%20closer%20look%20at%20configuring%20axes%2C%20scales%2C%20and%20legends.)%0A%0A%20%20%20%20Bars%20can%20also%20be%20stacked.%20Let's%20change%20the%20%60x%60%20encoding%20to%20use%20the%20%60cluster%60%20field%2C%20and%20encode%20%60country%60%20using%20the%20%60color%60%20channel.%20We'll%20also%20disable%20the%20legend%20(which%20would%20be%20very%20long%20with%20colors%20for%20all%20countries!)%20and%20use%20tooltips%20for%20the%20country%20name.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_bar().encode(%0A%20%20%20%20%20%20%20%20alt.X('cluster%3AN')%2C%0A%20%20%20%20%20%20%20%20alt.Y('pop%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Color('country%3AN'%2C%20legend%3DNone)%2C%0A%20%20%20%20%20%20%20%20alt.Tooltip('country%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%20In%20the%20chart%20above%2C%20the%20use%20of%20the%20%60color%60%20encoding%20channel%20causes%20Altair%20%2F%20Vega-Lite%20to%20automatically%20stack%20the%20bar%20marks.%20Otherwise%2C%20bars%20would%20be%20drawn%20on%20top%20of%20each%20other!%20Try%20adding%20the%20parameter%20%60stack%3DNone%60%20to%20the%20%60y%60%20encoding%20channel%20to%20see%20what%20happens%20if%20we%20don't%20apply%20stacking...%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%20examples%20above%20create%20bar%20charts%20from%20a%20zero-baseline%2C%20and%20the%20%60y%60%20channel%20only%20encodes%20the%20non-zero%20value%20(or%20height)%20of%20the%20bar.%20However%2C%20the%20bar%20mark%20also%20allows%20you%20to%20specify%20starting%20and%20ending%20points%20to%20convey%20ranges.%0A%0A%20%20%20%20The%20chart%20below%20uses%20the%20%60x%60%20(starting%20point)%20and%20%60x2%60%20(ending%20point)%20channels%20to%20show%20the%20range%20of%20life%20expectancies%20within%20each%20regional%20cluster.%20Below%20we%20use%20the%20%60min%60%20and%20%60max%60%20aggregation%20functions%20to%20determine%20the%20end%20points%20of%20the%20range%3B%20we%20will%20discuss%20aggregation%20in%20greater%20detail%20in%20the%20next%20notebook!%0A%0A%20%20%20%20Alternatively%2C%20you%20can%20use%20%60x%60%20and%20%60width%60%20to%20provide%20a%20starting%20point%20plus%20offset%2C%20such%20that%20%60x2%20%3D%20x%20%2B%20width%60.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data2000)%3A%0A%20%20%20%20alt.Chart(data2000).mark_bar().encode(%0A%20%20%20%20%20%20%20%20alt.X('min(life_expect)%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.X2('max(life_expect)%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y('cluster%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%23%23%23%20Line%20Marks%0A%0A%20%20%20%20The%20%60line%60%20mark%20type%20connects%20plotted%20points%20with%20line%20segments%2C%20for%20example%20so%20that%20a%20line's%20slope%20conveys%20information%20about%20the%20rate%20of%20change.%0A%0A%20%20%20%20Let's%20plot%20a%20line%20chart%20of%20fertility%20per%20country%20over%20the%20years%2C%20using%20the%20full%2C%20unfiltered%20global%20development%20data%20frame.%20We'll%20again%20hide%20the%20legend%20and%20use%20tooltips%20instead.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data)%3A%0A%20%20%20%20alt.Chart(data).mark_line().encode(%0A%20%20%20%20%20%20%20%20alt.X('year%3AO')%2C%0A%20%20%20%20%20%20%20%20alt.Y('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Color('country%3AN'%2C%20legend%3DNone)%2C%0A%20%20%20%20%20%20%20%20alt.Tooltip('country%3AN')%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20%20%20width%3D400%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%20We%20can%20see%20interesting%20variations%20per%20country%2C%20but%20overall%20trends%20for%20lower%20numbers%20of%20children%20per%20family%20over%20time.%20Also%20note%20that%20we%20set%20a%20custom%20width%20of%20400%20pixels.%20_Try%20changing%20(or%20removing)%20the%20widths%20and%20see%20what%20happens!_%0A%0A%20%20%20%20Let's%20change%20some%20of%20the%20default%20mark%20parameters%20to%20customize%20the%20plot.%20We%20can%20set%20the%20%60strokeWidth%60%20to%20determine%20the%20thickness%20of%20the%20lines%20and%20the%20%60opacity%60%20to%20add%20some%20transparency.%20By%20default%2C%20the%20%60line%60%20mark%20uses%20straight%20line%20segments%20to%20connect%20data%20points.%20In%20some%20cases%20we%20might%20want%20to%20smooth%20the%20lines.%20We%20can%20adjust%20the%20interpolation%20used%20to%20connect%20data%20points%20by%20setting%20the%20%60interpolate%60%20mark%20parameter.%20Let's%20use%20%60'monotone'%60%20interpolation%20to%20provide%20smooth%20lines%20that%20are%20also%20guaranteed%20not%20to%20inadvertently%20generate%20%22false%22%20minimum%20or%20maximum%20values%20as%20a%20result%20of%20the%20interpolation.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data)%3A%0A%20%20%20%20alt.Chart(data).mark_line(%0A%20%20%20%20%20%20%20%20strokeWidth%3D3%2C%0A%20%20%20%20%20%20%20%20opacity%3D0.5%2C%0A%20%20%20%20%20%20%20%20interpolate%3D'monotone'%0A%20%20%20%20).encode(%0A%20%20%20%20%20%20%20%20alt.X('year%3AO')%2C%0A%20%20%20%20%20%20%20%20alt.Y('fertility%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Color('country%3AN'%2C%20legend%3DNone)%2C%0A%20%20%20%20%20%20%20%20alt.Tooltip('country%3AN')%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20%20%20width%3D400%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%20%60line%60%20mark%20can%20also%20be%20used%20to%20create%20*slope%20graphs*%2C%20charts%20that%20highlight%20the%20change%20in%20value%20between%20two%20comparison%20points%20using%20line%20slopes.%0A%0A%20%20%20%20Below%20let's%20create%20a%20slope%20graph%20comparing%20the%20populations%20of%20each%20country%20at%20minimum%20and%20maximum%20years%20in%20our%20full%20dataset%3A%201955%20and%202005.%20We%20first%20create%20a%20new%20Pandas%20data%20frame%20filtered%20to%20those%20years%2C%20then%20use%20Altair%20to%20create%20the%20slope%20graph.%0A%0A%20%20%20%20By%20default%2C%20Altair%20places%20the%20years%20close%20together.%20To%20better%20space%20out%20the%20years%20along%20the%20x-axis%2C%20we%20can%20indicate%20the%20size%20(in%20pixels)%20of%20discrete%20steps%20along%20the%20width%20of%20our%20chart%20as%20indicated%20by%20the%20comment%20below.%20Try%20adjusting%20the%20width%20%60step%60%20value%20below%20and%20see%20how%20the%20chart%20changes%20in%20response.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data)%3A%0A%20%20%20%20dataTime%20%3D%20data.loc%5B(data%5B'year'%5D%20%3D%3D%201955)%20%7C%20(data%5B'year'%5D%20%3D%3D%202005)%5D%0A%0A%20%20%20%20alt.Chart(dataTime).mark_line(opacity%3D0.5).encode(%0A%20%20%20%20%20%20%20%20alt.X('year%3AO')%2C%0A%20%20%20%20%20%20%20%20alt.Y('pop%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Color('country%3AN'%2C%20legend%3DNone)%2C%0A%20%20%20%20%20%20%20%20alt.Tooltip('country%3AN')%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20%20%20width%3D%7B%22step%22%3A%2050%7D%20%23%20adjust%20the%20step%20parameter%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%23%23%23%20Area%20Marks%0A%0A%20%20%20%20The%20%60area%60%20mark%20type%20combines%20aspects%20of%20%60line%60%20and%20%60bar%60%20marks%3A%20it%20visualizes%20connections%20(slopes)%20among%20data%20points%2C%20but%20also%20shows%20a%20filled%20region%2C%20with%20one%20edge%20defaulting%20to%20a%20zero-valued%20baseline.%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%20chart%20below%20is%20an%20area%20chart%20of%20population%20over%20time%20for%20just%20the%20United%20States%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data)%3A%0A%20%20%20%20dataUS%20%3D%20data.loc%5Bdata%5B'country'%5D%20%3D%3D%20'United%20States'%5D%0A%0A%20%20%20%20alt.Chart(dataUS).mark_area().encode(%0A%20%20%20%20%20%20%20%20alt.X('year%3AO')%2C%0A%20%20%20%20%20%20%20%20alt.Y('fertility%3AQ')%0A%20%20%20%20)%0A%20%20%20%20return%20(dataUS%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%20Similar%20to%20%60line%60%20marks%2C%20%60area%60%20marks%20support%20an%20%60interpolate%60%20parameter.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20dataUS)%3A%0A%20%20%20%20alt.Chart(dataUS).mark_area(interpolate%3D'monotone').encode(%0A%20%20%20%20%20%20%20%20alt.X('year%3AO')%2C%0A%20%20%20%20%20%20%20%20alt.Y('fertility%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%20Similar%20to%20%60bar%60%20marks%2C%20%60area%60%20marks%20also%20support%20stacking.%20Here%20we%20create%20a%20new%20data%20frame%20with%20data%20for%20the%20three%20North%20American%20countries%2C%20then%20plot%20them%20using%20an%20%60area%60%20mark%20and%20a%20%60color%60%20encoding%20channel%20to%20stack%20by%20country.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20data)%3A%0A%20%20%20%20dataNA%20%3D%20data.loc%5B%0A%20%20%20%20%20%20%20%20(data%5B'country'%5D%20%3D%3D%20'United%20States')%20%7C%0A%20%20%20%20%20%20%20%20(data%5B'country'%5D%20%3D%3D%20'Canada')%20%7C%0A%20%20%20%20%20%20%20%20(data%5B'country'%5D%20%3D%3D%20'Mexico')%0A%20%20%20%20%5D%0A%0A%20%20%20%20alt.Chart(dataNA).mark_area().encode(%0A%20%20%20%20%20%20%20%20alt.X('year%3AO')%2C%0A%20%20%20%20%20%20%20%20alt.Y('pop%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Color('country%3AN')%0A%20%20%20%20)%0A%20%20%20%20return%20(dataNA%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%20By%20default%2C%20stacking%20is%20performed%20relative%20to%20a%20zero%20baseline.%20However%2C%20other%20%60stack%60%20options%20are%20available%3A%0A%0A%20%20%20%20*%20%60center%60%20-%20to%20stack%20relative%20to%20a%20baseline%20in%20the%20center%20of%20the%20chart%2C%20creating%20a%20*streamgraph*%20visualization%2C%20and%0A%20%20%20%20*%20%60normalize%60%20-%20to%20normalize%20the%20summed%20data%20at%20each%20stacking%20point%20to%20100%25%2C%20enabling%20percentage%20comparisons.%0A%0A%20%20%20%20Below%20we%20adapt%20the%20chart%20by%20setting%20the%20%60y%60%20encoding%20%60stack%60%20attribute%20to%20%60center%60.%20What%20happens%20if%20you%20instead%20set%20it%20%60normalize%60%3F%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20dataNA)%3A%0A%20%20%20%20alt.Chart(dataNA).mark_area().encode(%0A%20%20%20%20%20%20%20%20alt.X('year%3AO')%2C%0A%20%20%20%20%20%20%20%20alt.Y('pop%3AQ'%2C%20stack%3D'center')%2C%0A%20%20%20%20%20%20%20%20alt.Color('country%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%20To%20disable%20stacking%20altogether%2C%20set%20the%20%20%60stack%60%20attribute%20to%20%60None%60.%20We%20can%20also%20add%20%60opacity%60%20as%20a%20default%20mark%20parameter%20to%20ensure%20we%20see%20the%20overlapping%20areas!%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20dataNA)%3A%0A%20%20%20%20alt.Chart(dataNA).mark_area(opacity%3D0.5).encode(%0A%20%20%20%20%20%20%20%20alt.X('year%3AO')%2C%0A%20%20%20%20%20%20%20%20alt.Y('pop%3AQ'%2C%20stack%3DNone)%2C%0A%20%20%20%20%20%20%20%20alt.Color('country%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%20The%20%60area%60%20mark%20type%20also%20supports%20data-driven%20baselines%2C%20with%20both%20the%20upper%20and%20lower%20series%20determined%20by%20data%20fields.%20As%20with%20%60bar%60%20marks%2C%20we%20can%20use%20the%20%60x%60%20and%20%60x2%60%20(or%20%60y%60%20and%20%60y2%60)%20channels%20to%20provide%20end%20points%20for%20the%20area%20mark.%0A%0A%20%20%20%20The%20chart%20below%20visualizes%20the%20range%20of%20minimum%20and%20maximum%20fertility%2C%20per%20year%2C%20for%20North%20American%20countries%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20dataNA)%3A%0A%20%20%20%20alt.Chart(dataNA).mark_area().encode(%0A%20%20%20%20%20%20%20%20alt.X('year%3AO')%2C%0A%20%20%20%20%20%20%20%20alt.Y('min(fertility)%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.Y2('max(fertility)%3AQ')%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20%20%20width%3D%7B%22step%22%3A%2040%7D%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%20We%20can%20see%20a%20larger%20range%20of%20values%20in%201995%2C%20from%20just%20under%204%20to%20just%20under%207.%20By%202005%2C%20both%20the%20overall%20fertility%20values%20and%20the%20variability%20have%20declined%2C%20centered%20around%202%20children%20per%20familty.%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%20All%20the%20%60area%60%20mark%20examples%20above%20use%20a%20vertically%20oriented%20area.%20However%2C%20Altair%20and%20Vega-Lite%20support%20horizontal%20areas%20as%20well.%20Let's%20transpose%20the%20chart%20above%2C%20simply%20by%20swapping%20the%20%60x%60%20and%20%60y%60%20channels.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20dataNA)%3A%0A%20%20%20%20alt.Chart(dataNA).mark_area().encode(%0A%20%20%20%20%20%20%20%20alt.Y('year%3AO')%2C%0A%20%20%20%20%20%20%20%20alt.X('min(fertility)%3AQ')%2C%0A%20%20%20%20%20%20%20%20alt.X2('max(fertility)%3AQ')%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20%20%20width%3D%7B%22step%22%3A%2040%7D%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%23%23%20Summary%0A%0A%20%20%20%20We've%20completed%20our%20tour%20of%20data%20types%2C%20encoding%20channels%2C%20and%20graphical%20marks!%20You%20should%20now%20be%20well-equipped%20to%20further%20explore%20the%20space%20of%20encodings%2C%20mark%20types%2C%20and%20mark%20parameters.%20For%20a%20comprehensive%20reference%20%26ndash%3B%20including%20features%20we've%20skipped%20over%20here!%20%26ndash%3B%20see%20the%20Altair%20%5Bmarks%5D(https%3A%2F%2Faltair-viz.github.io%2Fuser_guide%2Fmarks%2Findex.html)%20and%20%5Bencoding%5D(https%3A%2F%2Faltair-viz.github.io%2Fuser_guide%2Fencodings%2Findex.html)%20documentation.%0A%0A%20%20%20%20In%20the%20next%20module%2C%20we%20will%20look%20at%20the%20use%20of%20data%20transformations%20to%20create%20charts%20that%20summarize%20data%20or%20visualize%20new%20derived%20fields.%20In%20a%20later%20module%2C%20we'll%20examine%20how%20to%20further%20customize%20your%20charts%20by%20modifying%20scales%2C%20axes%2C%20and%20legends.%0A%0A%20%20%20%20Interested%20in%20learning%20more%20about%20visual%20encoding%3F%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%3Cimg%20title%3D%22Bertin's%20Taxonomy%20of%20Visual%20Encoding%20Channels%22%20src%3D%22https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2000%2F1*jsb78Rr2cDy6zrE7j2IKig.png%22%20style%3D%22max-width%3A%20650px%3B%22%3E%3Cbr%2F%3E%0A%0A%20%20%20%20%3Csmall%3EBertin's%20taxonomy%20of%20visual%20encodings%20from%20%3Ca%20href%3D%22https%3A%2F%2Fbooks.google.com%2Fbooks%2Fabout%2FSemiology_of_Graphics.html%3Fid%3DX5caQwAACAAJ%22%3E%3Cem%3ES%C3%A9miologie%20Graphique%3C%2Fem%3E%3C%2Fa%3E%2C%20as%20adapted%20by%20%3Ca%20href%3D%22https%3A%2F%2Fbost.ocks.org%2Fmike%2F%22%3EMike%20Bostock%3C%2Fa%3E.%3C%2Fsmall%3E%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-%20The%20systematic%20study%20of%20marks%2C%20visual%20encodings%2C%20and%20backing%20data%20types%20was%20initiated%20by%20%5BJacques%20Bertin%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FJacques_Bertin)%20in%20his%20pioneering%201967%20work%20%5B_S%C3%A9miologie%20Graphique%20(The%20Semiology%20of%20Graphics)_%5D(https%3A%2F%2Fbooks.google.com%2Fbooks%2Fabout%2FSemiology_of_Graphics.html%3Fid%3DX5caQwAACAAJ).%20The%20image%20above%20illustrates%20position%2C%20size%2C%20value%20(brightness)%2C%20texture%2C%20color%20(hue)%2C%20orientation%2C%20and%20shape%20channels%2C%20alongside%20Bertin's%20recommendations%20for%20the%20data%20types%20they%20support.%0A%20%20%20%20-%20The%20framework%20of%20data%20types%2C%20marks%2C%20and%20channels%20also%20guides%20_automated_%20visualization%20design%20tools%2C%20starting%20with%20%5BMackinlay's%20APT%20(A%20Presentation%20Tool)%5D(https%3A%2F%2Fscholar.google.com%2Fscholar%3Fcluster%3D10191273548472217907)%20in%201986%20and%20continuing%20in%20more%20recent%20systems%20such%20as%20%5BVoyager%5D(http%3A%2F%2Fidl.cs.washington.edu%2Fpapers%2Fvoyager%2F)%20and%20%5BDraco%5D(http%3A%2F%2Fidl.cs.washington.edu%2Fpapers%2Fdraco%2F).%0A%20%20%20%20-%20The%20identification%20of%20nominal%2C%20ordinal%2C%20interval%2C%20and%20ratio%20types%20dates%20at%20least%20as%20far%20back%20as%20S.%20S.%20Steven's%201947%20article%20%5B_On%20the%20theory%20of%20scales%20of%20measurement_%5D(https%3A%2F%2Fscholar.google.com%2Fscholar%3Fcluster%3D14356809180080326415).%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