1 2<!DOCTYPE html> 3 4 5<html lang="en" data-content_root="../" data-theme="light"> 6 7 <head> 8 <meta charset="utf-8" /> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" /> 10<meta property="og:title" content="First steps" /> 11<meta property="og:type" content="website" /> 12<meta property="og:url" content="https://docs.bokeh.org/en/latest/docs/first_steps.html" /> 13<meta property="og:site_name" content="Bokeh" /> 14<meta property="og:description" content="Installing Bokeh: Bokeh is officially supported and tested on Python 3.12 and above (CPython). You can install Bokeh with either conda or pip: Installing with pip Use this command to install Bokeh:..." /> 15<meta property="og:image" content="http://static.bokeh.org/og/logotype-on-hex.png" /> 16<meta property="og:image:alt" content="Bokeh" /> 17<meta name="description" content="Installing Bokeh: Bokeh is officially supported and tested on Python 3.12 and above (CPython). You can install Bokeh with either conda or pip: Installing with pip Use this command to install Bokeh:..." /> 18<meta name="image" property="og:image" content="http://static.bokeh.org/og/logotype-on-hex.png"> 19 <link rel="icon" sizes="16x16" href="https://static.bokeh.org/favicon/favicon-16x16.png" type="image/png"> 20 <link rel="icon" sizes="32x32" href="https://static.bokeh.org/favicon/favicon-32x32.png" type="image/png"> 21 <link rel="apple-touch-icon" sizes="180x180" href="https://static.bokeh.org/favicon/apple-touch-icon.png" type="image/png"> 22 <title>First steps — Bokeh 3.10.0 Documentation</title> 23 24 25 26
26<script data-cfasync="false"> 27 document.documentElement.dataset.mode = localStorage.getItem("mode") || "light"; 28 document.documentElement.dataset.theme = localStorage.getItem("theme") || "light"; 29 </script>
29 30 <!-- 31 this give us a css class that will be invisible only if js is disabled 32 --> 33 <noscript> 34 <style> 35 .pst-js-only { display: none !important; } 36 37 </style> 38 </noscript> 39 40 <!-- Loaded before other Sphinx assets --> 41 <link href="../_static/styles/theme.css?digest=90905a2f556bf617f1a9" rel="stylesheet" /> 42<link href="../_static/styles/pydata-sphinx-theme.css?digest=90905a2f556bf617f1a9" rel="stylesheet" /> 43 44 <link rel="stylesheet" type="text/css" href="../_static/pygments.css?v=03e43079" /> 45 <link rel="stylesheet" type="text/css" href="../_static/copybutton.css?v=76b2166b" /> 46 <link rel="stylesheet" type="text/css" href="../_static/sphinx-design.min.css?v=95c83b7e" /> 47 <link rel="stylesheet" type="text/css" href="../_static/custom.css?v=a38fef48" /> 48 49 <!-- So that users can add custom icons --> 50
50<script defer src="../_static/scripts/fontawesome.js?digest=90905a2f556bf617f1a9"></script>
50 51 <!-- Pre-loaded scripts that we'll load fully later --> 52 <link rel="preload" as="script" href="../_static/scripts/bootstrap.js?digest=90905a2f556bf617f1a9" /> 53<link rel="preload" as="script" href="../_static/scripts/pydata-sphinx-theme.js?digest=90905a2f556bf617f1a9" /> 54 55
55<script>const BOKEH_CURRENT_VERSION = '3.10.0';</script>
55 56
56<script src="../_static/documentation_options.js?v=f8d09eac"></script>
56 57
57<script src="../_static/doctools.js?v=fd6eb6e6"></script>
57 58
58<script src="../_static/sphinx_highlight.js?v=6ffebe34"></script>
58 59
59<script src="../_static/clipboard.min.js?v=a7894cd8"></script>
59 60
60<script src="../_static/copybutton.js?v=4ea706d9"></script>
60 61
61<script src="../_static/custom.js?v=04c79020"></script>
61 62
62<script src="../_static/design-tabs.js?v=f930bc37"></script>
62 63
63<script data-domain="docs.bokeh.org" defer="defer" src="https://plausible.io/js/script.js"></script>
63 64
64<script>DOCUMENTATION_OPTIONS.pagename = 'docs/first_steps';</script>
64 65
65<script> 66 DOCUMENTATION_OPTIONS.theme_version = '0.20.0'; 67 DOCUMENTATION_OPTIONS.theme_switcher_json_url = 'https://docs.bokeh.org/switcher.json'; 68 DOCUMENTATION_OPTIONS.theme_switcher_version_match = '3.10.0'; 69 DOCUMENTATION_OPTIONS.show_version_warning_banner = 70 true; 71 </script>
71 72
72<script>DOCUMENTATION_OPTIONS.search_as_you_type = false;</script>
72 73 <link rel="index" title="Index" href="../genindex.html" /> 74 <link rel="search" title="Search" href="../search.html" /> 75 <link rel="next" title="Installation details" href="first_steps/installation.html" /> 76 <link rel="prev" title="Bokeh documentation" href="../index.html" /> 77 <meta name="viewport" content="width=device-width, initial-scale=1"/> 78 <meta name="docsearch:language" content="en"/> 79 <meta name="docsearch:version" content="3.10.0" /> 80 81 82
82<script src="../_static/searchtools.js"></script>
82 83
83<script src="../_static/language_data.js"></script>
83 84
84<script src="../searchindex.js"></script>
84 85 86 </head> 87 <body data-default-mode="light"> 88 89 90 <div id="pst-skip-link" class="skip-link d-print-none"><a href="#main-content">Skip to main content</a></div> 91 92 93 <div id="pst-scroll-pixel-helper"></div> 94 95 <button type="button" class="btn rounded-pill" id="pst-back-to-top"> 96 <i class="fa-solid fa-arrow-up"></i>Back to top</button> 97 98 99 100 101 <dialog id="pst-search-dialog"> 102 103<form class="bd-search d-flex align-items-center" 104 action="../search.html" 105 method="get"> 106 <i class="fa-solid fa-magnifying-glass"></i> 107 <input type="search" 108 class="form-control" 109 name="q" 110 placeholder="Search the docs ..." 111 aria-label="Search the docs ..." 112 autocomplete="off" 113 autocorrect="off" 114 autocapitalize="off" 115 spellcheck="false"/> 116 <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd></span> 117</form> 118 </dialog> 119 120 <div class="pst-async-banner-revealer d-none"> 121 <aside id="bd-header-version-warning" class="d-none d-print-none" aria-label="Version warning"></aside> 122</div> 123 124 125 <header id="pst-header" class="bd-header navbar navbar-expand-lg bd-navbar d-print-none"> 126<div class="bd-header__inner bd-page-width"> 127 <button class="pst-navbar-icon sidebar-toggle primary-toggle" aria-label="Site navigation"> 128 <span class="fa-solid fa-bars"></span> 129 </button> 130 131 132 <div class=" navbar-header-items__start"> 133 134 <div class="navbar-item"><a class="navbar-brand logo" href="../index.html"> 135 <img src="https://static.bokeh.org/branding/logos/bokeh-logo.svg" class="logo" alt="The Bokeh logo"> 136</a></div> 137 138 <div class="navbar-item"> 139<div class="version-switcher__container dropdown pst-js-only"> 140 <button id="pst-version-switcher-button-2" 141 type="button" 142 class="version-switcher__button btn btn-sm dropdown-toggle" 143 data-bs-toggle="dropdown" 144 aria-haspopup="listbox" 145 aria-controls="pst-version-switcher-list-2" 146 aria-label="Version switcher list" 147 > 148 Choose version <!-- this text may get changed later by javascript --> 149 <span class="caret"></span> 150 </button> 151 <div id="pst-version-switcher-list-2" 152 class="version-switcher__menu dropdown-menu list-group-flush py-0" 153 role="listbox" aria-labelledby="pst-version-switcher-button-2"> 154 <!-- dropdown will be populated by javascript on page load --> 155 </div> 156</div></div> 157 158 </div> 159 160 <div class=" navbar-header-items"> 161 162 <div class="me-auto navbar-header-items__center"> 163 164 <div class="navbar-item"> 165<nav> 166 <ul class="bd-navbar-elements navbar-nav"> 167 168<li class="nav-item current active"> 169 <a class="nav-link nav-internal" href="#"> 170 First steps 171 </a> 172</li> 173 174 175<li class="nav-item "> 176 <a class="nav-link nav-internal" href="user_guide.html"> 177 User guide 178 </a> 179</li> 180 181 182<li class="nav-item "> 183 <a class="nav-link nav-internal" href="gallery.html"> 184 Gallery 185 </a> 186</li> 187 188 189<li class="nav-item "> 190 <a class="nav-link nav-internal" href="reference.html"> 191 Reference 192 </a> 193</li> 194 195 196<li class="nav-item "> 197 <a class="nav-link nav-internal" href="dev_guide.html"> 198 Contribute 199 </a> 200</li> 201 202 203<li class="nav-item "> 204 <a class="nav-link nav-internal" href="releases.html"> 205 Releases 206 </a> 207</li> 208 209 210<li class="nav-item "> 211 <a class="nav-link nav-external" href="https://github.com/bokeh/tutorial/"> 212 Tutorial 213 </a> 214</li> 215 216 217<li class="nav-item "> 218 <a class="nav-link nav-external" href="https://discourse.bokeh.org"> 219 Community 220 </a> 221</li> 222 223 </ul> 224</nav></div> 225 226 </div> 227 228 229 <div class="navbar-header-items__end"> 230 231 <div class="navbar-item navbar-persistent--container"> 232 233 234<button class="btn search-button-field search-button__button pst-js-only" title="Search" aria-label="Search" data-bs-placement="bottom" data-bs-toggle="tooltip"> 235 <i class="fa-solid fa-magnifying-glass"></i> 236 <span class="search-button__default-text">Search</span> 237 <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span> 238</button> 239 </div> 240 241 242 <div class="navbar-item"><ul class="navbar-icon-links" 243 aria-label="Icon Links"> 244 <li class="nav-item"> 245 246 247 248 249 250 251 252 253 <a href="https://github.com/bokeh/bokeh" title="GitHub" class="nav-link pst-navbar-icon" rel="noopener" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="fa-brands fa-square-github fa-lg" aria-hidden="true"></i><span class="visually-hidden">GitHub</span></a> 254 </li> 255</ul></div> 256 257 </div> 258 259 </div> 260 261 262 <div class="navbar-persistent--mobile"> 263 264<button class="btn search-button-field search-button__button pst-js-only" title="Search" aria-label="Search" data-bs-placement="bottom" data-bs-toggle="tooltip"> 265 <i class="fa-solid fa-magnifying-glass"></i> 266 <span class="search-button__default-text">Search</span> 267 <span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span> 268</button> 269 </div> 270 271 272 273</div> 274 275 </header> 276 277 278 <div class="bd-container"> 279 <div class="bd-container__inner bd-page-width"> 280 281 282 283 <dialog id="pst-primary-sidebar-modal"></dialog> 284 <div id="pst-primary-sidebar" class="bd-sidebar-primary bd-sidebar"> 285 286 287 288 <div class="sidebar-header-items sidebar-primary__section"> 289 290 291 <div class="sidebar-header-items__center"> 292 293 294 295 <div class="navbar-item"> 296<nav> 297 <ul class="bd-navbar-elements navbar-nav"> 298 299<li class="nav-item current active"> 300 <a class="nav-link nav-internal" href="#"> 301 First steps 302 </a> 303</li> 304 305 306<li class="nav-item "> 307 <a class="nav-link nav-internal" href="user_guide.html"> 308 User guide 309 </a> 310</li> 311 312 313<li class="nav-item "> 314 <a class="nav-link nav-internal" href="gallery.html"> 315 Gallery 316 </a> 317</li> 318 319 320<li class="nav-item "> 321 <a class="nav-link nav-internal" href="reference.html"> 322 Reference 323 </a> 324</li> 325 326 327<li class="nav-item "> 328 <a class="nav-link nav-internal" href="dev_guide.html"> 329 Contribute 330 </a> 331</li> 332 333 334<li class="nav-item "> 335 <a class="nav-link nav-internal" href="releases.html"> 336 Releases 337 </a> 338</li> 339 340 341<li class="nav-item "> 342 <a class="nav-link nav-external" href="https://github.com/bokeh/tutorial/"> 343 Tutorial 344 </a> 345</li> 346 347 348<li class="nav-item "> 349 <a class="nav-link nav-external" href="https://discourse.bokeh.org"> 350 Community 351 </a> 352</li> 353 354 </ul> 355</nav></div> 356 357 358 </div> 359 360 361 362 <div class="sidebar-header-items__end"> 363 364 <div class="navbar-item"><ul class="navbar-icon-links" 365 aria-label="Icon Links"> 366 <li class="nav-item"> 367 368 369 370 371 372 373 374 375 <a href="https://github.com/bokeh/bokeh" title="GitHub" class="nav-link pst-navbar-icon" rel="noopener" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="fa-brands fa-square-github fa-lg" aria-hidden="true"></i><span class="visually-hidden">GitHub</span></a> 376 </li> 377</ul></div> 378 379 </div> 380 381 </div> 382 383 <div class="sidebar-primary-items__start sidebar-primary__section"> 384 <div class="sidebar-primary-item pst-sidebar-collapse"><button id="pst-collapse-sidebar-button" aria-expanded="true" aria-controls="pst-primary-sidebar"> 385 <svg class="pst-icon" role="img" aria-hidden="true" focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
386 <path fill="currentColor" d="M3 15.5C2.36232 15.5 1.74874 15.2564 1.28478 14.8189C0.820828 14.3815 0.541576 13.7832 0.504167 13.1467L0.5 13L0.5 3C0.499965 2.36232 0.743605 1.74874 1.18107 1.28478C1.61854 0.820828 2.21676 0.541576 2.85333 0.504167L3 0.5L13 0.5C13.6377 0.499965 14.2513 0.743605 14.7152 1.18107C15.1792 1.61854 15.4584 2.21676 15.4958 2.85333L15.5 3L15.5 13C15.5 13.6377 15.2564 14.2513 14.8189 14.7152C14.3815 15.1792 13.7832 15.4584 13.1467 15.4958L13 15.5L3 15.5ZM3 13.8333L10.5 13.8333L10.5 2.16667L3 2.16667C2.79589 2.16669 2.59889 2.24163 2.44636 2.37726C2.29383 2.5129 2.19638 2.69979 2.1725 2.9025L2.16667 3L2.16667 13C2.16669 13.2041 2.24163 13.4011 2.37726 13.5536C2.5129 13.7062 2.69979 13.8036 2.9025 13.8275L3 13.8333ZM6.65583 10.325L6.5775 10.2558L4.91083 8.58917C4.76735 8.44567 4.68116 8.25476 4.66843 8.05223C4.65569 7.84971 4.71729 7.6495 4.84167 7.48917L4.91083 7.41083L6.5775 5.74417C6.72747 5.59471 6.9287 5.50794 7.14032 5.50148C7.35194 5.49502 7.55809 5.56935 7.7169 5.70937C7.8757 5.8494 7.97525 6.04463 7.99533 6.25539C8.01541 6.46616 7.95451 6.67667 7.825 6.84417L7.75583 6.9225L6.67917 8L7.75583 9.0775C7.89931 9.22099 7.98551 9.41191 7.99824 9.61443C8.01097 9.81695 7.94938 10.0172 7.825 10.1775L7.75583 10.2558C7.61234 10.3993 7.42142 10.4855 7.2189 10.4982C7.01638 10.511 6.81617 10.4494 6.65583 10.325Z"/> 387 </svg> 388 <span class="pst-collapse-sidebar-label">Collapse Sidebar</span> 389 <span class="pst-expand-sidebar-label">Expand Sidebar</span> 390</button></div> 391 <div class="sidebar-primary-item"> 392 393<nav class="bd-docs-nav bd-links" 394 aria-label="Section Navigation"> 395 <p class="bd-links__title" role="heading" aria-level="1">Section Navigation</p> 396 <div class="bd-toc-item navbar-nav"><ul class="nav bd-sidenav"> 397<li class="toctree-l1"><a class="reference internal" href="first_steps/installation.html">Installation details</a></li> 398<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_1.html">First steps 1: Creating a line chart</a></li> 399<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_2.html">First steps 2: Adding and customizing renderers</a></li> 400<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_3.html">First steps 3: Adding legends, text, and annotations</a></li> 401<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_4.html">First steps 4: Customizing your plot</a></li> 402<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_5.html">First steps 5: Vectorizing glyph properties</a></li> 403<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_6.html">First steps 6: Combining plots</a></li> 404<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_7.html">First steps 7: Displaying and exporting</a></li> 405<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_8.html">First steps 8: Providing and filtering data</a></li> 406<li class="toctree-l1"><a class="reference internal" href="first_steps/first_steps_9.html">First steps 9: Using widgets</a></li> 407</ul> 408</div> 409</nav></div> 410 </div> 411 412 413 <div class="sidebar-primary-items__end sidebar-primary__section"> 414 <div class="sidebar-primary-item"> 415<div id="ethical-ad-placement" 416 class="flat" 417 data-ea-publisher="readthedocs" 418 data-ea-type="readthedocs-sidebar" 419 data-ea-manual="true"> 420</div></div> 421 </div> 422 423 424 </div> 425 426 <main id="main-content" class="bd-main" role="main"> 427 428 429 <div class="bd-content"> 430 <div class="bd-article-container"> 431 432 <div class="bd-header-article d-print-none"> 433<div class="header-article-items header-article__inner"> 434 435 <div class="header-article-items__start"> 436 437 <div class="header-article-item"> 438 439<nav aria-label="Breadcrumb" class="d-print-none"> 440 <ul class="bd-breadcrumbs"> 441 442 <li class="breadcrumb-item breadcrumb-home"> 443 <a href="../index.html" class="nav-link" aria-label="Home"> 444 <i class="fa-solid fa-home"></i> 445 </a> 446 </li> 447 <li class="breadcrumb-item active" aria-current="page"><span class="ellipsis">First steps</span></li> 448 </ul> 449</nav> 450</div> 451 452 </div> 453 454 455</div> 456</div> 457 458 459 460 461<div id="searchbox"></div> 462 <article class="bd-article"> 463 464 <section id="first-steps"> 465<span id="id1"></span><h1>First steps<a class="headerlink" href="#first-steps" title="Link to this heading">#</a></h1> 466<div class="toctree-wrapper compound"> 467</div> 468<section id="installing-bokeh"> 469<span id="first-steps-installing"></span><h2>Installing Bokeh<a class="headerlink" href="#installing-bokeh" title="Link to this heading">#</a></h2> 470<p>Bokeh is officially supported and tested on Python 3.12 and 471above (CPython).</p> 472<p>You can install Bokeh with either <code class="docutils literal notranslate"><span class="pre">conda</span></code> or <code class="docutils literal notranslate"><span class="pre">pip</span></code>:</p> 473<div class="sd-container-fluid sd-sphinx-override sd-mb-4 docutils"> 474<div class="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-1 sd-row-cols-md-2 sd-row-cols-lg-2 docutils"> 475<div class="sd-col sd-d-flex-row docutils"> 476<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docut
476ils"> 477<div class="sd-card-header docutils"> 478<p class="sd-card-text">Installing with <code class="docutils literal notranslate"><span class="pre">pip</span></code></p> 479</div> 480<div class="sd-card-body docutils"> 481<p class="sd-card-text">Use this command to install Bokeh:</p> 482<div class="highlight-sh notranslate"><div class="highlight"><pre><span></span>pip<span class="w"> </span>install<span class="w"> </span>bokeh 483</pre></div> 484</div> 485</div> 486</div> 487</div> 488<div class="sd-col sd-d-flex-row docutils"> 489<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> 490<div class="sd-card-header docutils"> 491<p class="sd-card-text">Installing with <code class="docutils literal notranslate"><span class="pre">conda</span></code></p> 492</div> 493<div class="sd-card-body docutils"> 494<p class="sd-card-text">Use this command to install Bokeh:</p> 495<div class="highlight-sh notranslate"><div class="highlight"><pre><span></span>conda<span class="w"> </span>install<span class="w"> </span>bokeh 496</pre></div> 497</div> 498<p class="sd-card-text">Conda requires either <a class="reference external" href="https://www.anaconda.com/products/individual#Downloads">Anaconda</a> or <a class="reference external" href="https://docs.conda.io/en/latest/miniconda.html">Miniconda</a> to be installed on your 499system.</p> 500</div> 501</div> 502</div> 503</div> 504</div> 505<p>For more detailed information on installing and potential problems you might 506encounter, go to the <a class="reference internal" href="first_steps/installation.html#installation"><span class="std std-ref">Installation details</span></a> section.</p> 507</section> 508<section id="first-steps-guides"> 509<span id="first-steps-overview"></span><h2>First steps guides<a class="headerlink" href="#first-steps-guides" title="Link to this heading">#</a></h2> 510<p>Follow these guides to quickly learn about the most important features and 511capabilities of Bokeh.</p> 512<p>The first steps guides are for anybody who is new to Bokeh. The only 513prerequisites for using these guides are a basic understanding of Python and a 514working <a class="reference internal" href="#first-steps-installing"><span class="std std-ref">installation</span></a> of Bokeh.</p> 515<p>The first steps guides include lots of examples that you can copy to your 516development environment. There are also many links to the more in-depth 517resources of the <a class="reference internal" href="user_guide.html#userguide"><span class="std std-ref">user guide</span></a> and <a class="reference internal" href="reference.html#refguide"><span class="std std-ref">reference guide</span></a> in case you want to learn 518more about any of the topics covered in the first steps guides.</p> 519<div class="sd-container-fluid sd-sphinx-override sd-mb-4 docutils"> 520<div class="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-2 sd-row-cols-md-2 sd-row-cols-lg-3 docutils"> 521<div class="sd-col sd-d-flex-row docutils"> 522<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> 523<div class="sd-card-header docutils"> 524<p class="sd-card-text">Creating a simple line chart plot</p> 525</div> 526<div class="sd-card-body docutils"> 527<img alt="A line chart" class="align-center" src="../_images/first_steps_1.png" /> 528</div> 529<div class="sd-card-footer docutils"> 530<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_1.html"><span>Go to section 1</span></a></p> 531</div> 532</div> 533</div> 534<div class="sd-col sd-d-flex-row docutils"> 535<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> 536<div class="sd-card-header docutils"> 537<p class="sd-card-text">Adding and customizing renderers</p> 538</div> 539<div class="sd-card-body docutils"> 540<img alt="Several glyphs in one chart" class="align-center" src="../_images/first_steps_2.png" /> 541</div> 542<div class="sd-card-footer docutils"> 543<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_2.html"><span>Go to section 2</span></a></p> 544</div> 545</div> 546</div> 547<div class="sd-col sd-d-flex-row docutils"> 548<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docut
548ils"> 549<div class="sd-card-header docutils"> 550<p class="sd-card-text">Adding legends, text, and annotations</p> 551</div> 552<div class="sd-card-body docutils"> 553<img alt="A chart with a legend" class="align-center" src="../_images/first_steps_3.png" /> 554</div> 555<div class="sd-card-footer docutils"> 556<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_3.html"><span>Go to section 3</span></a></p> 557</div> 558</div> 559</div> 560<div class="sd-col sd-d-flex-row docutils"> 561<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> 562<div class="sd-card-header docutils"> 563<p class="sd-card-text">Customizing your plot</p> 564</div> 565<div class="sd-card-body docutils"> 566<img alt="A chart with a tootip" class="align-center" src="../_images/first_steps_4.png" /> 567</div> 568<div class="sd-card-footer docutils"> 569<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_4.html"><span>Go to section 4</span></a></p> 570</div> 571</div> 572</div> 573<div class="sd-col sd-d-flex-row docutils"> 574<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> 575<div class="sd-card-header docutils"> 576<p class="sd-card-text">Vectorizing glyph properties</p> 577</div> 578<div class="sd-card-body docutils"> 579<img alt="A chart with different colors" class="align-center" src="../_images/first_steps_5.png" /> 580</div> 581<div class="sd-card-footer docutils"> 582<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_5.html"><span>Go to section 5</span></a></p> 583</div> 584</div> 585</div> 586<div class="sd-col sd-d-flex-row docutils"> 587<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> 588<div class="sd-card-header docutils"> 589<p class="sd-card-text">Combining plots</p> 590</div> 591<div class="sd-card-body docutils"> 592<img alt="Three charts combined into one element" class="align-center" src="../_images/first_steps_6.png" /> 593</div> 594<div class="sd-card-footer docutils"> 595<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_6.html"><span>Go to section 6</span></a></p> 596</div> 597</div> 598</div> 599<div class="sd-col sd-d-flex-row docutils"> 600<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> 601<div class="sd-card-header docutils"> 602<p class="sd-card-text">Displaying and exporting</p> 603</div> 604<div class="sd-card-body docutils"> 605<img alt="Screenshot of a Bokeh plot in a Jupyter notebook" class="align-center" src="../_images/first_steps_7.png" /> 606</div> 607<div class="sd-card-footer docutils"> 608<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_7.html"><span>Go to section 7</span></a></p> 609</div> 610</div> 611</div> 612<div class="sd-col sd-d-flex-row docutils"> 613<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> 614<div class="sd-card-header docutils"> 615<p class="sd-card-text">Providing and filtering data</p> 616</div> 617<div class="sd-card-body docutils"> 618<img alt="Two charts with different subsets of data" class="align-center" src="../_images/first_steps_8.png" /> 619</div> 620<div class="sd-card-footer docutils"> 621<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_8.html"><span>Go to section 8</span></a></p> 622</div> 623</div> 624</div> 625<div class="sd-col sd-d-flex-row docutils"> 626<div class="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm docutils"> 627<div class="sd-card-header docutils"> 628<p class="sd-card-text">Using widgets</p> 629</div> 630<div class="sd-card-body docutils"> 631<img alt="Screenshot of a Bokeh server app" class="align-center" src="../_images/first_steps_9.png" /> 632</div> 633<div class="sd-card-footer docutils"> 634<p class="sd-card-text"><a class="sd-sphinx-override sd-btn sd-text-wrap reference external" href="first_steps/first_steps_9.html"><span>Go to section 9</span></a></p> 635</div> 636</div> 637</div> 638</div> 639</div> 640</section> 641</section> 642 643 644 </article> 645 646 647 648 649 650 <footer class="prev-next-footer d-print-none"> 651 652<div class="prev-next-area"> 653 <a class="left-prev" 654 href="../index.html" 655 title="previous page"> 656 <i class="fa-solid fa-angle-left"></i> 657 <div class="prev-next-info"> 658 <p class="prev-next-subtitle">previous</p> 659 <p class="prev-next-title">Bokeh documentation</p> 660 </div> 661 </a> 662 <a class="right-next" 663 href="first_steps/installation.html" 664 title="next page"> 665 <div class="prev-next-info"> 666 <p class="prev-next-subtitle">next</p> 667 <p class="prev-next-title">Installation details</p> 668 </div> 669 <i class="fa-solid fa-angle-right"></i> 670 </a> 671</div> 672 </footer> 673 674 </div> 675 676 677 678 679 </div> 680 <footer class="bd-footer-content"> 681 682 </footer> 683 684 </main> 685 </div> 686 </div> 687 688 <!-- Scripts loaded after <body> so the DOM is not blocked --> 689
689<script defer src="../_static/scripts/bootstrap.js?digest=90905a2f556bf617f1a9"></script>
vendor: 1 bytes, line 689
689
690<script defer src="../_static/scripts/pydata-sphinx-theme.js?digest=90905a2f556bf617f1a9"></script>
690 691 692 <footer class="bd-footer"><div class="container-fluid p-0 links"> 693 <div class="container"> 694 <div class="row"> 695 <div class="col-lg-3 col-md-6 col-sm-4 links-item"> 696 <h6>Project</h6> 697 <ul class="nav flex-column"> 698 <li class="nav-item"> 699 <a class="nav-link" href="https://bokeh.org/roadmap/">Roadmap</a> 700 </li> 701 <li class="nav-item"> 702 <a class="nav-link" href="https://github.com/bokeh/bokeh/wiki/BEP-4:-Project-Roles">Team</a> 703 </li> 704 <li class="nav-item"> 705 <a class="nav-link" href="https://bokeh.org/branding/">Branding</a> 706 </li> 707 </ul> 708 </div> 709 710 <div class="col-lg-3 col-md-6 col-sm-4 links-item"> 711 <h6>Documentation</h6> 712 <ul class="nav flex-column"> 713 <li class="nav-item"> 714 <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/user_guide.html">User Guide</a> 715 </li> 716 <li class="nav-item"> 717 <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/gallery.html">Gallery</a> 718 </li> 719 <li class="nav-item"> 720 <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/reference.html">Reference Guide</a> 721 </li> 722 </ul> 723 </div> 724 725 <div class="col-lg-3 col-md-6 col-sm-4 links-item"> 726 <h6>Hands On</h6> 727 <ul class="nav flex-column"> 728 <li class="nav-item"> 729 <a class="nav-link" href="https://github.com/bokeh/tutorial/">Tutorials</a> 730 </li> 731 <li class="nav-item"> 732 <a class="nav-link" href="https://demo.bokeh.org">Demos</a> 733 </li> 734 <li class="nav-item"> 735 <a class="nav-link" href="https://bokeh.org/community/">Support</a> 736 </li> 737 </ul> 738 </div> 739 740 <div class="col-lg-3 col-md-6 col-sm-4 links-item"> 741 <h6>Contribute</h6> 742 <ul class="nav flex-column"> 743 <li class="nav-item"> 744 <a class="nav-link" href="https://github.com/bokeh/bokeh">GitHub</a> 745 </li> 746 <li class="nav-item"> 747 <a class="nav-link" href="https://docs.bokeh.org/en/latest/docs/dev_guide.html">Contributor Guide</a> 748 </li> 749 <li class="nav-item"> 750 <a class="nav-link" href="https://github.com/bokeh/bokeh#support">Sponsor</a> 751 </li> 752 </ul> 753 </div> 754 </div> 755 </div> 756</div> 757 758 759<div class="container-fluid p-0 copyright"> 760 <div class="container py-2"> 761 <div class="row"> 762 <div class="col-md-10"> 763 <p class="m-0"> 764 Bokeh is a fiscally sponsored project of 765 <a href="https://numfocus.org">NumFOCUS</a>, a nonprofit dedicated 766 to supporting the open-source scientific computing community. 767 Donations help pay for cloud hosting costs, travel, and other 768 project needs. 769 </p> 770 <p class="m-0"> 771 ©2026 Bokeh Contributors. The website content uses the <a href="https://github.com/bokeh/demo.bokeh.org/blob/main/LICENSE.txt">BSD License</a> and is covered by the <a href="https://github.com/bokeh/bokeh/blob/main/docs/CODE_OF_CONDUCT.md">Bokeh Code of Conduct</a>. 772 </p> 773 </div> 774 <div class="col-md-2"> 775 <a class="btn btn-primary" href="https://numfocus.org/donate-to-bokeh">Donate</a> 776 </div> 777 </div> 778 </div> 779</div> 780 </footer> 781 </body> 782</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.