Data Visualizer

What it does

Data Visualizer reads raw structured data — CSV rows, JSON arrays, or plain tabular text — and produces a complete, runnable visualization configuration. It selects the most appropriate chart type automatically based on the dimensionality and data types it detects: time-series data becomes a line chart, categorical comparisons become bar charts, distributions become histograms, and proportional breakdowns become pie or donut charts.

For each chart it generates a complete library-specific config object, labels both axes with inferred or provided names, sets appropriate tick formatting (currency, percentages, date ranges), and configures a responsive tooltip. It concludes with a brief explanation of why that chart type was chosen and what visual insight it reveals — useful when presenting to non-technical stakeholders.

How to install

npx skills add user/data-visualizer

How to use

Paste your raw data and specify the target library:

# Chart.js — monthly revenue data
Visualize this data using Chart.js:

month, revenue, target
Jan, 42000, 40000
Feb, 38500, 40000
Mar, 51200, 45000
Apr, 49800, 45000
May, 63100, 50000

Example Chart.js config output:

// Chart type: Line — time-series with 2 numeric series
const config = {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [
      {
        label: 'Revenue',
        data: [42000, 38500, 51200, 49800, 63100],
        borderColor: '#10B981',
        tension: 0.3,
        fill: false
      },
      {
        label: 'Target',
        data: [40000, 40000, 45000, 45000, 50000],
        borderColor: '#6B7280',
        borderDash: [6, 3],
        tension: 0,
        fill: false
      }
    ]
  },
  options: {
    responsive: true,
    plugins: { legend: { position: 'top' } },
    scales: {
      y: { ticks: { callback: v => '$' + v.toLocaleString() } }
    }
  }
};

Supported libraries

• Chart.js — CDN-ready JavaScript config objects, responsive by default
• D3.js v7 — full SVG selection and scale code, including axes
• Matplotlib — Python figure code with plt.show() ready to run
• Recharts — React component JSX with props pre-filled