Data Visualization

Create a smooth, minimalist data visualization component with the following characteristics:

## Requirements:
- Data visualization charts (bar, line, pie, area, scatter)
- Multiple chart variations with smooth animations
- Customizable data points, colors and scales
- Responsive design that adapts to container
- Dark theme with customizable colors
- Works with real data arrays
- Smooth easing animations
- Responsive axes and labels

## Component Props:
- type: 'bar' | 'line' | 'pie' | 'area' | ...

'use client'

import React, { useState, useEffect } from 'react'

type ChartType = 'bar' | 'line' | 'pie' | 'area' | 'scatter'

interface DataVisualizationProps {
  type?: ChartType
  data?: number[]
  color?: string
  height?: number
  width?: number
  animated?: boolean
}

export default function DataVisualization({
  type = 'bar',
  data = [30, 45, 60, 40, 50, 35],
  color = 'black',
  height = 300,
  width = 500,
  animated = true,
}: DataVisualizationProps) {
  const [displayData, setDispla...

# Data Visualization Component - Documentation

## What is this?
A minimalist data visualization component with multiple chart types and smooth animations. Perfect for dashboards, analytics, and displaying data insights.

## Installation

1. Copy the component code to your project: `components/DataVisualization.tsx`
2. Import it in your page:

```typescript
import DataVisualization from '@/components/DataVisualization'
```

3. Use it:

```typescript
<DataVisualization data={[30, 45, 60, 40, 50, ...