Ejemplos Plotly Interactive Charts

// Plotly.js Basic Charts Examples

// 1. Scatter Plot
function createScatterPlot() {
    const trace1 = {
        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        y: [2.1, 3.4, 1.2, 4.5, 3.8, 6.2, 2.8, 5.1, 4.3, 3.9],
        mode: 'markers',
        type: 'scatter',
        name: 'Dataset 1',
        marker: {
            size: 8,
            color: 'rgba(78, 121, 167, 0.8)',
            line: {
                color: 'rgba(78, 121, 167, 1)',
                width: 2
            }
        }
    };

    const trace2 = {
        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        y: [1.8, 2.9, 2.5, 4.2, 5.1, 5.8, 3.2, 4.9, 3.5, 4.1],
        mode: 'markers+lines',
        type: 'scatter',
        name: 'Dataset 2',
        marker: {
            size: 10,
            color: 'rgba(242, 142, 44, 0.8)',
            line: {
                color: 'rgba(242, 142, 44, 1)',
                width: 3,
                dash: 'dot'
            }
        }
    };

    const layout = {
        title: 'Interactive Scatter Plot',
        xaxis: {
            title: 'X Variable',
            gridcolor: 'rgba(0,0,0,0.1)',
            zerolinecolor: 'rgba(0,0,0,0.2)'
        },
        yaxis: {
            title: 'Y Variable',
            gridcolor: 'rgba(0,0,0,0.1)',
            zerolinecolor: 'rgba(0,0,0,0.2)'
        },
        plot_bgcolor: 'rgba(240, 240, 240, 0.8)',
        paper_bgcolor: 'rgba(255, 255, 255, 1)',
        hovermode: 'closest',
        showlegend: true,
        legend: {
            x: 1,
            y: 1,
            bgcolor: 'rgba(255, 255, 255, 0.8)',
            bordercolor: 'rgba(0,0,0,0.2)',
            borderwidth: 1
        },
        margin: {
            l: 50,
            r: 50,
            t: 50,
            b: 50
        }
    };

    const config = {
        responsive: true,
        displayModeBar: false
    };

    return Plotly.newPlot('scatter-plot', [trace1, trace2], layout, config);
}

// 2. 3D Surface Plot
function createSurface3D() {
    const size = 50;
    const x = [];
    const y = [];
    const z = [];

    // Generate meshgrid
    for (let i = 0; i < size; i++) {
        x[i] = [];
        y[i] = [];
        z[i] = [];
        for (let j = 0; j < size; j++) {
            const x_val = (i - size / 2) / (size / 10);
            const y_val = (j - size / 2) / (size / 10);
            x[i][j] = x_val;
            y[i][j] = y_val;
            z[i][j] = Math.sin(Math.sqrt(x_val * x_val + y_val * y_val));
        }
    }

    const data = [{
        x: x,
        y: y,
        z: z,
        type: 'surface',
        colorscale: 'Viridis',
        showscale: true,
        colorbar: {
            title: 'Z Value',
            titleside: false,
            tickmode: 'linear',
            tick0: 0,
            dtick: 0.5
        }
    }];

    const layout = {
        title: '3D Surface Plot',
        autosize: false,
        width: 600,
        height: 500,
        scene: {
            xaxis: {
                title: 'X Axis',
                gridcolor: 'rgb(200,200,200)',
                showbackground: true,
                backgroundcolor: 'rgba(200,200,200,0.2)'
            },
            yaxis: {
                title: 'Y Axis',
                gridcolor: 'rgb(200,200,200)',
                showbackground: true,
                backgroundcolor: 'rgba(200,200,200,0.2)'
            },
            zaxis: {
                title: 'Z Axis',
                gridcolor: 'rgb(200,200,200)',
                showbackground: true,
                backgroundcolor: 'rgba(200,200,200,0.2)'
            }
        },
        margin: {
            l: 0,
            r: 0,
            b: 0,
            t: 0
        }
    };

    const config = {
        responsive: true,
        displayModeBar: false
    };

    return Plotly.newPlot('surface-3d', data, layout, config);
}

