https://demo.bokeh.org/mobility

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <title>Vehicle efficiency explorer · Bokeh demos</title>
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<meta name="description" content="Compare decades of vehicle design, then select any group to recompute its fuel-economy distribution and summary values.">
8<link rel="canonical" href="https://demo.bokeh.org/mobility">
9<meta property="og:type" content="website">
10<meta property="og:site_name" content="Bokeh demos">
11<meta property="og:title" content="Vehicle efficiency explorer · Bokeh demos">
12<meta property="og:description" content="Compare decades of vehicle design, then select any group to recompute its fuel-economy distribution and summary values.">
13<meta property="og:url" content="https://demo.bokeh.org/mobility">
14<meta property="og:image" content="https://demo.bokeh.org/assets/social-preview.png?v=1">
15<meta property="og:image:width" content="1200">
16<meta property="og:image:height" content="630">
17<meta name="twitter:card" content="summary_large_image">
18<meta name="twitter:title" content="Vehicle efficiency explorer · Bokeh demos">
19<meta name="twitter:description" content="Compare decades of vehicle design, then select any group to recompute its fuel-economy distribution and summary values.">
20<meta name="twitter:image" content="https://demo.bokeh.org/assets/social-preview.png?v=1">
21<link rel="icon" href="/assets/bokeh-icon.svg?v=2" type="image/svg+xml" sizes="any">
22<link rel="icon" href="/favicon.ico?v=2" type="image/png" sizes="16x16">
23<link rel="stylesheet" href="/assets/site.css?v=14">
24<link rel="preconnect" href="https://cdn.bokeh.org" crossorigin>
25    <style>
26      html, body {
27        box-sizing: border-box;
28        display: flow-root;
29        height: 100%;
30        margin: 0;
31        padding: 0;
32      }
33    </style>

34<script src="https://cdn.bokeh.org/bokeh/release/bokeh-3.10.0.min.js"></script>

34

35<script src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.10.0.min.js"></script>

35

36<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.10.0.min.js"></script>

36

37<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.10.0.min.js"></script>

37

38<script src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-3.10.0.min.js"></script>

38

39<script>
40Bokeh.set_log_level("info");
41</script>

41
42  </head>
43  <body>
44<a class="skip-link" href="#main-content">Skip to content</a>
45<header class="site-header">
46  <div class="header-inner">
47    <a class="brand" href="/" aria-label="Bokeh demos home">
48      <img src="https://static.bokeh.org/logos/logotype.svg" alt="Bokeh" width="490" height="141">
49    </a>
50    <nav class="desktop-nav" aria-label="Primary navigation">
51      <a href="https://bokeh.org/#why-bokeh">Why Bokeh</a>
52      <a href="https://docs.bokeh.org/en/latest/docs/gallery.html">Examples</a>
53      <a href="https://docs.bokeh.org/en/latest/">Docs</a>
54      <details class="nav-more">
55        <summary>More</summary>
56        <div>
57          <a href="https://discourse.bokeh.org/">Community</a>
58          <a href="https://github.com/bokeh/bokeh">GitHub</a>
59        </div>
60      </details>
61    </nav>
62    <a class="header-cta" href="/#demos">All demos <span aria-hidden="true">↓</span></a>
63    <details class="mobile-nav">
64      <summary aria-label="Open navigation"><span></span><span></span></summary>
65      <nav aria-label="Mobile navigation">
66        <a href="https://bokeh.org/#why-bokeh">Why Bokeh</a>
67        <a href="https://docs.bokeh.org/en/latest/docs/gallery.html">Examples</a>
68        <a href="https://docs.bokeh.org/en/latest/">Docs</a>
69        <a href="https://discourse.bokeh.org/">Community</a>
70        <a href="https://github.com/bokeh/bokeh">GitHub</a>
71        <a href="/#demos">All demos</a>
72      </nav>
73    </details>
74  </div>
75</header>
76<main class="application-page" id="main-content">
77  <section class="application-intro">
78    <div>
79      <p class="section-kicker"><span></span>Real vehicle data</p>
80      <h1>Vehicle efficiency explorer</h1>
81      <p>Compare decades of vehicle design, then select any group to recompute its fuel-economy distribution and summary values.</p>
82    </div>
83    <div class="application-meta">
84      <p>Transportation<br><span>Python / ASGI</span></p>
85      <div class="application-links">
86        <a href="https://github.com/bokeh/demo.bokeh.org/blob/main/apps/mobility.py">View demo source code <span aria-hidden="true">↗</span></a>
87        <a href="/#run-locally">Run locally <span aria-hidden="true">↓</span></a>
88      </div>
89    </div>
90  </section>
91  <section class="application-canvas" aria-label="Interactive Bokeh application" aria-busy="true">
92    <div class="application-loading" role="status" aria-live="polite">
93      <div><span aria-hidden="true"></span>Loading interactive demo…</div>
94    </div>
95        <div id="ad9f9064-8e39-45ac-ab85-cca493e20175" data-root-id="p3873958" style="display: contents;"></div>
96
97    

