Chart Types

Perspective Viewer D3FC provides 12 distinct chart types, each optimized for different data patterns and visualization needs. All charts are implemented as functions that take a container and settings, then render using D3FC components.

Capabilities

Chart Function Interface

All chart implementations follow a common function signature and plugin metadata structure.

interface Chart {
  /** 
   * Main chart rendering function
   * @param container - D3 selection of the HTML container element
   * @param settings - Complete settings object with data, styling, and configuration
   */
  (container: HTMLSelection, settings: Settings): void;
  
  /** Plugin metadata describing chart capabilities and constraints */
  plugin?: {
    /** Display name shown in UI */
    name: string;
    /** Category for grouping charts */
    category: string;
    /** Maximum data cells for efficient rendering */
    max_cells: number;
    /** Maximum columns the chart can handle */
    max_columns: number;
    /** Whether to show warnings for large datasets */
    render_warning: boolean;
    /** Initial configuration requirements */
    initial: {
      /** Expected data type */
      type?: string;
      /** Minimum required columns */
      count?: number;
      /** Default axis/column names */
      names: string[];
    };
    /** Selection interaction mode */
    selectMode?: string;
  };
  
  /** Optional: Check if chart supports column styling for given type */
  can_render_column_styles?(type: Type, group?: string): boolean;
  
  /** Optional: Return column styling controls for given type */
  column_style_controls?(type: Type, group?: string): unknown;
}

Y-Axis Charts

Charts that primarily use the Y-axis for data values, with X-axis typically for categories or time.

Y Area Chart

Renders area charts showing data trends over time or categories with filled regions below the line.

interface YAreaChart extends Chart {
  plugin: {
    name: "Y Area";
    category: "Y Chart";
    max_cells: 4000;
    max_columns: 50;
    render_warning: true;
    initial: {
      names: ["Y Axis"];
    };
  };
}

Best for: Time series data, cumulative values, trend visualization with emphasis on volume/magnitude.

Y Line Chart

Renders line charts connecting data points to show trends and patterns over continuous data.

interface YLineChart extends Chart {
  plugin: {
    name: "Y Line";
    category: "Y Chart";
    max_cells: 4000;
    max_columns: 50;
    render_warning: true;
    initial: {
      names: ["Y Axis"];
    };
  };
}

Best for: Time series analysis, trend identification, comparing multiple data series.

Y Bar Chart (Column Chart)

Renders vertical bar charts (columns) for comparing discrete categories or values.

interface YBarChart extends Chart {
  plugin: {
    name: "Y Bar";
    category: "Y Chart";  
    max_cells: 1000;
    max_columns: 50;
    render_warning: true;
    initial: {
      names: ["Y Axis"];
    };
  };
}

Best for: Categorical comparisons, rankings, discrete value distributions.

Y Scatter Plot

Renders scatter plots with Y-axis values, useful for showing distribution and correlation patterns.

interface YScatterChart extends Chart {
  plugin: {
    name: "Y Scatter";
    category: "Y Chart";
    max_cells: 4000; 
    max_columns: 50;
    render_warning: true;
    initial: {
      names: ["Y Axis"];
    };
  };
}

Best for: Distribution analysis, outlier identification, pattern recognition in single-dimension data.

X-Axis Charts

Charts that use the X-axis as the primary data dimension.

X Bar Chart

Renders horizontal bar charts for categorical comparisons with emphasis on readability of category labels.

interface XBarChart extends Chart {
  plugin: {
    name: "X Bar";
    category: "X Chart";
    max_cells: 1000;
    max_columns: 50; 
    render_warning: true;
    initial: {
      names: ["X Axis"];
    };
  };
}

Best for: Long category names, ranking comparisons, when horizontal layout improves readability.

XY Charts

Charts that use both X and Y axes for data values, enabling two-dimensional analysis.

XY Line Chart

Renders line charts with both X and Y data dimensions for true two-dimensional trend analysis.

interface XYLineChart extends Chart {
  plugin: {
    name: "X/Y Line";
    category: "X/Y Chart";
    max_cells: 50000;
    max_columns: 50;
    render_warning: true;
    initial: {
      type: "number";
      count: 2;
      names: ["X Axis", "Y Axis", "Tooltip"];
    };
    selectMode: "toggle";
  };
}

Best for: Two-dimensional relationships, parametric data, scientific plotting.

XY Scatter Plot

Renders scatter plots with both X and Y dimensions for correlation and distribution analysis.

interface XYScatterChart extends Chart {
  plugin: {
    name: "X/Y Scatter";
    category: "X/Y Chart";
    max_cells: 50000;
    max_columns: 50;
    render_warning: true;
    initial: {
      type: "number";
      count: 2;
      names: ["X Axis", "Y Axis", "Color", "Size", "Symbol", "Label", "Tooltip"];
    };
    selectMode: "toggle";
  };
}

