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

``bash
npm install
`

Build

`bash
npm run build
`

Development

`bash
npm run dev
`

Usage

`javascript
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

$3


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

$3

- 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