PageSourceSearch

https://bokeh.org/

html bokeh.org collected 2026-09-24 08:28:28 UTC 23,745 bytes, 426 lines download raw bytes

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&nbsp;&nbsp; Methods&nbsp;&nbsp; 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">&quot;A first Bokeh plot&quot;</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.