Plots are the containers that hold all the relevant objects of a visualization in Bokeh, and plots are typically created using the figure() function implemented in the bokeh.plotting module. (Objects created by the figure() function are of type bokeh.plotting.figure.Figure, which are instances of a subclass of Plot objects. The Bokeh documentation often refers to them as plots, although we will sometimes make reference to figure objects as well.) Plots can be created and styled with various attributes, and a variety of plotting methods are defined for figure objects to support different types of data visualizations. In addition, plots can be enhanced with annotations such as titles, legends, labels, and bands.

The basic visual building blocks of Bokeh plots are glyphs, which are graphical elements such as lines, circles, rectangles, images, and other objects that can be used to represent aspects of data. Glyphs are created by calling a specific method on a figure object, such as figure.circle() to create a scatter plot that uses circles as markers for the data points, or figure.line() to plot a line that connects the data points.

Many different types of glyphs are available for plotting:

• different types of markers: circles, squares, diamonds, etc.
• lines, multi_lines, step lines
• bars, stacked bars
• images
• patches, hex tiles, filled areas, stacked areas
• much more

A visual summary of many of the different glyphs available for data visualization is provided in the Gallery in the bokeh.org documentation.

The code below creates a figure and plots some data, using both circle and line glyphs.¹ (For this code sample, we have shown line numbers to help point out aspects of the code, but the line numbers are not part of the actual Python code itself, nor will they be copied if you click the "Copy" button in the upper-right corner of the code block.) We'll point out in more detail what is going on in this code example.

Let's dissect this code example in more detail:

• Line 1: A Python comment starting with the # character.
• Line 2: An import of the functions figure, output_file, and show from the bokeh.plotting module, so that we can call those functions later in the code.
• Lines 4 and 5: Defining the x- and y- coordinates of 5 data points in our sample dataset. If the lists containing the x and y data were not of the same length, Bokeh would issue a warning, although it would still generate a plot containing as many data points as the smaller of the two lists.
• Line 7: A call to the output_file() function stating that we want the generated output to be stored in a file named simpleplot.html. As noted, Bokeh plots are rendered in a web browser, by generating html code that can be viewed in a browser. By default, once this code is run, your default browser should open a new window or tab containing this html file on your local filesystem, e.g., file:///path/to/file/simpleplot.html. As described in Uses & Capabilities, if you prefer you can instead embed the output in a Jupyter notebook using the output_notebook function instead of output_file.
• Line 9: A call to the figure() function to create a plot object named p. In this case, we have specified that we want the plot to be 400 pixels wide by 400 pixels high, and there are other options that could be passed to the function to style other aspects of the plot. Note that the plot has a toolbar on the right-hand side; this is the default toolbar, although that can be customized too. The toolbar is considered part of the entire plot, however, so the plotted axes are slightly narrower than they are tall, since some of the width of 400 pixels is used to accommodate the toolbar. We will discuss tools more later.
• Line 10: A call to the circle method to produce circle glyphs at the coordinates specified in the x and y data. We've included a few options here to set the size, color, and transparency (alpha) of the circles, but other options are also possible.
• Line 11: A call to the line method to produce a line glyph connecting the data points.
• Line 13: A call to the show function that we imported to show the plot p. Because we specified previously that we wanted the output to go to a file named "simpleplot.html", this call to the show() shows that plot by writing html to that file and opening it in your browser.

If you have Bokeh installed locally, you can copy and paste the code above to a file and run it. You should see a plot in your browser that looks like the plot below. The plot below is actually extracted from the output file simpleplot.html and inserted within this web page.² So it's not a statically rendered image of the plot; it is actually responsive html code. Feel free to try some of the following things:

• Hover your cursor over the various icons in the toolbar on the right to see what each one does (although the colorful object at the top of the toolbar is just a link that takes you to bokeh.org).
• Try zooming by selecting the Box Zoom tool and dragging a box using your cursor in the plot window.
• Hover over the toolbar icons until you find the one titled "Save", and click on that icon. That should download the rendered plot to your local machine as a png-formatted image, probably in a file named bokeh_plot.png.

In the example above, we provided data in the form of Python lists, but it could be provided through other iterable sequence-like objects, such as NumPy arrays. (We'll discuss Bokeh's own ColumnDataSource objects in more detail on the next page.) A similar example to what is presented above, but using NumPy arrays instead (and all the processing power that they bring along) is shown below, along with the generated output:

With the Bokeh-related parts of numpyplot.html inserted into this html page, we get the following interactive plot:

---

¹The API for plotting in Bokeh is organized a bit differently than that presented by Matplotlib, although there are also many similarities. In Bokeh, each different marker type (e.g., circle, square, diamond) is supported by a different method on a figure object, whereas Matplotlib offers a single function/method named scatter, which one can customize by specifying different marker types as options. In addition, if one wants to use Matplotlib to plot both lines and markers, as we have done here, that can be accomplished with a single call to a plot method and a suitable call to a formatting parameter that combines both linestyle and marker information.

²In this case, the relevant parts of the simpleplot.html file were extracted and manually edited into the html for this webpage to simplify the tutorial material. (Manual editing removed some of the outer bits of html that enable the content to function as a standalone webpage.) If you regularly want to embed Bokeh-generated html code into webpages in a more systematic fashion, you might like to investigate the documentation on embedding Bokeh content in Web pages.