06 interaction

%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%20Interaction%0A%0A%20%20%20%20_%E2%80%9CA%20graphic%20is%20not%20%E2%80%98drawn%E2%80%99%20once%20and%20for%20all%3B%20it%20is%20%E2%80%98constructed%E2%80%99%20and%20reconstructed%20until%20it%20reveals%20all%20the%20relationships%20constituted%20by%20the%20interplay%20of%20the%20data.%20The%20best%20graphic%20operations%20are%20those%20carried%20out%20by%20the%20decision-maker%20themself.%E2%80%9D_%20%26mdash%3B%20%5BJacques%20Bertin%5D(https%3A%2F%2Fbooks.google.com%2Fbooks%3Fid%3DcsqX_xnm4tcC)%0A%0A%20%20%20%20Visualization%20provides%20a%20powerful%20means%20of%20making%20sense%20of%20data.%20A%20single%20image%2C%20however%2C%20typically%20provides%20answers%20to%2C%20at%20best%2C%20a%20handful%20of%20questions.%20Through%20_interaction_%20we%20can%20transform%20static%20images%20into%20tools%20for%20exploration%3A%20highlighting%20points%20of%20interest%2C%20zooming%20in%20to%20reveal%20finer-grained%20patterns%2C%20and%20linking%20across%20multiple%20views%20to%20reason%20about%20multi-dimensional%20relationships.%0A%0A%20%20%20%20At%20the%20core%20of%20interaction%20is%20the%20notion%20of%20a%20_selection_%3A%20a%20means%20of%20indicating%20to%20the%20computer%20which%20elements%20or%20regions%20we%20are%20interested%20in.%20For%20example%2C%20we%20might%20hover%20the%20mouse%20over%20a%20point%2C%20click%20multiple%20marks%2C%20or%20draw%20a%20bounding%20box%20around%20a%20region%20to%20highlight%20subsets%20of%20the%20data%20for%20further%20scrutiny.%0A%0A%20%20%20%20Alongside%20visual%20encodings%20and%20data%20transformations%2C%20Altair%20provides%20a%20_selection_%20abstraction%20for%20authoring%20interactions.%20These%20selections%20encompass%20three%20aspects%3A%0A%0A%20%20%20%201.%20Input%20event%20handling%20to%20select%20points%20or%20regions%20of%20interest%2C%20such%20as%20mouse%20hover%2C%20click%2C%20drag%2C%20scroll%2C%20and%20touch%20events.%0A%20%20%20%202.%20Generalizing%20from%20the%20input%20to%20form%20a%20selection%20rule%20(or%20%5B_predicate_%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FPredicate_%2528mathematical_logic%2529))%20that%20determines%20whether%20or%20not%20a%20given%20data%20record%20lies%20within%20the%20selection.%0A%20%20%20%203.%20Using%20the%20selection%20predicate%20to%20dynamically%20configure%20a%20visualization%20by%20driving%20_conditional%20encodings_%2C%20_filter%20transforms_%2C%20or%20_scale%20domains_.%0A%0A%20%20%20%20This%20notebook%20introduces%20interactive%20selections%20and%20explores%20how%20to%20use%20them%20to%20author%20a%20variety%20of%20interaction%20techniques%2C%20such%20as%20dynamic%20queries%2C%20panning%20%26amp%3B%20zooming%2C%20details-on-demand%2C%20and%20brushing%20%26amp%3B%20linking.%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%20Datasets%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%20visualize%20a%20variety%20of%20datasets%20from%20the%20%5Bvega-datasets%5D(https%3A%2F%2Fgithub.com%2Fvega%2Fvega-datasets)%20collection%3A%0A%0A%20%20%20%20-%20A%20dataset%20of%20%60cars%60%20from%20the%201970s%20and%20early%201980s%2C%0A%20%20%20%20-%20A%20dataset%20of%20%60movies%60%2C%20previously%20used%20in%20the%20%5BData%20Transformation%5D(https%3A%2F%2Fgithub.com%2Fuwdata%2Fvisualization-curriculum%2Fblob%2Fmaster%2Faltair_data_transformation.ipynb)%20notebook%2C%0A%20%20%20%20-%20A%20dataset%20containing%20ten%20years%20of%20%5BS%26amp%3BP%20500%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FS%2526P_500_Index)%20(%60sp500%60)%20stock%20prices%2C%0A%20%20%20%20-%20A%20dataset%20of%20technology%20company%20%60stocks%60%2C%20and%0A%20%20%20%20-%20A%20dataset%20of%20%60flights%60%2C%20including%20departure%20time%2C%20distance%2C%20and%20arrival%20delay.%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%20cars%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvega-datasets%401%2Fdata%2Fcars.json'%0A%20%20%20%20movies%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvega-datasets%401%2Fdata%2Fmovies.json'%0A%20%20%20%20sp500%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvega-datasets%401%2Fdata%2Fsp500.csv'%0A%20%20%20%20stocks%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvega-datasets%401%2Fdata%2Fstocks.csv'%0A%20%20%20%20flights%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvega-datasets%401%2Fdata%2Fflights-5k.json'%0A%20%20%20%20return%20cars%2C%20flights%2C%20movies%2C%20sp500%2C%20stocks%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%20Introducing%20Selections%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%20selection%3A%20simply%20clicking%20a%20point%20to%20highlight%20it.%20Using%20the%20%60cars%60%20dataset%2C%20we'll%20start%20with%20a%20scatter%20plot%20of%20horsepower%20versus%20miles%20per%20gallon%2C%20with%20a%20color%20encoding%20for%20the%20number%20cylinders%20in%20the%20car%20engine.%0A%0A%20%20%20%20In%20addition%2C%20we'll%20create%20a%20selection%20instance%20by%20calling%20%60alt.selection_single()%60%2C%20indicating%20we%20want%20a%20selection%20defined%20over%20a%20_single%20value_.%20By%20default%2C%20the%20selection%20uses%20a%20mouse%20click%20to%20determine%20the%20selected%20value.%20To%20register%20a%20selection%20with%20a%20chart%2C%20we%20must%20add%20it%20using%20the%20%60.add_params()%60%20method.%0A%0A%20%20%20%20Once%20our%20selection%20has%20been%20defined%2C%20we%20can%20use%20it%20as%20a%20parameter%20for%20_conditional%20encodings_%2C%20which%20apply%20a%20different%20encoding%20depending%20on%20whether%20a%20data%20record%20lies%20in%20or%20out%20of%20the%20selection.%20For%20example%2C%20consider%20the%20following%20code%3A%0A%0A%20%20%20%20~~~%20python%0A%20%20%20%20color%3Dalt.condition(selection%2C%20'Cylinders%3AO'%2C%20alt.value('grey'))%0A%20%20%20%20~~~%0A%0A%20%20%20%20This%20encoding%20definition%20states%20that%20data%20points%20contained%20within%20the%20%60selection%60%20should%20be%20colored%20according%20to%20the%20%60Cylinder%60%20field%2C%20while%20non-selected%20data%20points%20should%20use%20a%20default%20%60grey%60.%20An%20empty%20selection%20includes%20_all_%20data%20points%2C%20and%20so%20initially%20all%20points%20will%20be%20colored.%0A%0A%20%20%20%20_Try%20clicking%20different%20points%20in%20the%20chart%20below.%20What%20happens%3F%20(Click%20the%20background%20to%20clear%20the%20selection%20state%20and%20return%20to%20an%20%22empty%22%20selection.)_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20cars)%3A%0A%20%20%20%20_selection%20%3D%20alt.selection_point(toggle%3DFalse)%0A%20%20%20%20alt.Chart(cars).mark_circle().add_params(_selection).encode(x%3D'Horsepower%3AQ'%2C%20y%3D'Miles_per_Gallon%3AQ'%2C%20color%3Dalt.condition(_selection%2C%20'Cylinders%3AO'%2C%20alt.value('grey'))%2C%20opacity%3Dalt.condition(_selection%2C%20alt.value(0.8)%2C%20alt.value(0.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%20Of%20course%2C%20highlighting%20individual%20data%20points%20one-at-a-time%20is%20not%20particularly%20exciting!%20As%20we'll%20see%2C%20however%2C%20single%20value%20selections%20provide%20a%20useful%20building%20block%20for%20more%20powerful%20interactions.%20Moreover%2C%20single%20value%20selections%20are%20just%20one%20of%20the%20three%20selection%20types%20provided%20by%20Altair%3A%0A%0A%20%20%20%20-%20%60selection_single%60%20-%20select%20a%20single%20discrete%20value%2C%20by%20default%20on%20click%20events.%0A%20%20%20%20-%20%60selection_multi%60%20-%20select%20multiple%20discrete%20values.%20The%20first%20value%20is%20selected%20on%20mouse%20click%20and%20additional%20values%20toggled%20using%20shift-click.%0A%20%20%20%20-%20%60selection_interval%60%20-%20select%20a%20continuous%20range%20of%20values%2C%20initiated%20by%20mouse%20drag.%0A%0A%20%20%20%20Let's%20compare%20each%20of%20these%20selection%20types%20side-by-side.%20To%20keep%20our%20code%20tidy%20we'll%20first%20define%20a%20function%20(%60plot%60)%20that%20generates%20a%20scatter%20plot%20specification%20just%20like%20the%20one%20above.%20We%20can%20pass%20a%20selection%20to%20the%20%60plot%60%20function%20to%20have%20it%20applied%20to%20the%20chart%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20cars)%3A%0A%20%20%20%20def%20plot(selection)%3A%0A%20%20%20%20%20%20%20%20return%20alt.Chart(cars).mark_circle().add_params(selection).encode(x%3D'Horsepower%3AQ'%2C%20y%3D'Miles_per_Gallon%3AQ'%2C%20color%3Dalt.condition(selection%2C%20'Cylinders%3AO'%2C%20alt.value('grey'))%2C%20opacity%3Dalt.condition(selection%2C%20alt.value(0.8)%2C%20alt.value(0.1))).properties(width%3D240%2C%20height%3D180)%0A%0A%20%20%20%20return%20(plot%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%20Let's%20use%20our%20%60plot%60%20function%20to%20create%20three%20chart%20variants%2C%20one%20per%20selection%20type.%0A%0A%20%20%20%20The%20first%20(%60single%60)%20chart%20replicates%20our%20earlier%20example.%20The%20second%20(%60multi%60)%20chart%20supports%20shift-click%20interactions%20to%20toggle%20inclusion%20of%20multiple%20points%20within%20the%20selection.%20The%20third%20(%60interval%60)%20chart%20generates%20a%20selection%20region%20(or%20_brush_)%20upon%20mouse%20drag.%20Once%20created%2C%20you%20can%20drag%20the%20brush%20around%20to%20select%20different%20points%2C%20or%20scroll%20when%20the%20cursor%20is%20inside%20the%20brush%20to%20scale%20(zoom)%20the%20brush%20size.%0A%0A%20%20%20%20_Try%20interacting%20with%20each%20of%20the%20charts%20below!_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20plot)%3A%0A%20%20%20%20alt.hconcat(%0A%20%20%20%20%20%20plot(alt.selection_point(toggle%3DFalse)).properties(title%3D'Single%20(Click)')%2C%0A%20%20%20%20%20%20plot(alt.selection_point()).properties(title%3D'Multi%20(Shift-Click)')%2C%0A%20%20%20%20%20%20plot(alt.selection_interval()).properties(title%3D'Interval%20(Drag)')%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%20examples%20above%20use%20default%20interactions%20(click%2C%20shift-click%2C%20drag)%20for%20each%20selection%20type.%20We%20can%20further%20customize%20the%20interactions%20by%20providing%20input%20event%20specifications%20using%20%5BVega%20event%20selector%20syntax%5D(https%3A%2F%2Fvega.github.io%2Fvega%2Fdocs%2Fevent-streams%2F).%20For%20example%2C%20we%20can%20modify%20our%20%60single%60%20and%20%60multi%60%20charts%20to%20trigger%20upon%20%60mouseover%60%20events%20instead%20of%20%60click%60%20events.%0A%0A%20%20%20%20_Hold%20down%20the%20shift%20key%20in%20the%20second%20chart%20to%20%22paint%22%20with%20data!_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20plot)%3A%0A%20%20%20%20alt.hconcat(%0A%20%20%20%20%20%20plot(alt.selection_point(toggle%3DFalse%2C%20on%3D'mouseover')).properties(title%3D'Single%20(Mouseover)')%2C%0A%20%20%20%20%20%20plot(alt.selection_point(on%3D'mouseover')).properties(title%3D'Multi%20(Shift-Mouseover)')%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%20that%20we've%20covered%20the%20basics%20of%20Altair%20selections%2C%20let's%20take%20a%20tour%20through%20the%20various%20interaction%20techniques%20they%20enable!%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%20Dynamic%20Queries%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_Dynamic%20queries_%20enables%20rapid%2C%20reversible%20exploration%20of%20data%20to%20isolate%20patterns%20of%20interest.%20As%20defined%20by%20%5BAhlberg%2C%20Williamson%2C%20%26amp%3B%20Shneiderman%5D(https%3A%2F%2Fwww.cs.umd.edu%2F~ben%2Fpapers%2FAhlberg1992Dynamic.pdf)%2C%20a%20dynamic%20query%3A%0A%0A%20%20%20%20-%20represents%20a%20query%20graphically%2C%0A%20%20%20%20-%20provides%20visible%20limits%20on%20the%20query%20range%2C%0A%20%20%20%20-%20provides%20a%20graphical%20representation%20of%20the%20data%20and%20query%20result%2C%0A%20%20%20%20-%20gives%20immediate%20feedback%20of%20the%20result%20after%20every%20query%20adjustment%2C%0A%20%20%20%20-%20and%20allows%20novice%20users%20to%20begin%20working%20with%20little%20training.%0A%0A%20%20%20%20A%20common%20approach%20is%20to%20manipulate%20query%20parameters%20using%20standard%20user%20interface%20widgets%20such%20as%20sliders%2C%20radio%20buttons%2C%20and%20drop-down%20menus.%20To%20generate%20dynamic%20query%20widgets%2C%20we%20can%20apply%20a%20selection's%20%60bind%60%20operation%20to%20one%20or%20more%20data%20fields%20we%20wish%20to%20query.%0A%0A%20%20%20%20Let's%20build%20an%20interactive%20scatter%20plot%20that%20uses%20a%20dynamic%20query%20to%20filter%20the%20display.%20Given%20a%20scatter%20plot%20of%20movie%20ratings%20(from%20Rotten%20Tomates%20and%20IMDB)%2C%20we%20can%20add%20a%20selection%20over%20the%20%60Major_Genre%60%20field%20to%20enable%20interactive%20filtering%20by%20film%20genre.%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%20To%20start%2C%20let's%20extract%20the%20unique%20(non-null)%20genres%20from%20the%20%60movies%60%20data%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(movies%2C%20pd)%3A%0A%20%20%20%20df%20%3D%20pd.read_json(movies)%20%23%20load%20movies%20data%0A%20%20%20%20genres%20%3D%20df%5B'Major_Genre'%5D.unique()%20%23%20get%20unique%20field%20values%0A%20%20%20%20genres%20%3D%20list(filter(pd.notna%2C%20genres))%20%23%20filter%20out%20None%2FNaN%20values%0A%20%20%20%20genres.sort()%20%23%20sort%20alphabetically%0A%20%20%20%20return%20(genres%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%20For%20later%20use%2C%20let's%20also%20define%20a%20list%20of%20unique%20%60MPAA_Rating%60%20values%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%20mpaa%20%3D%20%5B'G'%2C%20'PG'%2C%20'PG-13'%2C%20'R'%2C%20'NC-17'%2C%20'Not%20Rated'%5D%0A%20%20%20%20return%20(mpaa%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%20Now%20let's%20create%20a%20%60single%60%20selection%20bound%20to%20a%20drop-down%20menu.%0A%0A%20%20%20%20*Use%20the%20dynamic%20query%20menu%20below%20to%20explore%20the%20data.%20How%20do%20ratings%20vary%20by%20genre%3F%20How%20would%20you%20revise%20the%20code%20to%20filter%20%60MPAA_Rating%60%20(G%2C%20PG%2C%20PG-13%2C%20etc.)%20instead%20of%20%60Major_Genre%60%3F*%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20genres%2C%20movies)%3A%0A%20%20%20%20selectGenre%20%3D%20alt.selection_point(%0A%20%20%20%20%20%20%20%20toggle%3DFalse%2C%0A%20%20%20%20%20%20%20%20name%3D'Select'%2C%20%23%20name%20the%20selection%20'Select'%0A%20%20%20%20%20%20%20%20fields%3D%5B'Major_Genre'%5D%2C%20%23%20limit%20selection%20to%20the%20Major_Genre%20field%0A%20%20%20%20%20%20%20%20value%3D%5B%7B'Major_Genre'%3A%20genres%5B0%5D%7D%5D%2C%20%23%20use%20first%20genre%20entry%20as%20initial%20value%0A%20%20%20%20%20%20%20%20bind%3Dalt.binding_select(options%3Dgenres)%20%23%20bind%20to%20a%20menu%20of%20unique%20genre%20values%0A%20%20%20%20)%0A%0A%20%20%20%20alt.Chart(movies).mark_circle().add_params(%0A%20%20%20%20%20%20%20%20selectGenre%0A%20%20%20%20).encode(%0A%20%20%20%20%20%20%20%20x%3D'Rotten_Tomatoes_Rating%3AQ'%2C%0A%20%20%20%20%20%20%20%20y%3D'IMDB_Rating%3AQ'%2C%0A%20%20%20%20%20%20%20%20tooltip%3D'Title%3AN'%2C%0A%20%20%20%20%20%20%20%20opacity%3Dalt.condition(selectGenre%2C%20alt.value(0.75)%2C%20alt.value(0.05))%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%20Our%20construction%20above%20leverages%20multiple%20aspects%20of%20selections%3A%0A%0A%20%20%20%20-%20We%20give%20the%20selection%20a%20name%20(%60'Select'%60).%20This%20name%20is%20not%20required%2C%20but%20allows%20us%20to%20influence%20the%20label%20text%20of%20the%20generated%20dynamic%20query%20menu.%20(_What%20happens%20if%20you%20remove%20the%20name%3F%20Try%20it!_)%0A%20%20%20%20-%20We%20constrain%20the%20selection%20to%20a%20specific%20data%20field%20(%60Major_Genre%60).%20Earlier%20when%20we%20used%20a%20%60single%60%20selection%2C%20the%20selection%20mapped%20to%20individual%20data%20points.%20By%20limiting%20the%20selection%20to%20a%20specific%20field%2C%20we%20can%20select%20_all_%20data%20points%20whose%20%60Major_Genre%60%20field%20value%20matches%20the%20single%20selected%20value.%0A%20%20%20%20-%20We%20initialize%20%60init%3D...%60%20the%20selection%20to%20a%20starting%20value.%0A%20%20%20%20-%20We%20%60bind%60%20the%20selection%20to%20an%20interface%20widget%2C%20in%20this%20case%20a%20drop-down%20menu%20via%20%60binding_select%60.%0A%20%20%20%20-%20As%20before%2C%20we%20then%20use%20a%20conditional%20encoding%20to%20control%20the%20opacity%20channel.%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%20Binding%20Selections%20to%20Multiple%20Inputs%0A%0A%20%20%20%20One%20selection%20instance%20can%20be%20bound%20to%20_multiple_%20dynamic%20query%20widgets.%20Let's%20modify%20the%20example%20above%20to%20provide%20filters%20for%20_both_%20%60Major_Genre%60%20and%20%60MPAA_Rating%60%2C%20using%20radio%20buttons%20instead%20of%20a%20menu.%20Our%20%60single%60%20selection%20is%20now%20defined%20over%20a%20single%20_pair_%20of%20genre%20and%20MPAA%20rating%20values%0A%0A%20%20%20%20_Look%20for%20surprising%20conjunctions%20of%20genre%20and%20rating.%20Are%20there%20any%20G%20or%20PG-rated%20horror%20films%3F_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20genres%2C%20movies%2C%20mpaa)%3A%0A%20%20%20%20%23%20single-value%20selection%20over%20%5BMajor_Genre%2C%20MPAA_Rating%5D%20pairs%0A%20%20%20%20%23%20use%20specific%20hard-wired%20values%20as%20the%20initial%20selected%20values%0A%20%20%20%20_selection%20%3D%20alt.selection_point(toggle%3DFalse%2C%20name%3D'Select'%2C%20fields%3D%5B'Major_Genre'%2C%20'MPAA_Rating'%5D%2C%20value%3D%5B%7B'Major_Genre'%3A%20'Drama'%2C%20'MPAA_Rating'%3A%20'R'%7D%5D%2C%20bind%3D%7B'Major_Genre'%3A%20alt.binding_select(options%3Dgenres)%2C%20'MPAA_Rating'%3A%20alt.binding_radio(options%3Dmpaa)%7D)%0A%20%20%20%20%23%20scatter%20plot%2C%20modify%20opacity%20based%20on%20selection%0A%20%20%20%20alt.Chart(movies).mark_circle().add_params(_selection).encode(x%3D'Rotten_Tomatoes_Rating%3AQ'%2C%20y%3D'IMDB_Rating%3AQ'%2C%20tooltip%3D'Title%3AN'%2C%20opacity%3Dalt.condition(_selection%2C%20alt.value(0.75)%2C%20alt.value(0.05)))%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_Fun%20facts%3A%20The%20PG-13%20rating%20didn't%20exist%20when%20the%20movies%20%5BJaws%5D(https%3A%2F%2Fwww.imdb.com%2Ftitle%2Ftt0073195%2F)%20and%20%5BJaws%202%5D(https%3A%2F%2Fwww.imdb.com%2Ftitle%2Ftt0077766%2F)%20were%20released.%20The%20first%20film%20to%20receive%20a%20PG-13%20rating%20was%201984's%20%5BRed%20Dawn%5D(https%3A%2F%2Fwww.imdb.com%2Ftitle%2Ftt0087985%2F)._%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%20Using%20Visualizations%20as%20Dynamic%20Queries%0A%0A%20%20%20%20Though%20standard%20interface%20widgets%20show%20the%20_possible_%20query%20parameter%20values%2C%20they%20do%20not%20visualize%20the%20_distribution_%20of%20those%20values.%20We%20might%20also%20wish%20to%20use%20richer%20interactions%2C%20such%20as%20multi-value%20or%20interval%20selections%2C%20rather%20than%20input%20widgets%20that%20select%20only%20a%20single%20value%20at%20a%20time.%0A%0A%20%20%20%20To%20address%20these%20issues%2C%20we%20can%20author%20additional%20charts%20to%20both%20visualize%20data%20and%20support%20dynamic%20queries.%20Let's%20add%20a%20histogram%20of%20the%20count%20of%20films%20per%20year%20and%20use%20an%20interval%20selection%20to%20dynamically%20highlight%20films%20over%20selected%20time%20periods.%0A%0A%20%20%20%20*Interact%20with%20the%20year%20histogram%20to%20explore%20films%20from%20different%20time%20periods.%20Do%20you%20seen%20any%20evidence%20of%20%5Bsampling%20bias%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSampling_bias)%20across%20the%20years%3F%20(How%20do%20year%20and%20critics'%20ratings%20relate%3F)*%0A%0A%20%20%20%20_The%20years%20range%20from%201930%20to%202040!%20Are%20future%20films%20in%20pre-production%2C%20or%20are%20there%20%22off-by-one%20century%22%20errors%3F%20Also%2C%20depending%20on%20which%20time%20zone%20you're%20in%2C%20you%20may%20see%20a%20small%20bump%20in%20either%201969%20or%201970.%20Why%20might%20that%20be%3F%20(See%20the%20end%20of%20the%20notebook%20for%20an%20explanation!)_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20movies)%3A%0A%20%20%20%20_brush%20%3D%20alt.selection_interval(encodings%3D%5B'x'%5D)%0A%20%20%20%20years%20%3D%20alt.Chart(movies).mark_bar().add_params(_brush).encode(alt.X('year(Release_Date)%3AT'%2C%20title%3D'Films%20by%20Release%20Year')%2C%20alt.Y('count()%3AQ'%2C%20title%3DNone)).properties(width%3D650%2C%20height%3D50)%20%20%23%20limit%20selection%20to%20x-axis%20(year)%20values%0A%20%20%20%20ratings%20%3D%20alt.Chart(movies).mark_circle().encode(x%3D'Rotten_Tomatoes_Rating%3AQ'%2C%20y%3D'IMDB_Rating%3AQ'%2C%20tooltip%3D'Title%3AN'%2C%20opacity%3Dalt.condition(_brush%2C%20alt.value(0.75)%2C%20alt.value(0.05))).properties(width%3D650%2C%20height%3D400)%0A%20%20%20%20%23%20dynamic%20query%20histogram%0A%20%20%20%20%23%20scatter%20plot%2C%20modify%20opacity%20based%20on%20selection%0A%20%20%20%20alt.vconcat(years%2C%20ratings).properties(spacing%3D5)%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%20example%20above%20provides%20dynamic%20queries%20using%20a%20_linked%20selection_%20between%20charts%3A%0A%0A%20%20%20%20-%20We%20create%20an%20%60interval%60%20selection%20(%60brush%60)%2C%20and%20set%20%60encodings%3D%5B'x'%5D%60%20to%20limit%20the%20selection%20to%20the%20x-axis%20only%2C%20resulting%20in%20a%20one-dimensional%20selection%20interval.%0A%20%20%20%20-%20We%20register%20%60brush%60%20with%20our%20histogram%20of%20films%20per%20year%20via%20%60.add_params(brush)%60.%0A%20%20%20%20-%20We%20use%20%60brush%60%20in%20a%20conditional%20encoding%20to%20adjust%20the%20scatter%20plot%20%60opacity%60.%0A%0A%20%20%20%20This%20interaction%20technique%20of%20selecting%20elements%20in%20one%20chart%20and%20seeing%20linked%20highlights%20in%20one%20or%20more%20other%20charts%20is%20known%20as%20%5B_brushing%20%26amp%3B%20linking_%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FBrushing_and_linking).%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%20Panning%20%26amp%3B%20Zooming%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%20movie%20rating%20scatter%20plot%20is%20a%20bit%20cluttered%20in%20places%2C%20making%20it%20hard%20to%20examine%20points%20in%20denser%20regions.%20Using%20the%20interaction%20techniques%20of%20_panning_%20and%20_zooming_%2C%20we%20can%20inspect%20dense%20regions%20more%20closely.%0A%0A%20%20%20%20Let's%20start%20by%20thinking%20about%20how%20we%20might%20express%20panning%20and%20zooming%20using%20Altair%20selections.%20What%20defines%20the%20%22viewport%22%20of%20a%20chart%3F%20_Axis%20scale%20domains!_%0A%0A%20%20%20%20We%20can%20change%20the%20scale%20domains%20to%20modify%20the%20visualized%20range%20of%20data%20values.%20To%20do%20so%20interactively%2C%20we%20can%20bind%20an%20%60interval%60%20selection%20to%20scale%20domains%20with%20the%20code%20%60bind%3D'scales'%60.%20The%20result%20is%20that%20instead%20of%20an%20interval%20brush%20that%20we%20can%20drag%20and%20zoom%2C%20we%20instead%20can%20drag%20and%20zoom%20the%20entire%20plotting%20area!%0A%0A%20%20%20%20_In%20the%20chart%20below%2C%20click%20and%20drag%20to%20pan%20(translate)%20the%20view%2C%20or%20scroll%20to%20zoom%20(scale)%20the%20view.%20What%20can%20you%20discover%20about%20the%20precision%20of%20the%20provided%20rating%20values%3F_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20movies)%3A%0A%20%20%20%20alt.Chart(movies).mark_circle().add_params(%0A%20%20%20%20%20%20%20%20alt.selection_interval(bind%3D'scales')%0A%20%20%20%20).encode(%0A%20%20%20%20%20%20%20%20x%3D'Rotten_Tomatoes_Rating%3AQ'%2C%0A%20%20%20%20%20%20%20%20y%3Dalt.Y('IMDB_Rating%3AQ'%2C%20axis%3Dalt.Axis(minExtent%3D30))%2C%20%23%20use%20min%20extent%20to%20stabilize%20axis%20title%20placement%0A%20%20%20%20%20%20%20%20tooltip%3D%5B'Title%3AN'%2C%20'Release_Date%3AN'%2C%20'IMDB_Rating%3AQ'%2C%20'Rotten_Tomatoes_Rating%3AQ'%5D%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20%20%20width%3D600%2C%0A%20%20%20%20%20%20%20%20height%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%20_Zooming%20in%2C%20we%20can%20see%20that%20the%20rating%20values%20have%20limited%20precision!%20The%20Rotten%20Tomatoes%20ratings%20are%20integers%2C%20while%20the%20IMDB%20ratings%20are%20truncated%20to%20tenths.%20As%20a%20result%2C%20there%20is%20overplotting%20even%20when%20we%20zoom%2C%20with%20multiple%20movies%20sharing%20the%20same%20rating%20values._%0A%0A%20%20%20%20Reading%20the%20code%20above%2C%20you%20may%20notice%20the%20code%20%60alt.Axis(minExtent%3D30)%60%20in%20the%20%60y%60%20encoding%20channel.%20The%20%60minExtent%60%20parameter%20ensures%20a%20minimum%20amount%20of%20space%20is%20reserved%20for%20axis%20ticks%20and%20labels.%20Why%20do%20this%3F%20When%20we%20pan%20and%20zoom%2C%20the%20axis%20labels%20may%20change%20and%20cause%20the%20axis%20title%20position%20to%20shift.%20By%20setting%20a%20minimum%20extent%20we%20can%20reduce%20distracting%20movements%20in%20the%20plot.%20_Try%20changing%20the%20%60minExtent%60%20value%2C%20for%20example%20setting%20it%20to%20zero%2C%20and%20then%20zoom%20out%20to%20see%20what%20happens%20when%20longer%20axis%20labels%20enter%20the%20view._%0A%0A%20%20%20%20Altair%20also%20includes%20a%20shorthand%20for%20adding%20panning%20and%20zooming%20to%20a%20plot.%20Instead%20of%20directly%20creating%20a%20selection%2C%20you%20can%20call%20%60.interactive()%60%20to%20have%20Altair%20automatically%20generate%20an%20interval%20selection%20bound%20to%20the%20chart's%20scales%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20movies)%3A%0A%20%20%20%20alt.Chart(movies).mark_circle().encode(%0A%20%20%20%20%20%20%20%20x%3D'Rotten_Tomatoes_Rating%3AQ'%2C%0A%20%20%20%20%20%20%20%20y%3Dalt.Y('IMDB_Rating%3AQ'%2C%20axis%3Dalt.Axis(minExtent%3D30))%2C%20%23%20use%20min%20extent%20to%20stabilize%20axis%20title%20placement%0A%20%20%20%20%20%20%20%20tooltip%3D%5B'Title%3AN'%2C%20'Release_Date%3AN'%2C%20'IMDB_Rating%3AQ'%2C%20'Rotten_Tomatoes_Rating%3AQ'%5D%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20%20%20width%3D600%2C%0A%20%20%20%20%20%20%20%20height%3D400%0A%20%20%20%20).interactive()%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%20scale%20bindings%20for%20selections%20include%20both%20the%20%60x%60%20and%20%60y%60%20encoding%20channels.%20What%20if%20we%20want%20to%20limit%20panning%20and%20zooming%20along%20a%20single%20dimension%3F%20We%20can%20invoke%20%60encodings%3D%5B'x'%5D%60%20to%20constrain%20the%20selection%20to%20the%20%60x%60%20channel%20only%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20movies)%3A%0A%20%20%20%20alt.Chart(movies).mark_circle().add_params(%0A%20%20%20%20%20%20%20%20alt.selection_interval(bind%3D'scales'%2C%20encodings%3D%5B'x'%5D)%0A%20%20%20%20).encode(%0A%20%20%20%20%20%20%20%20x%3D'Rotten_Tomatoes_Rating%3AQ'%2C%0A%20%20%20%20%20%20%20%20y%3Dalt.Y('IMDB_Rating%3AQ'%2C%20axis%3Dalt.Axis(minExtent%3D30))%2C%20%23%20use%20min%20extent%20to%20stabilize%20axis%20title%20placement%0A%20%20%20%20%20%20%20%20tooltip%3D%5B'Title%3AN'%2C%20'Release_Date%3AN'%2C%20'IMDB_Rating%3AQ'%2C%20'Rotten_Tomatoes_Rating%3AQ'%5D%0A%20%20%20%20).properties(%0A%20%20%20%20%20%20%20%20width%3D600%2C%0A%20%20%20%20%20%20%20%20height%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%20_When%20zooming%20along%20a%20single%20axis%20only%2C%20the%20shape%20of%20the%20visualized%20data%20can%20change%2C%20potentially%20affecting%20our%20perception%20of%20relationships%20in%20the%20data.%20%5BChoosing%20an%20appropriate%20aspect%20ratio%5D(http%3A%2F%2Fvis.stanford.edu%2Fpapers%2Farclength-banking)%20is%20an%20important%20visualization%20design%20concern!_%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%20Navigation%3A%20Overview%20%2B%20Detail%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%20When%20panning%20and%20zooming%2C%20we%20directly%20adjust%20the%20%22viewport%22%20of%20a%20chart.%20The%20related%20navigation%20strategy%20of%20_overview%20%2B%20detail_%20instead%20uses%20an%20overview%20display%20to%20show%20_all_%20of%20the%20data%2C%20while%20supporting%20selections%20that%20pan%20and%20zoom%20a%20separate%20focus%20display.%0A%0A%20%20%20%20Below%20we%20have%20two%20area%20charts%20showing%20a%20decade%20of%20price%20fluctuations%20for%20the%20S%26amp%3BP%20500%20stock%20index.%20Initially%20both%20charts%20show%20the%20same%20data%20range.%20_Click%20and%20drag%20in%20the%20bottom%20overview%20chart%20to%20update%20the%20focus%20display%20and%20examine%20specific%20time%20spans._%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20sp500)%3A%0A%20%20%20%20_brush%20%3D%20alt.selection_interval(encodings%3D%5B'x'%5D)%0A%20%20%20%20_base%20%3D%20alt.Chart().mark_area().encode(alt.X('date%3AT'%2C%20title%3DNone)%2C%20alt.Y('price%3AQ')).properties(width%3D700)%0A%20%20%20%20alt.vconcat(_base.encode(alt.X('date%3AT'%2C%20title%3DNone%2C%20scale%3Dalt.Scale(domain%3D_brush)))%2C%20_base.add_params(_brush).properties(height%3D60)%2C%20data%3Dsp500)%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%20Unlike%20our%20earlier%20panning%20%26amp%3B%20zooming%20case%2C%20here%20we%20don't%20want%20to%20bind%20a%20selection%20directly%20to%20the%20scales%20of%20a%20single%20interactive%20chart.%20Instead%2C%20we%20want%20to%20bind%20the%20selection%20to%20a%20scale%20domain%20in%20_another_%20chart.%20To%20do%20so%2C%20we%20update%20the%20%60x%60%20encoding%20channel%20for%20our%20focus%20chart%2C%20setting%20the%20scale%20%60domain%60%20property%20to%20reference%20our%20%60brush%60%20selection.%20If%20no%20interval%20is%20defined%20(the%20selection%20is%20empty)%2C%20Altair%20ignores%20the%20brush%20and%20uses%20the%20underlying%20data%20to%20determine%20the%20domain.%20When%20a%20brush%20interval%20is%20created%2C%20Altair%20instead%20uses%20that%20as%20the%20scale%20%60domain%60%20for%20the%20focus%20chart.%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%20Details%20on%20Demand%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%20Once%20we%20spot%20points%20of%20interest%20within%20a%20visualization%2C%20we%20often%20want%20to%20know%20more%20about%20them.%20_Details-on-demand_%20refers%20to%20interactively%20querying%20for%20more%20information%20about%20selected%20values.%20_Tooltips_%20are%20one%20useful%20means%20of%20providing%20details%20on%20demand.%20However%2C%20tooltips%20typically%20only%20show%20information%20for%20one%20data%20point%20at%20a%20time.%20How%20might%20we%20show%20more%3F%0A%0A%20%20%20%20The%20movie%20ratings%20scatterplot%20includes%20a%20number%20of%20potentially%20interesting%20outliers%20where%20the%20Rotten%20Tomatoes%20and%20IMDB%20ratings%20disagree.%20Let's%20create%20a%20plot%20that%20allows%20us%20to%20interactively%20select%20points%20and%20show%20their%20labels.%20To%20trigger%20the%20filter%20query%20on%20either%20the%20hover%20or%20click%20interaction%2C%20we%20will%20use%20the%20%5BAltair%20composition%20operator%5D(https%3A%2F%2Faltair-viz.github.io%2Fuser_guide%2Finteractions.html%23composing-multiple-selections)%20%60%7C%60%20(%22or%22).%0A%0A%20%20%20%20_Mouse%20over%20points%20in%20the%20scatter%20plot%20below%20to%20see%20a%20highlight%20and%20title%20label.%20Shift-click%20points%20to%20make%20annotations%20persistent%20and%20view%20multiple%20labels%20at%20once.%20Which%20movies%20are%20loved%20by%20Rotten%20Tomatoes%20critics%2C%20but%20not%20the%20general%20audience%20on%20IMDB%20(or%20vice%20versa)%3F%20See%20if%20you%20can%20find%20possible%20errors%2C%20where%20two%20different%20movies%20with%20the%20same%20name%20were%20accidentally%20combined!_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20movies)%3A%0A%20%20%20%20hover%20%3D%20alt.selection_point(toggle%3DFalse%2C%20on%3D'mouseover'%2C%20nearest%3DTrue%2C%20empty%3DFalse)%0A%20%20%20%20click%20%3D%20alt.selection_point(empty%3DFalse)%0A%20%20%20%20plot_1%20%3D%20alt.Chart().mark_circle().encode(x%3D'Rotten_Tomatoes_Rating%3AQ'%2C%20y%3D'IMDB_Rating%3AQ')%0A%20%20%20%20_base%20%3D%20plot_1.transform_filter(hover%20%7C%20click)%0A%20%20%20%20alt.layer(plot_1.add_params(hover).add_params(click)%2C%20_base.mark_point(size%3D100%2C%20stroke%3D'firebrick'%2C%20strokeWidth%3D1)%2C%20_base.mark_text(dx%3D4%2C%20dy%3D-8%2C%20align%3D'right'%2C%20stroke%3D'white'%2C%20strokeWidth%3D2).encode(text%3D'Title%3AN')%2C%20_base.mark_text(dx%3D4%2C%20dy%3D-8%2C%20align%3D'right').encode(text%3D'Title%3AN')%2C%20data%3Dmovies).properties(width%3D600%2C%20height%3D450)%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%20example%20above%20adds%20three%20new%20layers%20to%20the%20scatter%20plot%3A%20a%20circular%20annotation%2C%20white%20text%20to%20provide%20a%20legible%20background%2C%20and%20black%20text%20showing%20a%20film%20title.%20In%20addition%2C%20this%20example%20uses%20two%20selections%20in%20tandem%3A%0A%0A%20%20%20%201.%20A%20single%20selection%20(%60hover%60)%20that%20includes%20%60nearest%3DTrue%60%20to%20automatically%20select%20the%20nearest%20data%20point%20as%20the%20mouse%20moves.%0A%20%20%20%202.%20A%20multi%20selection%20(%60click%60)%20to%20create%20persistent%20selections%20via%20shift-click.%0A%0A%20%20%20%20Both%20selections%20include%20the%20set%20%60empty%3D'none'%60%20to%20indicate%20that%20no%20points%20should%20be%20included%20if%20a%20selection%20is%20empty.%20These%20selections%20are%20then%20combined%20into%20a%20single%20filter%20predicate%20%26mdash%3B%20the%20logical%20_or_%20of%20%60hover%60%20and%20%60click%60%20%26mdash%3B%20to%20include%20points%20that%20reside%20in%20_either_%20selection.%20We%20use%20this%20predicate%20to%20filter%20the%20new%20layers%20to%20show%20annotations%20and%20labels%20for%20selected%20points%20only.%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%20Using%20selections%20and%20layers%2C%20we%20can%20realize%20a%20number%20of%20different%20designs%20for%20details%20on%20demand!%20For%20example%2C%20here%20is%20a%20log-scaled%20time%20series%20of%20technology%20stock%20prices%2C%20annotated%20with%20a%20guideline%20and%20labels%20for%20the%20date%20nearest%20the%20mouse%20cursor%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20stocks)%3A%0A%20%20%20%20%23%20select%20a%20point%20for%20which%20to%20provide%20details-on-demand%0A%20%20%20%20label%20%3D%20alt.selection_point(toggle%3DFalse%2C%20encodings%3D%5B'x'%5D%2C%20on%3D'mouseover'%2C%20nearest%3DTrue%2C%20empty%3DFalse)%0A%20%20%20%20_base%20%3D%20alt.Chart().mark_line().encode(alt.X('date%3AT')%2C%20alt.Y('price%3AQ'%2C%20scale%3Dalt.Scale(type%3D'log'))%2C%20alt.Color('symbol%3AN'))%20%20%23%20limit%20selection%20to%20x-axis%20value%0A%20%20%20%20%23%20define%20our%20base%20line%20chart%20of%20stock%20prices%0A%20%20%20%20alt.layer(_base%2C%20alt.Chart().mark_rule(color%3D'%23aaa').encode(x%3D'date%3AT').transform_filter(label)%2C%20_base.mark_circle().encode(opacity%3Dalt.condition(label%2C%20alt.value(1)%2C%20alt.value(0))).add_params(label)%2C%20_base.mark_text(align%3D'left'%2C%20dx%3D5%2C%20dy%3D-5%2C%20stroke%3D'white'%2C%20strokeWidth%3D2).encode(text%3D'price%3AQ').transform_filter(label)%2C%20_base.mark_text(align%3D'left'%2C%20dx%3D5%2C%20dy%3D-5).encode(text%3D'price%3AQ').transform_filter(label)%2C%20data%3Dstocks).properties(width%3D700%2C%20height%3D400)%20%20%23%20select%20on%20mouseover%20events%20%20%23%20select%20data%20point%20nearest%20the%20cursor%20%20%23%20empty%20selection%20includes%20no%20data%20points%20%20%23%20base%20line%20chart%20%20%23%20add%20a%20rule%20mark%20to%20serve%20as%20a%20guide%20line%20%20%23%20add%20circle%20marks%20for%20selected%20time%20points%2C%20hide%20unselected%20points%20%20%23%20add%20white%20stroked%20text%20to%20provide%20a%20legible%20background%20for%20labels%20%20%23%20add%20text%20labels%20for%20stock%20prices%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_Putting%20into%20action%20what%20we've%20learned%20so%20far%3A%20can%20you%20modify%20the%20movie%20scatter%20plot%20above%20(the%20one%20with%20the%20dynamic%20query%20over%20years)%20to%20include%20a%20%60rule%60%20mark%20that%20shows%20the%20average%20IMDB%20(or%20Rotten%20Tomatoes)%20rating%20for%20the%20data%20contained%20within%20the%20year%20%60interval%60%20selection%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%20Brushing%20%26amp%3B%20Linking%2C%20Revisited%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%20Earlier%20in%20this%20notebook%20we%20saw%20an%20example%20of%20_brushing%20%26amp%3B%20linking_%3A%20using%20a%20dynamic%20query%20histogram%20to%20highlight%20points%20in%20a%20movie%20rating%20scatter%20plot.%20Here%2C%20we'll%20visit%20some%20additional%20examples%20involving%20linked%20selections.%0A%0A%20%20%20%20Returning%20to%20the%20%60cars%60%20dataset%2C%20we%20can%20use%20the%20%60repeat%60%20operator%20to%20build%20a%20%5Bscatter%20plot%20matrix%20(SPLOM)%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FScatter_plot%23Scatterplot_matrices)%20that%20shows%20associations%20between%20mileage%2C%20acceleration%2C%20and%20horsepower.%20We%20can%20define%20an%20%60interval%60%20selection%20and%20include%20it%20_within_%20our%20repeated%20scatter%20plot%20specification%20to%20enable%20linked%20selections%20among%20all%20the%20plots.%0A%0A%20%20%20%20_Click%20and%20drag%20in%20any%20of%20the%20plots%20below%20to%20perform%20brushing%20%26amp%3B%20linking!_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20cars)%3A%0A%20%20%20%20_brush%20%3D%20alt.selection_interval(resolve%3D'global')%0A%20%20%20%20alt.Chart(cars).mark_circle().add_params(_brush).encode(alt.X(alt.repeat('column')%2C%20type%3D'quantitative')%2C%20alt.Y(alt.repeat('row')%2C%20type%3D'quantitative')%2C%20color%3Dalt.condition(_brush%2C%20'Cylinders%3AO'%2C%20alt.value('grey'))%2C%20opacity%3Dalt.condition(_brush%2C%20alt.value(0.8)%2C%20alt.value(0.1))).properties(width%3D140%2C%20height%3D140).repeat(column%3D%5B'Acceleration'%2C%20'Horsepower'%2C%20'Miles_per_Gallon'%5D%2C%20row%3D%5B'Miles_per_Gallon'%2C%20'Horsepower'%2C%20'Acceleration'%5D)%20%20%23%20resolve%20all%20selections%20to%20a%20single%20global%20instance%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%20above%20the%20use%20of%20%60resolve%3D'global'%60%20on%20the%20%60interval%60%20selection.%20The%20default%20setting%20of%20%60'global'%60%20indicates%20that%20across%20all%20plots%20only%20one%20brush%20can%20be%20active%20at%20a%20time.%20However%2C%20in%20some%20cases%20we%20might%20want%20to%20define%20brushes%20in%20multiple%20plots%20and%20combine%20the%20results.%20If%20we%20use%20%60resolve%3D'union'%60%2C%20the%20selection%20will%20be%20the%20_union_%20of%20all%20brushes%3A%20if%20a%20point%20resides%20within%20any%20brush%20it%20will%20be%20selected.%20Alternatively%2C%20if%20we%20use%20%60resolve%3D'intersect'%60%2C%20the%20selection%20will%20consist%20of%20the%20_intersection_%20of%20all%20brushes%3A%20only%20points%20that%20reside%20within%20all%20brushes%20will%20be%20selected.%0A%0A%20%20%20%20_Try%20setting%20the%20%60resolve%60%20parameter%20to%20%60'union'%60%20and%20%60'intersect'%60%20and%20see%20how%20it%20changes%20the%20resulting%20selection%20logic._%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%20Cross-Filtering%0A%0A%20%20%20%20The%20brushing%20%26amp%3B%20linking%20examples%20we've%20looked%20at%20all%20use%20conditional%20encodings%2C%20for%20example%20to%20change%20opacity%20values%20in%20response%20to%20a%20selection.%20Another%20option%20is%20to%20use%20a%20selection%20defined%20in%20one%20view%20to%20_filter_%20the%20content%20of%20another%20view.%0A%0A%20%20%20%20Let's%20build%20a%20collection%20of%20histograms%20for%20the%20%60flights%60%20dataset%3A%20arrival%20%60delay%60%20(how%20early%20or%20late%20a%20flight%20arrives%2C%20in%20minutes)%2C%20%60distance%60%20flown%20(in%20miles)%2C%20and%20%60time%60%20of%20departure%20(hour%20of%20the%20day).%20We'll%20use%20the%20%60repeat%60%20operator%20to%20create%20the%20histograms%2C%20and%20add%20an%20%60interval%60%20selection%20for%20the%20%60x%60%20axis%20with%20brushes%20resolved%20via%20intersection.%0A%0A%20%20%20%20In%20particular%2C%20each%20histogram%20will%20consist%20of%20two%20layers%3A%20a%20gray%20background%20layer%20and%20a%20blue%20foreground%20layer%2C%20with%20the%20foreground%20layer%20filtered%20by%20our%20intersection%20of%20brush%20selections.%20The%20result%20is%20a%20_cross-filtering_%20interaction%20across%20the%20three%20charts!%0A%0A%20%20%20%20_Drag%20out%20brush%20intervals%20in%20the%20charts%20below.%20As%20you%20select%20flights%20with%20longer%20or%20shorter%20arrival%20delays%2C%20how%20do%20the%20distance%20and%20time%20distributions%20respond%3F_%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(alt%2C%20flights)%3A%0A%20%20%20%20_brush%20%3D%20alt.selection_interval(encodings%3D%5B'x'%5D%2C%20resolve%3D'intersect')%0A%20%20%20%20hist%20%3D%20alt.Chart().mark_bar().encode(alt.X(alt.repeat('row')%2C%20type%3D'quantitative'%2C%20bin%3Dalt.Bin(maxbins%3D100%2C%20minstep%3D1)%2C%20axis%3Dalt.Axis(format%3D'd'%2C%20titleAnchor%3D'start'))%2C%20alt.Y('count()%3AQ'%2C%20title%3DNone))%0A%20%20%20%20alt.layer(hist.add_params(_brush).encode(color%3Dalt.value('lightgrey'))%2C%20hist.transform_filter(_brush)).properties(width%3D900%2C%20height%3D100).repeat(row%3D%5B'delay'%2C%20'distance'%2C%20'time'%5D%2C%20data%3Dflights).transform_calculate(delay%3D'datum.delay%20%3C%20180%20%3F%20datum.delay%20%3A%20180'%2C%20time%3D'hours(datum.date)%20%2B%20minutes(datum.date)%20%2F%2060').configure_view(stroke%3D'transparent')%20%20%23%20up%20to%20100%20bins%20%20%23%20integer%20format%2C%20left-aligned%20title%20%20%23%20no%20y-axis%20title%20%20%23%20clamp%20delays%20%3E%203%20hours%20%20%23%20fractional%20hours%20%20%23%20no%20outline%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_By%20cross-filtering%20you%20can%20observe%20that%20delayed%20flights%20are%20more%20likely%20to%20depart%20at%20later%20hours.%20This%20phenomenon%20is%20familiar%20to%20frequent%20fliers%3A%20a%20delay%20can%20propagate%20through%20the%20day%2C%20affecting%20subsequent%20travel%20by%20that%20plane.%20For%20the%20best%20odds%20of%20an%20on-time%20arrival%2C%20book%20an%20early%20flight!_%0A%0A%20%20%20%20The%20combination%20of%20multiple%20views%20and%20interactive%20selections%20can%20enable%20valuable%20forms%20of%20multi-dimensional%20reasoning%2C%20turning%20even%20basic%20histograms%20into%20powerful%20input%20devices%20for%20asking%20questions%20of%20a%20dataset!%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%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%20For%20more%20information%20about%20the%20supported%20interaction%20options%20in%20Altair%2C%20please%20consult%20the%20%5BAltair%20interactive%20selection%20documentation%5D(https%3A%2F%2Faltair-viz.github.io%2Fuser_guide%2Finteractions.html).%20For%20details%20about%20customizing%20event%20handlers%2C%20for%20example%20to%20compose%20multiple%20interaction%20techniques%20or%20support%20touch-based%20input%20on%20mobile%20devices%2C%20see%20the%20%5BVega-Lite%20selection%20documentation%5D(https%3A%2F%2Fvega.github.io%2Fvega-lite%2Fdocs%2Fselection.html).%0A%0A%20%20%20%20Interested%20in%20learning%20more%3F%0A%20%20%20%20-%20The%20_selection_%20abstraction%20was%20introduced%20in%20the%20paper%20%5BVega-Lite%3A%20A%20Grammar%20of%20Interactive%20Graphics%5D(http%3A%2F%2Fidl.cs.washington.edu%2Fpapers%2Fvega-lite%2F)%2C%20by%20Satyanarayan%2C%20Moritz%2C%20Wongsuphasawat%2C%20%26amp%3B%20Heer.%0A%20%20%20%20-%20The%20PRIM-9%20system%20(for%20projection%2C%20rotation%2C%20isolation%2C%20and%20masking%20in%20up%20to%209%20dimensions)%20is%20one%20of%20the%20earliest%20interactive%20visualization%20tools%2C%20built%20in%20the%20early%201970s%20by%20Fisherkeller%2C%20Tukey%2C%20%26amp%3B%20Friedman.%20%5BA%20retro%20demo%20video%20survives!%5D(https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DB7XoW2qiFUA)%0A%20%20%20%20-%20The%20concept%20of%20brushing%20%26amp%3B%20linking%20was%20crystallized%20by%20Becker%2C%20Cleveland%2C%20%26amp%3B%20Wilks%20in%20their%201987%20article%20%5BDynamic%20Graphics%20for%20Data%20Analysis%5D(https%3A%2F%2Fscholar.google.com%2Fscholar%3Fcluster%3D14817303117298653693).%0A%20%20%20%20-%20For%20a%20comprehensive%20summary%20of%20interaction%20techniques%20for%20visualization%2C%20see%20%5BInteractive%20Dynamics%20for%20Visual%20Analysis%5D(https%3A%2F%2Fqueue.acm.org%2Fdetail.cfm%3Fid%3D2146416)%20by%20Heer%20%26amp%3B%20Shneiderman.%0A%20%20%20%20-%20Finally%2C%20for%20a%20treatise%20on%20what%20makes%20interaction%20effective%2C%20read%20the%20classic%20%5BDirect%20Manipulation%20Interfaces%5D(https%3A%2F%2Fscholar.google.com%2Fscholar%3Fcluster%3D15702972136892195211)%20paper%20by%20Hutchins%2C%20Hollan%2C%20%26amp%3B%20Norman.%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%23%20Appendix%3A%20On%20The%20Representation%20of%20Time%0A%0A%20%20%20%20Earlier%20we%20observed%20a%20small%20bump%20in%20the%20number%20of%20movies%20in%20either%201969%20and%201970.%20Where%20does%20that%20bump%20come%20from%3F%20And%20why%201969%20_or_%201970%3F%20The%20answer%20stems%20from%20a%20combination%20of%20missing%20data%20and%20how%20your%20computer%20represents%20time.%0A%0A%20%20%20%20Internally%2C%20dates%20and%20times%20are%20represented%20relative%20to%20the%20%5BUNIX%20epoch%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FUnix_time)%2C%20in%20which%20time%20%22zero%22%20corresponds%20to%20the%20stroke%20of%20midnight%20on%20January%201%2C%201970%20in%20%5BUTC%20time%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FCoordinated_Universal_Time)%2C%20which%20runs%20along%20the%20%5Bprime%20meridian%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FPrime_meridian).%20It%20turns%20out%20there%20are%20a%20few%20movies%20with%20missing%20(%60null%60)%20release%20dates.%20Those%20%60null%60%20values%20get%20interpreted%20as%20time%20%600%60%2C%20and%20thus%20map%20to%20January%201%2C%201970%20in%20UTC%20time.%20If%20you%20live%20in%20the%20Americas%20%26ndash%3B%20and%20thus%20in%20%22earlier%22%20time%20zones%20%26ndash%3B%20this%20precise%20point%20in%20time%20corresponds%20to%20an%20earlier%20hour%20on%20December%2031%2C%201969%20in%20your%20local%20time%20zone.%20On%20the%20other%20hand%2C%20if%20you%20live%20near%20or%20east%20of%20the%20prime%20meridian%2C%20the%20date%20in%20your%20local%20time%20zone%20will%20be%20January%201%2C%201970.%0A%0A%20%20%20%20The%20takeaway%3F%20Always%20be%20skeptical%20of%20your%20data%2C%20and%20be%20mindful%20that%20how%20data%20is%20represented%20(whether%20as%20date%20times%2C%20or%20floating%20point%20numbers%2C%20or%20latitudes%20and%20longitudes%2C%20_etc._)%20can%20sometimes%20lead%20to%20artifacts%20that%20impact%20analysis!%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