用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/brycewang-stanford/Auto-Empirical-Research-Skills --skill interactive-viz-guide命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | interactive-viz-guide |
| description | Interactive data visualization with Plotly, ECharts, and D3 |
| metadata | {"openclaw":{"emoji":"✨","category":"analysis","subcategory":"dataviz","keywords":["interactive visualization","dynamic chart","Plotly","ECharts","data visualization"],"source":"wentor-research-plugins"}} |
Create interactive, publication-ready visualizations using Plotly, ECharts, Altair, and Bokeh for academic papers, presentations, and supplementary materials.
| Scenario | Static | Interactive |
|---|---|---|
| Journal PDF figure | Preferred | Not supported |
| Supplementary materials | Optional | Excellent |
| Conference poster (digital) | Common | Increasingly popular |
| Presentation slides | Standard | Engaging |
| Online appendix / project website | Limited | Ideal |
| Exploratory data analysis | Quick | Detailed exploration |
Plotly produces interactive HTML charts with hover tooltips, zoom, pan, and export capabilities.
import plotly.express as px
import pandas as pd
# Example: visualize paper citations vs. year
df = pd.DataFrame({
"title": ["Paper A", "Paper B", "Paper C", "Paper D", "Paper E"],
"year": [2019, 2020, 2021, 2022, 2023],
"citations": [150, 320, 89, 450, 210],
"field": ["NLP", "CV", "NLP", "RL", "CV"],
"venue": ["ACL", "CVPR", "EMNLP", "NeurIPS", "ICCV"]
})
fig = px.scatter(
df, x="year", y="citations",
color="field", size="citations",
hover_data=["title", "venue"],
title="Citation Counts by Year and Field",
labels={"citations": "Citation Count", "year": "Publication Year"}
)
fig.update_layout(
template="plotly_white",
font=dict(size=14),
width=800, height=500
)
fig.write_html("citations_interactive.html")
fig.show()
import plotly.graph_objects as go
methods = ["Baseline", "Method A", "Method B", "Ours"]
accuracy = [82.1, 85.3, 87.0, 89.4]
f1_score = [79.8, 83.1, 85.2, 87.9]
fig = go.Figure(data=[
go.Bar(name="Accuracy", x=methods, y=accuracy,
text=[f"{v}%" for v in accuracy], textposition="auto"),
go.Bar(name="F1 Score", x=methods, y=f1_score,
text=[f"{v}%" for v in f1_score], textposition="auto")
])
fig.update_layout(
barmode="group",
title="Model Performance Comparison",
yaxis_title="Score (%)",
yaxis_range=[70, 95],
template="plotly_white"
)
fig.write_html("comparison.html")
import plotly.figure_factory as ff
import numpy as np
z = [[85, 5, 3, 7],
[4, 90, 2, 4],
[6, 3, 88, 3],
[5, 2, 7, 86]]
labels = ["Class A", "Class B", "Class C", "Class D"]
fig = ff.create_annotated_heatmap(
z, x=labels, y=labels,
colorscale="Blues",
showscale=True
)
fig.update_layout(
title="Confusion Matrix",
xaxis_title="Predicted",
yaxis_title="Actual"
)
fig.write_html("confusion_matrix.html")
Altair uses Vega-Lite grammar for concise, declarative visualization.
import altair as alt
import pandas as pd
# Interactive scatter with selection
df = pd.DataFrame({
"x": range(100),
"y": [v**2 + 10 for v in range(100)],
"category": ["A" if i % 3 == 0 else "B" if i % 3 == 1 else "C" for i in range(100)]
})
selection = alt.selection_point(fields=["category"], bind="legend")
chart = alt.Chart(df).mark_circle(size=60).encode(
x="x:Q",
y="y:Q",
color="category:N",
opacity=alt.condition(selection, alt.value(1), alt.value(0.2)),
tooltip=["x", "y", "category"]
).add_params(
selection
).properties(
width=600, height=400,
title="Interactive Scatter with Legend Selection"
).interactive() # Enable zoom/pan
chart.save("altair_scatter.html")
Apache ECharts is a powerful JavaScript charting library ideal for web dashboards and complex visualizations.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 500px;"></div>
<script>
const chart = echarts.init(document.getElementById('chart'));
const option = {
title: { text: 'Research Output by Year', left: 'center' },
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: { data: ['Papers', 'Citations'], top: 30 },
xAxis: {
type: 'category',
data: ['2019', '2020', '2021', , ]
},
: [
{ : , : },
{ : , : }
],
: [
{
: ,
: ,
: [, , , , ],
: { : }
},
{
: ,
: ,
: ,
: [, , , , ],
: { : },
:
}
],
: [{ : , : , : }]
};
chart.(option);
.(, chart.());
import plotly.graph_objects as go
import networkx as nx
# Create a citation network
G = nx.karate_club_graph()
pos = nx.spring_layout(G, seed=42)
# Edge traces
edge_x, edge_y = [], []
for edge in G.edges():
x0, y0 = pos[edge[0]]
x1, y1 = pos[edge[1]]
edge_x.extend([x0, x1, None])
edge_y.extend([y0, y1, None])
edge_trace = go.Scatter(x=edge_x, y=edge_y, mode="lines",
line=dict(width=0.5, color="#888"), hoverinfo="none")
# Node traces
node_x = [pos[n][0] for n in G.nodes()]
node_y = [pos[n][1] for n in G.nodes()]
node_degree = [G.degree(n) for n in G.nodes()]
node_trace = go.Scatter(
x=node_x, y=node_y, mode="markers",
marker=dict(size=[d*3 for d in node_degree], color=node_degree,
colorscale="Viridis", showscale=True,
colorbar=dict(title="Connections")),
text=[f"Node {n}: {G.degree(n)} connections" for n in G.nodes()],
hoverinfo="text"
)
fig = go.Figure(data=[edge_trace, node_trace],
layout=go.Layout(title="Citation Network",
showlegend=False,
xaxis=(showgrid=, zeroline=, showticklabels=),
yaxis=(showgrid=, zeroline=, showticklabels=)))
fig.write_html()
# Export as high-res static image for journals
fig.write_image("figure.pdf", width=1200, height=800, scale=2) # Vector PDF
fig.write_image("figure.png", width=1200, height=800, scale=3) # 300 DPI PNG
fig.write_image("figure.svg", width=1200, height=800) # Vector SVG
# Requires: pip install kaleido
# Plotly renders natively in Jupyter
fig.show()
# For Altair in Jupyter
chart # Just display the chart object
# For ECharts in Jupyter, use pyecharts
from pyecharts.charts import Bar
from pyecharts import options as opts
bar = (Bar()
.add_xaxis(["2019", "2020", "2021", "2022", "2023"])
.add_yaxis("Papers", [12, 15, 18, 22, 28])
.set_global_opts(title_opts=opts.TitleOpts(title="Research Output")))
bar.render_notebook()
window.addEventListener('resize') for ECharts.scattergl, Deck.gl) or server-side aggregation.