20

I am new to bokeh and trying to figure out what columnDataSource does. It appears in many places but I am uncertain of its purpose and how it works. Can someone illuminate? Apologies if this is a silly question...

rpj
  • 223
  • 1
  • 3
  • 8
  • 4
    If you are familiar with R or Pandas `DataFrame` objects, the `ColumnDataSource` is basically a simpler version of that. It is a collection of arrays of data (columns) that can be referred to by names. The actual internal structure is just that: a dictionary that maps strings to lists/arrays. It is the primary way that data is moved from python, to the BokehJS browser library. – bigreddot Apr 19 '16 at 21:16

2 Answers2

19

ColumnDataSource is the object where the data of a Bokeh graph is stored. You can choose not to use a ColumnDataSource and feed your graph directly with Python dictionaries, pandas dataframes, etc, but for certain features such as having a popup window showing data information when the user hovers the mouse on glyphs, you are forced to use a ColumnDataSource otherwise the popup window will not be able to get the data. Other uses would be when streaming data.

You can create a ColumnDataSource from dictionaries and pandas dataframes and then use the ColumnDataSource to create the glyphs.

multigoodverse
  • 7,638
  • 19
  • 64
  • 106
  • 2
    Could you please add a tiny example on how to do what you wrote in the answer? Say a time series where you want to see the data when hovering the mouse above the graph – famargar Feb 24 '17 at 12:21
6

This should work:

import pandas as pd
import bokeh.plotting as bp
from bokeh.models import HoverTool, DatetimeTickFormatter

# Create the base data
data_dict = {"Dates":["2017-03-01",
                  "2017-03-02",
                  "2017-03-03",
                  "2017-03-04",
                  "2017-03-05",
                  "2017-03-06"],
             "Prices":[1, 2, 1, 2, 1, 2]}

# Turn it into a dataframe
data = pd.DataFrame(data_dict, columns = ['Dates', 'Prices'])

# Convert the date column to the dateformat, and create a ToolTipDates column
data['Dates'] = pd.to_datetime(data['Dates'])
data['ToolTipDates'] = data.Dates.map(lambda x: x.strftime("%b %d")) # Saves work with the tooltip later

# Create a ColumnDataSource object
mySource = bp.ColumnDataSource(data)

# Create your plot as a bokeh.figure object
myPlot = bp.figure(height = 600,
               width = 800,
               x_axis_type = 'datetime',
               title = 'ColumnDataSource',
               y_range=(0,3))

# Format your x-axis as datetime.
myPlot.xaxis[0].formatter = DatetimeTickFormatter(days='%b %d')

# Draw the plot on your plot object, identifying the source as your Column Data Source object.
myPlot.circle("Dates",
          "Prices",
          source=mySource,
          color='red',
          size = 25)

# Add your tooltips
myPlot.add_tools( HoverTool(tooltips= [("Dates","@ToolTipDates"),
                                    ("Prices","@Prices")]))


# Create an output file
bp.output_file('columnDataSource.html', title = 'ColumnDataSource')
bp.show(myPlot) # et voilà.
amunnelly
  • 1,144
  • 13
  • 22
  • This seems like an example of a plot, not an explanation of the data type. – Kyle May 31 '19 at 16:10
  • 4
    Hey Kyle, thanks for noticing. To be honest with you, an example of a plot, rather than an explanation of the data type, is exactly what my answer is. I thought some of the earlier answers did a pretty good job of explaining the theory. My intention was to add a short, practical example, as requested by @famargar earlier in the thread. – amunnelly Jun 02 '19 at 18:54