plotly

Create interactive scientific and analytical charts with Plotly (JavaScript & Python)

跳到安装

仓库: vamseeachanta/workspace-hub
最近来源活动: 2026年2月25日 02:15
检测到的 SKILL.md 语言: 英语
星标: 16
分支: 7

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/vamseeachanta/workspace-hub --skill plotly

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

name	plotly
version	1.0.0
description	Create interactive scientific and analytical charts with Plotly (JavaScript & Python)
author	workspace-hub
category	data-visualization
tags	["charts","plotly","scientific","3d","interactive","python","javascript"]
platforms	["web","python","r"]

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:  },
      : 
    };

    .(, [trace], layout, {
      : ,
      : 
    });

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=
    )

    
    hist_fig = px.histogram(
        filtered_df,
        x=,
        nbins=,
        title=
    )

     line_fig, hist_fig

 __name__ == :
    app.run_server(debug=)

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>'
)

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

Use WebGL for large datasets - Scattergl, Scattermapbox
Limit animation frames - Keep under 50 frames
Simplify traces - Reduce number of data points for complex charts
Disable hover - For static exports: hovermode=False
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

Official Docs: https://plotly.com/python/
JavaScript Docs: https://plotly.com/javascript/
Dash Docs: https://dash.plotly.com/
Gallery: https://plotly.com/python/plotly-express/
GitHub: https://github.com/plotly/plotly.py

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!

plotly

来源信息

安装方式

检查来源文件

同仓库更多 Skills

同仓库更多 Skills

Plotly Interactive Visualization Skill

When to Use This Skill

Core Capabilities

1. JavaScript Implementation

Basic Line Chart

Multiple Traces

2. Python Implementation

Quick Start with Plotly Express

Plotly Graph Objects (More Control)

Complete Examples

Example 1: 3D Scatter Plot

Example 2: Statistical Box Plot with Violin

Example 3: Animated Time Series

Example 4: Interactive Heatmap with Annotations

Example 5: Multi-Axis Chart

Example 6: Large Dataset with WebGL

Dashboard with Plotly Dash

Best Practices

1. Use Plotly Express for Quick Plots

2. Graph Objects for Complex Customization

3. Optimize for Large Datasets

4. Responsive Design

5. Custom Hover Templates

Chart Types Available

Basic Charts

Scientific Charts

Financial Charts

Statistical Charts

Maps

3D Charts

Installation

JavaScript (CDN)

Python

R

Performance Tips

Export Options

HTML (Recommended for Reports)

Static Images

JSON

Integration Examples

With Pandas

With NumPy

With Jupyter Notebooks

Resources

Theming

Built-in Templates

Custom Theme

Plotly Interactive Visualization Skill

When to Use This Skill

Core Capabilities

1. JavaScript Implementation

Basic Line Chart

Multiple Traces

2. Python Implementation

Quick Start with Plotly Express

Plotly Graph Objects (More Control)

Complete Examples

Example 1: 3D Scatter Plot

Example 2: Statistical Box Plot with Violin

Example 3: Animated Time Series

Example 4: Interactive Heatmap with Annotations

Example 5: Multi-Axis Chart

Example 6: Large Dataset with WebGL

Dashboard with Plotly Dash

Best Practices

1. Use Plotly Express for Quick Plots

2. Graph Objects for Complex Customization

3. Optimize for Large Datasets

4. Responsive Design

5. Custom Hover Templates

Chart Types Available

Basic Charts

Scientific Charts

Financial Charts