// 3. Statistical Box Plot
function createBoxPlot() {
    const y0 = [
        [0.75, 5.25, 5.5, 6, 6.25, 6.5, 6.75, 7.0, 7.25, 7.5, 7.75, 8.0, 8.25, 8.5, 8.75, 9.0, 9.25, 9.5, 9.75, 10.0, 10.25, 10.5, 10.75, 11.0, 11.25, 11.5, 11.75, 12.0, 12.25, 12.5, 12.75, 13.0, 13.25, 13.5, 13.75, 14.5],
        [2.0, 6.0, 6.25, 6.5, 6.75, 7.0, 7.25, 7.5, 7.75, 8.0, 8.25, 8.5, 8.75, 9.0, 9.25, 9.5, 9.75, 10.0, 10.25, 10.5, 10.75, 11.0, 11.25, 11.5, 11.75, 12.0, 12.25, 12.5, 12.75, 13.0, 13.25, 13.5, 13.75, 14.5]
    ];

    const y1 = [
        [1.0, 4.0, 4.25, 4.5, 4.75, 5.0, 5.25, 5.5, 5.75, 6.0, 6.25, 6.5, 6.75, 7.0, 7.25, 7.5, 7.75, 8.0, 8.25, 8.5, 8.75, 9.0, 9.25, 9.5, 9.75, 10.0, 10.25, 10.5, 10.75, 11.0, 11.25, 11.5, 11.75, 12.0, 12.25, 12.5, 12.75, 13.0, 13.25, 13.5, 13.75, 14.5],
        [2.0, 4.5, 4.75, 5.0, 5.25, 5.5, 5.75, 6.0, 6.25, 6.5, 6.75, 7.0, 7.25, 7.5, 7.75, 8.0, 8.25, 8.5, 8.75, 9.0, 9.25, 9.5, 9.75, 10.0, 10.25, 10.5, 10.75, 11.0, 11.25, 11.5, 11.75, 12.0, 12.25, 12.5, 12.75, 13.0, 13.25, 13.5, 13.75, 14.5]
    ];

    const trace1 = {
        y: y0,
        type: 'box',
        name: 'Group A',
        marker: {
            color: 'rgb(78, 121, 167)'
        },
        boxpoints: 'all',
        jitter: 0.3,
        whiskerwidth: 0.2,
        fillcolor: 'rgba(78, 121, 167, 0.5)',
        line: {
            color: 'rgb(78, 121, 167)'
        }
    };

    const trace2 = {
        y: y1,
        type: 'box',
        name: 'Group B',
        marker: {
            color: 'rgb(242, 142, 44)'
        },
        boxpoints: 'all',
        jitter: 0.3,
        whiskerwidth: 0.2,
        fillcolor: 'rgba(242, 142, 44, 0.5)',
        line: {
            color: 'rgb(242, 142, 44)'
        }
    };

    const layout = {
        title: 'Statistical Box Plot',
        yaxis: {
            title: 'Values',
            gridcolor: 'rgba(0,0,0,0.1)',
            zerolinecolor: 'rgba(0,0,0,0.2)'
        },
        xaxis: {
            title: 'Groups',
            gridcolor: 'rgba(0,0,0,0.1)',
            zerolinecolor: 'rgba(0,0,0,0.2)'
        },
        plot_bgcolor: 'rgba(240, 240, 240, 0.8)',
        paper_bgcolor: 'rgba(255, 255, 255, 1)',
        showlegend: true,
        margin: {
            l: 50,
            r: 50,
            t: 50,
            b: 50
        }
    };

    const config = {
        responsive: true,
        displayModeBar: false
    };

    return Plotly.newPlot('box-plot', [trace1, trace2], layout, config);
}

// 4. Heatmap
function createHeatmap() {
    const data = [
        {
            z: [[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15], [16, 17, 18, 19, 20], [21, 22, 23, 24, 25]],
            x: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
            y: ['Morning', 'Afternoon', 'Evening', 'Night'],
            type: 'heatmap',
            hovertemplate: '<b>%{x}</b><br>%{y}<br>%{z:.1f}',
            colorscale: 'Reds',
            showscale: true
        }
    ];

    const layout = {
        title: 'Activity Heatmap',
        xaxis: {
            title: 'Day of Week'
        },
        yaxis: {
            title: 'Time of Day'
        },
        margin: {
            l: 50,
            r: 50,
            t: 50,
            b: 50
        }
    };

    const config = {
        responsive: true,
        displayModeBar: false
    };

    return Plotly.newPlot('heatmap', data, layout, config);
}