97<script>
98      (() => {
99        const canvas = document.currentScript?.closest(".application-canvas")
100        const root = canvas?.querySelector("[data-root-id]")
101        const started = performance.now()
102        const finish = () => {
103          canvas?.setAttribute("aria-busy", "false")
104          canvas?.querySelector(".application-loading")?.remove()
105        }
106        const waitForRoot = () => {
107          if (root?.shadowRoot != null || root?.childElementCount > 0 || performance.now() - started > 3000) {
108            finish()
109          } else {
110            requestAnimationFrame(waitForRoot)
111          }
112        }
113        requestAnimationFrame(waitForRoot)
114      })()
115    </script>

115
116  </section>
117  <p class="session-note">This page uses a stateful Python session. Reload it to start a new session.</p>
118</main>
119<footer>
120  <div class="footer-links">
121    <div class="footer-grid">
122      <div>
123        <h3>Project</h3>
124        <a href="https://github.com/bokeh/bokeh/wiki/BEP-4:-Project-Roles">Team</a>
125        <a href="https://bokeh.org/branding/">Branding</a>
126        <a href="https://github.com/bokeh/bokeh/wiki/Citing-Bokeh">Citation</a>
127      </div>
128      <div>
129        <h3>Documentation</h3>
130        <a href="https://docs.bokeh.org/en/latest/docs/user_guide.html">User guide</a>
131        <a href="https://docs.bokeh.org/en/latest/docs/gallery.html">Gallery</a>
132        <a href="https://docs.bokeh.org/en/latest/docs/reference.html">Reference guide</a>
133      </div>
134      <div>
135        <h3>Hands on</h3>
136        <a href="https://github.com/bokeh/tutorial">Tutorials</a>
137        <a href="/">Demos</a>
138        <a href="https://bokeh.org/community/">Support</a>
139      </div>
140      <div>
141        <h3>Contribute</h3>
142        <a href="https://github.com/bokeh/bokeh">GitHub</a>
143        <a href="https://docs.bokeh.org/en/latest/docs/dev_guide.html">Contributor guide</a>
144        <a href="https://github.com/bokeh/bokeh#support">Sponsor</a>
145      </div>
146    </div>
147  </div>
148  <div class="footer-copy">
149    <div>
150      <p>Bokeh is a fiscally sponsored project of <a href="https://numfocus.org/">NumFOCUS</a>, a nonprofit dedicated to supporting the open-source scientific computing community.</p>
151      <p>©2026 Bokeh contributors. Website content uses the <a href="https://github.com/bokeh/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>.</p>
152    </div>
153    <a class="donate-button" href="https://numfocus.org/donate-to-bokeh">Donate</a>
154  </div>
155</footer>
156  
157    

157<script type="application/json" id="a5454878-095d-4654-b7cd-e42fcf33b782">
158      {}
159    </script>

159
160    

