asjlkdjljvic

css/index.css

@@ -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;
+}
+

index.html

@@ -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;"/>

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 = `
+	$all('.shareables').forEach((dom)=>{
-	  <a href="https://www.facebook.com/sharer/sharer.php?u=${url}" target="_blank"><img alt="Share on Facebook" src="sharing/Facebook.png" /></a>
+		dom.innerHTML = `
-	  <a href="https://twitter.com/intent/tweet?text=${title}%0A${desc}%20${url}" target="_blank"><img alt="Tweet" src="sharingTwitter.png" /></a>
+			<a href="https://www.facebook.com/sharer/sharer.php?u=${url}" target="_blank"><div class='sharable_icon' fb></div></a>
-	  <a href="mailto:?subject=${title}&body=${desc}%20${url}" target="_blank"><img alt="Send email" src="sharing/Email.png" /></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');
+});

sim/index.html

@@ -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_start">
-					<div id="bb_pause">❙❙ Pause</div>
+						<div class='control_icon' start></div>
-					<div id="bb_continue">▶ Continue</div>
+						Start
-					<div id="bb_reset">↺ Reset</div>
+					</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">
-					<div id="sb_reset">↺ Reset</div>
+					Reset All
-					<div id="sb_replay">↺ Replay what you just did</div>
+				</div>
-					<div id="sb_params">↺ Reset all sliders</div>
+				<div id="sb_replay">
+					Replay Recording
 				</div>
 			</div>
 

sim/js/Controls.js

@@ -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;
 };

sim/js/Model.js

@@ -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){

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;
+#sb_reset, #sb_replay{
-    margin-top: 3px;
+	position: absolute;
     color: #999;
-    font-size: 17px;
+    font-size: 15px;
     font-weight: 100;
     cursor: pointer;
+    bottom: -22px;
+
+    display: none;
 }
-.small_button:hover{
+#sb_reset:hover, #sb_replay:hover{
-	color: #aaa;
+	color: #bbb;
 }
-.small_button > div{
+#sb_reset{
-	display: none;
+	right: 0px;
-}
-.small_button[label='reset'] > #sb_reset{
-	display: block;
-}
-.small_button[label='replay'] > #sb_replay{
-	display: block;
-}
-.small_button[label='params'] > #sb_params{
-	display: block;
 }
 
 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;
+}

words/words.md

@@ -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>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>🕐 28 min play/read</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. [...]
+[^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.”
-    
-    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.”
     
     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
+![](pics/mitigation_vs_suppression.png)
 
 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>