Gallery#

All of the examples below are located in the examples subdirectory of the Bokeh repository. Click on an image below to see its code and interact with a live plot.

Basic plotting

Thumbnail link to the examples/basic/scatters/markers.py example shows all the different scatter marker types available in Bokeh on a single plot.

markers

Thumbnail link to the examples/basic/scatters/color_scatter.py example shows a multicolored scatter plot of random data with hover tool.

color_scatter

Thumbnail link to the examples/basic/scatters/elements.py example shows a scatter plot of density vs atomic weight of atomic elements, colormapped by their melting points.

elements

image_url

Thumbnail link to the examples/basic/lines/lorenz.py example shows a plot of the Lorenz attractor using the MultiLine glyph.

lorenz

Thumbnail link to the examples/basic/data/linear_cmap.py example shows a hexplot of a Gaussian distribution with the hex elements colormapped by a linear colormapper.

linear_cmap

Thumbnail link to the examples/basic/data/linear_cmap_colorbar.py example shows a linear colormapper used to drive a colorbar in addition to a glyph's color.

linear_cmap_colorbar

Thumbnail link to the examples/basic/data/color_mappers.py example shows comparison of linear and log colormaps with different palette sizes.

color_mappers

Thumbnail link to the examples/basic/data/transform_markers.py example shows a scatter plot of the Palmer penuguins dataset, color- and marker-mapped by species. The x-axis is flipper length (mm) and the y-axis is body mass (g).

transform_markers

Thumbnail link to the examples/basic/data/transform_jitter.py example shows a column of two categorical scatter plots of random data. The top has no jitter applied, may scatter points overlap. The bottom has jitter applied to distinguish points better.

transform_jitter

Thumbnail link to the examples/basic/axes/logplot.py example shows a plot of six basic mathematical functions such as y=x and y=x**2 on a log-scale using different lines styles for each.

logplot

Thumbnail link to the examples/basic/axes/twin_axes.py example shows a plot with two x-axes on different scales on the left hand side of the plot.

twin_axes

Thumbnail link to the examples/basic/axes/fixed_axis.py example shows a plot with an axis positioned in the center of the plot instead of around the sides.

fixed_axis

Thumbnail link to the examples/basic/bars/basic.py example shows a simple bar chart for counts for categories of fruits.

basic

Thumbnail link to the examples/basic/bars/colormapped.py example shows a simple bar plot with bars for six categories of fruit on the x-axis, and bars shaded with the Bright6 palette.

colormapped

Thumbnail link to the examples/basic/bars/intervals.py example shows an interval chart showing Olympic sprint time data as intervals using blue horizontal bars for times, with a bar for earch year on the y-axis.

intervals

Thumbnail link to the examples/basic/bars/mixed.py example shows a bar chart of synthetic monthly sales data, grouped by quarter. A line showing each quarterly average is overlaid.

mixed

Thumbnail link to the examples/basic/bars/nested_colormapped.py example shows a grouped bar chart on a hierachical categorical axis of years for different categories of fruit. Each group has a silver, blue, and red bar corresponding to random values for years 2015, 2016 and 2017.

nested_colormapped

Thumbnail link to the examples/basic/bars/pandas_groupby_colormapped.py example shows a bar chart of MPG vs cylinders using the Auto MPG dataset, colormapped by the number of cylinders.

pandas_groupby_colormapped

Thumbnail link to the examples/basic/bars/pandas_groupby_nested.py example shows a grouped bar chart of MPG vs cylinders and manufacturer, using the Auto MPG dataset. The bars are grouped and colormapped by the number of cylinders.

pandas_groupby_nested

Thumbnail link to the examples/basic/bars/stacked.py example shows a stacked bar chart for random data for six categories of fruit. Each row in the stack corresponds to a different year.

stacked

Thumbnail link to the examples/basic/bars/stacked_split.py example.

stacked_split

Thumbnail link to the examples/basic/bars/nested.py example shows a grouped bar chart on a hierachical categorical axis of years for different categories of fruit. Each group has three blue bars corresponding to random values for years 2015, 2016 and 2017.

nested

Thumbnail link to the examples/basic/bars/colors.py example shows a simple bar chart of six bars shaded according to the Bright6 palette.

colors

Thumbnail link to the examples/basic/bars/dodged.py example shows a grouped bar chart using a visual dodge on the bars, rather than a hierarchical axis. Each group has a silver, blue, and red bar illustrated in the accompanying legend.

dodged

Thumbnail link to the examples/basic/areas/stacked_area.py example shows a stacked area plot of synthetic data for ten series, colormapped using the Sunset palette, with a legend at the top.

stacked_area