// 5. Pie Chart with Customization
function createPieChart() {
    const data = [{
        values: [30, 25, 15, 12, 18],
        labels: ['Electronics', 'Clothing', 'Food', 'Books', 'Other'],
        type: 'pie',
        name: 'Sales Distribution',
        marker: {
            colors: ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f'],
            line: {
                color: '#fff'
            }
        },
        textinfo: 'label+percent',
        textposition: 'inside',
        automargin: true
    }];

    const layout = {
        title: 'Sales Distribution',
        font: {
            size: 16
        },
        showlegend: true,
        legend: {
            orientation: 'h',
            x: 0.5,
            xanchor: 'center',
            y: -0.1,
            yanchor: 'top'
        },
        margin: {
            l: 50,
            r: 50,
            t: 50,
            b: 50
        }
    };

    const config = {
        responsive: true,
        displayModeBar: false
    };

    return Plotly.newPlot('pie-chart', [data], layout, config);
}

// Initialize all charts when page loads
document.addEventListener('DOMContentLoaded', function() {
    const scatterPlot = createScatterPlot();
    const surface3D = createSurface3D();
    const boxPlot = createBoxPlot();
    const heatmap = createHeatmap();
    const pieChart = createPieChart();

    // Store chart references for later manipulation
    window.plotlyCharts = {
        scatter: scatterPlot,
        surface3D: surface3D,
        box: boxPlot,
        heatmap: heatmap,
        pie: pieChart
    };
});

// Update function for real-time data updates
function updateChartData(chartId, newData) {
    const chart = window.plotlyCharts[chartId];
    if (chart) {
        Plotly.update(chart, {
            data: newData
        });
    }
}

// Plotly 3D Advanced Examples

// 1. 3D Mesh Plot with Custom Data
function create3DMeshPlot() {
    // Generate complex 3D data
    const createMeshData = () => {
        const size = 30;
        const x = [];
        const y = [];
        const z = [];

        for (let i = 0; i < size; i++) {
            x[i] = [];
            y[i] = [];
            z[i] = [];
            for (let j = 0; j < size; j++) {
                const x_val = (i - size / 2) / 5;
                const y_val = (j - size / 2) / 5;
                x[i][j] = x_val;
                y[i][j] = y_val;

                // Create more complex surface
                const r = Math.sqrt(x_val * x_val + y_val * y_val);
                const theta = Math.atan2(y_val, x_val);
                z[i][j] = r * Math.sin(theta * 3) * Math.cos(r * 2) * 0.5;
            }
        }
        return { x, y, z };
    };

    const { x, y, z } = createMeshData();

    const data = [{
        type: 'mesh3d',
        x: x,
        y: y,
        z: z,
        opacity: 0.8,
        color: 'rgba(78, 121, 167, 1)',
        flatshading: false,
        lighting: {
            ambient: 0.4,
            diffuse: 0.6,
            specular: 0.8,
            roughness: 0.2,
            fresnel: 1
        },
        lightposition: {x: 100, y: 200, z: 0},
        lightcolor: 'white'
    }];

    const layout = {
        title: 'Complex 3D Mesh Surface',
        scene: {
            camera: {
                eye: {x: 1.5, y: 1.5, z: 1.5},
                center: {x: 0, y: 0, z: 0}
            },
            xaxis: {
                title: 'X',
                gridcolor: 'rgb(200,200,200)',
                showbackground: true,
                backgroundcolor: 'rgba(230,230,230,0.2)'
            },
            yaxis: {
                title: 'Y',
                gridcolor: 'rgb(200,200,200)',
                showbackground: true,
                backgroundcolor: 'rgba(230,230,230,0.2)'
            },
            zaxis: {
                title: 'Z',
                gridcolor: 'rgb(200,200,200)',
                showbackground: true,
                backgroundcolor: 'rgba(230,230,230,0.2)'
            }
        },
        margin: { l: 0, r: 0, t: 0, b: 0 }
    };

    return Plotly.newPlot('mesh-3d', [data], layout);
}

