0_Web/1_Code/0_JS/0_Palestine/0003.js

<script>
    const numbers = [1, 10, 100, 1000, 1e5, 1e6, 2e6, 18e9];
    const labels = ['One', 'Ten', 'Hundred', 'Thousand', 'Hundred<br>Thousand', 'Million', 'Two<br>Million', 'Eighteen<br>Billion'];
    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F06000', '#7CB9E8', '#C3B1E1'];

    function formatNumber(num) {
        if (num >= 1e9) return `${(num/1e9).toFixed(0)}B`;
        if (num >= 1e6) return `${(num/1e6).toFixed(0)}M`;
        if (num >= 1e3) return `${(num/1e3).toFixed(0)}K`;
        return Math.floor(num).toString();
    }

    const frames = numbers.map((_, i) => ({
        name: `frame${i}`,
        data: [{
            x: labels.slice(0, i+1),
            y: numbers.slice(0, i+1),
            text: numbers.slice(0, i+1).map(formatNumber),
            textposition: 'outside',
            marker: { color: colors.slice(0, i+1) }
        }],
        layout: {
            title: `Numbers up to: ${formatNumber(numbers[i])}`,
            yaxis: {
                range: [0, Math.max(...numbers.slice(0, i+1)) * 1.1],
                tickformat: ',.0f'
            },
            xaxis: { range: [-0.5, i+0.5] }
        }
    }));

    const layout = {
        title: "Number Scale Comparison",
        yaxis: {
            title: "Value",
            range: [0, numbers[0] * 1.1],
            tickformat: ',.0f'
        },
        xaxis: {
            title: "Numbers",
            range: [-0.5, 0.5]
        },
        updatemenus: [{
            type: "buttons",
            buttons: [
                {
                    label: "Play",
                    method: "animate",
                    args: [null, {
                        frame: { duration: 1000, redraw: false },
                        fromcurrent: true,
                        transition: { duration: 300, easing: "quadratic-in-out" }
                    }]
                },
                {
                    label: "Pause",
                    method: "animate",
                    args: [[null], {
                        frame: { duration: 0, redraw: false },
                        mode: "immediate",
                        transition: { duration: 0 }
                    }]
                }
            ]
        }],

    };

    Plotly.newPlot('myPlot', {
        data: [{
            type: 'bar',
            x: [labels[0]],
            y: [numbers[0]],
            marker: { color: [colors[0]] }
        }],
        layout: layout,
        frames: frames
    }, {
        template: 'plotly_dark'
    });
</script>