1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5<meta http-equiv="x-ua-compatible" content="ie=edge"> 6<meta name="viewport" content="width=device-width, initial-scale=1"> 7<title>Bokeh | Interactive data visualization for Python</title> 8<meta name="description" content="Create interactive plots, dashboards, and data applications in Python for notebooks and modern web browsers."> 9<link rel="canonical" href="https://bokeh.org/"> 10 11<link rel="stylesheet" href="/css/modern.css"> 12<link rel="apple-touch-icon" sizes="180x180" href="https://static.bokeh.org/favicon/apple-touch-icon.png"> 13<link rel="icon" type="image/png" sizes="32x32" href="https://static.bokeh.org/favicon/favicon-32x32.png"> 14<link rel="icon" type="image/png" sizes="16x16" href="https://static.bokeh.org/favicon/favicon-16x16.png"> 15<link rel="manifest" href="https://static.bokeh.org/favicon/site.webmanifest"> 16<link rel="mask-icon" href="https://static.bokeh.org/favicon/safari-pinned-tab.svg" color="#5bbad5"> 17<meta name="theme-color" content="#fffdf9"> 18 19<meta property="og:title" content="Bokeh | Interactive data visualization for Python"> 20<meta property="og:type" content="website"> 21<meta property="og:url" content="https://bokeh.org/"> 22<meta property="og:description" content="Create interactive plots, dashboards, and data applications in Python for notebooks and modern web browsers."> 23<meta property="og:image" content="https://bokeh.org/img/og.png"> 24<meta property="og:image:alt" content="Bokeh interactive visualization for Python"> 25<meta name="twitter:card" content="summary_large_image"> 26 27 </head> 28 <body class="home-page"> 29 <a class="skip-link" href="#main-content">Skip to content</a> 30 <header class="site-header"> 31 <div class="header-inner"> 32 <a class="brand" href="/" aria-label="Bokeh home"> 33 <img src="/img/bokeh-logo.svg" alt="Bokeh" width="490" height="141"> 34 </a> 35 36 <nav class="desktop-nav" aria-label="Primary navigation"> 37 <a href="/#why-bokeh">Why Bokeh</a> 38 <a href="/#examples">Examples</a> 39 <a href="https://docs.bokeh.org/en/latest/">Docs</a> 40 <details class="nav-more"> 41 <summary>More</summary> 42 <div> 43 <a href="https://discourse.bokeh.org/">Community</a> 44 <a href="https://github.com/bokeh/bokeh">GitHub</a> 45 <a href="https://github.com/bokeh/tutorial">Tutorials</a> 46 </div> 47 </details> 48 </nav> 49 50 <a class="header-cta" href="/#get-started"> 51 Get started <span aria-hidden="true">â</span> 52 </a> 53 54 <details class="mobile-nav"> 55 <summary aria-label="Open navigation"><span></span><span></span></summary> 56 <nav aria-label="Mobile navigation"> 57 <a href="/#why-bokeh">Why Bokeh</a> 58 <a href="/#examples">Examples</a> 59 <a href="https://docs.bokeh.org/en/latest/">Docs</a> 60 <a href="https://discourse.bokeh.org/">Community</a> 61 <a href="https://github.com/bokeh/bokeh">GitHub</a> 62 <a href="/#get-started">Get started</a> 63 </nav> 64 </details> 65 </div> 66</header> 67 68 <main id="main-content"> 69 <section class="hero"> 70 <div class="hero-grid" aria-hidden="true"></div> 71 <div class="hero-inner"> 72 <div class="hero-copy"> 73 <p class="eyebrow"><span></span>Interactive visualization for Python</p> 74 <h1>Interactive visualizations <em>for modern browsers.</em></h1> 75 <p class="hero-lede"> 76 Bokeh is a Python library for interactive plots and data applications in modern web browsers. 77 Start with high-level plotting tools, then use layouts, widgets, and models when you need more control. 78 </p> 79 <div class="hero-actions" id="get-started"> 80 <a class="button button-primary" href="https://docs.bokeh.org/en/latest/docs/first_steps.html"> 81 Get started <span aria-hidden="true">â</span> 82 </a> 83 <a class="button button-secondary" href="https://docs.bokeh.org/en/latest/docs/examples.html">Explore examples</a> 84 </div> 85 86 <div class="install-picker" data-install-picker> 87 <div class="install-tabs" role="tablist" aria-label="Cho
87ose a package manager"> 88 <button class="install-tab" id="install-tab-pip" type="button" role="tab" 89 aria-controls="install-command-panel" aria-selected="true" tabindex="0" 90 data-command="pip install bokeh">pip</button> 91 <button class="install-tab" id="install-tab-uv" type="button" role="tab" 92 aria-controls="install-command-panel" aria-selected="false" tabindex="-1" 93 data-command="uv add bokeh">uv</button> 94 <button class="install-tab" id="install-tab-conda" type="button" role="tab" 95 aria-controls="install-command-panel" aria-selected="false" tabindex="-1" 96 data-command="conda install bokeh">conda</button> 97 </div> 98 <div class="install-command" id="install-command-panel" role="tabpanel" aria-labelledby="install-tab-pip"> 99 <span aria-hidden="true">$</span> 100 <code>pip install bokeh</code> 101 <button type="button">Copy</button> 102 </div> 103 </div> 104 105 <ul class="proof-list" aria-label="Bokeh highlights"> 106 <li>Python-native</li> 107 <li>No JavaScript required</li> 108 <li>BSD licensed</li> 109 </ul> 110 </div> 111 112 <div class="hero-mosaic-wrap"> 113 <div class="hero-mosaic-label"><span></span>Selected examples</div> 114 <div class="hero-mosaic" aria-label="A selection of Bokeh examples"> 115 <a class="hero-shot hero-shot-featured" href="https://demo.bokeh.org/terrain-contours"> 116 <img src="/img/terrain-preview.jpg" alt="Bokeh terrain contour application with a movable transect across a modeled landscape" width="630" height="200"> 117 <span class="hero-shot-caption"><span>Server app</span><strong>Terrain contour explorer</strong></span> 118 <span class="hero-shot-arrow" aria-hidden="true">â</span> 119 </a> 120 <a class="hero-shot" href="https://docs.bokeh.org/en/latest/docs/examples/topics/geo/texas_hover_map.html"> 121 <img src="/img/hero-geo.png" alt="Bokeh choropleth map of Texas counties with a hover tooltip" width="300" height="300"> 122 <span class="hero-shot-caption"><span>Geospatial</span><strong>Interactive choropleth</strong></span> 123 <span class="hero-shot-arrow" aria-hidden="true">â</span> 124 </a> 125 <a class="hero-shot" href="https://docs.bokeh.org/en/latest/docs/examples/styling/mathtext/latex_bessel.html"> 126 <img src="/img/hero-bessel.png" alt="Bokeh plot of Bessel functions with a LaTe
126X equation, mathematical labels, and axis notation" width="300" height="300"> 127 <span class="hero-shot-caption"><span>Scientific</span><strong>Math and LaTeX</strong></span> 128 <span class="hero-shot-arrow" aria-hidden="true">â</span> 129 </a> 130 <a class="hero-shot" href="https://docs.bokeh.org/en/latest/docs/examples/topics/timeseries/candlestick.html"> 131 <img src="/img/hero-timeseries.png" alt="Bokeh candlestick chart showing Microsoft stock prices" width="300" height="300"> 132 <span class="hero-shot-caption"><span>Time series</span><strong>Market series</strong></span> 133 <span class="hero-shot-arrow" aria-hidden="true">â</span> 134 </a> 135 <a class="hero-shot" href="https://docs.bokeh.org/en/latest/docs/examples/topics/graph/from_networkx.html"> 136 <img src="/img/hero-network-graph.png" alt="A Bokeh network graph created from a NetworkX graph" width="300" height="300"> 137 <span class="hero-shot-caption"><span>Graph data</span><strong>Network graph</strong></span> 138 <span class="hero-shot-arrow" aria-hidden="true">â</span> 139 </a> 140 <a class="hero-shot hero-shot-spectrum" href="https://demo.bokeh.org/spectrum-monitor"> 141 <img src="/img/spectrum-preview.jpg" alt="Bokeh radio spectrum lab showing bright signal bands in a scrolling spectrogram" width="630" height="200"> 142 <span class="hero-shot-caption"><span>Server app</span><strong>Radio spectrum lab</strong></span> 143 <span class="hero-shot-arrow" aria-hidden="true">â</span> 144 </a> 145 </div> 146 </div> 147 </div> 148</section> 149 150<section class="path-section section" aria-labelledby="paths-title"> 151 <div class="section-heading"> 152 <p class="section-kicker">Common workflows</p> 153 <h2 id="paths-title">Use Bokeh <span>where you already work.</span></h2> 154 <p>Build plots in Jupyter, publish them on a web page, or add Python callbacks with the Bokeh server.</p> 155 </div> 156 157 <div class="path-grid"> 158 <article class="path-card path-card-teal"> 159 <div class="path-meta"><span>01</span><span>Jupyter</span></div> 160 <div class="path-visual path-visual-real"> 161 <img src="/img/example-jupyterlab.png" alt="A Bokeh ridge plot rendered inline below Python code in JupyterLab" width="300" height="300"> 162 </div> 163 <h3>Explore data in notebooks</h3> 164 <p>Place interactive plots beside your analysis in Jupyter notebooks and JupyterLab.</p> 165 <a href="https://docs.bokeh.org/en/latest/docs/user_guide/output/jupyter.html">Use Bokeh in Jupyter <span aria-hidden="true">â</span></a> 166 </article> 167 168 <article class="path-card path-card-coral"> 169 <div class="path-meta"><span>02</span><span>Standalone</span></div> 170 <div class="path-visual path-visual-real"> 171 <div class="publish-page-preview" role="img" aria-label="An interactive Bokeh time series embedded in the flow of an editorial webpage"> 172 <div class="publish-page-sheet" aria-hidden="true"> 173 <div class="publish-page-header"><strong>FIELD NOTES</strong><span>Analysis Methods About</span></div> 174 <div class="publish-page-body"> 175 <div class="publish-page-copy"> 176 <span>DATA JOURNAL · 8 MIN</span> 177 <strong>A decade in motion</strong> 178 <p>Readers can inspect the full series and change the visible range in the chart.</p> 179 </div> 180 <div class="publish-page-chart"> 181 <img src="/img/example-range-tool.png" alt="" width="300" height="300"> 182 <span>Drag the lower range to explore</span> 183 </div> 184 </div> 185 <div class="publish-page-continuation"><span></span><span></span><span></span></div> 186 </div> 187 </div> 188 </div> 189 <h3>Publish anywhere</h3> 190 <p>Save a standalone HTML file or embed a plot in an existing page. Neither option needs a Python server.</p> 191 <a href="https://docs.bokeh.org/en/latest/docs/user_guide/output/embed.html">Publish and embed <span aria-hidden="true">â</span></a> 192 </article> 193 194 <article class="path-card path-card-gold"> 195 <div class="path-meta"><span>03</span><span>ASGI</span></div> 196 <div class="path-visual path-visual-real"> 197 <img src="/img/example-dask-dashboard.gif" alt="The animated Dask diagnostic dashboard built with Bokeh" width="300" height="300"> 198 </div> 199 <h3>Add live Python callbacks</h3> 200 <p>Mount Bokeh in FastAPI, Starlette, Django, or another ASGI app, and serve it with Uvicorn or Hypercorn. No separate Bokeh process is needed.</p> 201 <a href="https://docs.bokeh.org/en/latest/docs/user_guide/server/library.html">Use Bokeh with ASGI <span aria-hidden="true">â</span></a> 202 </article> 203 </div> 204</section> 205 206<section class="code-section" id="why-bokeh"> 207 <div class="code-section-inner"> 208 <div class="code-intro"> 209 <p class="section-kicker section-kicker-light">A small example</p> 210 <h2>Python to the browser.</h2> 211 <p>
211Bokeh handles rendering in the browser and provides tools for pan, zoom, hover, and selection.</p> 212 <a href="https://docs.bokeh.org/en/latest/docs/first_steps.html">See the first steps <span aria-hidden="true">â</span></a> 213 </div> 214 215 <div class="code-window" aria-label="Example Bokeh Python code"> 216 <div class="window-bar"> 217 <div class="window-dots" aria-hidden="true"><i></i><i></i><i></i></div> 218 <span>first_plot.py</span><span>Python</span> 219 </div> 220 <pre><code><span class="code-muted">01</span> <span class="code-keyword">from</span> bokeh.plotting <span class="code-keyword">import</span> figure, show 221<span class="code-muted">02</span> 222<span class="code-muted">03</span> x = [1, 2, 3, 4, 5] 223<span class="code-muted">04</span> y = [6, 7, 2, 4, 5] 224<span class="code-muted">05</span> 225<span class="code-muted">06</span> p = figure(<span class="code-string">"A first Bokeh plot"</span>) 226<span class="code-muted">07</span> p.line(x, y, line_width=<span class="code-number">3</span>) 227<span class="code-muted">08</span> p.scatter(x, y, size=<span class="code-number">9</span>) 228<span class="code-muted">09</span> show(p)</code></pre> 229 <div class="code-status"><span></span>Output ready in your browser</div> 230 </div> 231 </div> 232</section> 233 234<section class="capability-section section" aria-labelledby="capabilities-title"> 235 <div class="capability-heading"> 236 <div> 237 <p class="section-kicker">Bokeh at a glance</p> 238 <h2 id="capabilities-title">Built for real analytical work.</h2> 239 </div> 240 <p>Use bokeh.plotting to make a first chart. For a custom application, work directly with plots, widgets, layouts, and other Bokeh models.</p> 241 </div> 242 <div class="capability-list"> 243 <article><span class="capability-number">A</span><h3>Built-in interaction</h3><p>Bokeh plots include tools for pan, zoom, hover, selection, linking, filtering, and editable data.</p></article> 244 <article><span class="capability-number">B</span><h3>High-level and low-level APIs</h3><p>Start with bokeh.plotting, then use layouts, widgets, annotations, models, themes, and extensions as needed.</p></article> 245 <article><span class="capability-number">C</span><h3>Streaming and larger data</h3><p>Stream or patch data without replacing the full data source. Supported glyphs can use WebGL acceleration.</p></article> 246 <article><span class="capability-number">D</span><h3>Several ways to publish</h3><p>Show plots in notebooks, save standalone HTML, embed components in a web app, or run a Bokeh server.</p></article> 247 </div> 248</section> 249 250<section class="example-section section" id="examples"> 251 <div class="example-heading"> 252 <div><p class="section-kicker">Live demos</p><h2>Try Bokeh in a live application.</h2></div> 253 <a href="https://demo.bokeh.org/#demos">View all demos <span aria-hidden="true">â</span></a> 254 </div> 255 <div class="example-grid"> 256 <a class="example-card" href="https://demo.bokeh.org/mobility"> 257 <div class="example-art example-art-screenshot"> 258 <img src="/img/mobility-preview.jpg" alt="Vehicle efficiency explorer with a linked scatter plot and fuel economy distribution" width="630" height="200"> 259 </div> 260 <div class="example-copy"> 261 <div><span>Linked selection</span><span>Vehicle data</span></div> 262 <h3>Compare vehicles across linked views.</h3> 263 <p>Select a group in the scatter plot to update its fuel economy distribution and summary values.</p> 264 </div> 265 </a> 266 <a class="example-card" href="https://demo.bokeh.org/airport-access"> 267 <div class="example-art example-art-screenshot"> 268 <img src="/img/airport-preview.jpg" alt="Regional airport application with airport locations plotted over map tiles" width="630" height="200"> 269 </div> 270 <div class="example-copy"> 271 <div><span>Geospatial</span><span>Tile map</span></div> 272 <h3>Compare access to regional airports.</h3> 273 <p>Choose a state or territory, then select an airport to find its closest alternatives.</p> 274 </div> 275 </a> 276 <a class="example-card" href="https://demo.bokeh.org/market-monitor">
277 <div class="example-art example-art-screenshot"> 278 <img src="/img/market-preview.jpg" alt="Streaming market simulator with an updating OHLC chart" width="630" height="200" loading="lazy"> 279 </div> 280 <div class="example-copy"> 281 <div><span>Streaming data</span><span>Session state</span></div> 282 <h3>Watch market indicators react to new bars.</h3> 283 <p>Generate an intraday OHLC stream, change its market regime, and watch volatility, drawdown, and MACD update.</p> 284 </div> 285 </a> 286 <a class="example-card" href="https://demo.bokeh.org/terrain-contours"> 287 <div class="example-art example-art-screenshot"> 288 <img src="/img/terrain-preview.jpg" alt="Terrain contour application with a movable transect across a modeled landscape" width="630" height="200" loading="lazy"> 289 </div> 290 <div class="example-copy"> 291 <div><span>Filled contours</span><span>Linked profile</span></div> 292 <h3>Move a transect across modeled terrain.</h3> 293 <p>Position the transect to update its elevation profile and terrain statistics.</p> 294 </div> 295 </a> 296 <a class="example-card" href="https://demo.bokeh.org/image-processing"> 297 <div class="example-art example-art-screenshot"> 298 <img src="/img/hubble-preview.jpg" alt="Hubble deep-field image in an interactive image-processing application" width="500" height="220" loading="lazy"> 299 </div> 300 <div class="example-copy"> 301 <div><span>Image processing</span><span>Xarray + Numba</span></div> 302 <h3>Process a Hubble image interactively.</h3> 303 <p>Crop the image and apply compiled color, contrast, blur, edge, and sharpening filters.</p> 304 </div> 305 </a> 306 <a class="example-card" href="https://demo.bokeh.org/chaotic-motion"> 307 <div class="example-art example-art-screenshot"> 308 <img src="/img/chaos-preview.jpg" alt="Nonlinear oscillator application showing phase paths for a mathematical model" width="630" height="200" loading="lazy"> 309 </div> 310 <div class="example-copy"> 311 <div><span>Applied mathematics</span><span>Simulation</span></div> 312 <h3>Compare nonlinear oscillators.</h3> 313 <p>Switch among four models, then compare their traces, phase paths, and diagnostics.</p> 314 </div> 315 </a> 316 </div> 317</section> 318 319<section class="showcase-section" aria-labelledby="showcase-title"> 320 <div class="showcase-inner"> 321 <div class="showcase-heading"> 322 <div><p class="section-kicker section-kicker-light">User showcase</p><h2 id="showcase-title">Projects that use Bokeh.</h2></div> 323 <p>Dask, Panel, Mistic, and ArviZ use Bokeh for browser graphics, interaction, or application infrastructure.</p> 324 </div> 325 <div class="showcase-grid"> 326 <a class="showcase-card showcase-card-gold" href="https://docs.dask.org/en/latest/dashboard.html"> 327 <div class="showcase-card-meta"><span>01</span><span>Distributed computing</span></div> 328 <div class="showcase-project"><span aria-hidden="true">D</span><strong>Dask</strong></div> 329 <h3>Monitor distributed work.</h3> 330 <p>The Dask diagnostics dashboard uses Bokeh to show task progress, memory, CPU, data transfer, and worker activity.</p> 331 <span class="showcase-link">Visit project <span aria-hidden="true">â</span></span> 332 </a> 333 <a class="showcase-card showcase-card-teal" href="https://panel.holoviz.org/"> 334 <div class="showcase-card-meta"><span>02</span><span>Application framework</span></div> 335 <div class="showcase-project"><span aria-hidden="true">P</span><strong>Panel</strong></div> 336 <h3>Build Python dashboards and applications.</h3> 337 <p>Panel builds on Bokeh browser models and the Bokeh server, adding its own layouts, widgets, and application APIs.</p> 338 <span class="showcase-link">Visit project <span aria-hidden="true">â</span></span> 339 </a> 340 <a class="showcase-card showcase-card-coral" href="https://github.com/MathOnco/Mistic"> 341 <div class="showcase-card-meta"><span>03</span><span>Biomedical imaging</span></div> 342 <div class="showcase-project"><span aria-hidden="true">M</span><strong>Mistic</strong></div> 343 <h3>Explore multiplexed tissue images.</h3> 344 <p>Mistic uses Bokeh canvases and linked interactions to compare multiplex images and investigate image t-SNE embeddings.</p>
345 <span class="showcase-link">Visit project <span aria-hidden="true">â</span></span> 346 </a> 347 <a class="showcase-card showcase-card-violet" href="https://python.arviz.org/projects/plots/en/stable/api/backend/bokeh.html"> 348 <div class="showcase-card-meta"><span>04</span><span>Bayesian analysis</span></div> 349 <div class="showcase-project"><span aria-hidden="true">A</span><strong>ArviZ</strong></div> 350 <h3>Inspect Bayesian model diagnostics.</h3> 351 <p>ArviZ includes a Bokeh backend for interactive posterior analysis, statistical graphics, and notebooks.</p> 352 <span class="showcase-link">Visit project <span aria-hidden="true">â</span></span> 353 </a> 354 </div> 355 </div> 356</section> 357 358<section class="community-section"> 359 <div class="community-inner"> 360 <div class="community-mark" aria-hidden="true"><img src="/img/bokeh-icon.svg" alt="" width="72" height="72"></div> 361 <p class="section-kicker section-kicker-light">Open source</p> 362 <h2>Open source visualization,<br>driven by community.</h2> 363 <p>Bokeh is a fiscally sponsored NumFOCUS project, built and maintained by contributors on GitHub.</p> 364 <div class="community-actions"> 365 <a href="https://discourse.bokeh.org/"><span class="community-action-label">Join the community</span><span aria-hidden="true">â</span></a> 366 <a href="https://github.com/bokeh/bokeh"><span class="community-action-label">Contribute on GitHub</span><span aria-hidden="true">â</span></a> 367 </div> 368 </div> 369</section> 370 371 </main> 372 <footer> 373 <div class="footer-links"> 374 <div class="footer-grid"> 375 <div> 376 <h3>Project</h3> 377 <a href="https://github.com/bokeh/bokeh/wiki/BEP-4:-Project-Roles">Team</a> 378 <a href="/branding/">Branding</a> 379 <a href="https://github.com/bokeh/bokeh/wiki/Citing-Bokeh">Citation</a> 380 </div> 381 <div> 382 <h3>Documentation</h3> 383 <a href="https://docs.bokeh.org/en/latest/docs/user_guide.html">User guide</a> 384 <a href="https://docs.bokeh.org/en/latest/docs/gallery.html">Gallery</a> 385 <a href="https://docs.bokeh.org/en/latest/docs/reference.html">Reference guide</a> 386 </div> 387 <div> 388 <h3>Hands on</h3> 389 <a href="https://github.com/bokeh/tutorial">Tutorials</a> 390 <a href="https://demo.bokeh.org/">Demos</a> 391 <a href="/community/">Support</a> 392 </div> 393 <div> 394 <h3>Contribute</h3> 395 <a href="https://github.com/bokeh/bokeh">GitHub</a> 396 <a href="https://docs.bokeh.org/en/latest/docs/dev_guide.html">Contributor guide</a> 397 <a href="https://github.com/bokeh/bokeh#support">Sponsor</a> 398 </div> 399 </div> 400 </div> 401 402 <div class="footer-copy"> 403 <div> 404 <p> 405 Bokeh is a fiscally sponsored project of <a href="https://numfocus.org/">NumFOCUS</a>, 406 a nonprofit dedicated to supporting the open-source scientific computing community. 407 </p> 408 <p> 409 ©2026 Bokeh contributors. Website content uses the 410 <a href="https://github.com/bokeh/bokeh.org/blob/main/LICENSE.txt">BSD License</a> 411 and is covered by the 412 <a href="https://github.com/bokeh/bokeh/blob/main/docs/CODE_OF_CONDUCT.md">Bokeh Code of Conduct</a>. 413 </p> 414 </div> 415 <a class="donate-button" href="https://numfocus.org/donate-to-bokeh">Donate</a> 416 </div> 417</footer> 418 419 <!-- Plausible.io Analytics -->
420<script defer data-domain="bokeh.org" src="https://plausible.io/js/script.js"></script>
420 421 422<!-- End Plausible.io Analytics --> 423 424
424<script src="/js/modern.js" defer></script>
424 425 </body> 426</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.