9

I would like to click-and-drag the scatter points the points of a bokeh scatter plot. Any ideas how to do this?

(edit: this is an example of what I'd like to do)

For an example of a scatter, the code below generates the scatter plot chart found half-way through this page.

from bokeh.plotting import figure, output_file, show

# create a Figure object
p = figure(width=300, height=300, tools="pan,reset,save")

# add a Circle renderer to this figure
p.circle([1, 2.5, 3, 2], [2, 3, 1, 1.5], radius=0.3, alpha=0.5)

# specify how to output the plot(s)
output_file("foo.html")

# display the figure
show(p)
davidism
  • 121,510
  • 29
  • 395
  • 339
Pythonic
  • 2,091
  • 3
  • 21
  • 34
  • As a comment to my own question: I am studying the documentation in order to use Bokeh to develop the interactive charts and widgets of a Flask app, and I find the bokeh-server documentation a bit ***thin*** (e.g. missing widgets and dashboard here http://bokeh.pydata.org/en/latest/docs/user_guide/server.html#widgets-and-dashboards). Yet studying alternatives for this project I saw I am not the only one seeking "a web version of pyqt", and bokeh seems to offer a number of interesting widgets. It would be great to bring the docs of the library in line with the likes of matplotlib. – Pythonic May 12 '15 at 07:58
  • 1
    Did you ever get this sorted? This is a must-have feature for me so my potential use of Bokeh depends on it. – Bill Cheatham Jul 17 '15 at 15:20
  • Currently, there are JS callbacks that can be attached to events on bokeh objects, but nothing on dragging. – Pythonic Jul 28 '15 at 22:04
  • 1
    This is a very recent feature addition to Bokeh, it did not exist for most of the past 3 years. I have added an answer using the new tools below. – bigreddot Mar 12 '18 at 17:37

1 Answers1

9

Multi-gesture edit tools are only a recent addition, landing in version 0.12.14. You can find much more information in the Edit Tools section of the User's Guide.

Specifically to be able to move points as described in the OP, use the PointDrawTool:

enter image description here

Here is a complete example you can run that also has a data table showing the updated coordinates of the glyphs as they are moved (you will need to activate the tool in the toolbar first, it is off by default):

from bokeh.plotting import figure, output_file, show, Column
from bokeh.models import DataTable, TableColumn, PointDrawTool, ColumnDataSource

output_file("tools_point_draw.html")

p = figure(x_range=(0, 10), y_range=(0, 10), tools=[],
           title='Point Draw Tool')
p.background_fill_color = 'lightgrey'

source = ColumnDataSource({
    'x': [1, 5, 9], 'y': [1, 5, 9], 'color': ['red', 'green', 'yellow']
})

renderer = p.scatter(x='x', y='y', source=source, color='color', size=10)
columns = [TableColumn(field="x", title="x"),
           TableColumn(field="y", title="y"),
           TableColumn(field='color', title='color')]
table = DataTable(source=source, columns=columns, editable=True, height=200)

draw_tool = PointDrawTool(renderers=[renderer], empty_value='black')
p.add_tools(draw_tool)
p.toolbar.active_tap = draw_tool

show(Column(p, table))
bigreddot
  • 33,642
  • 5
  • 69
  • 122
  • Do you know how to implement this using CustomJS? I want to fully control how the user interacts with the plots. - I would basically would like to customize the logic of how points are added, removed and dragged. – João Abrantes Mar 13 '18 at 07:28
  • For that level of customization you are looking at a [custom extension](https://bokeh.pydata.org/en/latest/docs/user_guide/extensions.html). For reference, see the [Python side definition of `PointDrawTool`](https://github.com/bokeh/bokeh/blob/master/bokeh/models/tools.py#L954) and the [corresponding JavaScript implementation](https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/models/tools/edit/point_draw_tool.ts) – bigreddot Mar 13 '18 at 14:55
  • 1
    I guess I'd add that it *might* be possible to do something similar using [`CustomJS` together with `bokeh.events`](https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html#customjs-for-user-interaction-events) but I think it at this level of complexity a custom extension would be more robust. – bigreddot Mar 13 '18 at 15:03
  • How can one do a similar logic for different Bokeh figures in a layout? Practically, I want to customize my dashboard grid (layout) by dragging and dropping different Bokeh charts – Hossein Kalbasi Jul 17 '19 at 18:19
  • That's the province of a DnD web/gui framework, that you would embed Bokeh plots in to elements of. Reinventing that wheel inside Bokeh would be a huge pain, I imagine. – bigreddot Jul 17 '19 at 21:07