Skip to main content

Plotly figure widget for trame

Project description

Test and Release

trame-plotly extend trame widgets with components that can interface with Plotly to display their charts.

Plotly integration in trame allow you to create rich visualization by leveraging their Python or JavaScript interface. The JavaScript version is exposed via Vue.plotly within trame.widgets.plotly.Plotly class definition.

This package is not supposed to be used by itself but rather should come as a dependency of trame. For any specificity, please refer to the trame documentation.

Installing

trame-plotly can be installed with pip:

pip install --upgrade trame-plotly

Usage

The Trame Tutorial is the place to go to learn how to use the library and start building your own application.

The API Reference documentation provides API-level documentation.

The Plotly component relies on the server for generating the chart definition. This can be achieved by hand or by simply using the Python version of Plotly.

How to use it?

Using the Python library

import plotly.graph_objects as go
from trame.widgets import plotly

fig = go.Figure(
    data=go.Contour(
        z=[
            [10, 10.625, 12.5, 15.625, 20],
            [5.625, 6.25, 8.125, 11.25, 15.625],
            [2.5, 3.125, 5.0, 8.125, 12.5],
            [0.625, 1.25, 3.125, 6.25, 10.625],
            [0, 0.625, 2.5, 5.625, 10],
        ]
    )
)
fig2 = go.Figure(
    data=go.Contour(
        z=[
            [5.625, 6.25, 8.125, 11.25, 15.625],
            [2.5, 3.125, 5.0, 8.125, 12.5],
            [10, 10.625, 12.5, 15.625, 20],
            [0.625, 1.25, 3.125, 6.25, 10.625],
            [0, 0.625, 2.5, 5.625, 10],
        ]
    )
)

widget = plotly.Figure(fig)
widget.update(fig2)

But if you are feeling more adventurous you can use the component API directly by building the data yourself as well.

from trame.widgets import plotly

# https://plotly.com/javascript/reference/
plotly_data = [
  {
    "x": [1,2,3,4],
    "y": [10,15,13,17],
    "type": "scatter",
  }
]

# https://plotly.com/javascript/reference/layout/
plotly_layout = {
  "title": "My graph",
}

# https://plotly.com/javascript/configuration-options/
plotly_options = {
  "scroll_zoom": True,
  "editable": True,
  "static_plot": True,
  "to_image_options": {
    "format": "svg", # one of png, svg, jpeg, webp
    "filename": "custom_image",
    "height": 500,
    "width": 700,
    "scale": 1 # Multiply title/legend/axis/canvas sizes by this factor
  },
  "display_mode_bar": True,
  "mode_bar_buttons_to_remove": [
    "zoom2d", "pan2d", "select2d", "lasso2d", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetScale2d", # 2D
    "zoom3d", "pan3d", "orbitRotation", "tableRotation", "handleDrag3d", "resetCameraDefault3d", "resetCameraLastSave3d", "hoverClosest3d", # 3D
    "hoverClosestCartesian", "hoverCompareCartesian", # Cartesian
    "zoomInGeo", "zoomOutGeo", "resetGeo", "hoverClosestGeo", # Geo
    "hoverClosestGl2d", "hoverClosestPie", "toggleHover", "resetViews", "toImage", "sendDataToCloud", "toggleSpikelines", "resetViewMapbox", # Other
  ],
  "mode_bar_buttons_to_add": [
    {
      "name": 'color toggler',
      "icon": icon1, # https://plotly.com/javascript/configuration-options/#add-buttons-to-modebar
      "click": "...",
    },
  ],
  "locale": "fr",
  "display_logo": False,
  "responsive": True,
  "double_click_delay": 1000,
}

# Hand made chart
chart = plotly.Figure(
  data=("chart_data", plotly_data),
  layout=("chart_layout", plotly_layout),
  **plotly_options,
)

Type

Values

properties

data, layout, display_mode_bar, scroll_zoom, editable, static_plot, to_image_options, mode_bar_buttons_to_remove, mode_bar_buttons_to_add, locale, display_logo, responsive, double_click_delay

events

after_export, after_plot, animated, animating_frame, animation_interrupted, auto_size, before_export, button_clicked, click, click_annotation, deselect, double_click, framework, hover, legend_click, legend_double_click, relayout, restyle, redraw, selected, selecting, slider_change, slider_end, slider_start, transitioning, transition_interrupted, unhover

License

trame-plotly is made available under the MIT License. For more details, see LICENSE This license has been chosen to match the one use by Plotly and vue-plotly which are instrumental for making that library possible.

Community

Trame | Discussions | Issues | RoadMap | Contact Us

https://zenodo.org/badge/410108340.svg

Enjoying trame?

Share your experience with a testimonial or with a brand approval.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

trame-plotly-3.0.2.tar.gz (3.1 MB view details)

Uploaded Source

Built Distribution

trame_plotly-3.0.2-py3-none-any.whl (3.1 MB view details)

Uploaded Python 3

File details

Details for the file trame-plotly-3.0.2.tar.gz.

File metadata

  • Download URL: trame-plotly-3.0.2.tar.gz
  • Upload date:
  • Size: 3.1 MB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.8.0 pkginfo/1.9.6 readme-renderer/42.0 requests/2.31.0 requests-toolbelt/1.0.0 urllib3/2.0.4 tqdm/4.66.1 importlib-metadata/6.8.0 keyring/24.2.0 rfc3986/2.0.0 colorama/0.4.6 CPython/3.10.13

File hashes

Hashes for trame-plotly-3.0.2.tar.gz
Algorithm Hash digest
SHA256 bb472ace64c9c2e65bb7c535c0567a35bfc3711588759731c36b2d7f6e3434b9
MD5 d0247acef806d2c6b2b310ae091a8b84
BLAKE2b-256 6d4dabece97dd4cbe51912d312aceebf772e5c6050b594f75c0bc222c51e12b2

See more details on using hashes here.

Provenance

File details

Details for the file trame_plotly-3.0.2-py3-none-any.whl.

File metadata

  • Download URL: trame_plotly-3.0.2-py3-none-any.whl
  • Upload date:
  • Size: 3.1 MB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.8.0 pkginfo/1.9.6 readme-renderer/42.0 requests/2.31.0 requests-toolbelt/1.0.0 urllib3/2.0.4 tqdm/4.66.1 importlib-metadata/6.8.0 keyring/24.2.0 rfc3986/2.0.0 colorama/0.4.6 CPython/3.10.13

File hashes

Hashes for trame_plotly-3.0.2-py3-none-any.whl
Algorithm Hash digest
SHA256 eff0f0259c6dce035745535a6e79a4b64f0ef5c32df3d826307ed691d6838902
MD5 b09a7072ea20b3a2b986c34108db6387
BLAKE2b-256 b6decac286616563d588e7c7d9a90f9800297cf6a231ed72249de469e61246d3

See more details on using hashes here.

Provenance

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page