Publishing Interactive Visualizations

import%20marimo%0A%0A__generated_with%20%3D%20%220.14.7%22%0Aapp%20%3D%20marimo.App(%0A%20%20%20%20width%3D%22medium%22%2C%0A%20%20%20%20app_title%3D%22Publishing%20Interactive%20Visualizations%22%2C%0A)%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20return%20(mo%2C)%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%23%20Publishing%20Interactive%20Visualizations%0A%0A%20%20%20%20Effectively%20communicating%20complex%20datasets%20is%20one%20of%20the%20most%20rewarding%20tasks%20in%20modern%20science%2C%20but%20it%20comes%20with%20real%20challenges.%0A%20%20%20%20When%20you%20have%20reached%20the%20limits%20of%20what%20can%20be%20done%20with%20a%20static%20manuscript%20figure%2C%20the%20next%20option%20to%20explore%20may%20be%20an%20**interactive%20visualization**.%0A%20%20%20%20These%20displays%20are%20generally%20accessed%20using%20web%20browsers%2C%20since%20browsers%20are%20already%20installed%20on%20almost%20every%20personal%20computer%20in%20the%20word.%0A%20%20%20%20However%2C%20it%20is%20often%20challenging%20for%20researchers%20to%20publish%20to%20the%20web%20without%20either%20running%20a%20server%20or%20forgoing%20interactivity.%0A%20%20%20%20A%20new%20exciting%20development%20in%20this%20field%20is%20**marimo**%2C%20a%20Python-based%20framework%20for%20deploying%20interactive%20visualizations%20in%20an%20entirely%20serverless%20manner.%0A%0A%20%20%20%20The%20text%20and%20figures%20that%20you%20see%20on%20this%20page%20were%20generated%20using%20**marimo**%2C%20with%20all%20of%20the%20visualizations%20and%20interactivity%20generated%20within%20the%20browser%20on%20your%20computer.%0A%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20%23%20If%20the%20script%20is%20running%20in%20WASM%20(instead%20of%20local%20development%20mode)%2C%20load%20micropip%0A%20%20%20%20import%20sys%0A%20%20%20%20if%20%22pyodide%22%20in%20sys.modules%3A%0A%20%20%20%20%20%20%20%20import%20micropip%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20micropip%20%3D%20None%0A%20%20%20%20return%20(micropip%2C)%0A%0A%0A%40app.cell%0Aasync%20def%20_(micropip%2C%20mo)%3A%0A%20%20%20%20%23%20Load%20the%20python%20dependencies%20needed%20to%20read%20in%20data%20and%20display%20the%20%0A%20%20%20%20with%20mo.status.spinner(%22Loading%20dependencies%22)%3A%0A%20%20%20%20%20%20%20%20import%20pyarrow%0A%20%20%20%20%20%20%20%20import%20pandas%20as%20pd%0A%20%20%20%20%20%20%20%20if%20micropip%20is%20not%20None%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20micropip.uninstall(%22narwhals%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20micropip.uninstall(%22plotly%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20await%20micropip.install(%22plotly%3C6.0.0%22)%0A%20%20%20%20%20%20%20%20import%20plotly.express%20as%20px%0A%20%20%20%20return%20pd%2C%20px%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%23%23%20Loading%20Data%0A%0A%20%20%20%20Datasets%20can%20be%20read%20into%20memory%20from%20a%20public%20URL%2C%20the%20code%20repository%20which%20contains%20the%20manuscript%20text%2C%20or%20from%20any%20other%20source%20which%20can%20be%20loaded%20using%20a%20Python%20library.%0A%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(pd)%3A%0A%20%20%20%20import%20requests%0A%20%20%20%20from%20io%20import%20BytesIO%0A%0A%20%20%20%20def%20read_feather(data_path)%20-%3E%20pd.DataFrame%3A%0A%20%20%20%20%20%20%20%20try%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20pd.read_feather(data_path)%0A%20%20%20%20%20%20%20%20except%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20response%20%3D%20requests.get(data_path)%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20pd.read_feather(BytesIO(response.content))%0A%0A%20%20%20%20return%20(read_feather%2C)%0A%0A%0A%40app.cell%0Adef%20_(mo%2C%20read_feather)%3A%0A%20%20%20%20%23%20Read%20in%20the%20dataset%20to%20display%0A%20%20%20%20with%20mo.status.spinner(%22Loading%20data%22)%3A%0A%20%20%20%20%20%20%20%20df%20%3D%20read_feather(str(mo.notebook_location()%20%2F%20%22public%22%20%2F%20%22accidents_opendata.feather%22))%0A%20%20%20%20return%20(df%2C)%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20The%20dataset%20that%20we%20will%20use%20here%20was%20obtained%20from%20%5Bthe%20Barcelona%20Traffic%20Accidents%20entry%20in%20Kaggle%5D(https%3A%2F%2Fwww.kaggle.com%2Fdatasets%2Femmanuelfwerr%2Fbarcelona-car-accidents)%20on%20January%2024%2C%202025%20under%20the%20%5BCC0%3A%20Public%20Domain%5D(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%20licence.%0A%20%20%20%20A%20full%20description%20of%20the%20source%20and%20formatting%20modifications%20made%20to%20this%20table%20can%20be%20found%20in%20the%20README.md%20of%20%5Bthis%20repository's%20public%2F%20folder%5D(https%3A%2F%2Fgithub.com%2FFredHutch%2Fmarimo-publication%2Ftree%2Fmain%2Fpublic).%0A%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(df)%3A%0A%20%20%20%20df%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%20Web%20Browsers%20are%20Inherently%20Interactive%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(df%2C%20pd)%3A%0A%20%20%20%20def%20bin_df(df%3A%20pd.DataFrame%2C%20nbins%3A%20int)%3A%0A%0A%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20df%0A%20%20%20%20%20%20%20%20%20%20%20%20.assign(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20utm_coordinate_x%3Dpd.cut(df%5B%22utm_coordinate_x%22%5D%2C%20nbins).apply(lambda%20v%3A%20v.mid).astype(float)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20utm_coordinate_y%3Dpd.cut(df%5B%22utm_coordinate_y%22%5D%2C%20nbins).apply(lambda%20v%3A%20v.mid).astype(float)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20.groupby(%5B%22utm_coordinate_x%22%2C%20%22utm_coordinate_y%22%2C%20%22district_name%22%5D)%0A%20%20%20%20%20%20%20%20%20%20%20%20.apply(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lambda%20d%3A%20pd.Series(dict(n_incidents%3Dd.shape%5B0%5D%2C%20n_vehicles%3Dd%5B%22n_vehicles%22%5D.sum()%2C%20n_victims%3Dd%5B%22n_victims%22%5D.sum()))%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20include_groups%3DFalse%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20.reset_index()%0A%20%20%20%20%20%20%20%20)%20%20%20%20%0A%0A%20%20%20%20binned_df%20%3D%20bin_df(df%2C%2040)%0A%20%20%20%20return%20(binned_df%2C)%0A%0A%0A%40app.cell%0Adef%20_(binned_df)%3A%0A%20%20%20%20binned_df%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(binned_df%2C%20px)%3A%0A%20%20%20%20%23%20Bin%20the%20points%20to%20prevent%20overplotting%0A%20%20%20%20fig%20%3D%20px.scatter(%0A%20%20%20%20%20%20%20%20binned_df%2C%0A%20%20%20%20%20%20%20%20x%3D'utm_coordinate_x'%2C%0A%20%20%20%20%20%20%20%20y%3D'utm_coordinate_y'%2C%0A%20%20%20%20%20%20%20%20size%3D'n_vehicles'%2C%0A%20%20%20%20%20%20%20%20color%3D%22district_name%22%2C%0A%20%20%20%20%20%20%20%20template%3D%22simple_white%22%2C%0A%20%20%20%20%20%20%20%20labels%3Ddict(%0A%20%20%20%20%20%20%20%20%20%20%20%20utm_coordinate_x%3D%22UTM%20Coordinate%20X%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20utm_coordinate_y%3D%22UTM%20Coordinate%20Y%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20district_name%3D%22District%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20n_vehicles%3D%22Number%20of%20Vehicles%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20n_victims%3D%22Number%20of%20Victims%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20n_incidents%3D%22Number%20of%20Incidents%22%0A%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20title%3D%22Barcelona%20Accident%20Data%22%2C%0A%20%20%20%20%20%20%20%20hover_data%3D%5B%22n_vehicles%22%2C%20%22n_incidents%22%2C%20%22n_victims%22%5D%2C%0A%20%20%20%20%20%20%20%20width%3D800%2C%0A%20%20%20%20%20%20%20%20height%3D600%0A%20%20%20%20)%0A%20%20%20%20fig.update_layout(%0A%20%20%20%20%20%20%20%20xaxis_showticklabels%3DFalse%2C%0A%20%20%20%20%20%20%20%20xaxis_showline%3DFalse%2C%0A%20%20%20%20%20%20%20%20yaxis_showline%3DFalse%2C%0A%20%20%20%20%20%20%20%20yaxis_showticklabels%3DFalse%0A%20%20%20%20)%0A%20%20%20%20fig%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20Compared%20to%20a%20static%20manuscript%2C%20displaying%20figures%20in%20a%20web%20browser%20provides%20some%20immediate%20features%20that%20can%20be%20useful.%0A%20%20%20%20A%20basic%20element%20of%20interactivity%20is%20moving%20your%20cursor%20over%20a%20single%20point%20a%20complex%20display%2C%20or%20by%20clicking%20and%20dragging%20a%20box%20to%20zoom%20into%20a%20particular%20region%20of%20the%20display.%20%0A%20%20%20%20For%20publications%20using%20**marimo**%2C%20the%20best%20options%20for%20generating%20interactive%20displays%20are%20%5BPlotly%5D(https%3A%2F%2Fplotly.com%2Fpython%2F)%20and%20%5BAltair%5D(https%3A%2F%2Faltair-viz.github.io%2F)%2C%20each%20of%20which%20provide%20an%20amazing%20amount%20of%20flexibility%20and%20power.%0A%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(df%2C%20pd)%3A%0A%20%20%20%20%23%20Make%20a%20summary%20table%0A%20%20%20%20summary%20%3D%20(%0A%20%20%20%20%20%20%20%20df%0A%20%20%20%20%20%20%20%20.groupby(%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%22district_name%22%2C%20%22year_month%22%5D%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20.apply(%0A%20%20%20%20%20%20%20%20%20%20%20%20lambda%20d%3A%20pd.Series(dict(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20n_incidents%3Dd.shape%5B0%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20**d%5B%5B'n_victims'%2C%20'n_vehicles'%5D%5D.sum().to_dict()%0A%20%20%20%20%20%20%20%20%20%20%20%20))%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20include_groups%3DFalse%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20.reset_index()%0A%20%20%20%20%20%20%20%20.assign(%0A%20%20%20%20%20%20%20%20%20%20%20%20year%3Dlambda%20d%3A%20d%5B%22year_month%22%5D.apply(lambda%20s%3A%20int(s.split(%22-%22)%5B0%5D))%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20month%3Dlambda%20d%3A%20d%5B%22year_month%22%5D.apply(lambda%20s%3A%20int(s.split(%22-%22)%5B1%5D))%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20)%0A%20%20%20%20return%20(summary%2C)%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%23%23%20Customizing%20Plots%20with%20User%20Input%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(px%2C%20summary)%3A%0A%20%20%20%20summary_lineplot%20%3D%20px.line(%0A%20%20%20%20%20%20%20%20summary%2C%0A%20%20%20%20%20%20%20%20x%3D'year_month'%2C%0A%20%20%20%20%20%20%20%20y%3D'n_incidents'%2C%0A%20%20%20%20%20%20%20%20color%3D%22district_name%22%2C%0A%20%20%20%20%20%20%20%20template%3D%22simple_white%22%2C%0A%20%20%20%20%20%20%20%20labels%3Ddict(%0A%20%20%20%20%20%20%20%20%20%20%20%20utm_coordinate_x%3D%22UTM%20Coordinate%20X%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20utm_coordinate_y%3D%22UTM%20Coordinate%20Y%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20district_name%3D%22District%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20n_vehicles%3D%22Number%20of%20Vehicles%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20n_victims%3D%22Number%20of%20Victims%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20n_incidents%3D%22Number%20of%20Incidents%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20datetime%3D%22Date%20%2F%20Time%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20year_month%3D%22Year%20%2F%20Month%22%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20)%0A%20%20%20%20summary_lineplot%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20While%20the%20summary%20figure%20above%20shows%20a%20number%20of%20patterns%20in%20the%20data%20(e.g.%20differences%20between%20districts%2C%20variability%20over%20months%20within%20a%20year%2C%20and%20a%20sharp%20dropoff%20in%20March%202020)%2C%20it%20may%20be%20difficult%20for%20the%20reader%20to%20isolate%20those%20axes%20of%20variability%20in%20a%20focused%20display%20without%20loading%20the%20source%20data%20and%20rerunning%20the%20entire%20analysis%20process%20locally.%0A%0A%20%20%20%20The%20user%20input%20features%20provided%20by%20marimo%20are%20extremely%20open-ended%2C%20and%20can%20be%20used%20to%20provide%20the%20user%20with%20the%20ability%20to%20create%20precisely%20the%20plot%20they%20want.%0A%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(df%2C%20mo)%3A%0A%20%20%20%20%23%20Collect%20user%20input%20on%20how%20to%20summarize%20the%20data%20and%20format%20the%20plot%0A%20%20%20%20params%20%3D%20(%0A%20%20%20%20%20%20%20%20mo.md(%22%22%22%23%23%23%20User%20Input%0A%0A%20%20%20%20-%20Include%20Districts%3A%20%7Bdistricts%7D%0A%20%20%20%20-%20Include%20Neighborhoods%3A%20%7Bneighborhoods%7D%0A%20%20%20%20-%20Group%20by%20%7Bgroup_by%7D%0A%20%20%20%20-%20Include%20Years%3A%20%7Byears%7D%0A%20%20%20%20-%20X-axis%3A%20%7Bx_axis%7D%0A%20%20%20%20-%20Y-axis%3A%20%7By_axis%7D%0A%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20.batch(%0A%20%20%20%20%20%20%20%20%20%20%20%20districts%3Dmo.ui.multiselect(options%3Ddf%5B'district_name'%5D.unique()%2C%20value%3Ddf%5B'district_name'%5D.unique())%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20neighborhoods%3Dmo.ui.multiselect(options%3Ddf%5B'neighborhood_name'%5D.unique()%2C%20value%3Ddf%5B'neighborhood_name'%5D.unique())%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20group_by%3Dmo.ui.dropdown(options%3D%5B%22Districts%22%2C%20%22Neighborhoods%22%5D%2C%20value%3D%22Districts%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20years%3Dmo.ui.multiselect(options%3Ddf%5B'year'%5D.apply(str).unique()%2C%20value%3Ddf%5B'year'%5D.apply(str).unique())%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20months%3Dmo.ui.multiselect(options%3Ddf%5B'month'%5D.apply(str).unique()%2C%20value%3Ddf%5B'month'%5D.apply(str).unique())%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20x_axis%3Dmo.ui.dropdown(options%3D%5B%22Month%22%2C%20%22Year%22%5D%2C%20value%3D%22Month%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20y_axis%3Dmo.ui.dropdown(options%3D%5B%22Incidents%22%2C%20%22Vehicles%22%5D%2C%20value%3D%22Incidents%22)%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20)%0A%20%20%20%20params%0A%20%20%20%20return%20(params%2C)%0A%0A%0A%40app.cell%0Adef%20_(df%2C%20params%2C%20pd)%3A%0A%20%20%20%20%23%20Subset%20the%20summary%20data%20based%20on%20the%20user%20input%0A%20%20%20%20group_by_kw%20%3D%20params.value%5B%22group_by%22%5D.lower()%5B%3A-1%5D%20%2B%20%22_name%22%0A%20%20%20%20time_unit%20%3D%20%22year_month%22%20if%20params.value%5B%22x_axis%22%5D%20%3D%3D%20%22Month%22%20else%20%22year%22%0A%20%20%20%20subset_summary%20%3D%20(%0A%20%20%20%20%20%20%20%20df%0A%20%20%20%20%20%20%20%20.loc%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20df.apply(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lambda%20r%3A%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20r%5B%22district_name%22%5D%20in%20params.value%5B%22districts%22%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20and%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20r%5B%22neighborhood_name%22%5D%20in%20params.value%5B%22neighborhoods%22%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20and%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20str(r%5B'year'%5D)%20in%20params.value%5B%22years%22%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20and%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20str(r%5B'month'%5D)%20in%20params.value%5B%22months%22%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20axis%3D1%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20.groupby(%0A%20%20%20%20%20%20%20%20%20%20%20%20%5Bgroup_by_kw%2C%20time_unit%5D%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20.apply(%0A%20%20%20%20%20%20%20%20%20%20%20%20lambda%20d%3A%20pd.Series(dict(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20n_incidents%3Dd.shape%5B0%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20**d%5B%5B'n_victims'%2C%20'n_vehicles'%5D%5D.sum().to_dict()%0A%20%20%20%20%20%20%20%20%20%20%20%20))%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20include_groups%3DFalse%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20.reset_index()%0A%20%20%20%20)%0A%20%20%20%20if%20time_unit%20%3D%3D%20%22year_month%22%3A%0A%20%20%20%20%20%20%20%20subset_summary%20%3D%20subset_summary.assign(%0A%20%20%20%20%20%20%20%20%20%20%20%20year%3Dlambda%20d%3A%20d%5B%22year_month%22%5D.apply(lambda%20s%3A%20int(s.split(%22-%22)%5B0%5D))%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20month%3Dlambda%20d%3A%20d%5B%22year_month%22%5D.apply(lambda%20s%3A%20int(s.split(%22-%22)%5B1%5D))%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20return%20group_by_kw%2C%20subset_summary%2C%20time_unit%0A%0A%0A%40app.cell%0Adef%20_(group_by_kw%2C%20params%2C%20px%2C%20subset_summary%2C%20time_unit)%3A%0A%20%20%20%20%23%20Make%20the%20display%0A%20%20%20%20y_cname%20%3D%20%22n_incidents%22%20if%20params.value%5B%22y_axis%22%5D%20%3D%3D%20%22Incidents%22%20else%20%22n_vehicles%22%0A%20%20%20%20custom_fig%20%3D%20px.line(%0A%20%20%20%20%20%20%20%20data_frame%3Dsubset_summary%2C%0A%20%20%20%20%20%20%20%20x%3Dtime_unit%2C%0A%20%20%20%20%20%20%20%20y%3Dy_cname%2C%0A%20%20%20%20%20%20%20%20color%3Dgroup_by_kw%2C%0A%20%20%20%20%20%20%20%20template%3D%22simple_white%22%2C%0A%20%20%20%20%20%20%20%20labels%3Ddict(%0A%20%20%20%20%20%20%20%20%20%20%20%20utm_coordinate_x%3D%22UTM%20Coordinate%20X%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20utm_coordinate_y%3D%22UTM%20Coordinate%20Y%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20district_name%3D%22District%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20neighborhood_name%3D%22Neighborhood%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20n_vehicles%3D%22Number%20of%20Vehicles%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20n_victims%3D%22Number%20of%20Victims%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20n_incidents%3D%22Number%20of%20Incidents%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20datetime%3D%22Date%20%2F%20Time%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20year_month%3D%22Year%20%2F%20Month%22%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20)%0A%20%20%20%20custom_fig%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20When%20the%20user%20modifies%20the%20inputs%2C%20the%20figure%20is%20regenerated%20from%20the%20input%20data%20using%20Python%20code%20that%20runs%20entirely%20in%20the%20browser.%0A%20%20%20%20The%20drawback%20of%20this%20approach%20is%20that%20code%20runs%20a%20bit%20slowly%2C%20so%20this%20is%20not%20the%20place%20to%20put%20long-running%20tasks.%0A%20%20%20%20However%2C%20the%20advantage%20is%20that%20there%20is%20no%20limit%20to%20the%20number%20of%20users%20who%20can%20open%20this%20publication%2C%20and%20there%20is%20effectively%20no%20cost%20to%20host%20the%20website.%0A%0A%20%20%20%20%23%23%20Using%20this%20Approach%0A%0A%20%20%20%20All%20of%20the%20code%20needed%20to%20build%20this%20text%20and%20visualization%20into%20a%20website%20can%20be%20found%20in%20an%20open%20source%20GitHub%20repository%20-%20%5BFredHutch%2Fmarimo-publication%5D(https%3A%2F%2Fgithub.com%2FFredHutch%2Fmarimo-publication).%0A%20%20%20%20To%20build%20something%20similar%2C%20just%20fork%20the%20repository%2C%20modify%20the%20contents%20to%20meet%20your%20needs%2C%20and%20then%20turn%20on%20GitHub%20pages%20to%20instantly%20create%20a%20website%20publishing%20your%20findings.%0A%20%20%20%20More%20details%20can%20be%20found%20in%20the%20%5BReadme%5D(https%3A%2F%2Fgithub.com%2FFredHutch%2Fmarimo-publication).%0A%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%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