Plotly

Example Usage

import zero_true as zt
import matplotlib.pyplot as plt
import plotly.graph_objects as go
import plotly
import io
import base64
import json
import pandas as pd
import warnings

# Use Agg backend for Matplotlib to avoid GUI issues
plt.switch_backend('Agg')

# Initialize state
zt_state = zt.state()

# Sample data for demonstration
data = {
  'Category': ['A', 'B', 'C', 'D'],
  'Values': [23, 17, 35, 29]
}

df = pd.DataFrame(data)

# Function to create Plotly component
def create_plotly_component():
  # Create a sample Plotly figure
  plotly_fig = go.Figure(data=go.Bar(x=df['Category'], y=df['Values']))
  plotly_fig.update_layout(title="Sample Plotly Bar Chart", xaxis_title="Category", yaxis_title="Values")

  # Serialize the Plotly figure to JSON
  plotly_json = json.dumps(plotly_fig, cls=plotly.utils.PlotlyJSONEncoder)

  # Create a PlotlyComponent
  sample_plotly = zt.PlotlyComponent(
      id="sample_plotly",
      figure_json=plotly_json  # Serialized Plotly figure as JSON string
  )

  return sample_plotly

# Create component
plotly_component = create_plotly_component()

layout = plotly_component.id


# Render the layout
def render_layout():
  # Assuming you have a mechanism to render or use this
  pass

render_layout()

Example Output

Overview

pydantic model zero_true.Plotly

The PlotlyComponent is designed to incorporate interactive Plotly graphs within web interfaces, ideal for data visualization tasks that require interactivity and detailed graphical displays. This component accepts serialized Plotly figures, allowing for dynamic and responsive data visualization solutions.

The uniqueness of each component is ensured by a validation process for component IDs, making it suitable for applications that involve multiple interactive elements. This integration capability makes it a valuable tool for scientific research, data analysis, and interactive reporting.

JSON Schema

Field Defenitions

{
   "title": "PlotlyComponent",
   "description": "Component to display a Plotly figure",
   "type": "object",
   "properties": {
      "id": {
         "description": "ID for the component",
         "title": "Id",
         "type": "string"
      },
      "variable_name": {
         "default": "",
         "description": "Optional variable name associated with a component",
         "title": "Variable Name",
         "type": "string"
      },
      "component": {
         "default": "plotly-plot",
         "description": "Vue component name for Plotly",
         "title": "Component",
         "type": "string"
      },
      "figure_json": {
         "description": "Serialized Plotly figure as JSON string",
         "title": "Figure Json",
         "type": "string"
      }
   },
   "required": [
      "id",
      "figure_json"
   ]
}

Bellow are the various attributes you can assign to the component. Utlizing them can allow for modifications to the pre-created object.

zero_true.Plotly · Zero True Component

Show properties

field component

field component: str = ‘plotly-plot’; Vue component name for Plotly.

field figure_json

field figure_json: str [Required]; Serialized Plotly figure as JSON string.

field id

field id: str [Required]; ID for the component.

Methods

from_figure: (figure: Figure, id: str); Creates a PlotlyComponent instance from a Plotly figure.

to_json

to_json: Converts the component to a JSON-serializable dictionary.