Algorithm Whiteboard — Binary Search

import%20marimo%0A%0A__generated_with%20%3D%20%220.23.13%22%0Aapp%20%3D%20marimo.App(%0A%20%20%20%20width%3D%22full%22%2C%0A%20%20%20%20app_title%3D%22Algorithm%20Whiteboard%20%E2%80%94%20Binary%20Search%22%2C%0A)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20import%20numpy%20as%20np%0A%20%20%20%20import%20matplotlib.pyplot%20as%20plt%0A%20%20%20%20from%20wigglystuff%20import%20Excalidraw%0A%0A%20%20%20%20return%20Excalidraw%2C%20mo%2C%20np%2C%20plt%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20array_size%20%3D%20mo.ui.slider(start%3D8%2C%20stop%3D64%2C%20step%3D8%2C%20value%3D32%2C%20label%3D%22Array%20Size%22)%0A%20%20%20%20target%20%3D%20mo.ui.slider(start%3D0%2C%20stop%3D100%2C%20step%3D1%2C%20value%3D47%2C%20label%3D%22Search%20Target%22)%0A%20%20%20%20return%20array_size%2C%20target%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(array_size%2C%20np%2C%20target)%3A%0A%20%20%20%20arr%20%3D%20np.sort(np.random.choice(range(1%2C%20100)%2C%20size%3Darray_size.value%2C%20replace%3DFalse))%0A%20%20%20%20target_val%20%3D%20target.value%0A%20%20%20%20return%20arr%2C%20target_val%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(arr%2C%20target_val)%3A%0A%20%20%20%20def%20binary_search_steps(arr%2C%20target)%3A%0A%20%20%20%20%20%20%20%20steps%20%3D%20%5B%5D%0A%20%20%20%20%20%20%20%20lo%2C%20hi%20%3D%200%2C%20len(arr)%20-%201%0A%20%20%20%20%20%20%20%20while%20lo%20%3C%3D%20hi%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20mid%20%3D%20(lo%20%2B%20hi)%20%2F%2F%202%0A%20%20%20%20%20%20%20%20%20%20%20%20steps.append(%7B%22lo%22%3A%20lo%2C%20%22hi%22%3A%20hi%2C%20%22mid%22%3A%20mid%2C%20%22val%22%3A%20arr%5Bmid%5D%7D)%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20arr%5Bmid%5D%20%3D%3D%20target%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%0A%20%20%20%20%20%20%20%20%20%20%20%20elif%20arr%5Bmid%5D%20%3C%20target%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20lo%20%3D%20mid%20%2B%201%0A%20%20%20%20%20%20%20%20%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20hi%20%3D%20mid%20-%201%0A%20%20%20%20%20%20%20%20return%20steps%0A%0A%20%20%20%20search_steps%20%3D%20binary_search_steps(arr%2C%20target_val)%0A%20%20%20%20return%20(search_steps%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo%2C%20search_steps)%3A%0A%20%20%20%20step_slider%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0%2C%20stop%3Dmax(0%2C%20len(search_steps)%20-%201)%2C%0A%20%20%20%20%20%20%20%20step%3D1%2C%20value%3D0%2C%20label%3D%22Search%20Step%22%0A%20%20%20%20)%0A%20%20%20%20return%20(step_slider%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(arr%2C%20np%2C%20plt%2C%20search_steps%2C%20step_slider%2C%20target_val)%3A%0A%20%20%20%20_step%20%3D%20min(step_slider.value%2C%20len(search_steps)%20-%201)%0A%20%20%20%20_s%20%3D%20search_steps%5B_step%5D%0A%0A%20%20%20%20fig%2C%20ax%20%3D%20plt.subplots(figsize%3D(10%2C%204))%0A%20%20%20%20ax.set_facecolor('%230a0a0f')%0A%20%20%20%20fig.patch.set_facecolor('%230a0a0f')%0A%0A%20%20%20%20colors%20%3D%20%5B%5D%0A%20%20%20%20for%20i%20in%20range(len(arr))%3A%0A%20%20%20%20%20%20%20%20if%20i%20%3D%3D%20_s%5B%22mid%22%5D%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20colors.append('%23ff6b35')%0A%20%20%20%20%20%20%20%20elif%20_s%5B%22lo%22%5D%20%3C%3D%20i%20%3C%3D%20_s%5B%22hi%22%5D%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20colors.append('%2300d4ff')%0A%20%20%20%20%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20colors.append('%23444466')%0A%0A%20%20%20%20x_pos%20%3D%20np.arange(len(arr))%0A%20%20%20%20ax.bar(x_pos%2C%20arr%2C%20color%3Dcolors%2C%20edgecolor%3D'%231a1a2e'%2C%20linewidth%3D0.5)%0A%0A%20%20%20%20for%20i%2C%20val%20in%20enumerate(arr)%3A%0A%20%20%20%20%20%20%20%20if%20val%20%3D%3D%20target_val%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20ax.bar(i%2C%20arr%5Bi%5D%2C%20color%3D'%2300ff88'%2C%20edgecolor%3D'%231a1a2e'%2C%20linewidth%3D1.5%2C%20zorder%3D5)%0A%20%20%20%20%20%20%20%20%20%20%20%20ax.text(i%2C%20arr%5Bi%5D%20%2B%202%2C%20f'%F0%9F%8E%AF%20%7Bval%7D'%2C%20ha%3D'center'%2C%20color%3D'%2300ff88'%2C%20fontweight%3D'bold'%2C%20fontsize%3D10)%0A%0A%20%20%20%20ax.text(_s%5B%22mid%22%5D%2C%20arr%5B_s%5B%22mid%22%5D%5D%20%2B%203%2C%20f'mid%3D%7Barr%5B_s%5B%22mid%22%5D%5D%7D'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20ha%3D'center'%2C%20color%3D'%23ff6b35'%2C%20fontweight%3D'bold'%2C%20fontsize%3D9)%0A%0A%20%20%20%20ax.set_xticks(x_pos)%0A%20%20%20%20ax.set_xticklabels(%5Bstr(v)%20for%20v%20in%20arr%5D%2C%20rotation%3D45%2C%20ha%3D'right'%2C%20color%3D'white'%2C%20fontsize%3D8)%0A%20%20%20%20ax.set_ylim(0%2C%20max(arr)%20*%201.3)%0A%20%20%20%20ax.set_ylabel('Value'%2C%20color%3D'white')%0A%20%20%20%20ax.tick_params(colors%3D'white')%0A%20%20%20%20for%20spine%20in%20ax.spines.values()%3A%0A%20%20%20%20%20%20%20%20spine.set_color('white')%0A%0A%20%20%20%20_last%20%3D%20search_steps%5B-1%5D%0A%20%20%20%20status%20%3D%20%22%E2%9C%85%20FOUND%22%20if%20_last%5B%22val%22%5D%20%3D%3D%20target_val%20else%20%22%F0%9F%94%8D%20SEARCHING...%22%0A%20%20%20%20ax.set_title(%0A%20%20%20%20%20%20%20%20f'Binary%20Search%20%E2%80%94%20Step%20%7B_step%20%2B%201%7D%2F%7Blen(search_steps)%7D%20%7C%20'%0A%20%20%20%20%20%20%20%20f'lo%3D%7B_s%5B%22lo%22%5D%7D%2C%20mid%3D%7B_s%5B%22mid%22%5D%7D%2C%20hi%3D%7B_s%5B%22hi%22%5D%7D%20%7C%20%7Bstatus%7D'%2C%0A%20%20%20%20%20%20%20%20color%3D'white'%2C%20fontsize%3D13%0A%20%20%20%20)%0A%20%20%20%20plt.tight_layout()%0A%20%20%20%20plt%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(Excalidraw%2C%20mo)%3A%0A%20%20%20%20whiteboard%20%3D%20mo.ui.anywidget(Excalidraw(height%3D550%2C%20theme%3D%22dark%22))%0A%20%20%20%20return%20(whiteboard%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(array_size%2C%20mo%2C%20step_slider%2C%20target)%3A%0A%20%20%20%20mo.hstack(%5Bmo.vstack(%5Barray_size%2C%20target%2C%20step_slider%5D)%5D)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo%2C%20search_steps%2C%20target_val)%3A%0A%20%20%20%20_last%20%3D%20search_steps%5B-1%5D%0A%20%20%20%20found%20%3D%20_last%5B%22val%22%5D%20%3D%3D%20target_val%0A%20%20%20%20mo.md(f%22%22%22%0A%20%20%20%20%23%23%20Binary%20Search%20Visualizer%0A%0A%20%20%20%20**Array%3A**%20%7Blen(search_steps)%7D%20search%20steps%20%20%0A%20%20%20%20**Target%3A**%20%7Btarget_val%7D%20%20%0A%20%20%20%20**Result%3A**%20%7B%22%E2%9C%85%20Found%20at%20index%20%22%20%2B%20str(_last%5B%22mid%22%5D)%20if%20found%20else%20%22%E2%9D%8C%20Not%20found%22%7D%0A%0A%20%20%20%20**How%20binary%20search%20works%3A**%0A%20%20%20%201.%20Start%20with%20the%20full%20range%20(%60lo%3D0%60%2C%20%60hi%3Dn-1%60)%0A%20%20%20%202.%20Check%20the%20middle%20element%20(%60mid%60)%0A%20%20%20%203.%20If%20it%20matches%20the%20target%20%E2%86%92%20done!%0A%20%20%20%204.%20If%20target%20is%20larger%20%E2%86%92%20eliminate%20left%20half%20(%60lo%20%3D%20mid%20%2B%201%60)%0A%20%20%20%205.%20If%20target%20is%20smaller%20%E2%86%92%20eliminate%20right%20half%20(%60hi%20%3D%20mid%20-%201%60)%0A%20%20%20%206.%20Repeat%20until%20found%20or%20range%20is%20empty%20%E2%80%94%20**O(log%20n)**%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(%22%22%22%0A%20%20%20%20%23%23%20%E2%9C%8F%EF%B8%8F%20Whiteboard%20%E2%80%94%20Annotate%20the%20Algorithm%0A%0A%20%20%20%20Use%20the%20Excalidraw%20canvas%20below%20to%3A%0A%20%20%20%20-%20Draw%20the%20binary%20search%20decision%20tree%0A%20%20%20%20-%20Annotate%20each%20step%20as%20you%20scrub%20through%0A%20%20%20%20-%20Sketch%20data%20structure%20invariants%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(whiteboard)%3A%0A%20%20%20%20whiteboard%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20---%0A%20%20%20%20%23%23%23%20Architecture%0A%0A%20%20%20%20This%20demo%20combines%20**algorithm%20visualization**%20with%20**freeform%20annotation**%3A%0A%0A%20%20%20%201.%20**Reactive%20visualization**%3A%20Each%20binary%20search%20step%20is%20rendered%20as%20a%20colored%20bar%20chart%0A%20%20%20%202.%20**Excalidraw%20whiteboard**%3A%20Sketch%20decision%20trees%2C%20invariants%2C%20and%20notes%20alongside%20running%20code%0A%20%20%20%203.%20**Step-by-step**%3A%20Walk%20through%20the%20algorithm%20at%20your%20own%20pace%0A%0A%20%20%20%20*Built%20with%20%5Bwigglystuff%5D(https%3A%2F%2Fgithub.com%2Fkoaning%2Fwigglystuff)%20%2B%20%5Bmarimo%5D(https%3A%2F%2Fmarimo.io)*%0A%0A%20%20%20%20%23python%20%23algorithms%20%23binarysearch%20%23excalidraw%20%23opensource%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