Agent skill
plotly-vertical-legends-avoid-toolbar-clash
Sub-skill of plotly: Vertical Legends (Avoid Toolbar Clash) (+5).
Install this agent skill to your Project
npx add-skill https://github.com/vamseeachanta/workspace-hub/tree/main/.claude/skills/_archive/data/visualization/plotly/vertical-legends-avoid-toolbar-clash
SKILL.md
Vertical Legends (Avoid Toolbar Clash) (+5)
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 */
*See sub-skills for full details.*
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
vamseeachanta/workspace-hub
gsd-complete-milestone
Archive completed milestone and prepare for next version
vamseeachanta/workspace-hub
gsd-reapply-patches
Reapply local modifications after a GSD update
vamseeachanta/workspace-hub
gsd-verify-work
Validate built features through conversational UAT
vamseeachanta/workspace-hub
gsd-thread
Manage persistent context threads for cross-session work
vamseeachanta/workspace-hub
clinical-trial-protocol
Generate clinical trial protocols for medical devices or drugs through a modular, waypoint-based architecture with research-only and full protocol modes.
vamseeachanta/workspace-hub
single-cell-rna-qc
Performs quality control on single-cell RNA-seq data (.h5ad or .h5 files) using scverse best practices with MAD-based filtering and comprehensive visualizations.
Didn't find tool you were looking for?