d3-viz
Erstellen Sie interaktive Datenvisualisierungen mit D3.js
Également disponible depuis: Doyajin174
Erstellen Sie individuelle Diagramme, Grafiken und Netzwerkvisualisierungen mit präziser Kontrolle. Diese Fähigkeit hilft Ihnen, publikationsreife interaktive Grafiken mit D3.js für jedes JavaScript-Framework zu erstellen.
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 "d3-viz". Create a bar chart showing sales data: Product A (150), Product B (230), Product C (180)
Résultat attendu:
Generiert eine React-Komponente mit D3.js-Balkendiagramm, einschließlich: SVG-Setup, scaleBand x-Achse, scaleLinear y-Achse, axisBottom und axisLeft, gestylte Balken mit steelblue-Füllung, Achsenbeschriftungen für Produkte und Werte
Utilisation de "d3-viz". Build an interactive scatter plot with tooltips
Résultat attendu:
Erstellt D3.js-Streudiagramm mit: an Daten gebundene Kreis-Elemente, Hover-Event-Listener, die Tooltip-Div anzeigen, Übergangseffekte bei Mouseover, berechnete x/y-Skalierungen mit Abstand, Achsengeneratoren und Beschriftungen
Utilisation de "d3-viz". Make a force-directed graph of my network data
Résultat attendu:
Implementiert D3.js-forceSimulation mit: forceManyBody für Knotenabstoßung, forceLink für Kantenverbindungen, forceCenter für Positionierung, verschiebbare Knoten mit Drag-Event-Handlern, dynamische Kantenabstände und Stärkeberechnungen
Audit de sécurité
SûrAll static analysis findings are false positives from documentation files containing code examples. The 'Ruby/shell backtick execution' detections are markdown code blocks with JavaScript examples for D3.js. The 'MD5 hash' and 'C2 keyword' detections are legitimate terms in documentation context (hash properties in JSON, command in D3.js API). No actual security risks present - this is a legitimate visualization skill with safe template code and reference materials.
Score de qualité
Ce que vous pouvez construire
Dashboard-Builder
Erstellen Sie interaktive Dashboards mit Echtzeit-Datenvisualisierung für Geschäftsmetriken, Analysen oder Überwachungssysteme
Forschungsvisualisierer
Transformieren Sie Forschungsdaten in publikationsreife Diagramme und Grafiken für akademische Arbeiten oder Präsentationen
Individueller Chart-Designer
Erstellen Sie einzigartige, markenbasierte Visualisierungen, die über Standard-Chart-Bibliotheken hinausgehen, für Marketing oder Storytelling
Essayez ces prompts
Erstellen Sie ein Balkendiagramm mit D3.js, das monatliche Verkaufsdaten anzeigt. Beschriften Sie die Achsen, fügen Sie einen Titel hinzu und verwenden Sie die Farbe steelblue für die Balken. Das Diagramm sollte 800px breit und 400px hoch sein.
Erstellen Sie ein interaktives Liniendiagramm mit D3.js, das Temperattrends über die Zeit anzeigt. Fügen Sie Hover-Tooltips hinzu, die Werte anzeigen, wenn die Maus über Datenpunkte bewegt wird. Fügen Sie eine Zoom-Funktion hinzu, um bestimmte Zeitbereiche zu untersuchen.
Erstellen Sie ein kraftbasiertes Netzwerkdiagramm mit D3.js, das Beziehungen zwischen Entitäten zeigt. Knoten sollten nach Wichtigkeit skaliert und nach Kategorie eingefärbt werden. Fügen Sie Drag-Funktionalität hinzu, damit Benutzer Knoten neu positionieren können.
Entwerfen Sie ein gestapeltes Flächendiagramm mit D3.js, das mehrere Datenreihen über die Zeit vergleicht. Implementieren Sie sanfte Übergänge bei Datenaktualisierungen. Fügen Sie eine Legende hinzu und verwenden Sie eine farbenblinde Zugänglichkeitspalette.
Bonnes pratiques
- Wählen und löschen Sie immer SVG-Elemente vor dem Rendern, um Speicherlecks und doppelte Visualisierungen zu vermeiden, wenn Komponenten neu gerendert werden
- Verwenden Sie D3.js-Skalierungen für alle Dimensionszuordnungen anstelle manueller Berechnungen - dies gewährleistet konsistente Größen und einfacheres responsives Design
- Implementieren Sie ordnungsgemäße Zugänglichkeit, indem Sie ARIA-Labels, Titel und Beschriftungen zu SVG-Elementen hinzufügen, und testen Sie Farbschemata für farbenblinde Benutzer
Éviter
- Vermeiden Sie direkte Manipulation von React-verwaltetem DOM mit D3.js nach dem ersten Render - dies unterbrechens Reacts virtuelle Abstimmung und verursacht Leistungsprobleme
- Codieren Sie Diagrammabmessungen nicht fest - verwenden Sie immer Container-Abfragen oder Resize-Observer, um Visualisierungen responsiv zu gestalten
- Überspringen Sie niemals Datenvalidierung vor der Bindung an D3-Auswahlen - nicht validierte Daten können zu stillen Fehlern oder kryptischen Rendering-Fehlern führen