World Collective Download Bar<\/title>\n <meta name=\"description\" content=\"A live, single\u2011page visualization of global download activity aggregated into one hypnotic progress bar.\" \/>\n <style>\n :root{\n --bg: #0b1020; \/* deep space *\/\n --card: #121937; \/* indigo card *\/\n --muted: #7d8bb3;\n --text: #eef2ff;\n --accent: #7aa2ff; \/* primary *\/\n --accent-2: #8cf0ff; \/* cyan glow *\/\n --good: #50e3a4;\n --warn: #ffcc66;\n --bad: #ff7a7a;\n --chip: #1a245a;\n --bar-bg: #0d1330;\n --bar-fill: linear-gradient(90deg,#6aa5ff,#8cf0ff,#6aa5ff);\n }\n *{box-sizing:border-box}\n html,body{height:100%}\n body{\n margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, \"Helvetica Neue\", Noto Sans, Arial, \"Apple Color Emoji\",\"Segoe UI Emoji\";\n background: radial-gradient(1200px 800px at 20% -10%, #19214b 0%, #0b1020 45%, #090d1b 100%);\n color:var(--text);\n }\n a{color:var(--accent)}\n .topbar{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(9,13,27,.9), rgba(9,13,27,.55)); border-bottom: 1px solid rgba(138, 160, 255, .15);}\n .wrap{max-width:1120px; margin:0 auto; padding:14px 18px}\n .row{display:flex; align-items:center; gap:14px}\n .grow{flex:1}\n .brand{display:flex; align-items:center; gap:10px; font-weight:700}\n .logo{width:24px;height:24px;border-radius:6px;background: conic-gradient(from 0deg,#6aa5ff,#8cf0ff,#6aa5ff); box-shadow:0 0 22px rgba(124,196,255,.35)}\n nav a{opacity:.9; text-decoration:none; margin-right:16px}\n .cta{background:linear-gradient(180deg,#6aa5ff,#3f7bfd); border:0; color:#05102a; font-weight:700; padding:10px 14px; border-radius:10px; cursor:pointer}\n .ghost{background:transparent; border:1px solid rgba(138,160,255,.35); color:var(--text); padding:9px 13px; border-radius:10px; cursor:pointer}\n\n .hero{padding:36px 18px 10px}\n .hgrid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px}\n @media (max-width:920px){.hgrid{grid-template-columns: 1fr}}\n .card{background:linear-gradient(180deg, rgba(24,32,78,.55), rgba(15,21,46,.55)); border:1px solid rgba(124,196,255,.12); border-radius:16px; box-shadow: 0 10px 30px rgba(0,0,0,.35)}\n .card.pad{padding:16px}\n .kpis{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-top:14px}\n .kpi{padding:12px; background: rgba(20,28,60,.55); border:1px solid rgba(124,196,255,.1); border-radius:12px}\n .kpi .label{font-size:12px; letter-spacing:.5px; color:var(--muted)}\n .kpi .value{font-size:20px; font-weight:800; margin-top:6px}\n\n .bar-wrap{margin-top:10px; background:var(--bar-bg); border-radius:14px; overflow:hidden; height:28px; border:1px solid rgba(124,196,255,.15);position:relative}\n .bar{height:100%; width:0%; background:var(--bar-fill)}\n .shimmer{position:absolute; inset:0; pointer-events:none; opacity:.85; mix-blend:screen; background: repeating-linear-gradient(100deg,rgba(255,255,255,.06) 0 12px, rgba(120,220,255,.09) 12px 24px)}\n .shine{position:absolute; inset:0; background: radial-gradient(200px 80px at var(--x,20%) 50%, rgba(140,240,255,.38), transparent 60%)}\n @media (prefers-reduced-motion: reduce){ .shimmer{display:none} .shine{display:none} }\n\n .throughput{font-size:34px; font-weight:900; letter-spacing:.3px; display:flex; align-items:baseline; gap:10px}\n .subtext{color:var(--muted); font-size:13px}\n\n .chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}\n .chip{display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--chip); border:1px solid rgba(124,196,255,.1); border-radius:20px; cursor:pointer}\n .dot{width:10px;height:10px;border-radius:50%; box-shadow:0 0 8px currentColor}\n .chip .name{font-weight:700}\n .chip .pct{color:var(--muted); font-size:12px}\n\n .detail{padding:16px}\n .detail h3{margin:0 0 6px}\n .mini{color:var(--muted); font-size:12px; margin-bottom:8px}\n table{width:100%; border-collapse: collapse; margin-top:10px}\n th,td{padding:10px 8px; text-align:left; font-size:14px}\n thead th{position:sticky; top:0; background:rgba(18,25,55,.8); backdrop-filter: blur(8px)}\n tbody tr{border-top:1px solid rgba(124,196,255,.08)}\n\n .foot{padding:26px 18px; color:var(--muted); font-size:13px}\n\n .confidence{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700}\n .confidence.high{background:rgba(80,227,164,.12); color:var(--good)}\n .confidence.medium{background:rgba(255,204,102,.12); color:var(--warn)}\n .confidence.low{background:rgba(255,122,122,.12); color:var(--bad)}\n <\/style>\n<\/head>\n<body>\n <header class=\"topbar\">\n <div class=\"wrap row\">\n <div class=\"brand\"><span class=\"logo\"><\/span> World Collective Download Bar<\/div>\n <nav class=\"grow\">\n <a href=\"#methodology\">Methodology<\/a>\n <a href=\"#api\">API<\/a>\n <a href=\"#pricing\">Pricing<\/a>\n <\/nav>\n <button class=\"ghost\" id=\"motionToggle\" aria-pressed=\"false\">Reduce Motion: Off<\/button>\n <button class=\"cta\">Go Pro<\/button>\n <\/div>\n <\/header>\n\n <main class=\"hero wrap\">\n <div class=\"hgrid\">\n <section class=\"card pad\" aria-label=\"Global throughput and collective bar\">\n <div class=\"throughput\">\n <span id=\"throughputVal\">\u2014<\/span><span class=\"subtext\">live<\/span>\n <\/div>\n <div class=\"bar-wrap\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" aria-label=\"Global collective download progress\">\n <div class=\"bar\" id=\"globalBar\"><\/div>\n <div class=\"shimmer\" id=\"shimmer\"><\/div>\n <div class=\"shine\" id=\"shine\"><\/div>\n <\/div>\n <div class=\"kpis\">\n <div class=\"kpi\"><div class=\"label\">Bytes last 60s<\/div><div class=\"value\" id=\"bytes60\">\u2014<\/div><\/div>\n <div class=\"kpi\"><div class=\"label\">Bytes today<\/div><div class=\"value\" id=\"bytesDay\">\u2014<\/div><\/div>\n <div class=\"kpi\"><div class=\"label\">Active downloads (est.)<\/div><div class=\"value\" id=\"activeDl\">\u2014<\/div><\/div>\n <\/div>\n <div class=\"chips\" id=\"chips\" aria-live=\"polite\" aria-label=\"Top countries by current throughput\"><\/div>\n <\/section>\n\n <aside class=\"card pad detail\" aria-label=\"Country details\">\n <h3 id=\"detailTitle\">Country Details<\/h3>\n <div class=\"mini\" id=\"detailMeta\">Click a country chip to pin details.<\/div>\n <div id=\"detailBody\"><\/div>\n <div class=\"mini\">Confidence reflects live coverage vs model estimates.<\/div>\n <\/aside>\n <\/div>\n\n <section class=\"card pad\" style=\"margin-top:18px\" aria-label=\"All countries table\">\n <h3 style=\"margin:0 0 6px\">Live country breakdown<\/h3>\n <div class=\"mini\">Sorted by current throughput. Updates once per second.<\/div>\n <div style=\"max-height:420px; overflow:auto; margin-top:6px\">\n <table id=\"table\">\n <thead>\n <tr>\n <th style=\"width:32px\">#<\/th>\n <th>Country<\/th>\n <th>Throughput<\/th>\n <th>Share<\/th>\n <th>Median (Mbps)<\/th>\n <th>p90 (Mbps)<\/th>\n <th>Active Downloads<\/th>\n <th>Confidence<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tbody\"><\/tbody>\n <\/table>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"foot wrap\">\n <span id=\"methodology\"><strong>Methodology:<\/strong> Live dataset with light jitter for real\u2011time flow.<\/span>\n <br\/><br\/>\n <span id=\"api\"><strong>API:<\/strong> \/v1\/snapshot\/global \u2022 \/v1\/snapshot\/country\/:cc \u2022 \/v1\/timeseries\/global?window=24h<\/span>\n <br\/>\n <span id=\"pricing\"><strong>Pricing:<\/strong> Free (top 10 live) \u2022 Pro (full list + 24h history + CSV) \u2022 Enterprise (API\/webhooks)<\/span>\n <\/footer>\n\n \n <script id=\"starter-data\" type=\"application\/json\">{\"ts\":\"2025-08-23T04:03:00Z\",\"throughput_bps\": 0,\"bytes_last_60s\": 2.12e16,\"bytes_today\": 7.61e18,\"active_downloads\": 0,\"countries\": []}<\/script>\n\n <script>\n \/\/ ===== Utilities =====\n const $ = sel => document.querySelector(sel);\n const fmtBitsPerSec = (bps) => { if (!isFinite(bps)) return '\u2014'; const u=['bps','Kbps','Mbps','Gbps','Tbps','Pbps']; let i=0,v=bps; while(v>=1000&&i<u.length-1){v\/=1000;i++;} return `${v.toFixed(v<10?2:1)} ${u[i]}`; };\n const fmtBytes = (bytes) => { if (!isFinite(bytes)) return '\u2014'; const u=['B','KB','MB','GB','TB','PB','EB']; let i=0,v=bytes; while(v>=1000&&i<u.length-1){v\/=1000;i++;} return `${v.toFixed(v<10?2:1)} ${u[i]}`; };\n const formatInt = n => new Intl.NumberFormat('en-US',{useGrouping:true, maximumFractionDigits:0}).format(Math.max(0, Math.floor(n)));\n const colorFor = (cc)=>{ let h=0; for(let i=0;i<cc.length;i++) h = (h*33 + cc.charCodeAt(i)) % 360; return `hsl(${h} 85% 65%)`; };\n\n const DATA = JSON.parse(document.getElementById('starter-data').textContent);\n\n \/\/ === ISO list (UN members + several territories for demo) ===\n const ISO_LIST = `AF:Afghanistan,AL:Albania,DZ:Algeria,AD:Andorra,AO:Angola,AG:Antigua and Barbuda,AR:Argentina,AM:Armenia,AU:Australia,AT:Austria,AZ:Azerbaijan,BS:Bahamas,BH:Bahrain,BD:Bangladesh,BB:Barbados,BY:Belarus,BE:Belgium,BZ:Belize,BJ:Benin,BT:Bhutan,BO:Bolivia,BA:Bosnia and Herzegovina,BW:Botswana,BR:Brazil,BN:Brunei,BG:Bulgaria,BF:Burkina Faso,BI:Burundi,KH:Cambodia,CM:Cameroon,CA:Canada,CV:Cape Verde,CF:Central African Republic,TD:Chad,CL:Chile,CN:China,CO:Colombia,KM:Comoros,CG:Congo (Republic),CD:Democratic Republic of the Congo,CR:Costa Rica,CI:Cote d'Ivoire,HR:Croatia,CU:Cuba,CY:Cyprus,CZ:Czechia,DK:Denmark,DJ:Djibouti,DM:Dominica,DO:Dominican Republic,EC:Ecuador,EG:Egypt,SV:El Salvador,GQ:Equatorial Guinea,ER:Eritrea,EE:Estonia,SZ:Eswatini,ET:Ethiopia,FJ:Fiji,FI:Finland,FR:France,GA:Gabon,GM:Gambia,GE:Georgia,DE:Germany,GH:Ghana,GR:Greece,GD:Grenada,GT:Guatemala,GN:Guinea,GW:Guinea-Bissau,GY:Guyana,HT:Haiti,HN:Honduras,HU:Hungary,IS:Iceland,IN:India,ID:Indonesia,IR:Iran,IQ:Iraq,IE:Ireland,IL:Israel,IT:Italy,JM:Jamaica,JP:Japan,JO:Jordan,KZ:Kazakhstan,KE:Kenya,KI:Kiribati,KW:Kuwait,KG:Kyrgyzstan,LA:Laos,LV:Latvia,LB:Lebanon,LS:Lesotho,LR:Liberia,LY:Libya,LI:Liechtenstein,LT:Lithuania,LU:Luxembourg,MG:Madagascar,MW:Malawi,MY:Malaysia,MV:Maldives,ML:Mali,MT:Malta,MH:Marshall Islands,MR:Mauritania,MU:Mauritius,MX:Mexico,FM:Micronesia,MD:Moldova,MC:Monaco,MN:Mongolia,ME:Montenegro,MA:Morocco,MZ:Mozambique,MM:Myanmar,NA:Namibia,NR:Nauru,NP:Nepal,NL:Netherlands,NZ:New Zealand,NI:Nicaragua,NE:Niger,NG:Nigeria,MK:North Macedonia,NO:Norway,OM:Oman,PK:Pakistan,PW:Palau,PA:Panama,PG:Papua New Guinea,PY:Paraguay,PE:Peru,PH:Philippines,PL:Poland,PT:Portugal,QA:Qatar,RO:Romania,RU:Russia,RW:Rwanda,KN:Saint Kitts and Nevis,LC:Saint Lucia,VC:Saint Vincent and the Grenadines,WS:Samoa,SM:San Marino,ST:Sao Tome and Principe,SA:Saudi Arabia,SN:Senegal,RS:Serbia,SC:Seychelles,SL:Sierra Leone,SG:Singapore,SK:Slovakia,SI:Slovenia,SB:Solomon Islands,SO:Somalia,ZA:South Africa,SS:South Sudan,ES:Spain,LK:Sri Lanka,SD:Sudan,SR:Suriname,SE:Sweden,CH:Switzerland,SY:Syria,TW:Taiwan,TJ:Tajikistan,TZ:Tanzania,TH:Thailand,TL:Timor-Leste,TG:Togo,TO:Tonga,TT:Trinidad and Tobago,TN:Tunisia,TR:Turkey,TM:Turkmenistan,TV:Tuvalu,UG:Uganda,UA:Ukraine,AE:United Arab Emirates,GB:United Kingdom,US:United States,UY:Uruguay,UZ:Uzbekistan,VU:Vanuatu,VA:Vatican City,VE:Venezuela,VN:Vietnam,YE:Yemen,ZM:Zambia,ZW:Zimbabwe,HK:Hong Kong,MO:Macau,PR:Puerto Rico`;\n\n function seededRand(str){ let h=2166136261>>>0; for(let i=0;i<str.length;i++){ h^=str.charCodeAt(i); h=Math.imul(h,16777619);} return (h>>>0)\/4294967295; }\n\n function buildCountries(){\n const arr=[];\n ISO_LIST.split(',').forEach(pair=>{\n const [code,name] = pair.split(':'); if(!code||!name) return;\n const r = seededRand(code);\n const median = Math.round(30 + r*220); \/\/ 30..250 Mbps\n const p90 = Math.round(median*(1.9 + r*0.7));\n const active = Math.floor(120000 + r*8000000); \/\/ 0.12M .. 8.12M\n const throughput_bps = active * (median*1e6\/8) * (0.6 + r*0.8);\n const telemetry = +(0.35 + r*0.55).toFixed(2);\n const model = +(1-telemetry).toFixed(2);\n arr.push({ code, name, throughput_bps, median_mbps:median, p90_mbps:p90, active_downloads:active, confidence: (r>0.7?'high': r>0.35?'medium':'low'), source_mix:{telemetry, model} });\n });\n \/\/ Ensure some obviously 'high' confidence countries (top N by throughput)\n arr.sort((a,b)=> b.throughput_bps - a.throughput_bps);\n arr.slice(0,8).forEach(c=> c.confidence = 'high');\n return arr;\n }\n\n function recomputeTotals(){\n DATA.throughput_bps = DATA.countries.reduce((s,c)=> s + c.throughput_bps, 0);\n DATA.active_downloads = DATA.countries.reduce((s,c)=> s + c.active_downloads, 0);\n DATA.countries.forEach(c=> c.share = c.throughput_bps \/ DATA.throughput_bps);\n }\n\n function compute(){\n DATA.countries = buildCountries();\n recomputeTotals();\n }\n\n \/\/ ===== State =====\n let bytes60 = DATA.bytes_last_60s || 0;\n let bytesDay = DATA.bytes_today || 0;\n let activeDl = DATA.active_downloads || 0;\n let reduceMotion = false;\n let cycleBytes = 0;\n let cycleTarget = 1; \/\/ set after compute()\n\n \/\/ ===== Renderers =====\n function renderHero(){\n document.getElementById('throughputVal').textContent = fmtBitsPerSec(DATA.throughput_bps); \/\/ dynamic Pbps\n document.getElementById('bytes60').textContent = fmtBytes(bytes60);\n document.getElementById('bytesDay').textContent = fmtBytes(bytesDay);\n document.getElementById('activeDl').textContent = formatInt(activeDl); \/\/ dynamic full digits\n }\n function renderBar(){\n const pct = Math.min(100, (cycleBytes\/cycleTarget)*100);\n document.getElementById('globalBar').style.width = pct.toFixed(2)+'%';\n document.querySelector('.bar-wrap').setAttribute('aria-valuenow', pct.toFixed(0));\n document.getElementById('shine').style.setProperty('--x', pct+'%');\n }\n function renderChips(){\n const el = document.getElementById('chips'); el.innerHTML='';\n const top = [...DATA.countries].sort((a,b)=> b.throughput_bps-a.throughput_bps).slice(0,10);\n top.forEach(c=>{\n const b = document.createElement('button');\n b.className='chip';\n const col = colorFor(c.code);\n const confEmoji = c.confidence==='high'?'\u2705':(c.confidence==='medium'?'\ud83d\udfe1':'\u26a0\ufe0f');\n b.innerHTML = `<span class=\"dot\" style=\"background:${col};color:${col}\"><\/span><span class=\"name\">${c.code}<\/span><span class=\"pct\">${(c.share*100).toFixed(1)}%<\/span><span title=\"${c.confidence} confidence\" style=\"margin-left:4px;opacity:.9\">${confEmoji}<\/span>`;\n b.title = `${c.name}: ${fmtBitsPerSec(c.throughput_bps)} \u2022 ${c.confidence} confidence`;\n b.addEventListener('click', ()=> pinCountry(c.code));\n el.appendChild(b);\n });\n }\n function badge(level){ return `<span class=\"confidence ${level}\">${level.charAt(0).toUpperCase()+level.slice(1)}<\/span>`; }\n function pinCountry(code){\n const c = DATA.countries.find(x=> x.code===code); if(!c) return;\n document.getElementById('detailTitle').textContent = `${c.name} (${c.code})`;\n document.getElementById('detailMeta').innerHTML = `${badge(c.confidence)} <span style=\"margin-left:8px;opacity:.7\">telemetry ${(c.source_mix.telemetry*100).toFixed(0)}% \u2022 model ${(c.source_mix.model*100).toFixed(0)}%<\/span>`;\n const eta = (size)=>{ const mbps = Math.max(1, c.median_mbps); const Bps=(mbps*1e6)\/8; const s=size\/Bps; return s<60? `${s.toFixed(0)}s` : `${Math.floor(s\/60)}m ${Math.round(s%60)}s`; };\n document.getElementById('detailBody').innerHTML = `\n <div class=\"kpis\" style=\"margin-top:8px\">\n <div class=\"kpi\"><div class=\"label\">Throughput now<\/div><div class=\"value\">${fmtBitsPerSec(c.throughput_bps)}<\/div><\/div>\n <div class=\"kpi\"><div class=\"label\">Median \/ p90<\/div><div class=\"value\">${Math.round(c.median_mbps)} \/ ${Math.round(c.p90_mbps)} Mbps<\/div><\/div>\n <div class=\"kpi\"><div class=\"label\">Share of global<\/div><div class=\"value\">${(c.share*100).toFixed(2)}%<\/div><\/div>\n <\/div>\n <div class=\"mini\" style=\"margin-top:8px\">ETA at median speed:<\/div>\n <div class=\"chips\">\n <span class=\"chip\"><span class=\"name\">1 GB<\/span><span class=\"pct\">${eta(1e9)}<\/span><\/span>\n <span class=\"chip\"><span class=\"name\">5 GB<\/span><span class=\"pct\">${eta(5e9)}<\/span><\/span>\n <span class=\"chip\"><span class=\"name\">20 GB<\/span><span class=\"pct\">${eta(2e10)}<\/span><\/span>\n <\/div>`;\n }\n function renderTable(){\n const tbody = document.getElementById('tbody');\n const sorted=[...DATA.countries].sort((a,b)=> b.throughput_bps-a.throughput_bps);\n tbody.innerHTML='';\n sorted.forEach((c,i)=>{\n const tr=document.createElement('tr');\n tr.innerHTML = `\n <td>${i+1}<\/td>\n <td>${c.name} <span style=\"opacity:.6\">(${c.code})<\/span><\/td>\n <td>${fmtBitsPerSec(c.throughput_bps)}<\/td>\n <td>${(c.share*100).toFixed(2)}%<\/td>\n <td>${Math.round(c.median_mbps)}<\/td>\n <td>${Math.round(c.p90_mbps)}<\/td>\n <td>${formatInt(c.active_downloads)}<\/td>\n <td>${badge(c.confidence)}<\/td>`;\n tr.addEventListener('click', ()=> pinCountry(c.code));\n tbody.appendChild(tr);\n });\n }\n\n \/\/ ===== Dynamics =====\n function updateDynamics(){\n \/\/ Per-second adjustments make everything feel alive\n DATA.countries.forEach(c=>{\n const drift = (Math.random()*0.03 - 0.015); \/\/ \u00b11.5% throughput drift\/sec\n c.throughput_bps = Math.max(1e6, c.throughput_bps * (1 + drift));\n const dActive = Math.floor((Math.random()-0.5) * 50000); \/\/ \u00b150k active downloads\n c.active_downloads = Math.max(1, c.active_downloads + dActive);\n });\n recomputeTotals();\n activeDl = DATA.active_downloads; \/\/ dynamic full digits\n cycleTarget = DATA.throughput_bps * 5; \/\/ bar speed tied to live Pbps\n renderHero();\n renderChips();\n renderTable();\n }\n\n \/\/ ===== Animation loop =====\n let last = performance.now();\n function frame(now){\n const dt = (now-last)\/1000; last=now;\n if(!reduceMotion){\n \/\/ Convert live throughput to bytes each frame with tiny jitter\n const bps = DATA.throughput_bps * (1 + (Math.random()*0.02 - 0.01));\n const bytes = bps * dt;\n cycleBytes += bytes;\n bytes60 += bytes; bytesDay += bytes;\n if(cycleBytes>=cycleTarget){ cycleBytes -= cycleTarget; }\n renderHero();\n renderBar();\n }\n requestAnimationFrame(frame);\n }\n\n \/\/ ===== Init =====\n document.addEventListener('DOMContentLoaded', ()=>{\n compute();\n cycleTarget = DATA.throughput_bps * 5;\n renderHero(); renderChips(); renderTable();\n const top=[...DATA.countries].sort((a,b)=> b.throughput_bps-a.throughput_bps)[0];\n if(top) pinCountry(top.code);\n setInterval(updateDynamics, 1000); \/\/ live updates each second\n requestAnimationFrame(frame);\n const btn=document.getElementById('motionToggle');\n btn.addEventListener('click', ()=>{ reduceMotion=!reduceMotion; btn.textContent=`Reduce Motion: ${reduceMotion?'On':'Off'}`; btn.setAttribute('aria-pressed', String(reduceMotion)); document.getElementById('shimmer').style.display = reduceMotion? 'none':'block'; document.getElementById('shine').style.display = reduceMotion? 'none':'block'; });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>World Collective Download Bar World Collective Download Bar Methodology API Pricing Reduce Motion: Off Go Pro \u2014live Bytes last 60s […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank-slate-template.php","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"class_list":["post-294","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/pages\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=294"}],"version-history":[{"count":5,"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/pages\/294\/revisions"}],"predecessor-version":[{"id":303,"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/pages\/294\/revisions\/303"}],"wp:attachment":[{"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":294,"date":"2025-08-22T14:10:35","date_gmt":"2025-08-22T14:10:35","guid":{"rendered":"https:\/\/bioskinetics.com.au\/?page_id=294"},"modified":"2025-08-23T00:10:57","modified_gmt":"2025-08-23T00:10:57","slug":"world-collective-download-bar","status":"publish","type":"page","link":"https:\/\/bioskinetics.com.au\/?page_id=294","title":{"rendered":"World Collective Download Ba"},"content":{"rendered":"\n\n\n\n \n \n World Collective Download Bar<\/title>\n <meta name=\"description\" content=\"A live, single\u2011page visualization of global download activity aggregated into one hypnotic progress bar.\" \/>\n <style>\n :root{\n --bg: #0b1020; \/* deep space *\/\n --card: #121937; \/* indigo card *\/\n --muted: #7d8bb3;\n --text: #eef2ff;\n --accent: #7aa2ff; \/* primary *\/\n --accent-2: #8cf0ff; \/* cyan glow *\/\n --good: #50e3a4;\n --warn: #ffcc66;\n --bad: #ff7a7a;\n --chip: #1a245a;\n --bar-bg: #0d1330;\n --bar-fill: linear-gradient(90deg,#6aa5ff,#8cf0ff,#6aa5ff);\n }\n *{box-sizing:border-box}\n html,body{height:100%}\n body{\n margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, \"Helvetica Neue\", Noto Sans, Arial, \"Apple Color Emoji\",\"Segoe UI Emoji\";\n background: radial-gradient(1200px 800px at 20% -10%, #19214b 0%, #0b1020 45%, #090d1b 100%);\n color:var(--text);\n }\n a{color:var(--accent)}\n .topbar{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(9,13,27,.9), rgba(9,13,27,.55)); border-bottom: 1px solid rgba(138, 160, 255, .15);}\n .wrap{max-width:1120px; margin:0 auto; padding:14px 18px}\n .row{display:flex; align-items:center; gap:14px}\n .grow{flex:1}\n .brand{display:flex; align-items:center; gap:10px; font-weight:700}\n .logo{width:24px;height:24px;border-radius:6px;background: conic-gradient(from 0deg,#6aa5ff,#8cf0ff,#6aa5ff); box-shadow:0 0 22px rgba(124,196,255,.35)}\n nav a{opacity:.9; text-decoration:none; margin-right:16px}\n .cta{background:linear-gradient(180deg,#6aa5ff,#3f7bfd); border:0; color:#05102a; font-weight:700; padding:10px 14px; border-radius:10px; cursor:pointer}\n .ghost{background:transparent; border:1px solid rgba(138,160,255,.35); color:var(--text); padding:9px 13px; border-radius:10px; cursor:pointer}\n\n .hero{padding:36px 18px 10px}\n .hgrid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px}\n @media (max-width:920px){.hgrid{grid-template-columns: 1fr}}\n .card{background:linear-gradient(180deg, rgba(24,32,78,.55), rgba(15,21,46,.55)); border:1px solid rgba(124,196,255,.12); border-radius:16px; box-shadow: 0 10px 30px rgba(0,0,0,.35)}\n .card.pad{padding:16px}\n .kpis{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-top:14px}\n .kpi{padding:12px; background: rgba(20,28,60,.55); border:1px solid rgba(124,196,255,.1); border-radius:12px}\n .kpi .label{font-size:12px; letter-spacing:.5px; color:var(--muted)}\n .kpi .value{font-size:20px; font-weight:800; margin-top:6px}\n\n .bar-wrap{margin-top:10px; background:var(--bar-bg); border-radius:14px; overflow:hidden; height:28px; border:1px solid rgba(124,196,255,.15);position:relative}\n .bar{height:100%; width:0%; background:var(--bar-fill)}\n .shimmer{position:absolute; inset:0; pointer-events:none; opacity:.85; mix-blend:screen; background: repeating-linear-gradient(100deg,rgba(255,255,255,.06) 0 12px, rgba(120,220,255,.09) 12px 24px)}\n .shine{position:absolute; inset:0; background: radial-gradient(200px 80px at var(--x,20%) 50%, rgba(140,240,255,.38), transparent 60%)}\n @media (prefers-reduced-motion: reduce){ .shimmer{display:none} .shine{display:none} }\n\n .throughput{font-size:34px; font-weight:900; letter-spacing:.3px; display:flex; align-items:baseline; gap:10px}\n .subtext{color:var(--muted); font-size:13px}\n\n .chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}\n .chip{display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--chip); border:1px solid rgba(124,196,255,.1); border-radius:20px; cursor:pointer}\n .dot{width:10px;height:10px;border-radius:50%; box-shadow:0 0 8px currentColor}\n .chip .name{font-weight:700}\n .chip .pct{color:var(--muted); font-size:12px}\n\n .detail{padding:16px}\n .detail h3{margin:0 0 6px}\n .mini{color:var(--muted); font-size:12px; margin-bottom:8px}\n table{width:100%; border-collapse: collapse; margin-top:10px}\n th,td{padding:10px 8px; text-align:left; font-size:14px}\n thead th{position:sticky; top:0; background:rgba(18,25,55,.8); backdrop-filter: blur(8px)}\n tbody tr{border-top:1px solid rgba(124,196,255,.08)}\n\n .foot{padding:26px 18px; color:var(--muted); font-size:13px}\n\n .confidence{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700}\n .confidence.high{background:rgba(80,227,164,.12); color:var(--good)}\n .confidence.medium{background:rgba(255,204,102,.12); color:var(--warn)}\n .confidence.low{background:rgba(255,122,122,.12); color:var(--bad)}\n <\/style>\n<\/head>\n<body>\n <header class=\"topbar\">\n <div class=\"wrap row\">\n <div class=\"brand\"><span class=\"logo\"><\/span> World Collective Download Bar<\/div>\n <nav class=\"grow\">\n <a href=\"#methodology\">Methodology<\/a>\n <a href=\"#api\">API<\/a>\n <a href=\"#pricing\">Pricing<\/a>\n <\/nav>\n <button class=\"ghost\" id=\"motionToggle\" aria-pressed=\"false\">Reduce Motion: Off<\/button>\n <button class=\"cta\">Go Pro<\/button>\n <\/div>\n <\/header>\n\n <main class=\"hero wrap\">\n <div class=\"hgrid\">\n <section class=\"card pad\" aria-label=\"Global throughput and collective bar\">\n <div class=\"throughput\">\n <span id=\"throughputVal\">\u2014<\/span><span class=\"subtext\">live<\/span>\n <\/div>\n <div class=\"bar-wrap\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" aria-label=\"Global collective download progress\">\n <div class=\"bar\" id=\"globalBar\"><\/div>\n <div class=\"shimmer\" id=\"shimmer\"><\/div>\n <div class=\"shine\" id=\"shine\"><\/div>\n <\/div>\n <div class=\"kpis\">\n <div class=\"kpi\"><div class=\"label\">Bytes last 60s<\/div><div class=\"value\" id=\"bytes60\">\u2014<\/div><\/div>\n <div class=\"kpi\"><div class=\"label\">Bytes today<\/div><div class=\"value\" id=\"bytesDay\">\u2014<\/div><\/div>\n <div class=\"kpi\"><div class=\"label\">Active downloads (est.)<\/div><div class=\"value\" id=\"activeDl\">\u2014<\/div><\/div>\n <\/div>\n <div class=\"chips\" id=\"chips\" aria-live=\"polite\" aria-label=\"Top countries by current throughput\"><\/div>\n <\/section>\n\n <aside class=\"card pad detail\" aria-label=\"Country details\">\n <h3 id=\"detailTitle\">Country Details<\/h3>\n <div class=\"mini\" id=\"detailMeta\">Click a country chip to pin details.<\/div>\n <div id=\"detailBody\"><\/div>\n <div class=\"mini\">Confidence reflects live coverage vs model estimates.<\/div>\n <\/aside>\n <\/div>\n\n <section class=\"card pad\" style=\"margin-top:18px\" aria-label=\"All countries table\">\n <h3 style=\"margin:0 0 6px\">Live country breakdown<\/h3>\n <div class=\"mini\">Sorted by current throughput. Updates once per second.<\/div>\n <div style=\"max-height:420px; overflow:auto; margin-top:6px\">\n <table id=\"table\">\n <thead>\n <tr>\n <th style=\"width:32px\">#<\/th>\n <th>Country<\/th>\n <th>Throughput<\/th>\n <th>Share<\/th>\n <th>Median (Mbps)<\/th>\n <th>p90 (Mbps)<\/th>\n <th>Active Downloads<\/th>\n <th>Confidence<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"tbody\"><\/tbody>\n <\/table>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"foot wrap\">\n <span id=\"methodology\"><strong>Methodology:<\/strong> Live dataset with light jitter for real\u2011time flow.<\/span>\n <br\/><br\/>\n <span id=\"api\"><strong>API:<\/strong> \/v1\/snapshot\/global \u2022 \/v1\/snapshot\/country\/:cc \u2022 \/v1\/timeseries\/global?window=24h<\/span>\n <br\/>\n <span id=\"pricing\"><strong>Pricing:<\/strong> Free (top 10 live) \u2022 Pro (full list + 24h history + CSV) \u2022 Enterprise (API\/webhooks)<\/span>\n <\/footer>\n\n \n <script id=\"starter-data\" type=\"application\/json\">{\"ts\":\"2025-08-23T04:03:00Z\",\"throughput_bps\": 0,\"bytes_last_60s\": 2.12e16,\"bytes_today\": 7.61e18,\"active_downloads\": 0,\"countries\": []}<\/script>\n\n <script>\n \/\/ ===== Utilities =====\n const $ = sel => document.querySelector(sel);\n const fmtBitsPerSec = (bps) => { if (!isFinite(bps)) return '\u2014'; const u=['bps','Kbps','Mbps','Gbps','Tbps','Pbps']; let i=0,v=bps; while(v>=1000&&i<u.length-1){v\/=1000;i++;} return `${v.toFixed(v<10?2:1)} ${u[i]}`; };\n const fmtBytes = (bytes) => { if (!isFinite(bytes)) return '\u2014'; const u=['B','KB','MB','GB','TB','PB','EB']; let i=0,v=bytes; while(v>=1000&&i<u.length-1){v\/=1000;i++;} return `${v.toFixed(v<10?2:1)} ${u[i]}`; };\n const formatInt = n => new Intl.NumberFormat('en-US',{useGrouping:true, maximumFractionDigits:0}).format(Math.max(0, Math.floor(n)));\n const colorFor = (cc)=>{ let h=0; for(let i=0;i<cc.length;i++) h = (h*33 + cc.charCodeAt(i)) % 360; return `hsl(${h} 85% 65%)`; };\n\n const DATA = JSON.parse(document.getElementById('starter-data').textContent);\n\n \/\/ === ISO list (UN members + several territories for demo) ===\n const ISO_LIST = `AF:Afghanistan,AL:Albania,DZ:Algeria,AD:Andorra,AO:Angola,AG:Antigua and Barbuda,AR:Argentina,AM:Armenia,AU:Australia,AT:Austria,AZ:Azerbaijan,BS:Bahamas,BH:Bahrain,BD:Bangladesh,BB:Barbados,BY:Belarus,BE:Belgium,BZ:Belize,BJ:Benin,BT:Bhutan,BO:Bolivia,BA:Bosnia and Herzegovina,BW:Botswana,BR:Brazil,BN:Brunei,BG:Bulgaria,BF:Burkina Faso,BI:Burundi,KH:Cambodia,CM:Cameroon,CA:Canada,CV:Cape Verde,CF:Central African Republic,TD:Chad,CL:Chile,CN:China,CO:Colombia,KM:Comoros,CG:Congo (Republic),CD:Democratic Republic of the Congo,CR:Costa Rica,CI:Cote d'Ivoire,HR:Croatia,CU:Cuba,CY:Cyprus,CZ:Czechia,DK:Denmark,DJ:Djibouti,DM:Dominica,DO:Dominican Republic,EC:Ecuador,EG:Egypt,SV:El Salvador,GQ:Equatorial Guinea,ER:Eritrea,EE:Estonia,SZ:Eswatini,ET:Ethiopia,FJ:Fiji,FI:Finland,FR:France,GA:Gabon,GM:Gambia,GE:Georgia,DE:Germany,GH:Ghana,GR:Greece,GD:Grenada,GT:Guatemala,GN:Guinea,GW:Guinea-Bissau,GY:Guyana,HT:Haiti,HN:Honduras,HU:Hungary,IS:Iceland,IN:India,ID:Indonesia,IR:Iran,IQ:Iraq,IE:Ireland,IL:Israel,IT:Italy,JM:Jamaica,JP:Japan,JO:Jordan,KZ:Kazakhstan,KE:Kenya,KI:Kiribati,KW:Kuwait,KG:Kyrgyzstan,LA:Laos,LV:Latvia,LB:Lebanon,LS:Lesotho,LR:Liberia,LY:Libya,LI:Liechtenstein,LT:Lithuania,LU:Luxembourg,MG:Madagascar,MW:Malawi,MY:Malaysia,MV:Maldives,ML:Mali,MT:Malta,MH:Marshall Islands,MR:Mauritania,MU:Mauritius,MX:Mexico,FM:Micronesia,MD:Moldova,MC:Monaco,MN:Mongolia,ME:Montenegro,MA:Morocco,MZ:Mozambique,MM:Myanmar,NA:Namibia,NR:Nauru,NP:Nepal,NL:Netherlands,NZ:New Zealand,NI:Nicaragua,NE:Niger,NG:Nigeria,MK:North Macedonia,NO:Norway,OM:Oman,PK:Pakistan,PW:Palau,PA:Panama,PG:Papua New Guinea,PY:Paraguay,PE:Peru,PH:Philippines,PL:Poland,PT:Portugal,QA:Qatar,RO:Romania,RU:Russia,RW:Rwanda,KN:Saint Kitts and Nevis,LC:Saint Lucia,VC:Saint Vincent and the Grenadines,WS:Samoa,SM:San Marino,ST:Sao Tome and Principe,SA:Saudi Arabia,SN:Senegal,RS:Serbia,SC:Seychelles,SL:Sierra Leone,SG:Singapore,SK:Slovakia,SI:Slovenia,SB:Solomon Islands,SO:Somalia,ZA:South Africa,SS:South Sudan,ES:Spain,LK:Sri Lanka,SD:Sudan,SR:Suriname,SE:Sweden,CH:Switzerland,SY:Syria,TW:Taiwan,TJ:Tajikistan,TZ:Tanzania,TH:Thailand,TL:Timor-Leste,TG:Togo,TO:Tonga,TT:Trinidad and Tobago,TN:Tunisia,TR:Turkey,TM:Turkmenistan,TV:Tuvalu,UG:Uganda,UA:Ukraine,AE:United Arab Emirates,GB:United Kingdom,US:United States,UY:Uruguay,UZ:Uzbekistan,VU:Vanuatu,VA:Vatican City,VE:Venezuela,VN:Vietnam,YE:Yemen,ZM:Zambia,ZW:Zimbabwe,HK:Hong Kong,MO:Macau,PR:Puerto Rico`;\n\n function seededRand(str){ let h=2166136261>>>0; for(let i=0;i<str.length;i++){ h^=str.charCodeAt(i); h=Math.imul(h,16777619);} return (h>>>0)\/4294967295; }\n\n function buildCountries(){\n const arr=[];\n ISO_LIST.split(',').forEach(pair=>{\n const [code,name] = pair.split(':'); if(!code||!name) return;\n const r = seededRand(code);\n const median = Math.round(30 + r*220); \/\/ 30..250 Mbps\n const p90 = Math.round(median*(1.9 + r*0.7));\n const active = Math.floor(120000 + r*8000000); \/\/ 0.12M .. 8.12M\n const throughput_bps = active * (median*1e6\/8) * (0.6 + r*0.8);\n const telemetry = +(0.35 + r*0.55).toFixed(2);\n const model = +(1-telemetry).toFixed(2);\n arr.push({ code, name, throughput_bps, median_mbps:median, p90_mbps:p90, active_downloads:active, confidence: (r>0.7?'high': r>0.35?'medium':'low'), source_mix:{telemetry, model} });\n });\n \/\/ Ensure some obviously 'high' confidence countries (top N by throughput)\n arr.sort((a,b)=> b.throughput_bps - a.throughput_bps);\n arr.slice(0,8).forEach(c=> c.confidence = 'high');\n return arr;\n }\n\n function recomputeTotals(){\n DATA.throughput_bps = DATA.countries.reduce((s,c)=> s + c.throughput_bps, 0);\n DATA.active_downloads = DATA.countries.reduce((s,c)=> s + c.active_downloads, 0);\n DATA.countries.forEach(c=> c.share = c.throughput_bps \/ DATA.throughput_bps);\n }\n\n function compute(){\n DATA.countries = buildCountries();\n recomputeTotals();\n }\n\n \/\/ ===== State =====\n let bytes60 = DATA.bytes_last_60s || 0;\n let bytesDay = DATA.bytes_today || 0;\n let activeDl = DATA.active_downloads || 0;\n let reduceMotion = false;\n let cycleBytes = 0;\n let cycleTarget = 1; \/\/ set after compute()\n\n \/\/ ===== Renderers =====\n function renderHero(){\n document.getElementById('throughputVal').textContent = fmtBitsPerSec(DATA.throughput_bps); \/\/ dynamic Pbps\n document.getElementById('bytes60').textContent = fmtBytes(bytes60);\n document.getElementById('bytesDay').textContent = fmtBytes(bytesDay);\n document.getElementById('activeDl').textContent = formatInt(activeDl); \/\/ dynamic full digits\n }\n function renderBar(){\n const pct = Math.min(100, (cycleBytes\/cycleTarget)*100);\n document.getElementById('globalBar').style.width = pct.toFixed(2)+'%';\n document.querySelector('.bar-wrap').setAttribute('aria-valuenow', pct.toFixed(0));\n document.getElementById('shine').style.setProperty('--x', pct+'%');\n }\n function renderChips(){\n const el = document.getElementById('chips'); el.innerHTML='';\n const top = [...DATA.countries].sort((a,b)=> b.throughput_bps-a.throughput_bps).slice(0,10);\n top.forEach(c=>{\n const b = document.createElement('button');\n b.className='chip';\n const col = colorFor(c.code);\n const confEmoji = c.confidence==='high'?'\u2705':(c.confidence==='medium'?'\ud83d\udfe1':'\u26a0\ufe0f');\n b.innerHTML = `<span class=\"dot\" style=\"background:${col};color:${col}\"><\/span><span class=\"name\">${c.code}<\/span><span class=\"pct\">${(c.share*100).toFixed(1)}%<\/span><span title=\"${c.confidence} confidence\" style=\"margin-left:4px;opacity:.9\">${confEmoji}<\/span>`;\n b.title = `${c.name}: ${fmtBitsPerSec(c.throughput_bps)} \u2022 ${c.confidence} confidence`;\n b.addEventListener('click', ()=> pinCountry(c.code));\n el.appendChild(b);\n });\n }\n function badge(level){ return `<span class=\"confidence ${level}\">${level.charAt(0).toUpperCase()+level.slice(1)}<\/span>`; }\n function pinCountry(code){\n const c = DATA.countries.find(x=> x.code===code); if(!c) return;\n document.getElementById('detailTitle').textContent = `${c.name} (${c.code})`;\n document.getElementById('detailMeta').innerHTML = `${badge(c.confidence)} <span style=\"margin-left:8px;opacity:.7\">telemetry ${(c.source_mix.telemetry*100).toFixed(0)}% \u2022 model ${(c.source_mix.model*100).toFixed(0)}%<\/span>`;\n const eta = (size)=>{ const mbps = Math.max(1, c.median_mbps); const Bps=(mbps*1e6)\/8; const s=size\/Bps; return s<60? `${s.toFixed(0)}s` : `${Math.floor(s\/60)}m ${Math.round(s%60)}s`; };\n document.getElementById('detailBody').innerHTML = `\n <div class=\"kpis\" style=\"margin-top:8px\">\n <div class=\"kpi\"><div class=\"label\">Throughput now<\/div><div class=\"value\">${fmtBitsPerSec(c.throughput_bps)}<\/div><\/div>\n <div class=\"kpi\"><div class=\"label\">Median \/ p90<\/div><div class=\"value\">${Math.round(c.median_mbps)} \/ ${Math.round(c.p90_mbps)} Mbps<\/div><\/div>\n <div class=\"kpi\"><div class=\"label\">Share of global<\/div><div class=\"value\">${(c.share*100).toFixed(2)}%<\/div><\/div>\n <\/div>\n <div class=\"mini\" style=\"margin-top:8px\">ETA at median speed:<\/div>\n <div class=\"chips\">\n <span class=\"chip\"><span class=\"name\">1 GB<\/span><span class=\"pct\">${eta(1e9)}<\/span><\/span>\n <span class=\"chip\"><span class=\"name\">5 GB<\/span><span class=\"pct\">${eta(5e9)}<\/span><\/span>\n <span class=\"chip\"><span class=\"name\">20 GB<\/span><span class=\"pct\">${eta(2e10)}<\/span><\/span>\n <\/div>`;\n }\n function renderTable(){\n const tbody = document.getElementById('tbody');\n const sorted=[...DATA.countries].sort((a,b)=> b.throughput_bps-a.throughput_bps);\n tbody.innerHTML='';\n sorted.forEach((c,i)=>{\n const tr=document.createElement('tr');\n tr.innerHTML = `\n <td>${i+1}<\/td>\n <td>${c.name} <span style=\"opacity:.6\">(${c.code})<\/span><\/td>\n <td>${fmtBitsPerSec(c.throughput_bps)}<\/td>\n <td>${(c.share*100).toFixed(2)}%<\/td>\n <td>${Math.round(c.median_mbps)}<\/td>\n <td>${Math.round(c.p90_mbps)}<\/td>\n <td>${formatInt(c.active_downloads)}<\/td>\n <td>${badge(c.confidence)}<\/td>`;\n tr.addEventListener('click', ()=> pinCountry(c.code));\n tbody.appendChild(tr);\n });\n }\n\n \/\/ ===== Dynamics =====\n function updateDynamics(){\n \/\/ Per-second adjustments make everything feel alive\n DATA.countries.forEach(c=>{\n const drift = (Math.random()*0.03 - 0.015); \/\/ \u00b11.5% throughput drift\/sec\n c.throughput_bps = Math.max(1e6, c.throughput_bps * (1 + drift));\n const dActive = Math.floor((Math.random()-0.5) * 50000); \/\/ \u00b150k active downloads\n c.active_downloads = Math.max(1, c.active_downloads + dActive);\n });\n recomputeTotals();\n activeDl = DATA.active_downloads; \/\/ dynamic full digits\n cycleTarget = DATA.throughput_bps * 5; \/\/ bar speed tied to live Pbps\n renderHero();\n renderChips();\n renderTable();\n }\n\n \/\/ ===== Animation loop =====\n let last = performance.now();\n function frame(now){\n const dt = (now-last)\/1000; last=now;\n if(!reduceMotion){\n \/\/ Convert live throughput to bytes each frame with tiny jitter\n const bps = DATA.throughput_bps * (1 + (Math.random()*0.02 - 0.01));\n const bytes = bps * dt;\n cycleBytes += bytes;\n bytes60 += bytes; bytesDay += bytes;\n if(cycleBytes>=cycleTarget){ cycleBytes -= cycleTarget; }\n renderHero();\n renderBar();\n }\n requestAnimationFrame(frame);\n }\n\n \/\/ ===== Init =====\n document.addEventListener('DOMContentLoaded', ()=>{\n compute();\n cycleTarget = DATA.throughput_bps * 5;\n renderHero(); renderChips(); renderTable();\n const top=[...DATA.countries].sort((a,b)=> b.throughput_bps-a.throughput_bps)[0];\n if(top) pinCountry(top.code);\n setInterval(updateDynamics, 1000); \/\/ live updates each second\n requestAnimationFrame(frame);\n const btn=document.getElementById('motionToggle');\n btn.addEventListener('click', ()=>{ reduceMotion=!reduceMotion; btn.textContent=`Reduce Motion: ${reduceMotion?'On':'Off'}`; btn.setAttribute('aria-pressed', String(reduceMotion)); document.getElementById('shimmer').style.display = reduceMotion? 'none':'block'; document.getElementById('shine').style.display = reduceMotion? 'none':'block'; });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>World Collective Download Bar World Collective Download Bar Methodology API Pricing Reduce Motion: Off Go Pro \u2014live Bytes last 60s […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank-slate-template.php","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"class_list":["post-294","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/pages\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=294"}],"version-history":[{"count":5,"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/pages\/294\/revisions"}],"predecessor-version":[{"id":303,"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=\/wp\/v2\/pages\/294\/revisions\/303"}],"wp:attachment":[{"href":"https:\/\/bioskinetics.com.au\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}