Thumbnail link to the examples/basic/layouts/anscombe.py example shows a gridplot of four scatter and regression line plots illustrating Anscombe's Quartet.

anscombe

Thumbnail link to the examples/basic/annotations/legend.py example shows a row of fo plots that have sine waves in different scatter and line styles, illustrated in accompanying legends.

legend

Thumbnail link to the examples/basic/annotations/arrow.py example that shows three different arrow annotation configurations.

arrow

Thumbnail link to the examples/basic/annotations/band.py example that shows a band annotation around a trend line in a scatter plot.

band

Thumbnail link to the examples/basic/annotations/slope.py example that shows an orange y=mx+b trend line in a scatter plot.

slope

Thumbnail link to the examples/basic/annotations/span.py example that shows green vertical spans marking the start and end dates of Daylight Savings time in Warsaw in 2013.

span

Thumbnail link to the examples/basic/annotations/whisker.py example that shows whisker annotations marking quantile ranges over categorical scatter plots.

whisker

Thumbnail link to the examples/basic/annotations/colorbar_log.py example that shows a log-scale color bar next to a colormapped image plot.

colorbar_log

Thumbnail link to the examples/basic/annotations/box_annotation.py example shows a timeseries plot of glucose data readings with red box annotations marking regions where the readings are too high or too low.

box_annotation

Appearance

Thumbnail link to the examples/styling/plots/grid_bounds.py example shows how to set bounds limits on plot grids.

grid_bounds

Thumbnail link to the examples/styling/plots/minor_grid_lines.py example shows how to add grid lines at minor tick locations.

minor_grid_lines

Thumbnail link to the examples/styling/plots/grid_band_fill.py example shows how to configure solid filled grid bands.

grid_band_fill

Thumbnail link to the examples/styling/plots/hatch_grid_band.py example shows a sine wave with hatched grid bands underneath.

hatch_grid_band

Thumbnail link to the examples/styling/plots/glyph_selection.py example shows how to configure the appearance of selected and non-selected glyphs.

glyph_selection

Thumbnail link to the examples/styling/plots/glyph_hover.py example shows how to configure the appearance of hovered glyphs.

glyph_hover

Thumbnail link to the examples/styling/plots/legend_location_outside.py example shows how to add a legend outside the central plot frame.

legend_location_outside

Thumbnail link to the examples/styling/plots/legend_title.py example shows how to configure a title for a legend.

legend_title

Thumbnail link to the examples/styling/mathtext/latex_blackbody_radiation.py example shows plot of spectral radiance curves for an ideal radiating blackbody at various temperatures with mathtext axis labels.

latex_blackbody_radiation

Thumbnail link to the examples/styling/mathtext/latex_normal_distribution.py example shows a plot of the sampled and ideal Gaussian distribution with mathtext axis tick labels.

latex_normal_distribution

Thumbnail link to the examples/styling/mathtext/latex_schrodinger.py example shows solutions of Schrödinger’s equation for the motion of a particle in one dimension in a parabolic potential well for eight energy levels, with mathtext labels for each solution.

latex_schrodinger

Thumbnail link to the examples/styling/mathtext/latex_bessel.py example shows a plot with the first four Bessel function J_0 to J_3 with mathtext labels and a mathtext title.

latex_bessel

Thumbnail link to the examples/styling/themes/caliber.py example shows basic line plot with the caliber theme.

caliber

Thumbnail link to the examples/styling/themes/dark_minimal.py example shows basic line plot with the dark_minimal theme.

dark_minimal

Thumbnail link to the examples/styling/themes/light_minimal.py example shows basic line plot with the light_minimal theme.

light_minimal

Thumbnail link to the examples/styling/themes/night_sky.py example shows basic line plot with the night_sky theme.

night_sky

Thumbnail link to the examples/styling/themes/contrast.py example shows basic line plot with the contrast theme.

contrast

Topic guides

Thumbnail link to the examples/topics/images/image_rgba.py example shows an image plot of synthetic RGBA data.

image_rgba

Thumbnail link to the examples/topics/images/image.py example shows a plot with a colormapped two-dimensonal sine surface.

image

Thumbnail link to the examples/topics/images/image_origin_anchor.py example shows a test image with dropdown widgets for seeing the effect of changes to an image glyph's origin and anchor properties.

image_origin_anchor

Thumbnail link to the examples/topics/contour/contour_simple.py example shows an iso-contour plot with ten levels between -2 and 2.

contour_simple

Thumbnail link to the examples/topics/contour/contour.py example shows an iso-contour of a 2d trigonometric function

contour

Thumbnail link to the examples/topics/contour/contour_polar.py example shows an iso-contour of a polar function using hatching