Best for: Correlation analysis, regression analysis, two-dimensional clustering, outlier detection.

Financial Charts

Specialized charts for financial and OHLC (Open/High/Low/Close) data visualization.

OHLC Chart

Renders Open/High/Low/Close charts with traditional bar notation for financial data.

interface OHLCChart extends Chart {
  plugin: {
    name: "OHLC";
    category: "Y Chart";
    max_cells: 3500;
    max_columns: 50;
    render_warning: true;
    initial: {
      type: "number";
      count: 1;
      names: ["Open", "Close", "High", "Low", "Tooltip"];
    };
    selectMode: "toggle";
  };
}

Best for: Stock price analysis, financial time series, trading data visualization.

Candlestick Chart

Renders candlestick charts with filled/hollow candles for enhanced financial data visualization.

interface CandlestickChart extends Chart {
  plugin: {
    name: "Candlestick";
    category: "Y Chart";
    max_cells: 4000;
    max_columns: 50;
    render_warning: true;
    initial: {
      type: "number";
      count: 1;
      names: ["Open", "Close", "High", "Low", "Tooltip"];
    };
    selectMode: "toggle";
  };
}

Best for: Technical analysis, price pattern recognition, detailed financial data exploration.

Heat Maps

Two-dimensional data visualization using color intensity to represent values.

Heatmap

Renders color-coded heatmaps for visualizing data density and patterns across two dimensions.

interface HeatmapChart extends Chart {
  plugin: {
    name: "Heatmap";
    category: "Hierarchical Chart";
    max_cells: 50000;
    max_columns: 500;
    render_warning: true;
    initial: {
      names: ["Color"];
    };
  };
}

Best for: Data density visualization, correlation matrices, geographic data, pattern identification across two categorical dimensions.

Hierarchical Charts

Charts designed for visualizing hierarchical and tree-structured data.

Sunburst Chart

Renders radial hierarchical charts showing nested data relationships in concentric circles.

interface SunburstChart extends Chart {
  plugin: {
    name: "Sunburst";
    category: "Hierarchical Chart";
    max_cells: 7500;
    max_columns: 50;
    render_warning: true;
    initial: {
      type: "number";
      count: 1;
      names: ["Size", "Color", "Tooltip"];
    };
  };
}

Best for: hierarchical data exploration, organizational structures, nested category analysis, part-to-whole relationships with hierarchy.

Treemap Chart

Renders rectangular hierarchical charts using nested rectangles sized by data values.

interface TreemapChart extends Chart {
  plugin: {
    name: "Treemap";
    category: "Hierarchical Chart";
    max_cells: 3000;
    max_columns: 50;
    render_warning: true;
    initial: {
      type: "number";
      count: 1;
      names: ["Size", "Color", "Tooltip"];
    };
  };
}

Best for: Hierarchical data with size comparisons, portfolio analysis, file system visualization, budget breakdowns.

Chart Selection Guidelines

Data Type Suitability

Continuous Time Series Data:

• Y Line, Y Area, XY Line charts
• OHLC, Candlestick for financial data

Categorical Comparisons:

• Y Bar (Column), X Bar charts
• Consider bar orientation based on label length

Distribution Analysis:

• Y Scatter, XY Scatter charts
• Heatmap for two-dimensional distributions

Hierarchical Relationships:

• Sunburst for radial hierarchy visualization
• Treemap for size-based hierarchy comparison

Two-Dimensional Relationships:

• XY Line, XY Scatter for correlation analysis
• Heatmap for categorical cross-tabulation

Performance Considerations

Charts have different performance limits depending on their complexity:

High Performance Charts (50,000 max_cells):

• XY Line, XY Scatter: Designed for large datasets
• Heatmap: Supports up to 500 columns for dense data visualization

Standard Performance Charts (4,000-7,500 max_cells):

• Y Area, Y Line, Y Scatter: 4,000 cells
• Candlestick: 4,000 cells
• Sunburst: 7,500 cells for hierarchical data
• OHLC: 3,500 cells for financial data

Limited Performance Charts (1,000-3,000 max_cells):

• X Bar, Y Bar: 1,000 cells (optimized for categorical data)
• Treemap: 3,000 cells for hierarchical layouts

All charts have render_warning enabled to alert users of performance impacts.

For datasets exceeding these limits:

• Consider data aggregation or filtering
• Use sampling strategies for large datasets
• Monitor rendering performance and user experience
• Choose appropriate chart types for your data size

Column Requirements

Charts have different minimum column requirements:

• Single dimension: Y charts, X charts (1 data column)
• Two dimension: XY charts (2 data columns: X and Y)
• Financial: OHLC, Candlestick (4 columns: Open, High, Low, Close)
• Hierarchical: Sunburst, Treemap (1+ columns for grouping/sizing)
• Heatmap: 1+ columns for color mapping, plus dimensions for X/Y axes