Skills
▥NYC
skills/vamseeachanta/workspace-hub/plotly

plotly

SKILL.md

Plotly Interactive Visualization Skill

Create professional, interactive charts with 40+ chart types including 3D plots, statistical graphs, and scientific visualizations.

When to Use This Skill

Use Plotly when you need:

  • Scientific visualizations - 3D plots, contours, heatmaps
  • Statistical charts - Box plots, violin plots, histograms
  • Large datasets - Efficient rendering of 100k+ points with WebGL
  • Python/R integration - Seamless integration with data science workflows
  • Quick interactive plots - High-level API with sensible defaults
  • Dashboards - Interactive dashboards with Plotly Dash

Avoid when:

  • Maximum customization needed (use D3.js)
  • Extremely simple charts (use Chart.js)
  • File size is critical concern

Core Capabilities

1. JavaScript Implementation

Basic Line Chart

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
</head>
<body>
  <div id="chart"></div>
  <script>
    const trace = {
      x: [1, 2, 3, 4, 5],
      y: [10, 15, 13, 17, 20],
      type: 'scatter',
      mode: 'lines+markers',
      marker: { color: 'rgb(219, 64, 82)', size: 12 },
      line: { color: 'rgb(55, 128, 191)', width: 3 }
    };

    const layout = {
      title: 'Interactive Line Chart',
      xaxis: { title: 'X Axis' },
      yaxis: { title: 'Y Axis' },
      hovermode: 'closest'
    };

    Plotly.newPlot('chart', [trace], layout, {
      responsive: true,
      displayModeBar: true
    });
  </script>
</body>
</html>

Multiple Traces

const trace1 = {
  x: [1, 2, 3, 4, 5],
  y: [1, 6, 3, 6, 8],
  type: 'scatter',
  mode: 'lines',
  name: 'Series 1'
};

const trace2 = {
  x: [1, 2, 3, 4, 5],
  y: [5, 1, 6, 9, 2],
  type: 'scatter',
  mode: 'lines+markers',
  name: 'Series 2'
};

const layout = {
  title: 'Multi-Series Chart',
  showlegend: true,
  legend: { x: 1, y: 1 }
};

Plotly.newPlot('chart', [trace1, trace2], layout);

2. Python Implementation

Quick Start with Plotly Express

import plotly.express as px
import pandas as pd

# Load data from CSV
df = pd.read_csv('../data/processed/results.csv')

# Create interactive scatter plot
fig = px.scatter(
    df,
    x='time',
    y='value',
    color='category',
    size='magnitude',
    hover_data=['additional_info'],
    title='Interactive Analysis Results'
)

# Customize layout
fig.update_layout(
    template='plotly_white',
    hovermode='x unified',
    height=600,
    font=dict(size=12)
)

# Save as HTML
fig.write_html('../reports/analysis_plot.html')

# Or display in Jupyter
fig.show()

Plotly Graph Objects (More Control)

import plotly.graph_objects as go
import pandas as pd

df = pd.read_csv('../data/processed/timeseries.csv')

fig = go.Figure()

# Add trace
fig.add_trace(go.Scatter(
    x=df['date'],
    y=df['value'],
    mode='lines+markers',
    name='Value',
    line=dict(color='rgb(55, 128, 191)', width=2),
    marker=dict(size=8, color='rgb(219, 64, 82)'),
    hovertemplate='<b>Date</b>: %{x}<br>' +
                  '<b>Value</b>: %{y:.2f}<br>' +
                  '<extra></extra>'
))

# Update layout
fig.update_layout(
    title='Time Series Analysis',
    xaxis_title='Date',
    yaxis_title='Value',
    template='plotly_dark',
    hovermode='x unified'
)

fig.write_html('../reports/timeseries.html')

Complete Examples

Example 1: 3D Scatter Plot

import plotly.express as px
import numpy as np