contour_polar

Thumbnail link to the examples/topics/hex/hex_tile.py example shows a hex tile plot of binned 2d random (Gaussian) data points, colormapped by density with the Viridis palette.

hex_tile

Thumbnail link to the examples/topics/hex/hexbin.py example shows a hexbin plot of 2d random (Gaussian) data points, colormapped by density with the Viridis palette.

hexbin

Thumbnail link to the examples/topics/categorical/ridgeplot.py example shows a ridgeline plot using the Perceptions of Probability dataset with a smoothed distribution displayed for each probability category on the y-axis.

ridgeplot

Thumbnail link to the examples/topics/categorical/scatter_jitter.py example shows a categorical scatter plot of several years of GitHub commits. The y-axis is day of the week and the x-axis is time of day, with scater points jittered to avoid overlap

scatter_jitter

Thumbnail link to the examples/topics/categorical/les_mis.py example shows a reproduction of D3’s Les Misérables Co-occurrence chart that illustrates which characters were in scenes together with a shaded square in the matrix plot.

les_mis

Thumbnail link to the examples/topics/categorical/heatmap_unemployment.py example shows a categorical heatmap of monthly US unemployment data from 1948 to 2016. The x-axis is years and the y-axis is month of the year.

heatmap_unemployment

Thumbnail link to the examples/plotting/periodic.py example shows a plot that renders the periodic table of elements.

periodic

Thumbnail link to the examples/topics/hierarchical/treemap.py example treemap plot breaking down sales per city by region from the sample superstore data set.

treemap

Thumbnail link to the examples/topics/hierarchical/crosstab.py example showing an adjacent bar chart for a crosstab of the sample superstore data set.

crosstab

Thumbnail link to the examples/topics/geo/texas_hover_map.py example shows a color-mapped map plot based on Texas unemployment rate per county, colormapped using the Viridis palette.

texas_hover_map

Thumbnail link to the examples/topics/geo/eclipse.py example shows a plot of US states overlaid with a trajectory marking the path of the August 2017 solar eclipse.

eclipse

Thumbnail link to the examples/topics/geo/tile_source.py example shows basic map plot using a tile source provider.

tile_source

Thumbnail link to the examples/topics/geo/tile_xyzservices.py example shows a map plot using Bokeh's integration with xyzservices for tile providers.

tile_xyzservices

Thumbnail link to the examples/topics/geo/tile_demo_map.py example shows a grid of map plots at identical locations using various different tile providers.

tile_demo

Thumbnail link to the examples/topics/geo/gmap.py example shows a grid of map plot centered at Austin, TX using Bokeh's Google maps integration.

gmap

Thumbnail link to the examples/topics/graph/from_networkx.py example shows a network graph plot of the NetworkX desargues_graph dataset with large circles for vertices.

from_networkx

Thumbnail link to the examples/topics/graph/node_and_edge_attributes.py example shows a network graph plot of the NetworkX karate club dataset with large circles for vertices.

node_and_edge_attributes

Thumbnail link to the examples/topics/timeseries/candlestick.py example shows a candlestick chart for stock data.

candlestick

Thumbnail link to the examples/topics/timeseries/missing_dates.py example shows a candlestick chart for stock data with gaps for missing dates removed.

missing_dates

Thumbnail link to the examples/topics/pie/pie.py example shows a pie chart of random data with a legend.

pie

Thumbnail link to the examples/topics/pie/donut.py example shows a donut chart of browser share percentages with a legend.

donut

Thumbnail link to the examples/topics/pie/burtin.py example shows a reproduction of Burtin's hitorical antibiotics plot.

burtin

Thumbnail link to the examples/topics/stats/histogram.py example shows a histogram of sampled data from a normal (Gaussian) distribution overlaid with a line showing the ideal distribution curve.

histogram

Thumbnail link to the examples/topics/stats/kde2d.py example shows a bivariate kernel density estimation plot of the autompg data.

kde2d

Thumbnail link to the examples/topics/stats/splom.py example shows a SPLOM gridplot of the penguins data set.

splom

Thumbnail link to the examples/topics/stats/boxplot.py example shows a box plot of synthetic data for six categories.

boxplot

Interaction

Bokeh has many interative tools and widgets. Only a subset have thumbnails here. For more information see the Interaction chapter of the users guide.

Thumbnail link to the examples/interaction/tools/range_tool.py example shows a column of two plots of timeseries plots of stock price data. The bottom plot shows all the data and has a range tool for controlling the viewport of the top plot.

range_tool

Thumbnail link to the examples/interaction/linking/linked_brushing.py example shows a two different scatter plots of the Palmer penuguin dataset with linked selections.

