reactive-intro | Great Docs

%23%20%2F%2F%2F%20script%0A%23%20requires-python%20%3D%20%22%3E%3D3.10%22%0A%23%20dependencies%20%3D%20%5B%0A%23%20%20%20%20%20%22marimo%22%2C%0A%23%20%5D%0A%23%20%2F%2F%2F%0A%0Aimport%20marimo%0A%0A__generated_with%20%3D%20%220.24.0%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%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%20A%20Reactive%20Notebook%0A%0A%20%20%20%20marimo%20notebooks%20are%20**reactive**%3A%20change%20a%20value%20and%20every%20cell%20that%0A%20%20%20%20depends%20on%20it%20re-runs%20on%20its%20own%20%E2%80%94%20no%20%22Run%22%20button%2C%20no%20page%20reload.%0A%20%20%20%20Drag%20the%20sliders%20below%20and%20watch%20the%20summary%2C%20chart%2C%20and%20table%20update%0A%20%20%20%20together.%20(This%20notebook%20uses%20only%20marimo%2C%20so%20it%20boots%20instantly.)%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20bars%20%3D%20mo.ui.slider(1%2C%2012%2C%20value%3D5%2C%20label%3D%22Number%20of%20bars%22)%0A%20%20%20%20peak%20%3D%20mo.ui.slider(20%2C%20100%2C%20value%3D70%2C%20label%3D%22Tallest%20bar%20(px)%22)%0A%20%20%20%20mo.hstack(%5Bbars%2C%20peak%5D%2C%20justify%3D%22start%22%2C%20gap%3D2)%0A%20%20%20%20return%20bars%2C%20peak%0A%0A%0A%40app.cell%0Adef%20_(bars%2C%20mo%2C%20peak)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20f%22You%20asked%20for%20**%7Bbars.value%7D**%20bars%20with%20a%20peak%20height%20of%20%22%0A%20%20%20%20%20%20%20%20f%22**%7Bpeak.value%7Dpx**.%20Everything%20below%20recomputes%20from%20those%20two%20values.%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(bars)%3A%0A%20%20%20%20%23%20Deterministic%20pseudo-data%20so%20the%20demo%20is%20stable%20but%20varied.%0A%20%20%20%20values%20%3D%20%5B((i%20*%2037%20%2B%2013)%20%25%20100)%20%2B%201%20for%20i%20in%20range(bars.value)%5D%0A%20%20%20%20return%20(values%2C)%0A%0A%0A%40app.cell%0Adef%20_(mo%2C%20peak%2C%20values)%3A%0A%20%20%20%20%23%20A%20dependency-free%20bar%20chart%2C%20drawn%20as%20inline%20SVG%20straight%20from%20Python.%0A%20%20%20%20width%2C%20gap%20%3D%2030%2C%2010%0A%20%20%20%20top%20%3D%20peak.value%0A%20%20%20%20rects%20%3D%20%22%22.join(%0A%20%20%20%20%20%20%20%20f'%3Crect%20x%3D%22%7Bi%20*%20(width%20%2B%20gap)%7D%22%20y%3D%22%7Btop%20-%20round(top%20*%20v%20%2F%20100)%7D%22%20'%0A%20%20%20%20%20%20%20%20f'width%3D%22%7Bwidth%7D%22%20height%3D%22%7Bround(top%20*%20v%20%2F%20100)%7D%22%20rx%3D%224%22%20'%0A%20%20%20%20%20%20%20%20f'fill%3D%22hsl(%7B205%20%2B%20i%20*%2014%7D%2072%25%2056%25)%22%2F%3E'%0A%20%20%20%20%20%20%20%20for%20i%2C%20v%20in%20enumerate(values)%0A%20%20%20%20)%0A%20%20%20%20svg%20%3D%20(%0A%20%20%20%20%20%20%20%20f'%3Csvg%20width%3D%22%7Blen(values)%20*%20(width%20%2B%20gap)%7D%22%20height%3D%22%7Btop%7D%22%20'%0A%20%20%20%20%20%20%20%20f'xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20role%3D%22img%22%20'%0A%20%20%20%20%20%20%20%20f'aria-label%3D%22Reactive%20bar%20chart%22%3E%7Brects%7D%3C%2Fsvg%3E'%0A%20%20%20%20)%0A%20%20%20%20mo.Html(svg)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo%2C%20values)%3A%0A%20%20%20%20mo.ui.table(%0A%20%20%20%20%20%20%20%20%5B%7B%22bar%22%3A%20i%20%2B%201%2C%20%22value%22%3A%20v%7D%20for%20i%2C%20v%20in%20enumerate(values)%5D%2C%0A%20%20%20%20%20%20%20%20selection%3DNone%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20Notice%20you%20never%20touched%20the%20chart%20or%20table%20cells%20%E2%80%94%20they%20depend%20on%20the%0A%20%20%20%20sliders%2C%20so%20marimo%20re-ran%20them%20for%20you.%20In%20**iframe%20mode**%20you%20can%20go%20a%0A%20%20%20%20step%20further%20and%20edit%20this%20code%20yourself.%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