# Generate 3D data
n = 500
x = np.random.randn(n)
y = np.random.randn(n)
z = np.random.randn(n)
colors = np.random.rand(n)

fig = px.scatter_3d(
    x=x, y=y, z=z,
    color=colors,
    size=np.abs(z) * 10,
    title='Interactive 3D Scatter Plot',
    labels={'x': 'X Axis', 'y': 'Y Axis', 'z': 'Z Axis'}
)

fig.update_layout(
    scene=dict(
        xaxis_title='X',
        yaxis_title='Y',
        zaxis_title='Z'
    )
)

fig.write_html('../reports/3d_scatter.html')

Example 2: Statistical Box Plot with Violin

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

df = pd.read_csv('../data/processed/measurements.csv')

# Create subplots
fig = make_subplots(
    rows=1, cols=2,
    subplot_titles=('Box Plot', 'Violin Plot')
)

# Box plot
fig.add_trace(
    go.Box(y=df['value'], name='Box', boxmean='sd'),
    row=1, col=1
)

# Violin plot
fig.add_trace(
    go.Violin(y=df['value'], name='Violin', box_visible=True, meanline_visible=True),
    row=1, col=2
)

fig.update_layout(
    title_text='Statistical Distribution Analysis',
    showlegend=False,
    height=500
)

fig.write_html('../reports/statistical_analysis.html')

Example 3: Animated Time Series

import plotly.express as px
import pandas as pd

df = pd.read_csv('../data/processed/timeseries_multi.csv')

fig = px.line(
    df,
    x='date',
    y='value',
    color='category',
    animation_frame='year',
    animation_group='category',
    title='Animated Time Series by Category',
    range_y=[0, df['value'].max() * 1.1]
)

fig.update_layout(
    xaxis_title='Date',
    yaxis_title='Value',
    hovermode='x unified'
)

fig.write_html('../reports/animated_timeseries.html')

Example 4: Interactive Heatmap with Annotations

import plotly.graph_objects as go
import numpy as np

# Generate correlation matrix
data = np.random.rand(10, 10)
labels = [f'Var {i+1}' for i in range(10)]

fig = go.Figure(data=go.Heatmap(
    z=data,
    x=labels,
    y=labels,
    colorscale='Viridis',
    text=np.round(data, 2),
    texttemplate='%{text}',
    textfont={"size": 10},
    hovertemplate='%{y} vs %{x}<br>Value: %{z:.3f}<extra></extra>'
))

fig.update_layout(
    title='Correlation Heatmap',
    xaxis_title='Variables',
    yaxis_title='Variables',
    width=700,
    height=700
)

fig.write_html('../reports/heatmap.html')

Example 5: Multi-Axis Chart

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

fig = make_subplots(specs=[[{"secondary_y": True}]])

# Temperature (primary y-axis)
fig.add_trace(
    go.Scatter(x=[1, 2, 3, 4, 5], y=[20, 22, 25, 23, 24],
               name="Temperature (°C)", mode='lines+markers'),
    secondary_y=False,
)

# Humidity (secondary y-axis)
fig.add_trace(
    go.Scatter(x=[1, 2, 3, 4, 5], y=[65, 70, 60, 75, 68],
               name="Humidity (%)", mode='lines+markers'),
    secondary_y=True,
)

fig.update_xaxes(title_text="Time")
fig.update_yaxes(title_text="Temperature (°C)", secondary_y=False)
fig.update_yaxes(title_text="Humidity (%)", secondary_y=True)

fig.update_layout(title_text="Multi-Axis Chart", hovermode='x unified')

fig.write_html('../reports/multi_axis.html')

Example 6: Large Dataset with WebGL

import plotly.graph_objects as go
import numpy as np

# Generate large dataset (100,000 points)
n = 100000
x = np.random.randn(n)
y = np.random.randn(n)

# Use Scattergl for performance
fig = go.Figure(data=go.Scattergl(
    x=x,
    y=y,
    mode='markers',
    marker=dict(
        size=2,
        color=np.random.randn(n),
        colorscale='Viridis',
        showscale=True
    )
))

