💡 Code Examples & Templates

Ready-to-use code snippets for implementing WIA-DATA-011 visualizations in your projects.

📊 Basic Charts

Bar Chart - Simple Implementation

JavaScript

Create a basic bar chart with custom colors and tooltips using vanilla JavaScript.

import { WIAChart } from '@wia/visualization';

const barChart = new WIAChart({
  type: 'bar',
  container: '#chart-container',
  data: [
    { label: 'Product A', value: 245 },
    { label: 'Product B', value: 189 },
    { label: 'Product C', value: 312 },
    { label: 'Product D', value: 156 }
  ],
  config: {
    title: 'Q4 Sales by Product',
    colors: ['#10B981', '#059669', '#34d399', '#6ee7b7'],
    showLegend: true,
    showTooltip: true,
    animate: true,
    responsive: true
  }
});

barChart.render();
                    

Basic Responsive Animated

Line Chart - Time Series

TypeScript

Multi-line time series chart with zoom and pan capabilities.

import { WIAChart, ChartConfig } from '@wia/visualization';

interface DataPoint {
  date: Date;
  series1: number;
  series2: number;
}

const config: ChartConfig = {
  type: 'line',
  container: '#line-chart',
  data: generateTimeSeriesData(),
  config: {
    title: 'Revenue Trends',
    xAxis: {
      type: 'time',
      format: 'MMM YYYY'
    },
    yAxis: {
      label: 'Revenue ($)',
      format: '$0,0'
    },
    series: [
      { name: 'Product A', color: '#10B981' },
      { name: 'Product B', color: '#3b82f6' }
    ],
    zoom: { enabled: true },
    pan: { enabled: true }
  }
};

const chart = new WIAChart(config);
chart.render();
                    

Time Series Interactive TypeScript

Pie Chart - Market Share

JavaScript

Donut chart with percentage labels and interactive legend.

const pieChart = new WIAChart({
  type: 'pie',
  container: '#pie-chart',
  data: [
    { label: 'Chrome', value: 65 },
    { label: 'Firefox', value: 18 },
    { label: 'Safari', value: 12 },
    { label: 'Edge', value: 5 }
  ],
  config: {
    title: 'Browser Market Share',
    donut: true,
    donutRatio: 0.5,
    showLabels: true,
    labelFormat: 'percentage',
    legend: {
      position: 'right',
      interactive: true
    },
    colors: [
      '#10B981', '#3b82f6',
      '#f59e0b', '#ef4444'
    ]
  }
});

pieChart.render();
                    

Donut Legend Percentage

Scatter Plot - Correlation

Python

Scatter plot with trend line and data point clustering.

from wia_visualization import WIAChart

chart = WIAChart(
    chart_type='scatter',
    container='#scatter-chart',
    data=[
        {'x': 10, 'y': 20, 'size': 15, 'label': 'A'},
        {'x': 15, 'y': 35, 'size': 25, 'label': 'B'},
        {'x': 20, 'y': 28, 'size': 18, 'label': 'C'},
        # ... more data points
    ],
    config={
        'title': 'Performance vs. Cost',
        'xAxis': {'label': 'Cost ($)'},
        'yAxis': {'label': 'Performance'},
        'showTrendLine': True,
        'trendLineColor': '#10B981',
        'pointSize': 'variable',
        'clustering': {
            'enabled': True,
            'threshold': 0.3
        }
    }
)

chart.render()
chart.export('scatter.png', quality=95)
                    

Python Trend Line Clustering

🔥 Advanced Examples

Real-time Dashboard

JavaScript

WebSocket-powered real-time dashboard with live data updates.

import { WIADashboard, WebSocketClient } from '@wia/visualization';

const dashboard = new WIADashboard({
  container: '#dashboard',
  layout: 'grid',
  charts: [
    {
      id: 'metrics',
      type: 'metric',
      size: { cols: 4, rows: 1 }
    },
    {
      id: 'trends',
      type: 'line',
      size: { cols: 8, rows: 2 }
    },
    {
      id: 'distribution',
      type: 'pie',
      size: { cols: 4, rows: 2 }
    }
  ]
});

// Connect to real-time data
const ws = new WebSocketClient({
  url: 'wss://api.example.com/stream',
  onData: (data) => {
    dashboard.update(data);
  }
});

