Data Visualization with React

function BarChart({ data, height = 200 }) {
  const maxValue = Math.max(...data.map(d => d.value))
  
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', height }}>
      {data.map((item) => {
        const heightPercent = (item.value / maxValue) * 100
        
        return (
          <div key={item.label} style={{ flex: 1, marginRight: 10 }}>
            <div
              style={{
                height: `${heightPercent}%`,
                backgroundColor: item.color,
                borderRadius: '4px 4px 0 0',
                transition: 'height 0.3s ease'
              }}
            />
            <div style={{ textAlign: 'center', marginTop: 5 }}>
              {item.label}
            </div>
          </div>
        )
      })}
    </div>
  )
}

function LineChart({ data }) {
  const width = 400
  const height = 200
  const padding = 20
  
  const maxY = Math.max(...data)
  const minY = Math.min(...data)
  
  const getX = (index) => 
    padding + (index / (data.length - 1)) * (width - 2 * padding)
  
  const getY = (value) => 
    height - padding - ((value - minY) / (maxY - minY)) * (height - 2 * padding)
  
  const pathD = data.map((point, i) => {
    const x = getX(i)
    const y = getY(point)
    return i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`
  }).join(' ')
  
  return (
    <svg width={width} height={height}>
      <path
        d={pathD}
        fill="none"
        stroke="#10b981"
        strokeWidth="3"
      />
      {data.map((point, i) => (
        <circle
          key={i}
          cx={getX(i)}
          cy={getY(point)}
          r="4"
          fill="#10b981"
        />
      ))}
    </svg>
  )
}

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'
 
function MyChart() {
  const data = [
    { name: 'Jan', value: 400 },
    { name: 'Feb', value: 300 },
    { name: 'Mar', value: 600 }
  ]
 
  return (
    <LineChart width={500} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
    </LineChart>
  )
}

import { Line } from 'react-chartjs-2'
 
function MyChart() {
  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Sales',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  }
 
  return <Line data={data} />
}

import { useEffect, useRef } from 'react'
import * as d3 from 'd3'
 
function D3Chart({ data }) {
  const svgRef = useRef()
 
  useEffect(() => {
    const svg = d3.select(svgRef.current)
    // D3 visualization code here
  }, [data])
 
  return <svg ref={svgRef} width={500} height={300} />
}