fig.update_layout(
    title='Large Dataset (100k points) with WebGL',
    xaxis_title='X',
    yaxis_title='Y'
)

fig.write_html('../reports/large_dataset.html')

Dashboard with Plotly Dash

import dash
from dash import dcc, html, Input, Output
import plotly.express as px
import pandas as pd

# Load data
df = pd.read_csv('../data/processed/dashboard_data.csv')

# Initialize app
app = dash.Dash(__name__)

# Layout
app.layout = html.Div([
    html.H1('Interactive Dashboard'),

    html.Div([
        html.Label('Select Category:'),
        dcc.Dropdown(
            id='category-dropdown',
            options=[{'label': cat, 'value': cat} for cat in df['category'].unique()],
            value=df['category'].unique()[0]
        )
    ], style={'width': '50%'}),

    dcc.Graph(id='main-chart'),
    dcc.Graph(id='histogram')
])

# Callbacks
@app.callback(
    [Output('main-chart', 'figure'),
     Output('histogram', 'figure')],
    [Input('category-dropdown', 'value')]
)
def update_charts(selected_category):
    filtered_df = df[df['category'] == selected_category]

    # Line chart
    line_fig = px.line(
        filtered_df,
        x='date',
        y='value',
        title=f'Trend for {selected_category}'
    )

    # Histogram
    hist_fig = px.histogram(
        filtered_df,
        x='value',
        nbins=30,
        title=f'Distribution for {selected_category}'
    )

    return line_fig, hist_fig

if __name__ == '__main__':
    app.run_server(debug=True)

Best Practices

1. Use Plotly Express for Quick Plots

# Simple and readable
fig = px.scatter(df, x='x', y='y', color='category', title='Quick Scatter')

2. Graph Objects for Complex Customization

# More control
fig = go.Figure()
fig.add_trace(go.Scatter(x=x, y=y, mode='markers'))
fig.update_layout(title='Custom Chart')

3. Optimize for Large Datasets

# Use Scattergl for >10k points
fig = go.Figure(data=go.Scattergl(x=x, y=y, mode='markers'))

4. Responsive Design

fig.update_layout(
    autosize=True,
    margin=dict(l=20, r=20, t=40, b=20)
)

5. Custom Hover Templates

fig.update_traces(
    hovertemplate='<b>%{x}</b><br>Value: %{y:.2f}<extra></extra>'
)

Engineering Report Best Practices

Vertical Legends (Avoid Toolbar Clash)

Horizontal legends at the top clash with Plotly's toolbar (zoom, pan, etc.). Place legends vertically on the right side:

fig.update_layout(
    legend=dict(
        orientation="v",
        yanchor="top", y=1.0,
        xanchor="left", x=1.02,
        font=dict(size=10),
        tracegroupgap=2,  # compact vertical spacing
    ),
    margin=dict(l=50, r=140, t=30, b=30),  # r=140+ for legend room
)

Heading-First Trace Ordering for Multi-Solver Plots

When comparing solvers across headings, loop headings first then solvers. This groups legend entries as: H0-AQWA / H0-OrcaWave / H45-AQWA / H45-OrcaWave making it easy to toggle all solvers for a given heading:

for heading_idx in heading_indices:
    heading_label = f"{headings[heading_idx]:.0f}"
    for solver_name in solver_names:
        fig.add_trace(go.Scatter(
            x=frequencies, y=values,
            name=f"H{heading_label} {solver_name}",
            legendgroup=f"H{heading_label}",
        ))

Significance Filtering (Naval Architecture)

Omit headings where response is physically insignificant (< 1% of DOF peak). This avoids plotting zero-response cases like surge@90deg or sway@0deg:

def get_significant_headings(dof_data, all_headings, threshold=0.01):
    overall_peak = max(np.max(np.abs(solver_data)) for solver_data in all_solvers)
    cutoff = overall_peak * threshold
    return [h for h in all_headings
            if any(np.max(np.abs(solver[h])) > cutoff for solver in all_solvers)]

Inline Plotly in Single-Page HTML

For multi-plot single-page reports, load Plotly CDN once in <head> and use include_plotlyjs=False for each inline plot div to avoid duplicate loading:

# In HTML <head>:
# <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>

# For each plot div:
plot_html = fig.to_html(full_html=False, include_plotlyjs=False)

Monospace Fonts for Numeric Data

Use engineering-appropriate monospace fonts for tables and numeric values:

.solver-table td {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
}

Engineering Report CSS Patterns

/* Alternating rows */
tbody tr:nth-child(even) { background: #f8f9fa; }
tbody tr:nth-child(odd) { background: #fff; }
tbody tr:hover { background: #ebf5fb; }

/* Dark header */
th { background: #34495e; color: #fff; padding: 0.5em 0.75em; }

/* Section rows in tables */
.section-row td {
    background: #2c3e50 !important;
    color: #fff;
    font-weight: bold;
}

/* Skipped/note callouts */
.skipped-note {
    background: #fef9e7;
    border-left: 3px solid #f0c674;
    padding: 0.5em 1em;
    font-size: 0.9em;
}

/* Two-column layout: text left, plot right */
.dof-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 1em;
    align-items: start;
}

Chart Types Available

Basic Charts

  • Line, Scatter, Bar, Histogram, Box, Violin

Scientific Charts

  • Contour, Heatmap, 3D Surface, 3D Scatter, Streamline

Financial Charts

  • Candlestick, OHLC, Waterfall, Funnel

Statistical Charts

  • Box, Violin, Histogram, Density Heatmap, 2D Histogram

Maps

  • Scatter Mapbox, Choropleth, Density Mapbox

3D Charts

  • 3D Scatter, 3D Line, 3D Surface, 3D Mesh

Installation

JavaScript (CDN)

<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>

Python

pip install plotly
# or
uv pip install plotly

# For Dash
pip install dash

R

install.packages("plotly")

Performance Tips

  1. Use WebGL for large datasets - Scattergl, Scattermapbox
  2. Limit animation frames - Keep under 50 frames
  3. Simplify traces - Reduce number of data points for complex charts
  4. Disable hover - For static exports: hovermode=False
  5. Optimize layout updates - Batch updates when possible

Export Options

HTML (Recommended for Reports)

fig.write_html('report.html', include_plotlyjs='cdn')

Static Images

# Requires kaleido
fig.write_image('chart.png', width=1200, height=800)
fig.write_image('chart.pdf')
fig.write_image('chart.svg')

JSON

import json
fig.write_json('chart.json')

Integration Examples

With Pandas

import plotly.express as px
df = pd.read_csv('data.csv')
fig = px.line(df, x='date', y='value')

With NumPy

import numpy as np
import plotly.graph_objects as go

x = np.linspace(0, 10, 100)
y = np.sin(x)

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

With Jupyter Notebooks

# Automatically displays in cell output
fig.show()

# Or use widget mode
import plotly.graph_objects as go
fig = go.FigureWidget()

Resources

Theming

Built-in Templates

# Available templates: plotly, plotly_white, plotly_dark, ggplot2, seaborn, simple_white
fig.update_layout(template='plotly_dark')

Custom Theme

custom_template = go.layout.Template(
    layout=dict(
        font=dict(family='Arial', size=14),
        plot_bgcolor='#f0f0f0',
        paper_bgcolor='white'
    )
)

fig.update_layout(template=custom_template)

Use this skill for professional, interactive scientific and analytical visualizations with minimal code!

Weekly Installs
9
Repository
vamseeachanta/workspace-hub
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass
Installed on
claude-code8
trae7
gemini-cli7
antigravity7
windsurf7
codex7