linked_brushing

Thumbnail link to the examples/interaction/linking/linked_crosshair.py example shows a two plots with vertical and horizontal crosshair tools linked.

linked_crosshair

Thumbnail link to the examples/interaction/linking/data_table_plot.py example shows a column of a scatter plot and data table that share a data source and have linked selections.

data_table_plot

Thumbnail link to the examples/interaction/legends/legend_hide.py example shows an interactive legend that hides glyphs when legend entries are clicked.

legend_hide

Thumbnail link to the examples/interaction/legends/legend_mute.py example shows an interactive legend that mutes glyphs when legend entries are clicked.

legend_mute

Thumbnail link to the examples/interaction/js_callbacks/slider.py example shows a layout with a sine plot on the left and sliders on the right to control the sine wave properties such as frequency and phase.

slider

Thumbnail link to the examples/interaction/js_callbacks/color_sliders.py example shows a layout with RGB sliders on the left to control a plot on the right. A colorbar with hover tool is underneath.

color_sliders

Thumbnail link to the examples/interaction/js_callbacks/customjs_lasso_mean.py example shows a scatter plot with a lasso selection tool that responds to selections by drawing an indicator line at the average y-position of the selected points.

customjs_lasso_mean

Thumbnail link to the examples/interaction/js_callbacks/customjs_for_selection_lasso_mean.py example shows a scatter plot with several tools that prints information about js events as they occur, in text box to the right.

js_on_event

Thumbnail link to the examples/interaction/widgets/multiselect.py example shows a simple example of a multi-select widget.

multiselect

Thumbnail link to the examples/interaction/widgets/multichoice.py example shows a simple example of a multi-choice widget.

multichoice

Thumbnail link to the examples/interaction/widgets/datepicker.py example shows a simple example of a widget for seleting dates and date ranges.

datepicker

Thumbnail link to the examples/interaction/widgets/dropdown.py example shows a simple example of a dropdown button widget.

dropdown

Thumbnail link to the examples/interaction/widgets/data_table.py example shows a simple example of a data table widget with multiple columns.

data_table

Thumbnail link to the examples/interaction/widgets/data_cube.py example shows a simple example of a data cube widget for hierarchical data.

data_cube

Bokeh server

The thumbnails in this section link to live demos hosted at demo.bokeh.org.

Thumbnail featuring an interactive query tool for a set of IMDB data. Tool features a default graph of the Tomato Meter (x-axis) against the number of reviews (y-axis). Graph can be refined using multiple variables including cast names, director name, number of Oscar wins, year released, end year released, genre, dollar at the box office, and more.

movies

An interactive query tool for a set of IMDB data.(source code)

Thumbnail featuring axis histograms for selected and non-selected points in a scatter plot. Axes unlabeled.

selection_histogram

Shows axis histograms for selected and non-selected points in a scatter plot. (source code)

Thumbnail featuring interactive weather statistics for three cities. Features drop down for city and distribution. X-axis features date, the y-axis features temperature.

weather

Interactive weather statistics for three cities. (source code)

Thumbnail of plotted trigonometric function with sliders for offset, amplitude, phase, and frequency.

sliders

A basic demo that has sliders for controlling a plotted trigonometric function. (source code)

Thumbnail of example scatter plot with drop downs for x-axis, y-axis, color, and size. Default graph features mpg on the x-axis, hp on the y-axis, and shows a downward exponential trend.

crossfilter

Explore the autompg data set by selecting and highlighting different dimensions. (source code)

Thumbnail of a page featuring a reproduction of the Gapminder demo and containing an embedded TED talk video added using a custom page template. Gapminder demo shows children per woman (x-axis), life expectancy at birth in years (y-axis), by nation, over the years (slider), and a play button that allows data to play across slider range of 1964 - 2012.

gapminder

A reproduction of the famous Gapminder demo, with embedded video added using a custom page template. (source code)

Thumbnail image of linked plots, summary statistics, and correlations for market data. Contains two drop down selections for different investment options. Left features a scatterplot of option one's returns vs option two's returns. Below features a line plot of each individual option. Right shows basic statistics of each option and each option's returns.

stocks

Linked plots, summary statistics, and correlations for market data. (source code)

Thumbnail for surface3d example. Axes are rotated slightly and shown with perspective. A 3D surface is plotted, and colored with a heat map corresponding to z axis value.

surface3d

An updating 3d plot that demonstrates using Bokeh custom extensions to wrap third-party JavaScript libraries. (source code)

Thumbnail for export_csv example. Image shows an interface for filtering data with a slider widget, and writing the results by clicking a button.

export_csv

Link sliders filter a data table that can be saved as a CSV. (source code)