// 2. 3D Contour Plot
function create3DContourPlot() {
    // Generate contour data
    const generateContourData = () => {
        const x = [];
        const y = [];
        const z = [];

        for (let i = 0; i < 50; i++) {
            x[i] = [];
            y[i] = [];
            z[i] = [];
            for (let j = 0; j < 50; j++) {
                const x_val = (i - 25) / 10;
                const y_val = (j - 25) / 10;
                x[i][j] = x_val;
                y[i][j] = y_val;

                // Create interesting contour pattern
                z[i][j] = Math.sin(x_val * 3) * Math.cos(y_val * 2) +
                             Math.sin(x_val * y_val) * 0.5 +
                             Math.cos(x_val - y_val) * 0.3;
            }
        }
        return { x, y, z };
    };

    const { x, y, z } = generateContourData();

    const data = [{
        type: 'surface',
        x: x,
        y: y,
        z: z,
        contours: {
            z: {
                show: true,
                usecolormap: true,
                project: { z: true },
                start: -2,
                end: 2,
                size: 0.1,
                color: 'black'
            }
        },
        colorscale: 'Jet',
        showscale: false
    }];

    const layout = {
        title: '3D Contour Plot',
        scene: {
            camera: {
                eye: {x: 1.5, y: 1.5, z: 1.5},
                center: {x: 0, y: 0, z: 0}
            }
        }
    };

    return Plotly.newPlot('contour-3d', [data], layout);
}

// 3. 3D Scatter Plot with Animation
function create3DScatterPlot() {
    const frames = [];
    const nFrames = 100;

    for (let frame = 0; frame < nFrames; frame++) {
        const t = frame / (nFrames - 1);
        const angle = t * 2 * Math.PI;

        // Create spiral data
        const spiralData = [];
        const nPoints = 50;

        for (let i = 0; i < nPoints; i++) {
            const r = i / nPoints * 5;
            const theta = i / nPoints * 4 * Math.PI + angle;
            const x = r * Math.cos(theta);
            const y = r * Math.sin(theta);
            const z = Math.sin(r * 3) * t * 2;

            spiralData.push([x, y, z, Math.random() * 10 + 5]);
        }

        frames.push({
            data: [{
                type: 'scatter3d',
                mode: 'markers',
                x: spiralData.map(d => d[0]),
                y: spiralData.map(d => d[1]),
                z: spiralData.map(d => d[2]),
                marker: {
                    size: spiralData.map(d => d[3]),
                    color: spiralData.map(d => `hsl(${(d[2] * 60)}, 70%, 50%)`)
                }
            }],
            name: frame.toString()
        });
    }

    const layout = {
        title: 'Animated 3D Spiral',
        scene: {
            camera: {
                eye: {x: 2, y: 2, z: 2},
                center: {x: 0, y: 0, z: 0}
            },
            aspectmode: 'cube'
        },
        margin: { l: 0, r: 0, t: 0, b: 0 }
    };

    const config = {
        frame: frames,
        transition: {
            duration: 50
        }
    };

    return Plotly.newPlot('scatter-3d', frames[0].data, layout, config);
}

// 4. Multiple 3D Subplots
function createMultiple3DPlots() {
    const trace1 = {
        x: [1, 2, 3, 4, 5],
        y: [5, 4, 3, 2, 1],
        z: [2, 3, 4, 5, 1],
        mode: 'markers',
        marker: { size: 8, color: 'red' },
        type: 'scatter3d'
    };

    const trace2 = {
        x: [1, 2, 3, 4, 5],
        y: [2, 3, 4, 5, 6],
        z: [5, 4, 3, 2, 1],
        mode: 'markers',
        marker: { size: 8, color: 'blue' },
        type: 'scatter3d'
    };

    const trace3 = {
        x: [1, 2, 3, 4, 5],
        y: [3, 2, 1, 5, 4],
        z: [4, 5, 1, 2, 3],
        mode: 'markers',
        marker: { size: 8, color: 'green' },
        type: 'scatter3d'
    };

    const layout = {
        title: 'Multiple 3D Subplots',
        scene: {
            domain: {
                x: [0, 0.33],
                y: [0.33, 0.66]
            },
            camera: {
                eye: {x: 1.5, y: 1.5, z: 1.5},
                center: {x: 0, y: 0, z: 0}
            }
        }
    };

    const layout2 = {
        scene: {
            domain: {
                x: [0.33, 0.66],
                y: [0.33, 0.66]
            },
            camera: {
                eye: {x: 1.5, y: 1.5, z: 1.5},
                center: {x: 0.5, y: 0.5, z: 0}
            }
        }
    };

    const layout3 = {
        scene: {
            domain: {
                x: [0.66, 1],
                y: [0.33, 0.66]
            },
            camera: {
                eye: {x: 1.5, y: 1.5, z: 1.5},
                center: {x: 1, y: 0.5, z: 0}
            }
        }
    };

    const layoutArray = [layout, layout2, layout3];

    const config = {
        responsive: true
    };

    return Plotly.newPlot('multiple-3d', [trace1, trace2, trace3], layoutArray, config);
}

