A comprehensive D3-based chart library with 30 customizable chart types including advanced analytics, interactive visualizations, and statistical charts
npm install d3-charts-viz-libraryA comprehensive, production-ready D3-based chart library with 30 chart types for creating stunning data visualizations.
- 🎯 30 Chart Types: Complete visualization suite from basic Bar/Line charts to advanced Sunburst, Parallel Coordinates, Stream, Violin, and Network visualizations
- 🎨 Highly Customizable: Extensive configuration options for colors, animations, and styling
- 📱 Responsive Design: Charts automatically adapt to container size changes
- 🖱️ Interactive: Built-in hover effects, tooltips, zoom, and click handlers
- 📊 Smart Data Processing: Flexible data format support with automatic validation
- 🎭 Smooth Animations: Beautiful entrance animations, transitions, and particle effects
- 🛡️ Production Ready: Comprehensive error handling and edge case management
- ⚡ Performance Optimized: Efficient rendering with D3.js v7+ under the hood
- 🔧 Framework Agnostic: Works with React, Vue, Angular, or vanilla JavaScript
``bash`
npm install d3-charts-viz-library
Explore all chart types with live examples and interactive controls:
`bashClone the repository
git clone https://github.com/amtshkumar/chartlibrary.git
cd chartlibrary
The playground includes:
- 📊 Live chart examples with real-time updates
- 🎮 Interactive controls for all chart options
- 📝 Copy-to-clipboard code examples
- 🔄 Data generators for testing different scenarios
- 🎨 Visual customization options
✨ Key Features
$3
- Comprehensive error handling and validation
- Graceful handling of edge cases and invalid data
- Memory-efficient rendering with optimized animations
- Cross-browser compatibility (Chrome 60+, Firefox 55+, Safari 12+, Edge 79+)$3
- Smooth entrance and exit transitions
- Physics-based particle systems
- Breathing and pulsing effects
- Interactive hover states and tooltips$3
- Multiple data format compatibility
- Automatic data validation and sanitization
- Support for time-series, categorical, and network data
- Real-time data updates with smooth transitionsQuick Start
`javascript
import { BarChart } from 'd3-charts-viz-library';// Sample data
const data = [
{ label: 'A', value: 30 },
{ label: 'B', value: 45 },
{ label: 'C', value: 25 },
{ label: 'D', value: 60 }
];
// Create chart
const chart = new BarChart('#chart-container', {
width: 800,
height: 400,
barColor: '#3498db'
});
chart.setData(data).render();
`📊 Chart Types
The library includes 30 chart types, from basic visualizations to advanced statistical and network charts:
$3
Basic Charts (7): BarChart, LineChart, PieChart, DonutChart, ScatterPlot, AreaChart, Histogram
Advanced Visualizations (8): SankeyChart, LiquidFillChart, RadialRemainderChart, ChordDiagramChart, ForceDirectedChart, AnimatedBumpChart, RadialTimelineChart, FlowContainersChart
Specialized Charts (10): SpiralChart, RadialStackedBarChart, CalendarHeatmapChart, AnimatedBubbleChart, TreemapChart, GaugeChart, WaterfallChart, RadarChart, HeatmapChart
Advanced Analytics (5): SunburstChart, ParallelCoordinatesChart, StreamChart, ViolinChart, NetworkChart
$3
#### Bar Chart
`javascript
import { BarChart } from 'd3-charts-viz-library';const barChart = new BarChart('#container', {
width: 800,
height: 400,
barColor: '#3498db',
hoverColor: '#2980b9',
orientation: 'vertical', // or 'horizontal'
showValues: true
});
barChart.setData(data).render();
`$3
`javascript
import { LineChart } from 'd3-charts-viz-library';const lineChart = new LineChart('#container', {
width: 800,
height: 400,
lineColor: '#e74c3c',
showPoints: true,
showArea: false,
curve: d3.curveCardinal
});
const lineData = [
{ x: 0, y: 10 },
{ x: 1, y: 25 },
{ x: 2, y: 15 },
{ x: 3, y: 30 }
];
lineChart.setData(lineData).render();
`$3
`javascript
import { PieChart } from 'd3-charts-viz-library';const pieChart = new PieChart('#container', {
width: 600,
height: 600,
showLabels: true,
showPercentages: true
});
pieChart.setData(data).render();
`$3
`javascript
import { DonutChart } from 'd3-charts-viz-library';const donutChart = new DonutChart('#container', {
width: 600,
height: 600,
innerRadius: 0.5,
showCenterText: true,
centerText: 'Total: 160'
});
donutChart.setData(data).render();
`$3
`javascript
import { ScatterPlot } from 'd3-charts-viz-library';const scatterPlot = new ScatterPlot('#container', {
width: 800,
height: 400,
pointRadius: 5,
showTrendLine: true
});
const scatterData = [
{ x: 10, y: 20, label: 'Point 1' },
{ x: 15, y: 35, label: 'Point 2' },
{ x: 20, y: 25, label: 'Point 3' }
];
scatterPlot.setData(scatterData).render();
`$3
`javascript
import { AreaChart } from 'd3-charts-viz-library';const areaChart = new AreaChart('#container', {
width: 800,
height: 400,
areaColor: 'rgba(52, 152, 219, 0.6)',
showLine: true,
showPoints: false
});
areaChart.setData(lineData).render();
`$3
`javascript
import { Histogram } from 'd3-charts-viz-library';const histogram = new Histogram('#container', {
width: 800,
height: 400,
bins: 20,
showDensity: true
});
const histogramData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Raw values
histogram.setData(histogramData).render();
`$3
#### Sankey Chart
Flow diagrams showing data movement between nodes.
`javascript
import { SankeyChart } from 'd3-charts-viz-library';const sankeyChart = new SankeyChart('#container', {
width: 800,
height: 600,
nodeWidth: 15,
nodePadding: 10
});
const sankeyData = {
nodes: [
{ name: 'Source A' },
{ name: 'Source B' },
{ name: 'Target X' },
{ name: 'Target Y' }
],
links: [
{ source: 0, target: 2, value: 10 },
{ source: 1, target: 3, value: 15 }
]
};
sankeyChart.setData(sankeyData).render();
`#### Liquid Fill Chart
Animated liquid-filled containers with wave effects.
`javascript
import { LiquidFillChart } from 'd3-charts-viz-library';const liquidChart = new LiquidFillChart('#container', {
width: 400,
height: 400,
liquidColor: '#3498db',
showWaves: true,
animationDuration: 2000
});
liquidChart.setData({ percentage: 0.75, label: '75%' }).render();
`#### Chord Diagram Chart
Circular layout showing relationships between entities.
`javascript
import { ChordDiagramChart } from 'd3-charts-viz-library';const chordChart = new ChordDiagramChart('#container', {
width: 600,
height: 600,
innerRadius: 200,
outerRadius: 220
});
const matrix = [
[0, 5, 6, 4],
[7, 0, 4, 2],
[8, 4, 0, 8],
[3, 5, 9, 0]
];
chordChart.setData({ matrix, labels: ['A', 'B', 'C', 'D'] }).render();
`#### Force Directed Chart
Network visualization with physics-based node positioning.
`javascript
import { ForceDirectedChart } from 'd3-charts-viz-library';const forceChart = new ForceDirectedChart('#container', {
width: 800,
height: 600,
showParticles: true,
showGlowEffects: true,
enableZoom: true
});
const networkData = {
economicSchedule: [
{ remainder: 100000, distribution: 5000 },
{ remainder: 110000, distribution: 5500 }
]
};
forceChart.setData(networkData).render();
`#### Radial Timeline Chart
Circular timeline with animated arcs and data points.
`javascript
import { RadialTimelineChart } from 'd3-charts-viz-library';const radialChart = new RadialTimelineChart('#container', {
width: 500,
height: 500,
innerRadius: 40,
showGridLines: true,
animationDuration: 1000
});
const timelineData = {
economicSchedule: [
{ remainder: 100000, distribution: 5000 },
{ remainder: 110000, distribution: 5500 },
{ remainder: 125000, distribution: 6000 }
]
};
radialChart.setData(timelineData).render();
`#### Flow Containers Chart
Animated containers with liquid filling and particle effects.
`javascript
import { FlowContainersChart } from 'd3-charts-viz-library';const flowChart = new FlowContainersChart('#container', {
width: 800,
height: 600,
showParticles: true,
showBubbles: true,
animationDuration: 2000
});
const containerData = {
containers: [
{ year: 2024, amount: 120000, fillPercentage: 0.65 },
{ year: 2025, amount: 135000, fillPercentage: 0.72 }
]
};
flowChart.setData(containerData).render();
`#### Spiral Chart 🆕
Spiral visualization with floating particles and breathing animations.
`javascript
import { SpiralChart } from 'd3-charts-viz-library';const spiralChart = new SpiralChart('#container', {
width: 800,
height: 600,
turns: 4,
showParticles: true,
showFlowLines: true,
showBreathing: true,
centerLabel: 'Data Flow'
});
const spiralData = {
timeSeries: [
{ period: 1, primaryValue: 100000, secondaryValue: 25000 },
{ period: 2, primaryValue: 110000, secondaryValue: 28000 },
{ period: 3, primaryValue: 125000, secondaryValue: 32000 }
]
};
spiralChart.setData(spiralData).render();
`#### Animated Bump Chart
Animated area chart showing component breakdown over time.
`javascript
import { AnimatedBumpChart } from 'd3-charts-viz-library';const bumpChart = new AnimatedBumpChart('#container', {
width: 800,
height: 500,
principalRatio: 0.6,
showDistributionBars: true,
showPoints: true
});
bumpChart.setData(timelineData).render();
`#### Radial Remainder Chart
Spiral visualization showing growth patterns over time.
`javascript
import { RadialRemainderChart } from 'd3-charts-viz-library';const radialRemainderChart = new RadialRemainderChart('#container', {
width: 600,
height: 600,
spiralRotations: 2,
animationDuration: 3000
});
radialRemainderChart.setData(timelineData).render();
`#### Radial Stacked Bar Chart
Concentric rings with stacked segments for multi-category data visualization.
`javascript
import { RadialStackedBarChart } from 'd3-charts-viz-library';const radialStackedBarChart = new RadialStackedBarChart('#container', {
width: 600,
height: 600,
colorScheme: 'blue', // 'blue', 'orange', or 'green'
animated: true,
showLegend: true,
showTooltip: true
});
const data = [
{
year: 2024,
categoryA: 50000,
categoryB: 75000,
categoryC: 5000,
totalValue: 130000
},
{
year: 2025,
categoryA: 52500,
categoryB: 82000,
categoryC: 5200,
totalValue: 139700
},
{
year: 2026,
categoryA: 55125,
categoryB: 89500,
categoryC: 5400,
totalValue: 150025
}
];
radialStackedBarChart.setData(data).render();
`#### Calendar Heatmap Chart
GitHub-style calendar visualization for displaying activity patterns over time.
`javascript
import { CalendarHeatmapChart } from 'd3-charts-viz-library';const calendarChart = new CalendarHeatmapChart('#container', {
width: 900,
height: 200,
colorScheme: 'green', // 'green', 'blue', 'purple', or 'orange'
year: 2024,
showTooltip: true,
showLegend: true,
animated: true
});
const data = [
{ date: '2024-01-15', value: 12 },
{ date: '2024-02-20', value: 8 },
{ date: '2024-03-10', value: 15 },
{ date: '2024-04-05', value: 22 },
{ date: '2024-05-12', value: 18 },
{ date: '2024-06-08', value: 25 },
{ date: '2024-07-14', value: 30 },
{ date: '2024-08-22', value: 28 },
{ date: '2024-09-17', value: 20 },
{ date: '2024-10-11', value: 16 },
{ date: '2024-11-25', value: 14 },
{ date: '2024-12-18', value: 10 }
];
calendarChart.setData(data).render();
`#### Animated Bubble Chart
Time-based animated bubble chart with smooth transitions between periods.
`javascript
import { AnimatedBubbleChart } from 'd3-charts-viz-library';const animatedBubbleChart = new AnimatedBubbleChart('#container', {
width: 900,
height: 600,
xLabel: 'Gain Realized',
yLabel: 'Tax Due',
timeField: 'period',
xField: 'x',
yField: 'y',
sizeField: 'size',
categoryField: 'category',
animated: true,
showLegend: true,
duration: 750
});
const bubbleData = [
// Period 0
{ id: 'stock', category: 'Stock', period: 0, x: 10000, y: 2000, size: 500000 },
{ id: 'realestate', category: 'Real Estate', period: 0, x: 15000, y: 3000, size: 1000000 },
{ id: 'crypto', category: 'Crypto', period: 0, x: 4000, y: 1200, size: 150000 },
// Period 1
{ id: 'stock', category: 'Stock', period: 1, x: 12000, y: 2400, size: 540000 },
{ id: 'realestate', category: 'Real Estate', period: 1, x: 16500, y: 3300, size: 1050000 },
{ id: 'crypto', category: 'Crypto', period: 1, x: 5200, y: 1560, size: 172000 }
];
animatedBubbleChart.setData(bubbleData).setPeriod(0);
// Animate through periods
animatedBubbleChart.setPeriod(1); // Switch to period 1 with smooth animation
`Multi-Series Charts
$3
`javascript
const seriesData = [
{
name: 'Series 1',
color: '#3498db',
data: [{ x: 0, y: 10 }, { x: 1, y: 25 }, { x: 2, y: 15 }]
},
{
name: 'Series 2',
color: '#e74c3c',
data: [{ x: 0, y: 5 }, { x: 1, y: 20 }, { x: 2, y: 30 }]
}
];lineChart.renderMultiSeries(seriesData);
`$3
`javascript
areaChart.renderStacked(seriesData);
`Utility Functions
The library includes utility functions for data processing:
`javascript
import { DataUtils, ColorUtils, MathUtils } from 'd3-charts-viz-library';// Generate sample data
const sampleData = DataUtils.generateSampleData('linear', 50);
// Parse CSV data
const csvData = DataUtils.parseCSV(csvString, 'x', 'y', 'label');
// Generate color palette
const colors = ColorUtils.generatePalette(5, 'category10');
// Calculate statistics
const stats = MathUtils.stats(data, 'value');
`Configuration Options
$3
All charts inherit from
BaseChart and support these common options:`javascript
{
width: 800, // Chart width
height: 400, // Chart height
margin: { // Chart margins
top: 20,
right: 30,
bottom: 40,
left: 40
},
backgroundColor: '#ffffff', // Background color
onClick: (data, event) => {} // Click handler
}
`$3
Each chart type has its own specific options. Refer to the individual chart documentation for details.
Responsive Charts
Make your charts responsive:
`javascript
import { DOMUtils } from 'd3-charts-viz-library';const chart = new BarChart('#container');
const container = document.getElementById('container');
// Make chart responsive
DOMUtils.makeResponsive(chart, container);
`Exporting Charts
Export charts as images:
`javascript
import { DOMUtils } from 'd3-charts-viz-library';const svgElement = document.querySelector('#container svg');
DOMUtils.exportAsImage(svgElement, 'my-chart.png');
`Animation
Charts come with built-in animations. You can customize animation timing:
`javascript
const chart = new BarChart('#container', {
animationDuration: 1000,
animationDelay: 100
});
`Events
Charts support various events:
`javascript
const chart = new BarChart('#container', {
onClick: (data, event) => {
console.log('Clicked:', data);
},
onHover: (data, event) => {
console.log('Hovered:', data);
}
});
`Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
Dependencies
- D3.js v7.8.5+
Contributing
1. Fork the repository
2. Create your feature branch (
git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)This project is licensed under the MIT License - see the LICENSE file for details.
This library has undergone comprehensive testing and bug fixes to ensure production reliability:
For questions and support, please open an issue on GitHub.