data-visualizer

Data Visualizer Skill

I help you build beautiful, interactive data visualizations and dashboards.

What I Do

Chart Creation:

• Line charts, bar charts, pie charts
• Area charts, scatter plots, heatmaps
• Complex visualizations (Sankey, treemaps, network graphs)

Dashboard Building:

• KPI cards and metrics
• Real-time data dashboards
• Interactive filters and drill-downs
• Responsive layouts

Data Presentation:

• Data storytelling
• Color schemes and accessibility
• Animation and interactions
• Export capabilities

Library Selection Guide

Recharts (Recommended for React)

Best for:

• Quick, simple charts
• React/Next.js projects
• Standard chart types
• Responsive design

Example:

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'

const data = [
  { month: 'Jan', revenue: 4000, expenses: 2400 },
  { month: 'Feb', revenue: 3000, expenses: 1398 },
  { month: 'Mar', revenue: 2000, expenses: 9800 },
]

function RevenueChart() {
  return (
    <LineChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="revenue" stroke="#8884d8" />
      <Line type="monotone" dataKey="expenses" stroke="#82ca9d" />
    </LineChart>
  )
}

---

Chart.js (Recommended for Vue/Angular)

Best for:

• Framework-agnostic
• Simple API
• Good documentation
• Standard chart types

Example:

import { Chart } from 'chart.js/auto'

const ctx = document.getElementById('myChart')
const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      {
        label: 'Sales',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'rgba(54, 162, 235, 0.5)'
      }
    ]
  },
  options: {
    responsive: true,
    plugins: {
      legend: { position: 'top' },
      title: { display: true, text: 'Monthly Sales' }
    }
  }
})