// 5. 3D Bar Chart
function create3DBarChart() {
    const trace = {
        x: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'],
        y: ['Q1', 'Q2', 'Q3', 'Q4'],
        z: [[10, 20, 15, 25, 30], [12, 18, 22, 28, 35], [8, 14, 18, 22, 28], [15, 25, 20, 30, 32], [20, 15, 25, 35, 40]],
        type: 'bar',
        marker: {
            color: 'rgba(78, 121, 167, 0.8)'
        },
        showscale: true,
        colorscale: 'Blues'
    };

    const layout = {
        title: '3D Bar Chart',
        scene: {
            camera: {
                eye: {x: 1.5, y: 1.5, z: 1.5},
                center: {x: 0, y: 0, z: 0}
            },
            xaxis: {
                title: 'Products'
            },
            yaxis: {
                title: 'Quarters'
            },
            zaxis: {
                title: 'Sales'
            }
        },
        margin: { l: 0, r: 0, t: 0, b: 0 }
    };

    const config = {
        responsive: true,
        displayModeBar: false
    };

    return Plotly.newPlot('bar-3d', [trace], layout, config);
}

// Initialize all 3D charts
document.addEventListener('DOMContentLoaded', function() {
    const meshPlot = create3DMeshPlot();
    const contourPlot = create3DContourPlot();
    const scatterPlot = create3DScatterPlot();
    const multiPlot = createMultiple3DPlots();
    const barPlot = create3DBarChart();

    // Store chart references
    window.plotly3DCharts = {
        mesh: meshPlot,
        contour: contourPlot,
        scatter: scatterPlot,
        multi: multiPlot,
        bar: barPlot
    };
});

// Plotly Statistical Charts Examples

// 1. Histogram with Normal Distribution Fit
function createHistogram() {
    // Generate sample data
    const sampleData = [];
    for (let i = 0; i < 1000; i++) {
        // Create normal distribution data
        let sum = 0;
        for (let j = 0; j < 12; j++) {
            sum += Math.random();
        }
        sampleData.push(sum / 12);
    }

    const data = [{
        x: sampleData,
        type: 'histogram',
        name: 'Sample Distribution',
        opacity: 0.75,
        marker: {
            color: 'rgba(78, 121, 167, 0.8)'
        },
        nbinsx: 30,
        autobinx: true,
        histnorm: 'probability density'
    }];

    // Calculate mean and standard deviation
    const mean = sampleData.reduce((a, b) => a + b) / sampleData.length;
    const stdDev = Math.sqrt(sampleData.reduce((a, b) => a + Math.pow(b - mean, 2), 0) / sampleData.length);

    // Add normal distribution curve
    const xValues = [];
    const yValues = [];
    for (let i = 0; i < 100; i++) {
        const x = Math.min(...sampleData) + (Math.max(...sampleData) - Math.min(...sampleData)) * (i / 99);
        const y = (1 / (stdDev * Math.sqrt(2 * Math.PI))) *
                   Math.exp(-0.5 * Math.pow((x - mean) / stdDev, 2));
        xValues.push(x);
        yValues.push(y);
    }

    const normalCurve = {
        x: xValues,
        y: yValues,
        type: 'scatter',
        mode: 'lines',
        name: 'Normal Distribution',
        line: {
            color: 'rgba(242, 142, 44, 1)',
            width: 3
        }
    };

    const layout = {
        title: 'Histogram with Normal Distribution Fit',
        xaxis: {
            title: 'Value',
            titlefont: {
                size: 14
            }
        },
        yaxis: {
            title: 'Probability Density',
            titlefont: {
                size: 14
            }
        },
        barmode: 'group',
        bargap: 0.2,
        bargroupgap: 0.2,
        plot_bgcolor: 'rgba(240, 240, 240, 0.8)',
        paper_bgcolor: 'rgba(255, 255, 255, 1)',
        margin: { l: 50, r: 50, t: 50, b: 50 },
        showlegend: true
    };

    const config = {
        responsive: true,
        displayModeBar: false
    };

    return Plotly.newPlot('histogram', [data, normalCurve], layout, config);
}

