Plots¶

Create interactive visualizations using Plotly.

PlotlyPlot Class¶

PlotlyPlot ¶

PlotlyPlot(fig: Figure, title: Optional[str] = None, show_title: bool = True, description: str = '', show_description: bool = True, reference_id: Optional[str] = '', info_content: Optional[str] = None, height: Optional[int] = None)

Create a plot using the Plotly package. On creation, the Plotly plot title will be remove and made into a VAIP title. To use the Virtualitics color scheme in Plotly plots simply add template="predict_default" to the Plotly layout object and have the imported virtualitics_sdk plotly_plot module.

NOTE: Plotly plot title will be removed and made into a VAIP title

More on Plotly documentation can be found here: https://plotly.com/python/

Parameters:

fig (Figure) –

A Plotly figure object
title (Optional[str], default: None ) –

The title of the PlotlyPlot, if not specified, the title of object Plotly is used.
show_title (bool, default: True ) –

Whether to show the title on the page when rendered, defaults to True.
description (str, default: '' ) –

The element's description, defaults to ''.
show_description (bool, default: True ) –

Whether to show the description to the page when rendered, defaults to True.
reference_id (Optional[str], default: '' ) –

A user-defined reference ID for the unique identification of PlotlyPlot element within the Page, defaults to ''.
info_content (Optional[str], default: None ) –

Description to be displayed within the element's info button. Use RichText/Markdown for advanced formatting.

height (Optional[int], default: None ) –

EXAMPLE:

# Imports  from virtualitics_sdk import PlotlyPlot...
# Example usage class ExampleStep(Step): def run(self, flow_metadata):...
fig_1 = px.scatter(ex_df, x="gdpPercap",  y="lifeExp",  size="pop",  color="continent", log_x=True, size_max=60, template="predict_default",  title="Gapminder 2007 - Predict") fig_2 = px.scatter(ex_df, x="gdpPercap",  y="lifeExp",  size="pop",  color="continent", log_x=True,  size_max=60,  title="Gapminder 2007 - Default") pplot_1 = PlotlyPlot(fig_1) pplot_2 = PlotlyPlot(fig_2)  The above PlotlyPlot will be displayed as:        .. image:: ../images/plotly_plot_ex.png :align: center

Basic Usage¶

from virtualitics_sdk import PlotlyPlot
import plotly.express as px
import pandas as pd

# Create data
df = pd.DataFrame({
    'x': [1, 2, 3, 4, 5],
    'y': [2, 4, 6, 8, 10]
})

# Create a Plotly figure
fig = px.line(df, x='x', y='y', title='Simple Line Plot')

# Add to page
plot = PlotlyPlot(
    id="my_plot",
    figure=fig
)

Plot Types¶

Line Charts¶

import plotly.express as px

fig = px.line(
    df,
    x='date',
    y='value',
    color='category',
    title='Time Series'
)

plot = PlotlyPlot(id="line_chart", figure=fig)

Bar Charts¶

fig = px.bar(
    df,
    x='product',
    y='sales',
    color='region',
    title='Sales by Product'
)

plot = PlotlyPlot(id="bar_chart", figure=fig)

Scatter Plots¶

fig = px.scatter(
    df,
    x='feature1',
    y='feature2',
    color='cluster',
    size='size_metric',
    title='Cluster Analysis'
)

plot = PlotlyPlot(id="scatter", figure=fig)

3D Plots¶

fig = px.scatter_3d(
    df,
    x='x',
    y='y',
    z='z',
    color='category',
    title='3D Visualization'
)

plot = PlotlyPlot(id="3d_plot", figure=fig)

Heatmaps¶

import plotly.graph_objects as go

fig = go.Figure(data=go.Heatmap(
    z=correlation_matrix,
    x=features,
    y=features,
    colorscale='RdBu'
))

fig.update_layout(title='Correlation Heatmap')

plot = PlotlyPlot(id="heatmap", figure=fig)

Customization¶

Layout Options¶

import plotly.graph_objects as go

fig = go.Figure(data=go.Scatter(x=x, y=y))

fig.update_layout(
    title='Custom Plot',
    xaxis_title='X Axis Label',
    yaxis_title='Y Axis Label',
    font=dict(size=14),
    showlegend=True,
    hovermode='closest'
)

plot = PlotlyPlot(id="custom_plot", figure=fig)

Interactive Features¶

# Enable zoom, pan, and other tools
fig.update_layout(
    dragmode='zoom',  # or 'pan', 'select', 'lasso'
    hovermode='x unified'
)

# Add range slider
fig.update_xaxes(rangeslider_visible=True)

plot = PlotlyPlot(id="interactive_plot", figure=fig)

Multiple Traces¶

import plotly.graph_objects as go

fig = go.Figure()

# Add multiple traces
fig.add_trace(go.Scatter(x=x, y=y1, name='Series 1', mode='lines'))
fig.add_trace(go.Scatter(x=x, y=y2, name='Series 2', mode='lines+markers'))
fig.add_trace(go.Bar(x=x, y=y3, name='Series 3'))

fig.update_layout(title='Multi-Trace Plot')

plot = PlotlyPlot(id="multi_trace", figure=fig)

Subplots¶

from plotly.subplots import make_subplots
import plotly.graph_objects as go

fig = make_subplots(
    rows=2, cols=2,
    subplot_titles=('Plot 1', 'Plot 2', 'Plot 3', 'Plot 4')
)

fig.add_trace(go.Scatter(x=x, y=y1), row=1, col=1)
fig.add_trace(go.Bar(x=x, y=y2), row=1, col=2)
fig.add_trace(go.Scatter(x=x, y=y3), row=2, col=1)
fig.add_trace(go.Heatmap(z=z), row=2, col=2)

fig.update_layout(height=600, title_text="Subplots")

plot = PlotlyPlot(id="subplots", figure=fig)

Best Practices¶

Clear Titles: Always include descriptive titles and axis labels
Color Schemes: Use appropriate color scales for your data
Legend: Include legends when plotting multiple series
Performance: Large datasets may impact rendering performance
Interactivity: Leverage Plotly's built-in interactive features
Responsive: Plots automatically resize to fit containers