plotly-1-javascript-implementation

Sub-skill of plotly: 1. JavaScript Implementation (+1).

5 stars

Best use case

plotly-1-javascript-implementation is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Sub-skill of plotly: 1. JavaScript Implementation (+1).

Teams using plotly-1-javascript-implementation should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/1-javascript-implementation/SKILL.md --create-dirs "https://raw.githubusercontent.com/vamseeachanta/workspace-hub/main/.agents/skills/_archive/data/visualization/plotly/1-javascript-implementation/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/1-javascript-implementation/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How plotly-1-javascript-implementation Compares

Feature / Agent	plotly-1-javascript-implementation	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Sub-skill of plotly: 1. JavaScript Implementation (+1).

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 1. JavaScript Implementation (+1)

## 1. JavaScript Implementation


#### Basic Line Chart
```html
<!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
```javascript
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
```python
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)
```python
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')
```

Related Skills

read-only-pre-implementation-audit

from vamseeachanta/workspace-hub

Systematic cross-check workflow to validate assumptions before TDD coding begins

portable-baseline-pattern-implementation

from vamseeachanta/workspace-hub

Implement portable configuration baselines by separating machine-agnostic settings from machine-specific hooks and plugins

plan-gated-issue-implementation

from vamseeachanta/workspace-hub

Workflow for executing pre-approved GitHub issues with mandatory validation checkpoints

live-state-aware-overnight-implementation-prompts

from vamseeachanta/workspace-hub

Design overnight implementation prompts that begin with a live repo/CI precheck so workers continue from partial progress instead of replaying stale handoffs.