ws.connect();
                    

Real-time WebSocket Dashboard

Correlation Heatmap

Correlation matrix heatmap with color scale and annotations.

library(wiavis)

# Create correlation heatmap
heatmap <- wia_chart(
  type = "heatmap",
  data = correlation_matrix,
  config = list(
    title = "Feature Correlations",
    colorScale = list(
      type = "diverging",
      colors = c("#ef4444", "#ffffff", "#10B981"),
      domain = c(-1, 0, 1)
    ),
    annotations = TRUE,
    annotationFormat = ".2f",
    cellBorders = TRUE
  )
)

wia_render(heatmap, "heatmap.html")
                    

R Heatmap Statistics

Network Visualization

JavaScript

Force-directed network graph with node clustering and edge weights.

const network = new WIAChart({
  type: 'network',
  container: '#network',
  data: {
    nodes: [
      { id: 1, label: 'Node A', group: 1 },
      { id: 2, label: 'Node B', group: 1 },
      { id: 3, label: 'Node C', group: 2 }
    ],
    edges: [
      { source: 1, target: 2, weight: 0.8 },
      { source: 2, target: 3, weight: 0.6 }
    ]
  },
  config: {
    physics: {
      enabled: true,
      solver: 'forceDirected'
    },
    nodes: {
      size: 'degree',
      colorByGroup: true
    },
    edges: {
      width: 'weight',
      arrows: true
    }
  }
});

network.render();
                    

Network Graph Physics

Choropleth Map

Python

Interactive choropleth map with tooltips and zoom controls.

from wia_visualization import WIAMap

map_chart = WIAMap(
    map_type='choropleth',
    container='#map',
    data=geo_data,
    config={
        'title': 'Sales by Region',
        'projection': 'mercator',
        'colorScale': {
            'type': 'sequential',
            'scheme': 'greens',
            'steps': 7
        },
        'zoom': {
            'enabled': True,
            'extent': [1, 8]
        },
        'tooltip': {
            'fields': ['region', 'sales', 'growth'],
            'format': {
                'sales': '$0,0',
                'growth': '+0.0%'
            }
        }
    }
)

map_chart.render()
                    

Geospatial Map Python

🎯 Use Case Examples

📈 Financial Dashboard

Complete implementation of a financial analytics dashboard with multiple chart types, real-time price updates, and technical indicators.

React + TypeScript

import React, { useEffect, useState } from 'react';
import { WIADashboard, useRealtimeData } from '@wia/visualization-react';

const FinancialDashboard: React.FC = () => {
  const { data, connect } = useRealtimeData('wss://api.stocks.com/stream');

  useEffect(() => {
    connect({ symbols: ['AAPL', 'GOOGL', 'MSFT'] });
  }, []);

  return (
    
  );
};
            

🔬 Scientific Data Analysis

Multi-panel visualization for scientific experiments with statistical overlays, error bars, and publication-quality export.

Python + Matplotlib

import wia_visualization as wia
import numpy as np

# Prepare experiment data
x = np.linspace(0, 10, 100)
y = np.sin(x) + np.random.normal(0, 0.1, 100)
errors = np.random.uniform(0.05, 0.15, 100)

# Create multi-panel figure
fig = wia.Figure(
    layout='scientific',
    size=(12, 8),
    dpi=300
)

# Main plot with error bars
fig.add_panel(
    position=[0, 0, 2, 1],
    chart=wia.Chart(
        type='scatter',
        data={'x': x, 'y': y, 'error': errors},
        config={
            'showErrorBars': True,
            'trendLine': 'polynomial',
            'trendDegree': 3
        }
    )
)

# Export for publication
fig.export('experiment_results.pdf', format='pdf')
fig.export('experiment_results.svg', format='svg')
            

🎓 Learning Resources

For more examples and detailed tutorials, check out:

English eBook: 8 comprehensive chapters with 50+ examples
Korean eBook: 한국어로 된 상세한 가이드 및 예제
GitHub Repository: 100+ production-ready templates
Interactive Playground: Test and modify examples in real-time

💡 Code Examples & Templates

🚀 Quick Start

📊 Basic Charts

🔥 Advanced Examples

🎯 Use Case Examples

📈 Financial Dashboard

🔬 Scientific Data Analysis

🎓 Learning Resources