import%20marimo%0A%0A__generated_with%20%3D%20%220.18.4%22%0Aapp%20%3D%20marimo.App(width%3D%22medium%22)%0A%0A%0A%40app.cell%0Adef%20cell_01()%3A%0A%20%20%20%20%22%22%22Import%20marimo%20as%20%60mo%60%20and%20return%20it%20for%20use%20in%20subsequent%20cells.%22%22%22%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20return%20(mo%2C)%0A%0A%0A%40app.cell%0Adef%20cell_02(mo)%3A%0A%20%20%20%20%22%22%22Render%20the%20showcase%20introduction%20Markdown%20content.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%20%F0%9F%8E%A8%20Marimo%20Showcase%0A%0A%20%20%20%20%20%20%20%20Welcome%20to%20the%20**Marimo%20Showcase%20Notebook**!%20This%20interactive%20notebook%20demonstrates%0A%20%20%20%20%20%20%20%20the%20most%20powerful%20and%20useful%20features%20of%20%5BMarimo%5D(https%3A%2F%2Fmarimo.io%2F).%0A%0A%20%20%20%20%20%20%20%20**Marimo**%20is%20a%20reactive%20Python%20notebook%20that%20combines%20the%20best%20of%20Jupyter%20notebooks%0A%20%20%20%20%20%20%20%20with%20the%20power%20of%20reactive%20programming.%20Every%20cell%20automatically%20updates%20when%20its%0A%20%20%20%20%20%20%20%20dependencies%20change%2C%20creating%20a%20seamless%20interactive%20experience.%0A%0A%20%20%20%20%20%20%20%20%23%23%20Why%20Marimo%3F%0A%0A%20%20%20%20%20%20%20%20-%20%E2%9C%A8%20**Reactive%20by%20default**%20-%20No%20manual%20cell%20re-runs%0A%20%20%20%20%20%20%20%20-%20%F0%9F%8E%AF%20**Pure%20Python**%20-%20Notebooks%20are%20%60.py%60%20files%0A%20%20%20%20%20%20%20%20-%20%F0%9F%94%84%20**Reproducible**%20-%20Consistent%20execution%20order%0A%20%20%20%20%20%20%20%20-%20%F0%9F%8E%A8%20**Rich%20UI%20elements**%20-%20Beautiful%20interactive%20components%0A%20%20%20%20%20%20%20%20-%20%F0%9F%93%A6%20**Version%20control%20friendly**%20-%20Easy%20to%20diff%20and%20merge%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_03(mo)%3A%0A%20%20%20%20%22%22%22Render%20a%20horizontal%20rule%20to%20separate%20sections.%22%22%22%0A%20%20%20%20mo.md(r%22%22%22---%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_04(mo)%3A%0A%20%20%20%20%22%22%22Introduce%20the%20Interactive%20UI%20Elements%20section.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20%F0%9F%8E%9A%EF%B8%8F%20Interactive%20UI%20Elements%0A%0A%20%20%20%20%20%20%20%20Marimo%20provides%20rich%20UI%20components%20that%20automatically%20trigger%20reactive%20updates.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_05(mo)%3A%0A%20%20%20%20%22%22%22Create%20and%20display%20a%20numeric%20slider%20UI%20component.%22%22%22%0A%20%20%20%20%23%20Slider%20for%20numeric%20input%0A%20%20%20%20slider%20%3D%20mo.ui.slider(start%3D0%2C%20stop%3D100%2C%20value%3D50%2C%20label%3D%22Adjust%20the%20value%3A%22%2C%20show_value%3DTrue)%0A%20%20%20%20slider%0A%20%20%20%20return%20(slider%2C)%0A%0A%0A%40app.cell%0Adef%20cell_06(mo%2C%20slider)%3A%0A%20%20%20%20%22%22%22Display%20the%20current%20slider%20value%20reactively.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20The%20slider%20value%20is%3A%20**%7Bslider.value%7D**%0A%0A%20%20%20%20%20%20%20%20This%20text%20updates%20automatically%20when%20you%20move%20the%20slider!%20%E2%9C%A8%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_07(mo)%3A%0A%20%20%20%20%22%22%22Create%20and%20display%20a%20dropdown%20for%20language%20selection.%22%22%22%0A%20%20%20%20%23%20Dropdown%20for%20selection%0A%20%20%20%20dropdown%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20options%3D%5B%22Python%22%2C%20%22JavaScript%22%2C%20%22Rust%22%2C%20%22Go%22%2C%20%22TypeScript%22%5D%2C%0A%20%20%20%20%20%20%20%20value%3D%22Python%22%2C%0A%20%20%20%20%20%20%20%20label%3D%22Choose%20your%20favorite%20language%3A%22%2C%0A%20%20%20%20)%0A%20%20%20%20dropdown%0A%20%20%20%20return%20(dropdown%2C)%0A%0A%0A%40app.cell%0Adef%20cell_08(dropdown%2C%20mo)%3A%0A%20%20%20%20%22%22%22Display%20the%20currently%20selected%20language%20from%20the%20dropdown.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20You%20selected%3A%20**%7Bdropdown.value%7D**%20%F0%9F%8E%89%0A%0A%20%20%20%20%20%20%20%20Great%20choice!%20%7Bdropdown.value%7D%20is%20an%20excellent%20programming%20language.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_09(mo)%3A%0A%20%20%20%20%22%22%22Create%20and%20display%20a%20text%20input%20field%20for%20the%20user's%20name.%22%22%22%0A%20%20%20%20%23%20Text%20input%0A%20%20%20%20text_input%20%3D%20mo.ui.text(value%3D%22Marimo%22%2C%20label%3D%22Enter%20your%20name%3A%22%2C%20placeholder%3D%22Type%20something...%22)%0A%20%20%20%20text_input%0A%20%20%20%20return%20(text_input%2C)%0A%0A%0A%40app.cell%0Adef%20cell_10(mo%2C%20text_input)%3A%0A%20%20%20%20%22%22%22Display%20a%20personalized%20greeting%20using%20the%20current%20text%20input%20value.%22%22%22%0A%20%20%20%20mo.md(f%22%22%22Hello%2C%20**%7Btext_input.value%7D**!%20%F0%9F%91%8B%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_11(mo)%3A%0A%20%20%20%20%22%22%22Render%20a%20horizontal%20rule%20to%20visually%20separate%20sections.%22%22%22%0A%20%20%20%20mo.md(r%22%22%22---%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_12(mo)%3A%0A%20%20%20%20%22%22%22Introduce%20the%20Data%20Visualization%20section.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20%F0%9F%93%8A%20Data%20Visualization%0A%0A%20%20%20%20%20%20%20%20Marimo%20works%20seamlessly%20with%20popular%20visualization%20libraries%20like%20Plotly%2C%0A%20%20%20%20%20%20%20%20Altair%2C%20and%20Matplotlib.%20Let's%20create%20interactive%20plots!%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_13()%3A%0A%20%20%20%20%22%22%22Import%20and%20return%20NumPy%20and%20Plotly%20modules%20for%20plotting%20in%20later%20cells.%22%22%22%0A%20%20%20%20import%20numpy%20as%20np%0A%20%20%20%20import%20plotly.graph_objects%20as%20go%0A%20%20%20%20return%20go%2C%20np%0A%0A%0A%40app.cell%0Adef%20cell_14(mo)%3A%0A%20%20%20%20%22%22%22Create%20sliders%20for%20wave%20frequency%20and%20amplitude%20controls%20for%20the%20plot.%22%22%22%0A%20%20%20%20%23%20Interactive%20controls%20for%20the%20plot%0A%20%20%20%20frequency_slider%20%3D%20mo.ui.slider(start%3D1%2C%20stop%3D10%2C%20value%3D2%2C%20label%3D%22Wave%20frequency%3A%22%2C%20show_value%3DTrue)%0A%0A%20%20%20%20amplitude_slider%20%3D%20mo.ui.slider(start%3D1%2C%20stop%3D5%2C%20value%3D1%2C%20label%3D%22Wave%20amplitude%3A%22%2C%20show_value%3DTrue)%0A%0A%20%20%20%20mo.vstack(%5Bfrequency_slider%2C%20amplitude_slider%5D)%0A%20%20%20%20return%20amplitude_slider%2C%20frequency_slider%0A%0A%0A%40app.cell%0Adef%20cell_15(amplitude_slider%2C%20frequency_slider%2C%20go%2C%20mo%2C%20np)%3A%0A%20%20%20%20%22%22%22Build%20a%20reactive%20Plotly%20sine%20wave%20based%20on%20the%20slider%20values.%22%22%22%0A%20%20%20%20%23%20Generate%20reactive%20plot%20based%20on%20slider%20values%0A%20%20%20%20x%20%3D%20np.linspace(0%2C%204%20*%20np.pi%2C%201000)%0A%20%20%20%20y%20%3D%20amplitude_slider.value%20*%20np.sin(frequency_slider.value%20*%20x)%0A%0A%20%20%20%20fig%20%3D%20go.Figure()%0A%20%20%20%20fig.add_trace(go.Scatter(x%3Dx%2C%20y%3Dy%2C%20mode%3D%22lines%22%2C%20line%3Ddict(color%3D%22%232FA4A9%22%2C%20width%3D2)%2C%20name%3D%22Sine%20Wave%22))%0A%0A%20%20%20%20fig.update_layout(%0A%20%20%20%20%20%20%20%20title%3Df%22Sine%20Wave%3A%20y%20%3D%20%7Bamplitude_slider.value%7D%20%C3%97%20sin(%7Bfrequency_slider.value%7Dx)%22%2C%0A%20%20%20%20%20%20%20%20xaxis_title%3D%22x%22%2C%0A%20%20%20%20%20%20%20%20yaxis_title%3D%22y%22%2C%0A%20%20%20%20%20%20%20%20template%3D%22plotly_white%22%2C%0A%20%20%20%20%20%20%20%20height%3D400%2C%0A%20%20%20%20%20%20%20%20showlegend%3DFalse%2C%0A%20%20%20%20)%0A%0A%20%20%20%20fig.update_xaxes(showgrid%3DTrue%2C%20gridwidth%3D1%2C%20gridcolor%3D%22rgba(128%2C128%2C128%2C0.2)%22)%0A%20%20%20%20fig.update_yaxes(showgrid%3DTrue%2C%20gridwidth%3D1%2C%20gridcolor%3D%22rgba(128%2C128%2C128%2C0.2)%22)%0A%0A%20%20%20%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%23%23%20Interactive%20Sine%20Wave%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20Adjust%20the%20sliders%20above%20to%20change%20the%20wave%20properties!%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20Current%20parameters%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20Frequency%3A%20%7Bfrequency_slider.value%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20Amplitude%3A%20%7Bamplitude_slider.value%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%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%20mo.ui.plotly(fig)%2C%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_16(mo)%3A%0A%20%20%20%20%22%22%22Render%20a%20horizontal%20rule%20to%20visually%20separate%20sections.%22%22%22%0A%20%20%20%20mo.md(r%22%22%22---%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_17(mo)%3A%0A%20%20%20%20%22%22%22Introduce%20the%20DataFrames%20section.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20%F0%9F%93%8B%20Working%20with%20DataFrames%0A%0A%20%20%20%20%20%20%20%20Marimo%20provides%20excellent%20support%20for%20working%20with%20Pandas%20DataFrames.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_18()%3A%0A%20%20%20%20%22%22%22Create%20a%20sample%20Pandas%20DataFrame%20for%20use%20in%20subsequent%20cells.%22%22%22%0A%20%20%20%20import%20pandas%20as%20pd%0A%0A%20%20%20%20%23%20Create%20sample%20data%0A%20%20%20%20data%20%3D%20pd.DataFrame(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Product%22%3A%20%5B%22Widget%20A%22%2C%20%22Widget%20B%22%2C%20%22Widget%20C%22%2C%20%22Widget%20D%22%2C%20%22Widget%20E%22%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Sales%22%3A%20%5B250%2C%20180%2C%20420%2C%20350%2C%20290%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Revenue%22%3A%20%5B5000%2C%203600%2C%208400%2C%207000%2C%205800%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Rating%22%3A%20%5B4.5%2C%204.2%2C%204.8%2C%204.6%2C%204.3%5D%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20)%0A%20%20%20%20return%20(data%2C)%0A%0A%0A%40app.cell%0Adef%20cell_19(mo)%3A%0A%20%20%20%20%22%22%22Render%20introductory%20text%20for%20the%20sample%20sales%20dataset.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%23%20Sample%20Sales%20Data%0A%0A%20%20%20%20%20%20%20%20Here's%20our%20dataset%20displayed%20as%20an%20interactive%20table%3A%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_20(data%2C%20mo)%3A%0A%20%20%20%20%22%22%22Display%20the%20sample%20dataset%20as%20an%20interactive%20table.%22%22%22%0A%20%20%20%20%23%20Display%20as%20interactive%20table%0A%20%20%20%20mo.ui.table(data)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_21(data%2C%20go%2C%20mo)%3A%0A%20%20%20%20%22%22%22Render%20a%20Plotly%20bar%20chart%20showing%20sales%20by%20product.%22%22%22%0A%20%20%20%20%23%20Create%20a%20bar%20chart%20with%20Plotly%0A%20%20%20%20colors%20%3D%20%5B%22%232FA4A9%22%2C%20%22%233FB5BA%22%2C%20%22%234FC6CB%22%2C%20%22%235FD7DC%22%2C%20%22%236FE8ED%22%5D%0A%0A%20%20%20%20fig_bar%20%3D%20go.Figure()%0A%20%20%20%20fig_bar.add_trace(%0A%20%20%20%20%20%20%20%20go.Bar(%0A%20%20%20%20%20%20%20%20%20%20%20%20x%3Ddata%5B%22Product%22%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20y%3Ddata%5B%22Sales%22%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20marker_color%3Dcolors%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20text%3Ddata%5B%22Sales%22%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20textposition%3D%22auto%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20)%0A%0A%20%20%20%20fig_bar.update_layout(%0A%20%20%20%20%20%20%20%20title%3D%22Sales%20by%20Product%22%2C%0A%20%20%20%20%20%20%20%20xaxis_title%3D%22Product%22%2C%0A%20%20%20%20%20%20%20%20yaxis_title%3D%22Sales%22%2C%0A%20%20%20%20%20%20%20%20template%3D%22plotly_white%22%2C%0A%20%20%20%20%20%20%20%20height%3D500%2C%0A%20%20%20%20%20%20%20%20showlegend%3DFalse%2C%0A%20%20%20%20)%0A%0A%20%20%20%20mo.ui.plotly(fig_bar)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_22(mo)%3A%0A%20%20%20%20%22%22%22Render%20a%20horizontal%20rule%20to%20visually%20separate%20sections.%22%22%22%0A%20%20%20%20mo.md(r%22%22%22---%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_23(mo)%3A%0A%20%20%20%20%22%22%22Introduce%20the%20layout%20components%20section.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20%F0%9F%8E%AF%20Layout%20Components%0A%0A%20%20%20%20%20%20%20%20Marimo%20provides%20powerful%20layout%20primitives%20to%20organize%20your%20content.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_24(mo)%3A%0A%20%20%20%20%22%22%22Demonstrate%20a%20two-column%20layout%20with%20left%20and%20right%20content.%22%22%22%0A%20%20%20%20%23%20Using%20columns%20for%20side-by-side%20layout%0A%20%20%20%20left_content%20%3D%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%23%20Left%20Column%0A%0A%20%20%20%20%20%20%20%20This%20is%20the%20left%20side%20of%20a%20two-column%20layout.%0A%0A%20%20%20%20%20%20%20%20-%20Feature%201%0A%20%20%20%20%20%20%20%20-%20Feature%202%0A%20%20%20%20%20%20%20%20-%20Feature%203%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%0A%20%20%20%20right_content%20%3D%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%23%20Right%20Column%0A%0A%20%20%20%20%20%20%20%20This%20is%20the%20right%20side%20of%20a%20two-column%20layout.%0A%0A%20%20%20%20%20%20%20%20-%20Benefit%20A%0A%20%20%20%20%20%20%20%20-%20Benefit%20B%0A%20%20%20%20%20%20%20%20-%20Benefit%20C%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%0A%20%20%20%20mo.hstack(%5Bleft_content%2C%20right_content%5D%2C%20justify%3D%22space-between%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_25(mo)%3A%0A%20%20%20%20%22%22%22Demonstrate%20tabs%20with%20Introduction%2C%20Details%2C%20and%20Summary%20content.%22%22%22%0A%20%20%20%20%23%20Using%20tabs%20for%20organized%20content%0A%20%20%20%20tab1%20%3D%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20Tab%201%3A%20Introduction%0A%0A%20%20%20%20%20%20%20%20This%20is%20the%20content%20of%20the%20first%20tab.%20Tabs%20are%20great%20for%20organizing%0A%20%20%20%20%20%20%20%20related%20content%20without%20cluttering%20the%20interface.%0A%0A%20%20%20%20%20%20%20%20**Key%20points%3A**%0A%20%20%20%20%20%20%20%20-%20Clean%20organization%0A%20%20%20%20%20%20%20%20-%20Reduced%20clutter%0A%20%20%20%20%20%20%20%20-%20Easy%20navigation%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%0A%20%20%20%20tab2%20%3D%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20Tab%202%3A%20Details%0A%0A%20%20%20%20%20%20%20%20Here's%20more%20detailed%20information%20in%20the%20second%20tab.%0A%0A%20%20%20%20%20%20%20%20You%20can%20include%20any%20content%20here%3A%0A%20%20%20%20%20%20%20%20-%20Code%20examples%0A%20%20%20%20%20%20%20%20-%20Visualizations%0A%20%20%20%20%20%20%20%20-%20Interactive%20elements%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%0A%20%20%20%20tab3%20%3D%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20Tab%203%3A%20Summary%0A%0A%20%20%20%20%20%20%20%20The%20final%20tab%20with%20summary%20information.%0A%0A%20%20%20%20%20%20%20%20Tabs%20are%20perfect%20for%3A%0A%20%20%20%20%20%20%20%201.%20Step-by-step%20guides%0A%20%20%20%20%20%20%20%202.%20Different%20views%20of%20data%0A%20%20%20%20%20%20%20%203.%20Organizing%20complex%20notebooks%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%0A%20%20%20%20mo.ui.tabs(%7B%22Introduction%22%3A%20tab1%2C%20%22Details%22%3A%20tab2%2C%20%22Summary%22%3A%20tab3%7D)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_26(mo)%3A%0A%20%20%20%20%22%22%22Render%20a%20horizontal%20rule%20to%20visually%20separate%20sections.%22%22%22%0A%20%20%20%20mo.md(r%22%22%22---%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_27(mo)%3A%0A%20%20%20%20%22%22%22Introduce%20the%20forms%20and%20user%20input%20section.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20%F0%9F%93%9D%20Forms%20and%20User%20Input%0A%0A%20%20%20%20%20%20%20%20Marimo%20forms%20allow%20you%20to%20batch%20multiple%20inputs%20and%20submit%20them%20together.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_28(mo)%3A%0A%20%20%20%20%22%22%22Build%20and%20display%20a%20multi-input%20form%20for%20collecting%20user%20information.%22%22%22%0A%20%20%20%20%23%20Create%20a%20form%20with%20multiple%20inputs%0A%20%20%20%20form%20%3D%20mo.ui.dictionary(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20mo.ui.text(label%3D%22Your%20name%3A%22%2C%20placeholder%3D%22Enter%20name%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22age%22%3A%20mo.ui.slider(start%3D18%2C%20stop%3D100%2C%20value%3D25%2C%20label%3D%22Your%20age%3A%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22email%22%3A%20mo.ui.text(label%3D%22Email%3A%22%2C%20placeholder%3D%22email%40example.com%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22subscribe%22%3A%20mo.ui.checkbox(label%3D%22Subscribe%20to%20newsletter%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22interests%22%3A%20mo.ui.multiselect(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3D%5B%22Data%20Science%22%2C%20%22Machine%20Learning%22%2C%20%22Web%20Development%22%2C%20%22DevOps%22%5D%2C%20label%3D%22Your%20interests%3A%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20)%0A%20%20%20%20mo.vstack(%5Bmo.md(%22%23%23%23%20User%20Information%20Form%22)%2C%20form%5D)%0A%20%20%20%20return%20(form%2C)%0A%0A%0A%40app.cell%0Adef%20cell_29(form%2C%20mo)%3A%0A%20%20%20%20%22%22%22Display%20current%20form%20values%20reactively%20as%20the%20user%20edits%20the%20form.%22%22%22%0A%20%20%20%20%23%20Display%20form%20values%20-%20updates%20reactively%20as%20you%20type%2Fchange%20values%0A%20%20%20%20if%20form.value%20and%20any(form.value.values())%3A%0A%20%20%20%20%20%20%20%20interests_text%20%3D%20%22%2C%20%22.join(form.value%5B%22interests%22%5D)%20if%20form.value%5B%22interests%22%5D%20else%20%22None%20selected%22%0A%0A%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%23%23%20Current%20Form%20Values%20%E2%9C%85%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20The%20values%20update%20automatically%20as%20you%20interact%20with%20the%20form!%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20**Name%3A**%20%7Bform.value%5B%22name%22%5D%20or%20%22(not%20entered)%22%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20**Age%3A**%20%7Bform.value%5B%22age%22%5D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20**Email%3A**%20%7Bform.value%5B%22email%22%5D%20or%20%22(not%20entered)%22%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20**Newsletter%3A**%20%7B%22Subscribed%20%E2%9C%85%22%20if%20form.value%5B%22subscribe%22%5D%20else%20%22Not%20subscribed%22%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20**Interests%3A**%20%7Binterests_text%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20Notice%20how%20the%20values%20update%20reactively%20as%20you%20change%20them!%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20mo.md(%22*The%20form%20values%20will%20appear%20here%20as%20you%20interact%20with%20them.*%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_30(mo)%3A%0A%20%20%20%20%22%22%22Render%20a%20horizontal%20rule%20to%20visually%20separate%20sections.%22%22%22%0A%20%20%20%20mo.md(r%22%22%22---%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_31(mo)%3A%0A%20%20%20%20%22%22%22Introduce%20the%20Markdown%20and%20LaTeX%20support%20section.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20%F0%9F%8E%93%20Markdown%20%26%20LaTeX%20Support%0A%0A%20%20%20%20%20%20%20%20Marimo%20has%20excellent%20support%20for%20rich%20text%20formatting%20using%20Markdown%20and%20LaTeX.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_32(mo)%3A%0A%20%20%20%20%22%22%22Render%20rich%20Markdown%20with%20LaTeX%20equations%2C%20code%20blocks%2C%20and%20formatting%20examples.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%23%20Mathematical%20Equations%0A%0A%20%20%20%20%20%20%20%20You%20can%20write%20beautiful%20equations%20using%20LaTeX%3A%0A%0A%20%20%20%20%20%20%20%20**Pythagorean%20theorem%3A**%0A%0A%20%20%20%20%20%20%20%20%24%24a%5E2%20%2B%20b%5E2%20%3D%20c%5E2%24%24%0A%0A%20%20%20%20%20%20%20%20**Euler's%20identity%3A**%0A%0A%20%20%20%20%20%20%20%20%24%24e%5E%7Bi%5Cpi%7D%20%2B%201%20%3D%200%24%24%0A%0A%20%20%20%20%20%20%20%20**Quadratic%20formula%3A**%0A%0A%20%20%20%20%20%20%20%20%24%24x%20%3D%20%5Cfrac%7B-b%20%5Cpm%20%5Csqrt%7Bb%5E2%20-%204ac%7D%7D%7B2a%7D%24%24%0A%0A%20%20%20%20%20%20%20%20**Inline%20math%3A**%20The%20famous%20%24E%20%3D%20mc%5E2%24%20equation%20by%20Einstein.%0A%0A%20%20%20%20%20%20%20%20%23%23%23%20Code%20Blocks%0A%0A%20%20%20%20%20%20%20%20You%20can%20also%20include%20syntax-highlighted%20code%3A%0A%0A%20%20%20%20%20%20%20%20%60%60%60python%0A%20%20%20%20%20%20%20%20def%20fibonacci(n)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20n%20%3C%3D%201%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20n%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20fibonacci(n-1)%20%2B%20fibonacci(n-2)%0A%20%20%20%20%20%20%20%20%60%60%60%0A%0A%20%20%20%20%20%20%20%20%23%23%23%20Rich%20Formatting%0A%0A%20%20%20%20%20%20%20%20-%20**Bold%20text**%0A%20%20%20%20%20%20%20%20-%20*Italic%20text*%0A%20%20%20%20%20%20%20%20-%20~~Strikethrough%20text~~%0A%20%20%20%20%20%20%20%20-%20%60Inline%20code%60%0A%20%20%20%20%20%20%20%20-%20%5BLinks%5D(https%3A%2F%2Fmarimo.io%2F)%0A%0A%20%20%20%20%20%20%20%20%3E%20This%20is%20a%20blockquote%20with%20important%20information!%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_33(mo)%3A%0A%20%20%20%20%22%22%22Render%20a%20horizontal%20rule%20to%20visually%20separate%20sections.%22%22%22%0A%20%20%20%20mo.md(r%22%22%22---%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_34(mo)%3A%0A%20%20%20%20%22%22%22Introduce%20the%20Advanced%20Features%20section.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20%F0%9F%8E%AA%20Advanced%20Features%0A%0A%20%20%20%20%20%20%20%20Here%20are%20some%20more%20advanced%20Marimo%20features%20worth%20exploring.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_35(mo)%3A%0A%20%20%20%20%22%22%22Render%20an%20informational%20callout%20about%20Marimo%20notebooks%20being%20plain%20Python%20files.%22%22%22%0A%20%20%20%20%23%20Callout%20boxes%20for%20important%20information%0A%20%20%20%20mo.callout(%0A%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%23%23%20%F0%9F%92%A1%20Pro%20Tip%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20Marimo%20notebooks%20are%20**just%20Python%20files**!%20This%20means%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20Easy%20version%20control%20with%20Git%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20Standard%20code%20review%20workflows%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20No%20hidden%20JSON%20metadata%0A%20%20%20%20%20%20%20%20%20%20%20%20-%20Compatible%20with%20all%20Python%20tools%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20kind%3D%22info%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_36(mo)%3A%0A%20%20%20%20%22%22%22Display%20an%20accordion%20with%20notes%20on%20reactivity%2C%20performance%2C%20and%20dependencies.%22%22%22%0A%20%20%20%20%23%20Accordion%20for%20collapsible%20content%0A%20%20%20%20mo.accordion(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%F0%9F%94%8D%20Click%20to%20learn%20about%20Reactive%20Programming%22%3A%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20Marimo%20uses%20**reactive%20programming**%20to%20automatically%20track%20dependencies%0A%20%20%20%20%20%20%20%20%20%20%20%20between%20cells.%20When%20you%20change%20a%20value%20in%20one%20cell%2C%20all%20dependent%20cells%0A%20%20%20%20%20%20%20%20%20%20%20%20automatically%20update!%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20This%20eliminates%20the%20common%20notebook%20problem%20of%20running%20cells%20out%20of%20order.%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%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%20%22%F0%9F%9A%80%20Click%20to%20learn%20about%20Performance%22%3A%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20Marimo%20only%20re-runs%20cells%20that%20are%20affected%20by%20changes%2C%20making%20it%0A%20%20%20%20%20%20%20%20%20%20%20%20efficient%20even%20for%20large%20notebooks.%20This%20intelligent%20execution%20means%0A%20%20%20%20%20%20%20%20%20%20%20%20you%20get%20fast%20feedback%20without%20wasting%20computation.%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%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%20%22%F0%9F%93%A6%20Click%20to%20learn%20about%20Dependencies%22%3A%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20You%20can%20specify%20dependencies%20right%20in%20the%20notebook%20using%20inline%20metadata.%0A%20%20%20%20%20%20%20%20%20%20%20%20This%20makes%20notebooks%20self-contained%20and%20reproducible%2C%20as%20seen%20in%20the%0A%20%20%20%20%20%20%20%20%20%20%20%20header%20of%20this%20notebook!%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_37(mo)%3A%0A%20%20%20%20%22%22%22Render%20a%20horizontal%20rule%20to%20visually%20separate%20sections.%22%22%22%0A%20%20%20%20mo.md(r%22%22%22---%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20cell_38(mo)%3A%0A%20%20%20%20%22%22%22Render%20the%20conclusion%20section%20of%20the%20Marimo%20showcase%20notebook.%22%22%22%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%20%20%20%20%23%23%20%F0%9F%8E%89%20Conclusion%0A%0A%20%20%20%20%20%20%20%20This%20notebook%20has%20demonstrated%20many%20of%20Marimo's%20most%20useful%20features%3A%0A%0A%20%20%20%20%20%20%20%20%E2%9C%85%20**Interactive%20UI%20elements**%20-%20Sliders%2C%20dropdowns%2C%20text%20inputs%2C%20and%20more%0A%20%20%20%20%20%20%20%20%E2%9C%85%20**Reactive%20programming**%20-%20Automatic%20cell%20updates%20when%20dependencies%20change%0A%20%20%20%20%20%20%20%20%E2%9C%85%20**Data%20visualization**%20-%20Seamless%20integration%20with%20Plotly%2C%20Matplotlib%2C%20etc.%0A%20%20%20%20%20%20%20%20%E2%9C%85%20**Layout%20components**%20-%20Columns%2C%20tabs%2C%20accordions%20for%20organizing%20content%0A%20%20%20%20%20%20%20%20%E2%9C%85%20**Forms**%20-%20Batched%20input%20collection%20with%20submission%0A%20%20%20%20%20%20%20%20%E2%9C%85%20**Rich%20formatting**%20-%20Markdown%20and%20LaTeX%20support%0A%20%20%20%20%20%20%20%20%E2%9C%85%20**Pure%20Python**%20-%20Notebooks%20are%20version-control%20friendly%20%60.py%60%20files%0A%0A%20%20%20%20%20%20%20%20%23%23%23%20Next%20Steps%0A%0A%20%20%20%20%20%20%20%20To%20learn%20more%20about%20Marimo%3A%0A%20%20%20%20%20%20%20%20-%20Visit%20the%20%5Bofficial%20documentation%5D(https%3A%2F%2Fdocs.marimo.io%2F)%0A%20%20%20%20%20%20%20%20-%20Explore%20the%20%5Bexample%20gallery%5D(https%3A%2F%2Fmarimo.io%2Fexamples)%0A%20%20%20%20%20%20%20%20-%20Join%20the%20%5Bcommunity%20Discord%5D(https%3A%2F%2Fdiscord.gg%2FJE7nhX6mD8)%0A%0A%20%20%20%20%20%20%20%20**Happy%20exploring!%20%F0%9F%9A%80**%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%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
92067f56ef7c85af004ae2e67ec92ed4