Create D3.js visualizations with animated transitions, tooltips, and responsive design.
npx skills add https://github.com/gahoccode/PRDs --skill d3-charts
Please help me install this Agent Skill. Skill: d3-charts Source: https://github.com/gahoccode/PRDs/tree/main/skills/d3js-charts Command: npx skills add https://github.com/gahoccode/PRDs --skill d3-charts
Master D3.js visualizations—from scatter plots to treemaps—with animations, accessibility, and responsive design.
Build a responsive bar chart with animated transitions and tooltips.
High-intent search queries and answers about installing and using this skill.
D3.js charts use enter-update-exit transitions to animate data changes smoothly. Define scales with scaleLinear or scaleOrdinal, bind data to SVG elements, and apply transition durations to create animated entry effects, updates, and removals for bar, line, and other chart types.
Yes. D3 charts respond to container sizing by recalculating scales and repositioning SVG elements dynamically. Combine responsive design patterns with data-driven scales and modular components to create dashboards that adapt to different screen sizes and update on new data.
D3.js supports scatter plots, pie and donut charts, bar charts with animations, line charts, heatmaps, treemaps, and bar races. Each uses SVG paths, arcs, and scales—pie() for circular layouts, treemap() for hierarchical data, and enter-update-exit for dynamic rendering.
Attach tooltips by rendering SVG text or divs on mouse events. Add legends using scaleOrdinal to map categories to colors, then draw color swatches and labels. Use theme-aware, accessible color palettes to ensure readability and compliance for all users.
SVG fundamentals help but aren't required. D3 abstracts most SVG manipulation through its selection and data-binding API. Understanding basic shapes (rect, circle, path) and transforms speeds development, but D3's API handles coordinate systems and rendering automatically.
aws-samplesProcess and analyze CSV, JSON, and text data files with automated cleaning and transformation.
KaranKathur06Transform datasets into exploratory charts and interactive dashboards with Matplotlib, Seaborn, Plotly, and Dash.
maxrave-devSearch a database of UI styles, palettes, fonts, and stack-specific best practices.
mikeandrusyakGenerate publication-ready charts and runnable code across Python, R, and JavaScript.
