Compétences claude-d3js-skill

📊

claude-d3js-skill

Name: claude-d3js-skill
Author: sickn33

Sûr

Interaktive D3.js-Datenvisualisierungen erstellen

Erstellen Sie individuelle, publikationsreife Datenvisualisierungen ohne Komplexität. Dieser Skill bietet professionelle D3.js-Beratung mit sofort einsetzbaren Vorlagen für Diagramme, Graphen und interaktive Grafiken, die mit jedem JavaScript-Framework funktionieren.

Prend en charge: Claude Codex Code(CC)

🥈 77 Argent

Télécharger le ZIP du skill

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

Activez et commencez à utiliser

Tester

Utilisation de "claude-d3js-skill". Create a line chart showing monthly temperature trends

Résultat attendu:

Eine vollständige D3.js React-Komponente mit SVG-Liniendiagramm, einschließlich x-Achse (Monate), y-Achse (Temperatur), glatter Kurveninterpolation, Verlaufsfüllfläche unter der Linie und Tooltip, der beim Hovern exakte Werte anzeigt.

Utilisation de "claude-d3js-skill". Build a pie chart for market share comparison

Résultat attendu:

Ein interaktives D3.js-Kreisdiagramm mit animierten Eingangsübergängen, getrennten Segmenten beim Hovern, Prozentbeschriftungen, externer Legende mit Farbkodierung und Klicken-zum-Explodieren der ausgewählten Segmentanimation.

Audit de sécurité

Sûr

v1 • 2/25/2026

All 392 static analyzer findings were evaluated and dismissed as false positives. The pattern detections for 'external_commands', 'weak cryptographic algorithm', 'C2 keywords', 'network', and 'filesystem' operations were triggered by markdown documentation code blocks, D3.js API method names (schemeCategory10, nodes, desc), hex color codes in colour scheme documentation, and standard CDN import examples. This is a legitimate D3.js data visualization skill containing only documentation and code templates with no executable security risks.

Fichiers analysés

3,216

Lignes analysées

résultats

Total des audits

Aucun problème de sécurité trouvé

Audité par: claude

Score de qualité

Architecture

100

Maintenabilité

Contenu

Communauté

100

Sécurité

Conformité aux spécifications

Ce que vous pouvez construire

Business-Dashboard-Entwickler

Erstellen Sie Executive Dashboards mit KPI-Diagrammen, Trendvisualisierungen und interaktiven Filtern für Business-Analytics-Plattformen.

Datenjournalist

Erstellen Sie ansprechende, interaktive Geschichten mit individuellen Diagrammen und Karten, die Lesern helfen, datengestützte Narrative zu erkunden.

Forschungsanalyst

Erstellen Sie publikationsreife wissenschaftliche Visualisierungen mit präziser Kontrolle über Skalen, Achsen und statistische Darstellungen.

Essayez ces prompts

Einfaches Balkendiagramm

Erstellen Sie ein responsives Balkendiagramm mit D3.js, das Quartalsumsatzdaten anzeigt. Fügen Sie korrete Achsenbeschriftungen, Tooltips beim Hovern hinzu und verwenden Sie eine farbenblinde Zugänglichkeitspalette. Geben Sie den vollständigen React-Component-Code.

Interaktives Streudiagramm

Erstellen Sie ein interaktives Streudiagramm mit D3.js, wobei jeder Punkt ein Produkt darstellt. Fügen Sie Zoom- und Schwenkfunktionen hinzu, Klicken zum Hervorheben einzelner Punkte und eine Legende, die sich dynamisch ändert, wenn Datenfilter geändert werden.

Kraftbasiertes Netzwerkdiagramm

Erstellen Sie ein kraftbasiertes Netzwerkdiagramm, das Beziehungen zwischen Entitäten zeigt. Implementieren Sie Knotenziehen, Kollisionserkennung, benutzerdefinierte Verbindungsstile basierend auf Beziehungstyp und animierte Übergänge, wenn Knoten hinzugefügt oder entfernt werden.

Choroplethenkarte mit Detailansicht

Erstellen Sie eine geografische Choroplethenkarte mit D3.js-Geoprojektionen. Zeigen Sie regionale Daten mit Farbkodierung, fügen Sie Zoomübergänge zwischen Länder- und Bundesstaatenebene hinzu und zeigen Sie Tooltips mit detaillierten Statistiken beim Hovern.

Bonnes pratiques

Löschen Sie immer vorherigen SVG-Inhalt mit selectAll('*').remove() vor dem erneuten Rendern, um doppelte Elemente zu vermeiden
Verwenden Sie die Margin-Konvention für korrekte Achsenabstände und berücksichtigen Sie Label-Überlauf in den Diagrammabmessungen
Implementieren Sie responsives sizing mit ResizeObserver oder Fenstergrößen-Änderungslisteners für adaptive Layouts

Éviter

Dimensionen nicht fest codieren - verwenden Sie immer responsive Container, die sich an die Größe des übergeordneten Elements anpassen
Vermeiden Sie das Erstellen von Skalen inside Loops oder Übergängen - definieren Sie sie einmal und verwenden sie zur Leistungsoptimierung wieder
Verwenden Sie niemals D3 für einfache statische Diagramme - bevorzugen Sie CSS oder leichtgewichtige Bibliotheken für grundlegende Visualisierungen

Foire aux questions

Kann ich diesen Skill mit anderen Frameworks als React verwenden?

Ja. D3.js funktioniert mit jeder JavaScript-Umgebung einschließlich Vue, Svelte, Angular und Vanilla JavaScript. Der Skill bietet Integrationsmuster für jedes Framework.

Benötigt D3.js ein Backend oder einen Server?

Nein. D3.js ist eine clientseitige Bibliothek, die vollständig im Browser läuft. Sie stellen die Daten bereit (als JSON, CSV oder andere Formate) und D3 übernimmt die Visualisierung.

Was ist der Unterschied zwischen D3.js und Diagramm-Bibliotheken wie Chart.js?

D3.js bietet Low-Level-Bausteine für individuelle Visualisierungen mit vollständiger Kontrolle, während Diagramm-Bibliotheken vorgefertigte Diagrammtypen mit einfacheren APIs, aber begrenzten Anpassungsmöglichkeiten bieten.

Wie handhabe ich Echtzeit-Datenaktualisierungen?

Verwenden Sie D3s Daten-Join-Muster mit der .join()-Methode oder das manuelle Enter-Update-Exit-Auswahlmuster. Der Skill bietet Vorlagen für animierte Übergänge bei Datenänderungen.

Kann ich D3.js-Visualisierungen als Bilder exportieren?

Ja. Konvertieren Sie das SVG in ein Canvas-Element und verwenden Sie canvas.toDataURL() um PNG- oder JPEG-Exporte zu generieren. Der Skill kann Implementierungsanleitung für diesen Workflow bereitstellen.

Ist D3.js für mobile Geräte geeignet?

Ja, aber berücksichtigen Sie die Leistung. Verwenden Sie Touch-Events für Interaktionen, vereinfachen Sie Visualisierungen für kleinere Bildschirme und implementieren Sie progressives Rendern für große Datensätze.