160<script>
161      (function() {
162        const fn = function() {
163          Bokeh.safely(function() {
164            (function(root) {
165              function embed_document(root) {
166              const docs_json = document.getElementById('a5454878-095d-4654-b7cd-e42fcf33b782').textContent;
167              const render_items = [{"token":"eyJzZXNzaW9uX2lkIjogIllSRUNONnZINk85aUJ6enZvQXlNRk80Z3ZpM3ZoVkhDTHI3ZndpN3ZOdndPIiwgInNlc3Npb25fZXhwaXJ5IjogMTc5MDIzODgxNywgIl9fYmtfX3psaWJfIjogImVOcGxWTXR1bkRBVV9SWEVxazB3ajRGNU5LTlJsTFJTS3FWcHEweWpiTmdZY3dGcndOY3hKak5ObEgtdmJZaWFTUVFMZk04NXZnOGY4LXczUUV0UXZYX21QZnNIVXFIYVUxVkNhYjlNekU5V1NUaEw1dUhDdkl2QVMtSXNuTTNDUlJiT1V6X3dqaFJTb1VhcmFiU1dfUWNVbGJaZ2xqbGhnNzFibHRCaFdPQU9taEJWUFlwbzl5U0lWcFFCNGFVbDNTTHFUVUlXdE1qS0twMlRKRW1yYkxtazJTTExxbUtXSkhOV0xaTUVySnd5QmxLVGxvcDZvRFZZT1FoeXR3MUFyQjgyY2ZqRmtucGdoRFZrb0JiT19hLU53bzRQWGU2dkh6ZTVuOHhXdVdIbF9rX1U2NHZOcGFLaW5LQlpOaUpYaUhVTG5oUENXOW1iRWtBd0xMbW9iWTc2aWN2QUs5UlJjaUpicXMyRXVyR0tleTVLM1Bmakhxd2lpdjYxQU0zaWVFRnBsYTRxV3JCWlNuN2RmanZlcHNPQ3Q2N1Q4X2hfZnJ2V2NOQlJvN3Myb0ZLMm5GSE5VVVFIR3prOXZJOTI3VGlnZ0hkbWNCRjk1TlgwdVlkQ3ZrYWxxSU9UNk1SUlYwY2I5THdXNXFEaHdCb3pmREF6S1ZKSFc3NldXNEUyRlpjd0hUMnlvUU9oajlFT1M5ZUtNUGxycXVFWTdia2VVUlR2a0tFSFo5anp4TVlIV1N2amE4S0ZZUXdLaUlLSHdlVHRuYWNkd19DSjZVaTRXbTd3aWJjdGplWmg3RjJZbnVBZWltdXVvM202RE5PRjktbjYtNS1iSDRIWDhoMTRWOEIydVBZWWR0STBYclN3OW42YmpiWTRLQVpib0lvMWw2aWpKSXpYM3FtN0MyZFJKQTJqZDR6ZU1VSWpqd3JVbnljUFJjWTlZV3dmYjBzcnF2aVUybm1oRktSRmxMWlExdUpRVmkxVkpxdU45WnRrc2d0RElZQnBZempDNVllck81RzRaRGdJclp5ejdyWlQ5SkdidVk3M19UbjNlOWFBTmZWWlB0N2szSF94WHl3UmNjZkJfU25za3FyYUhkOFllUGtIYXZSV2hBIn0","roots":{"p3873958":"ad9f9064-8e39-45ac-ab85-cca493e20175"},"root_ids":["p3873958"],"use_for_title":true}];
168              root.Bokeh.embed.embed_items(docs_json, render_items);
169              }
170              if (root.Bokeh !== undefined) {
171                embed_document(root);
172              } else {
173                let attempts = 0;
174                const timer = setInterval(function(root) {
175                  if (root.Bokeh !== undefined) {
176                    clearInterval(timer);
177                    embed_document(root);
178                  } else {
179                    attempts++;
180                    if (attempts > 100) {
181                      clearInterval(timer);
182                      console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
183                    }
184                  }
185                }, 10, root)
186              }
187            })(window);
188          });
189        };
190        if (document.readyState != "loading") fn();
191        else document.addEventListener("DOMContentLoaded", fn);
192      })();
193    </script>

193
194  

194<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"f669c7b2c385432086b35e9e0ce84aa2","r":1,"spa":2}' crossorigin="anonymous"></script>

194
195</body>
196</html>