.. _interaction:

Interaction

A key goal for the Toyplot team is to explore interactive features for plots, making them truly useful and embeddable, so that they become a ubiquitous part of every data graphic user's experience. The following examples of interaction are just scratching the surface of what we have planned for Toyplot:

Titles

Most of the visualization types in Toyplot accept a title parameter, allowing you to specify per-series or per-datum titles for a figure. With Toyplot's preferred embeddable HTML output, those titles are displayed via a popup when hovering over the data. For example, the following figure has a global title "Employee Schedule", which you should see as a popup when you hover the mouse over any of the bars:


In [1]:
import numpy
numpy.random.seed(1234)
start = numpy.random.normal(loc=8, scale=1, size=20)
end = numpy.random.normal(loc=16, scale=1, size=20)
boundaries = numpy.column_stack((start, end))
title = "Employee Schedule"

In [2]:
import toyplot
toyplot.bars(boundaries, baseline=None, title=title, width=500, height=300);


Employee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee ScheduleEmployee Schedule010205101520

If your plot includes multiple series, you can assign a per-series title instead. Hover the mouse over both series in the following plot to see "Morning Schedule" and "Afternoon Schedule":


In [3]:
lunch = numpy.random.normal(loc=12, scale=0.5, size=20)
boundaries = numpy.column_stack((start, lunch, end))
title = ["Morning Schedule", "Afternoon Schedule"]

toyplot.bars(boundaries, baseline=None, title=title, width=500, height=300);


Morning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleMorning ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon ScheduleAfternoon Schedule010205101520

Finally, you can assign a title for every datum:


In [4]:
title = numpy.column_stack((
        ["Employee %s Morning" % i for i in range(20)],
        ["Employee %s Afternoon" % i for i in range(20)]
        ))

toyplot.bars(boundaries, baseline=None, title=title, width=500, height=300);


Employee 0 MorningEmployee 1 MorningEmployee 2 MorningEmployee 3 MorningEmployee 4 MorningEmployee 5 MorningEmployee 6 MorningEmployee 7 MorningEmployee 8 MorningEmployee 9 MorningEmployee 10 MorningEmployee 11 MorningEmployee 12 MorningEmployee 13 MorningEmployee 14 MorningEmployee 15 MorningEmployee 16 MorningEmployee 17 MorningEmployee 18 MorningEmployee 19 MorningEmployee 0 AfternoonEmployee 1 AfternoonEmployee 2 AfternoonEmployee 3 AfternoonEmployee 4 AfternoonEmployee 5 AfternoonEmployee 6 AfternoonEmployee 7 AfternoonEmployee 8 AfternoonEmployee 9 AfternoonEmployee 10 AfternoonEmployee 11 AfternoonEmployee 12 AfternoonEmployee 13 AfternoonEmployee 14 AfternoonEmployee 15 AfternoonEmployee 16 AfternoonEmployee 17 AfternoonEmployee 18 AfternoonEmployee 19 Afternoon010205101520

Of course, the title attribute works with all types of visualizations.

Coordinates

As you mouse over the above figures, you should also see the interactive mouse coordinates in the upper-right-hand corner of the axes. These coordinates show the domain values where the crosshair mouse cursor is located.

If you wish to disable the mouse coordinates altogether, you can do so using the axes:


In [5]:
canvas, axes, mark = toyplot.bars(boundaries, baseline=None, title=title, width=500, height=300)
axes.coordinates.show = False


Employee 0 MorningEmployee 1 MorningEmployee 2 MorningEmployee 3 MorningEmployee 4 MorningEmployee 5 MorningEmployee 6 MorningEmployee 7 MorningEmployee 8 MorningEmployee 9 MorningEmployee 10 MorningEmployee 11 MorningEmployee 12 MorningEmployee 13 MorningEmployee 14 MorningEmployee 15 MorningEmployee 16 MorningEmployee 17 MorningEmployee 18 MorningEmployee 19 MorningEmployee 0 AfternoonEmployee 1 AfternoonEmployee 2 AfternoonEmployee 3 AfternoonEmployee 4 AfternoonEmployee 5 AfternoonEmployee 6 AfternoonEmployee 7 AfternoonEmployee 8 AfternoonEmployee 9 AfternoonEmployee 10 AfternoonEmployee 11 AfternoonEmployee 12 AfternoonEmployee 13 AfternoonEmployee 14 AfternoonEmployee 15 AfternoonEmployee 16 AfternoonEmployee 17 AfternoonEmployee 18 AfternoonEmployee 19 Afternoon010205101520

Now when you mouse over the axes, the coordinates are no longer there.

Data Export

If you right-click the mouse over any of the above plots, a small popup menu will appear, giving you the option to "Save as .csv". If you choose that option, the raw data from the plot will be extracted in CSV format and you can save it.

Note that different browsers, browser versions, and platforms will behave differently when extracting the file:

  • Safari on OSX will open the file in a separate tab, which you can save to disk using File > Save As.
  • Chrome on OSX will immediately open a file dialog, prompting you to save the file.
  • Firefox on OSX will prompt you to open the file with Microsoft Excel (if installed), or save it to disk.

Note that, on the browsers that support it, the default filename for the saved data is toyplot.csv. You can override this default on a per-data-table basis by specifying the filename when you create your figure. For example, when exporting data from the following figure (again, for browsers that support setting a default filename), the filename will default to employee-schedules.csv:


In [6]:
canvas, axes, mark = toyplot.bars(boundaries, baseline=None, filename="employee-schedules", title=title, width=500, height=300)


Employee 0 MorningEmployee 1 MorningEmployee 2 MorningEmployee 3 MorningEmployee 4 MorningEmployee 5 MorningEmployee 6 MorningEmployee 7 MorningEmployee 8 MorningEmployee 9 MorningEmployee 10 MorningEmployee 11 MorningEmployee 12 MorningEmployee 13 MorningEmployee 14 MorningEmployee 15 MorningEmployee 16 MorningEmployee 17 MorningEmployee 18 MorningEmployee 19 MorningEmployee 0 AfternoonEmployee 1 AfternoonEmployee 2 AfternoonEmployee 3 AfternoonEmployee 4 AfternoonEmployee 5 AfternoonEmployee 6 AfternoonEmployee 7 AfternoonEmployee 8 AfternoonEmployee 9 AfternoonEmployee 10 AfternoonEmployee 11 AfternoonEmployee 12 AfternoonEmployee 13 AfternoonEmployee 14 AfternoonEmployee 15 AfternoonEmployee 16 AfternoonEmployee 17 AfternoonEmployee 18 AfternoonEmployee 19 Afternoon010205101520

Note that the filename you specify should not include a file extension, as the file extension is added for you (and other file formats may become available in the future).