// 2. Violin Plot
function createViolinPlot() {
    const data = [
        {
            type: 'violin',
            x: ['Group A', 'Group B', 'Group C', 'Group D', 'Group E'],
            y: [
                [1, 2, 3, 4, 5],
                [2, 3, 4, 5, 6],
                [3, 4, 5, 6, 7],
                [4, 5, 6, 7, 8],
                [5, 6, 7, 8, 9]
            ],
            name: 'Dataset 1',
            box: {
                visible: true,
                width: 0.1,
                color: 'rgba(78, 121, 167, 0.8)'
            },
            meanline: {
                visible: true,
                color: 'rgba(242, 142, 44, 1)'
            }
        },
        {
            type: 'violin',
            x: ['Group A', 'Group B', 'Group C', 'Group D', 'Group E'],
            y: [
                [2, 3, 4, 5, 6],
                [3, 4, 5, 6, 7],
                [4, 5, 6, 7, 8],
                [5, 6, 7, 8, 9],
                [6, 7, 8, 9, 10]
            ],
            name: 'Dataset 2',
            box: {
                visible: true,
                width: 0.1,
                color: 'rgba(225, 87, 89, 0.8)'
            },
            meanline: {
                visible: true,
                color: 'rgba(59, 161, 79, 1)'
            }
        }
    ];

    const layout = {
        title: 'Violin Plot Comparison',
        yaxis: {
            title: 'Values',
            zeroline: false
        },
        xaxis: {
            title: 'Groups'
        },
        violinmode: 'group',
        violinggap: 0,
        violinmode: 'group',
        plot_bgcolor: 'rgba(240, 240, 240, 0.8)',
        paper_bgcolor: 'rgba(255, 255, 255, 1)',
        margin: { l: 50, r: 50, t: 50, b: 50 },
        showlegend: true
    };

    const config = {
        responsive: true,
        displayModeBar: false
    };

    return Plotly.newPlot('violin-plot', data, layout, config);
}

// 3. Error Bars Chart
function createErrorBarsChart() {
    const trace1 = {
        x: ['January', 'February', 'March', 'April', 'May', 'June'],
        y: [20, 14, 25, 22, 18, 30],
        error_y: {
            type: 'data',
            array: [2, 3, 1.5, 2.5, 1.8, 4],
            visible: true
        },
        type: 'scatter',
        name: 'Series 1',
        marker: {
            color: 'rgba(78, 121, 167, 0.8)',
            size: 8
        }
    };

    const trace2 = {
        x: ['January', 'February', 'March', 'April', 'May', 'June'],
        y: [18, 16, 22, 20, 16, 25],
        error_y: {
            type: 'percent',
            value: 10,
            visible: true
        },
        type: 'scatter',
        name: 'Series 2',
        marker: {
            color: 'rgba(242, 142, 44, 0.8)',
            size: 8
        }
    };

    const layout = {
        title: 'Error Bars Comparison',
        xaxis: {
            title: 'Month'
        },
        yaxis: {
            title: 'Value'
        },
        plot_bgcolor: 'rgba(240, 240, 240, 0.8)',
        paper_bgcolor: 'rgba(255, 255, 255, 1)',
        margin: { l: 50, r: 50, t: 50, b: 50 },
        showlegend: true,
        error_y: {
            type: 'data'
        }
    };

    const config = {
        responsive: true,
        displayModeBar: false
    };

    return Plotly.newPlot('error-bars', [trace1, trace2], layout, config);
}

