asjlkdjljvic
This commit is contained in:
Nicky Case
parent
fec2f07e74
commit
7253482a89
|
|
@ -152,6 +152,15 @@ sub{
|
|||
#shown_feetnotes{
|
||||
display: none;
|
||||
}
|
||||
#footnotes_container ol{
|
||||
display: inline;
|
||||
}
|
||||
#footnotes_container li{
|
||||
display: list-item;
|
||||
}
|
||||
#footnotes_container a{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#wash{
|
||||
font-size: 12px;
|
||||
|
|
@ -164,4 +173,29 @@ sub{
|
|||
}
|
||||
.littlefoot-footnote__content a{
|
||||
color: #549cf9;
|
||||
}
|
||||
}
|
||||
|
||||
.sharable_icon{
|
||||
width:25px;
|
||||
height:25px;
|
||||
background: url(../sharing/shareables.png);
|
||||
background-size: auto 100%;
|
||||
display: inline-block;
|
||||
|
||||
position: relative;
|
||||
top:0;
|
||||
}
|
||||
.in_footer .sharable_icon{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.sharable_icon:hover{
|
||||
top:-2px;
|
||||
}
|
||||
.sharable_icon[tw]{
|
||||
background-position: -100% 0;
|
||||
}
|
||||
.sharable_icon[em]{
|
||||
background-position: -200% 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
|
|
@ -47,9 +47,9 @@
|
|||
What Happens Next? COVID-19 Futures, Explained With Playable Simulations
|
||||
</span>
|
||||
<span id='share_desc'>
|
||||
🔬 Here's a real deep dive! 28 min read/play:
|
||||
🔬 Here's a real deep dive! 30 min read/play:
|
||||
</span>
|
||||
<span id='shareables'></span>
|
||||
<span class='shareables' style='display:block; margin-top:7px; opacity:0.75'></span>
|
||||
</div>
|
||||
|
||||
<!-- - - - - - - - - - - - - - - - - - - - - - - -->
|
||||
|
|
@ -863,6 +863,8 @@
|
|||
|
||||
<div>
|
||||
|
||||
Help this post get R > 1: <span class='shareables in_footer' style='position: relative; top: 17px; right: -6px;'></span>
|
||||
<br><br>
|
||||
This guide is
|
||||
<br>
|
||||
<img src='sharing/cc0.png' style="margin-right: 10px; margin-top: 10px; width: 120px;"/>
|
||||
|
|
|
|||
21
js/blerp.js
21
js/blerp.js
|
|
@ -1,6 +1,9 @@
|
|||
window.$ = (query,el=document)=>{
|
||||
return el.querySelector(query);
|
||||
};
|
||||
window.$all = (query,el=document)=>{
|
||||
return [...el.querySelectorAll(query)];
|
||||
};
|
||||
|
||||
{
|
||||
|
||||
|
|
@ -8,11 +11,13 @@ window.$ = (query,el=document)=>{
|
|||
title = encodeURIComponent($('#share_title').innerText.trim()),
|
||||
desc = encodeURIComponent($('#share_desc').innerText.trim());
|
||||
|
||||
$('#shareables').innerHTML = `
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u=${url}" target="_blank"><img alt="Share on Facebook" src="sharing/Facebook.png" /></a>
|
||||
<a href="https://twitter.com/intent/tweet?text=${title}%0A${desc}%20${url}" target="_blank"><img alt="Tweet" src="sharingTwitter.png" /></a>
|
||||
<a href="mailto:?subject=${title}&body=${desc}%20${url}" target="_blank"><img alt="Send email" src="sharing/Email.png" /></a>
|
||||
`;
|
||||
$all('.shareables').forEach((dom)=>{
|
||||
dom.innerHTML = `
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u=${url}" target="_blank"><div class='sharable_icon' fb></div></a>
|
||||
<a href="https://twitter.com/intent/tweet?text=${title}%0A${desc}%20${url}" target="_blank"><div class='sharable_icon' tw></div></a>
|
||||
<a href="mailto:?subject=${title}&body=${desc}%20${url}" target="_blank"><div class='sharable_icon' em></div></a>
|
||||
`;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -22,4 +27,8 @@ $('#show_feetnotes_button').onclick = ()=>{
|
|||
$('#show_feetnotes_button').style.display = 'none';
|
||||
$('#shown_feetnotes').style.display = 'block';
|
||||
$('.footnotes').style.display = 'block';
|
||||
};
|
||||
};
|
||||
|
||||
$all('.footnotes a[rev="footnote"]').forEach((a)=>{
|
||||
a.setAttribute('target','_self');
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
<div id="label_c_recovery">
|
||||
<input class="sim_checkbox" type="checkbox" id="c_recovery">
|
||||
Becomes <icon r></icon> in <span id="label_p_recovery">N</span> days
|
||||
Takes <span id="label_p_recovery">N</span> days to go from <icon i></icon> to <icon r></icon>
|
||||
<br>
|
||||
<input class="sim_input" type="range" id="p_recovery" min="1" max="30" step="1" value="10">
|
||||
</div>
|
||||
|
|
@ -140,15 +140,28 @@
|
|||
|
||||
<div id="sim_controls">
|
||||
<div class="big_button">
|
||||
<div id="bb_start">▶ Start</div>
|
||||
<div id="bb_pause">❙❙ Pause</div>
|
||||
<div id="bb_continue">▶ Continue</div>
|
||||
<div id="bb_reset">↺ Reset</div>
|
||||
<div id="bb_start">
|
||||
<div class='control_icon' start></div>
|
||||
Start
|
||||
</div>
|
||||
<div id="bb_pause">
|
||||
<div class='control_icon' pause></div>
|
||||
Pause
|
||||
</div>
|
||||
<div id="bb_continue">
|
||||
<div class='control_icon' continue></div>
|
||||
Continue
|
||||
</div>
|
||||
<div id="bb_reset">
|
||||
<div class='control_icon' reset></div>
|
||||
Reset
|
||||
</div>
|
||||
</div>
|
||||
<div class="small_button">
|
||||
<div id="sb_reset">↺ Reset</div>
|
||||
<div id="sb_replay">↺ Replay what you just did</div>
|
||||
<div id="sb_params">↺ Reset all sliders</div>
|
||||
<div id="sb_reset">
|
||||
Reset All
|
||||
</div>
|
||||
<div id="sb_replay">
|
||||
Replay Recording
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -114,9 +114,11 @@ $all('.sim_input').forEach((slider)=>{
|
|||
}
|
||||
|
||||
// MORE HAX
|
||||
/*
|
||||
if(daysCurrent==0){
|
||||
sbDOM.setAttribute('label','params');
|
||||
}
|
||||
*/
|
||||
|
||||
// HAX
|
||||
INPUTS_WERE_CHANGED = true;
|
||||
|
|
@ -189,7 +191,7 @@ let restart = ()=>{
|
|||
/////////////////////////////////////
|
||||
|
||||
let bbDOM = $('.big_button');
|
||||
let sbDOM = $('.small_button');
|
||||
//let sbDOM = $('.small_button');
|
||||
|
||||
let handTutorial = 0;
|
||||
|
||||
|
|
@ -266,6 +268,27 @@ let defaultParams = [
|
|||
["p_summer", 0],
|
||||
];
|
||||
|
||||
let _resetAll = ()=>{
|
||||
changeSliders(defaultParams);
|
||||
changeSliders(CURRENT_STAGE.inputs);
|
||||
_resetTheSim();
|
||||
};
|
||||
$('#sb_reset').onclick = ()=>{
|
||||
_resetAll();
|
||||
_updateButtons();
|
||||
};
|
||||
|
||||
$('#sb_replay').onclick = ()=>{
|
||||
_resetAll();
|
||||
recordedHistory = JSON.parse(JSON.stringify(CURRENT_STAGE.PLAY_RECORDING));
|
||||
_updateButtons();
|
||||
|
||||
restart();
|
||||
IS_PLAYING = true;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
sbDOM.onclick = ()=>{
|
||||
if(daysCurrent==0){
|
||||
|
||||
|
|
@ -279,27 +302,32 @@ sbDOM.onclick = ()=>{
|
|||
}
|
||||
_updateButtons();
|
||||
};
|
||||
*/
|
||||
|
||||
let _updateButtons = ()=>{
|
||||
|
||||
if(daysCurrent > daysTotal){
|
||||
|
||||
bbDOM.setAttribute('label','reset');
|
||||
sbDOM.setAttribute('label','');
|
||||
//sbDOM.setAttribute('label','');
|
||||
|
||||
}else if(IS_PLAYING){
|
||||
|
||||
bbDOM.setAttribute('label','pause');
|
||||
sbDOM.setAttribute('label','reset');
|
||||
$('#sb_reset').style.display = 'block';
|
||||
if(CURRENT_STAGE.PLAY_RECORDING){
|
||||
$('#sb_replay').style.display = 'block';
|
||||
}
|
||||
//sbDOM.setAttribute('label','reset');
|
||||
|
||||
}else{
|
||||
|
||||
if(daysCurrent==0){
|
||||
bbDOM.setAttribute('label','start');
|
||||
sbDOM.setAttribute('label','NONE');
|
||||
//sbDOM.setAttribute('label','NONE');
|
||||
}else{
|
||||
bbDOM.setAttribute('label','continue');
|
||||
sbDOM.setAttribute('label','reset');
|
||||
//sbDOM.setAttribute('label','reset');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -333,7 +361,7 @@ let _hideAllControls = ()=>{
|
|||
let _resetTheSim = ()=>{
|
||||
_showAllControls();
|
||||
//IS_REPLAYING_HISTORY = false;
|
||||
//recordedHistory = [];
|
||||
recordedHistory = [];
|
||||
restart();
|
||||
IS_PLAYING = false;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -438,7 +438,7 @@ let draw = ()=>{
|
|||
|
||||
params._HACK_RESET_WHEN_I_100 = "go";
|
||||
bbDOM.setAttribute('label','reset');
|
||||
sbDOM.setAttribute('label','');
|
||||
//sbDOM.setAttribute('label','');
|
||||
|
||||
if(CURRENT_STAGE.SHOW_HAND=="tutorial_0" && handTutorial==1){
|
||||
if(!HAND_IS_VISIBLE){
|
||||
|
|
|
|||
57
sim/sim.css
57
sim/sim.css
|
|
@ -4,6 +4,7 @@ body{
|
|||
font-size: 15px;
|
||||
font-weight: normal;
|
||||
background: #ddd;
|
||||
line-height: 15px;
|
||||
}
|
||||
div{
|
||||
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||
|
|
@ -48,8 +49,8 @@ div{
|
|||
}
|
||||
|
||||
#sim_controls{
|
||||
margin-top: 10px;
|
||||
width: 250px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.big_button{
|
||||
|
|
@ -67,6 +68,8 @@ div{
|
|||
}
|
||||
.big_button > div{
|
||||
display: none;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
.big_button[label='start'] > #bb_start{
|
||||
display: block;
|
||||
|
|
@ -87,28 +90,22 @@ div{
|
|||
.big_button[label='reset'] > #bb_reset{
|
||||
display: block;
|
||||
}
|
||||
.small_button{
|
||||
text-align: right;
|
||||
margin-top: 3px;
|
||||
|
||||
#sb_reset, #sb_replay{
|
||||
position: absolute;
|
||||
color: #999;
|
||||
font-size: 17px;
|
||||
font-size: 15px;
|
||||
font-weight: 100;
|
||||
cursor: pointer;
|
||||
bottom: -22px;
|
||||
|
||||
display: none;
|
||||
}
|
||||
.small_button:hover{
|
||||
color: #aaa;
|
||||
#sb_reset:hover, #sb_replay:hover{
|
||||
color: #bbb;
|
||||
}
|
||||
.small_button > div{
|
||||
display: none;
|
||||
}
|
||||
.small_button[label='reset'] > #sb_reset{
|
||||
display: block;
|
||||
}
|
||||
.small_button[label='replay'] > #sb_replay{
|
||||
display: block;
|
||||
}
|
||||
.small_button[label='params'] > #sb_params{
|
||||
display: block;
|
||||
#sb_reset{
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
hr{
|
||||
|
|
@ -294,6 +291,7 @@ icon[r]{
|
|||
position: absolute;
|
||||
font-size: 20px;
|
||||
width: 250px;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
@keyframes aniFrames{
|
||||
|
|
@ -306,4 +304,25 @@ icon[r]{
|
|||
100% {
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.control_icon{
|
||||
width:36px;
|
||||
height:36px;
|
||||
background: url(../icons/controls.png);
|
||||
background-size: auto 100%;
|
||||
display: inline-block;
|
||||
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
.control_icon[continue]{
|
||||
background-position: -100% 0;
|
||||
}
|
||||
.control_icon[pause]{
|
||||
background-position: -200% 0;
|
||||
}
|
||||
.control_icon[reset]{
|
||||
background-position: -300% 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<div>
|
||||
<h1>What Happens Next?</h1>
|
||||
<h2>COVID-19 Futures, Explained With Playable Simulations</h2>
|
||||
<h3>by Marcel Salathé (epidemiologist) and Nicky Case (art/code)</h3>
|
||||
<h3>🕐 28 min play/read</h3>
|
||||
<h3>by <a href='https://scholar.google.com/citations?user=_wHMGkUAAAAJ&hl=en'>Marcel Salathé</a> (epidemiologist) and <a href='https://ncase.me/'>Nicky Case</a> (art/code)</h3>
|
||||
<h3>🕐 30 min play/read</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -257,9 +257,7 @@ Even if only 0.5% of infected die – a generous assumption when there's no more
|
|||
|
||||
The "Flatten The Curve" plan was touted by every public health organization, while the United Kingdom's original "herd immunity" plan was universally booed. They were *the same plan.* The UK just communicated theirs poorly.[^yong]
|
||||
|
||||
[^yong]: “[Graham Medley] says that the actual goal is the same as that of other countries: flatten the curve by staggering the onset of infections. As a consequence, the nation may achieve herd immunity; it’s a side effect, not an aim. [...]
|
||||
|
||||
The government’s actual coronavirus action plan, available online, doesn’t mention herd immunity at all. [...] “It’s been a case of how not to communicate during an outbreak,” says Devi Sridhar, a public-health specialist at the University of Edinburgh.”
|
||||
[^yong]: “He says that the actual goal is the same as that of other countries: flatten the curve by staggering the onset of infections. As a consequence, the nation may achieve herd immunity; it’s a side effect, not an aim. [...] The government’s actual coronavirus action plan, available online, doesn’t mention herd immunity at all.”
|
||||
|
||||
From a [The Atlantic article by Ed Yong](https://www.theatlantic.com/health/archive/2020/03/coronavirus-pandemic-herd-immunity-uk-boris-johnson/608065/)
|
||||
|
||||
|
|
@ -297,7 +295,7 @@ Three notes:
|
|||
|
||||
That was the other finding of the March 16 Imperial College report, which convinced the UK to abandon its original plan. Any attempt at **mitigation** (reduce R, but R > 1) will fail. The only way out is **suppression** (reduce R so that R < 1).
|
||||
|
||||
// TODO: pic difference
|
||||
|
||||
|
||||
That is, don't merely "flatten" the curve, *crush* the curve. For example, with a...
|
||||
|
||||
|
|
@ -319,7 +317,7 @@ So, what, do we just lockdown again & again?
|
|||
|
||||
###Scenario 3: Intermittent Lockdown
|
||||
|
||||
This solution was first suggested by the March 16 Imperial College report, and later again by a Harvard paper[^lockdown_harvard].
|
||||
This solution was first suggested by the March 16 Imperial College report, and later again by a Harvard paper.[^lockdown_harvard]
|
||||
|
||||
[^lockdown_harvard]: “Absent other interventions, a key metric for the success of social distancing is whether critical care capacities are exceeded. To avoid this, prolonged or intermittent social distancing may be necessary into 2022.” [Kissler and Tedijanto et al](https://science.sciencemag.org/content/early/2020/04/14/science.abb5793)
|
||||
|
||||
|
|
@ -585,7 +583,7 @@ But for COVID-19 *in humans*, as of May 1st 2020, "how long" is the big unknown.
|
|||
[^monkeys]: From [Bao et al.](https://www.biorxiv.org/content/10.1101/2020.03.13.990226v1.abstract) *Disclaimer: This article is a preprint and has not been certified by peer review (yet).* Also, to emphasize: they only tested re-infection 28 days later.
|
||||
|
||||
For these simulations, let's say it's 1 year.
|
||||
**Here's a simulation starting with 100% <icon r></icon>**, exponentially decaying into susceptible, no-immunity <icon s></icon>s after 1 year, on *average*:
|
||||
**Here's a simulation starting with 100% <icon r></icon>**, exponentially decaying into susceptible, no-immunity <icon s></icon>s after 1 year, on *average*, with variation:
|
||||
|
||||
<div class="sim">
|
||||
<iframe src="sim?stage=yrs-1&format=lines&height=600" width="800" height="600"></iframe>
|
||||
|
|
|
|||
Loading…
Reference in New Issue