Dashboard

Interactive data visualization dashboard with Plotly.

Features

• Multiple plot types: line, scatter, contour, surface (3D), parallel axis, and polar
• Data grouping with color-coded visualization
• Dynamic variable selection via dropdown menus
• Responsive design with dark theme
• Uses colorscale and styles from w2uiplots library

Installation

npm install

Build

npm run build

Development

npm run dev

Usage

import Dashboard from './src/index.js';

// Create dashboard instance
const container = document.getElementById('dashboard-container');
const dashboard = new Dashboard(container);

// Set data (will update all existing plots)
const data = [
    { x: 1, y: 2, category: 'A', value: 10 },
    { x: 2, y: 4, category: 'B', value: 20 },
    // ...
];
dashboard.setData(data);

// Add more plots programmatically
const plotId = dashboard.addPlot({
    plotType: 'scatter',
    xVar: 'x',
    yVar: 'value',
    groupVar: 'category'
});

// Or add a plot with default settings
dashboard.addPlot(); // Will create a line plot with default x and y

// Remove a specific plot
dashboard.removePlot(plotId);

// Clear all plots
dashboard.clearPlots();

// Render all plots (called automatically when data or settings change)
dashboard.render();

API

Constructor

• new Dashboard(container) - Create a new dashboard in the given container element

Methods

• setData(data) - Set the data for all plots. Data should be an array of objects
• addPlot(config) - Add a new plot to the dashboard
  • config.plotType - Type of plot: 'line', 'scatter', 'contour', 'surface', 'parallel', or 'polar'
  • config.xVar - Variable name for X axis
  • config.yVar - Variable name for Y axis
  • config.groupVar - Variable name for grouping/coloring (optional)
  • Returns: plot ID (number)
• removePlot(plotId) - Remove a plot by its ID
• clearPlots() - Remove all plots
• render() - Re-render all plots (usually called automatically)

Testing

Open test.html in a browser after building the project.

dashboard