Spaces:
Running
Running
File size: 2,556 Bytes
887dfe1 |
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<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>
|