Beautiful D3 + ReactData Visualizations
d3-ui is a modern collection of composable React components powered by D3. Build beautiful, interactive data visualizations with an easy-to-use API.
Why d3-ui?
Easy to Use
Intuitive compound component API that's familiar to React developers.
TypeScript
Fully typed components with excellent IDE support and autocomplete.
Customizable
Styled with Tailwind CSS. Customize colors, sizes, and styling easily.
Performant
Optimized rendering with smooth D3 transitions and animations.
Composable
Build complex visualizations by composing simple, reusable components.
Interactive
Built-in tooltips, legends, and smooth interactions out of the box.
Available Components
Component Examples
Explore interactive examples of all available components
Heatmap
Visualize dense data grids with color gradients. Perfect for showing matrix data patterns.
Basic Heatmap
Hidden Labels
Using variant="none"
Custom Formatting
Format cell values with labelFormatter
Large Heatmap (600x600)
Multi-dataset visualization with high-contrast colors
Line Chart
Track trends over time with smooth, responsive line charts.
Multiple Lines
Sales, profit, and loss comparison
Single Line
Revenue over 12 months
Custom Labels
Formatted with currency symbol
Large Chart (600x300)
Multiple lines with labels in high-resolution visualization
Area Chart
Show cumulative data and trends with stacked or overlapping areas.
Single Series
Revenue
Two Series
Revenue and expenses
Three Series
Revenue, expenses, profit
Large Chart (600x400)
Multi-series stacked visualization
Bar Chart
Compare values across categories with intuitive bar visualizations.
Grouped Bars
Apples and oranges
Single Series
Apples only
Interactive
Adjust with slider
Large Chart (600x300)
Multi-series visualization with detailed breakdown
Pie Chart
Visualize parts of a whole with elegant pie and donut charts.
Simple Pie
Single value
Multi-segment
Low, medium, high
Donut Chart
Completed vs pending
Large Chart (600x300)
Donut chart with center label
Scatter Plot
Explore correlations between variables and identify patterns.
Multiple Series
Sales, profit, and loss
Single Series
Revenue distribution
Custom Labels
With currency formatting
Large Plot (600x300)
Multi-series visualization with high contrast
Treemap Examples
The Treemap component visualizes hierarchical data using nested rectangles. Examples show how different props and styles change its appearance.
Basic Treemap
Nested Treemap
Shows hierarchical data with children nodes.
Custom Labels
Format labels with a unit or symbol.
Dark Mode Treemap
Larger treemap (600x400) for high-contrast visualization.
Gauge Chart Examples
The GaugeChart component visualizes values on a semi-circular gauge. Below are examples with multiple segments, dynamic needles, and dark mode.
Simple Gauge
Shows simple gauge with a needle for current value.
Multi-segment Gauge
Gauge with Low / Medium / High segments, demonstrating multiple ranges.
Dynamic Needle
Use the slider to change the needle value dynamically.
Dark Mode Gauge
Large gauge (600x300) for high contrast viewing.
Ready to get started?
Check out our getting started guide to learn how to install and use d3-ui in your project.
View Getting Started Guide