// 4. Parallel Coordinates Plot
function createParallelCoordinates() {
    const dimensions = ['Dimension 1', 'Dimension 2', 'Dimension 3', 'Dimension 4', 'Dimension 5'];
    const categories = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];

    const data = [
        {
            type: 'parcoords',
            dimensions: [
                {
                    label: 'Dimension 1',
                    values: [1, 2, 3, 4, 5]
                },
                {
                    label: 'Dimension 2',
                    values: [2, 3, 1, 5, 4]
                },
                {
                    label: 'Dimension 3',
                    values: [3, 1, 4, 2, 5]
                },
                {
                    label: 'Dimension 4',
                    values: [4, 5, 2, 1, 3]
                },
                {
                    label: 'Dimension 5',
                    values: [5, 4, 5, 3, 1]
                }
            ],
            line: {
                color: 'blue'
            },
            marker: {
                size: 8,
                color: 'red'
            }
        },
        {
            type: 'parcoords',
            dimensions: [
                {
                    label: 'Dimension 1',
                    values: [3, 4, 5, 2, 1]
                },
                {
                    label: 'Dimension 2',
                    values: [4, 3, 2, 5, 6]
                },
                {
                    label: 'Dimension 3',
                    values: [2, 5, 4, 3, 7]
                },
                {
                    label: 'Dimension 4',
                    values: [5, 2, 3, 1, 4]
                },
                {
                    label: 'Dimension 5',
                    values: [1, 3, 6, 4, 2]
                }
            ],
            line: {
                color: 'green'
            },
            marker: {
                size: 8,
                color: 'orange'
            }
        }
    ];

    const layout = {
        title: 'Parallel Coordinates Plot',
        paper_bgcolor: 'rgba(255, 255, 255, 1)',
        plot_bgcolor: 'rgba(240, 240, 240, 0.8)',
        margin: { l: 50, r: 50, t: 50, b: 50 },
        margin: {
            l: 100,
            r: 50,
            t: 50,
            b: 50
        },
        padding: {
            l: 80,
            r: 10,
            t: 60,
            b: 80
        },
        autosize: true
    };

    const config = {
        responsive: true,
        displayModeBar: false
    };

    return Plotly.newPlot('parallel-coordinates', data, layout, config);
}

// 5. Distribution Comparison
function createDistributionComparison() {
    const data = [
        {
            x: [
                0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0
            ],
            type: 'histogram',
            opacity: 0.7,
            name: 'Dataset A',
            marker: {
                color: 'rgba(78, 121, 167, 0.8)'
            }
        },
        {
            x: [
                0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1.0
            ],
            type: 'histogram',
            opacity: 0.7,
            name: 'Dataset B',
            marker: {
                color: 'rgba(242, 142, 44, 0.8)'
            }
        },
        {
            x: [
                0.1, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 0.85, 0.95, 1.0
            ],
            type: 'histogram',
            opacity: 0.7,
            name: 'Dataset C',
            marker: {
                color: 'rgba(225, 87, 89, 0.8)'
            }
        }
    ];

    const layout = {
        title: 'Distribution Comparison',
        barmode: 'overlay',
        barnorm: 'fraction',
        xaxis: {
            title: 'Value',
            titlefont: {
                size: 14
            }
        },
        yaxis: {
            title: 'Count',
            titlefont: {
                size: 14
            }
        },
        plot_bgcolor: 'rgba(240, 240, 240, 0.8)',
        paper_bgcolor: 'rgba(255, 255, 255, 1)',
        margin: { l: 50, r: 50, t: 50, b: 50 },
        showlegend: true
    };

    const config = {
        responsive: true,
        displayModeBar: false
    };

    return Plotly.newPlot('distribution-comparison', data, layout, config);
}

// Initialize all statistical charts
document.addEventListener('DOMContentLoaded', function() {
    const histogram = createHistogram();
    const violinPlot = createViolinPlot();
    const errorBars = createErrorBarsChart();
    const parallelPlot = createParallelCoordinates();
    const distribution = createDistributionComparison();

    // Store chart references
    window.plotlyStatistical = {
        histogram: histogram,
        violin: violinPlot,
        errorBars: errorBars,
        parallel: parallelPlot,
        distribution: distribution
    };
});