Alphaswarm Charts Distribution Visualization JavaScript Library Examples

Download This Plugin Back To CSSScript.Com

A JavaScript library for creating distribution plots that show individual data points with statistical overlays.

1. Simple Example - Getting Started

A basic alphaswarm chart showing three groups with different distributions. Perfect for understanding the fundamentals.

Mean
Median

Example Code:

import { createAlphaswarmChart } from './src/alphaswarm.js';
import { simpleData } from './data/sample-datasets.js';

const chart = createAlphaswarmChart(simpleData, {
    x: 'value',
    y: 'category',
    xLabel: 'Value',
    yLabel: 'Groups',
    opacity: 0.6,
    jitter: 0.5,
    showMean: true,
    showMedian: true
});

document.getElementById('chart-container').appendChild(chart);

2. Meeting Time Analysis by Developer Level

Inspired by your original implementation - shows daily meeting hours across software developer levels. Notice how senior levels (L5-L7) have more variable and higher meeting loads.

Mean
Median

Example Code:

import { createAlphaswarmChart } from './src/alphaswarm.js';
import { meetingData } from './data/sample-datasets.js';

const chart = createAlphaswarmChart(meetingData, {
    x: 'hours',
    y: 'level',
    xLabel: 'Daily Meeting Hours',
    yLabel: 'Developer Level',
    opacity: 0.6,
    jitter: 0.5,
    showMean: true,
    showMedian: true,
    pointColor: '#4285f4'
});

document.getElementById('meeting-chart').appendChild(chart);

3. Team Performance Scores

Performance metrics across different teams. Notice the bimodal distribution in the DevOps team, suggesting two distinct performance groups.

Mean
Median

Example Code:

import { createAlphaswarmChart } from './src/alphaswarm.js';
import { performanceData } from './data/sample-datasets.js';

const chart = createAlphaswarmChart(performanceData, {
    x: 'score',
    y: 'team',
    xLabel: 'Performance Score',
    yLabel: 'Team',
    opacity: 0.6,
    jitter: 0.5,
    showMean: true,
    showMedian: true,
    pointColor: '#4285f4'
});

document.getElementById('performance-chart').appendChild(chart);

4. API Response Times by Day of Week

Response time patterns across weekdays. Shows how performance varies throughout the week, with Friday showing more variable performance.

Mean
Median

Example Code:

import { createAlphaswarmChart } from './src/alphaswarm.js';
import { responseData } from './data/sample-datasets.js';

const chart = createAlphaswarmChart(responseData, {
    x: 'time',
    y: 'day',
    xLabel: 'Response Time (ms)',
    yLabel: 'Day of Week',
    opacity: 0.6,
    jitter: 0.5,
    showMean: true,
    showMedian: true,
    pointColor: '#4285f4'
});

document.getElementById('response-chart').appendChild(chart);

5. Vertical Alphaswarm Charts

The same data can be displayed vertically for different layout needs. This example shows sales performance by region.

Mean
Median

Example Code:

import { createVerticalAlphaswarmChart } from './src/alphaswarm.js';
import { salesData } from './data/sample-datasets.js';

const chart = createVerticalAlphaswarmChart(salesData, {
    x: 'region',
    y: 'revenue',
    xLabel: 'Region',
    yLabel: 'Revenue ($)',
    opacity: 0.6,
    jitter: 0.5,
    showMean: true,
    showMedian: true,
    pointColor: '#4285f4'
});

document.getElementById('vertical-chart').appendChild(chart);