awwwww YEAH
This commit is contained in:
parent
51d91e9c20
commit
94f3a6541f
117
index.html
117
index.html
|
@ -56,15 +56,15 @@ Cursor is allowed to flow EVERYWHERE though...
|
|||
</div>
|
||||
<div chapter="Networks">
|
||||
<span>1</span>
|
||||
<span>1. Networks</span>
|
||||
<span>1. Connections</span>
|
||||
</div>
|
||||
<div chapter="Simple">
|
||||
<span>2</span>
|
||||
<span>2. Simple Contagion</span>
|
||||
<span>2. Contagions</span>
|
||||
</div>
|
||||
<div chapter="Complex">
|
||||
<span>3</span>
|
||||
<span>3. Complex Contagion</span>
|
||||
<span>3. Complex Contagions</span>
|
||||
</div>
|
||||
<div chapter="BB">
|
||||
<span>4</span>
|
||||
|
@ -139,8 +139,8 @@ let's play! →
|
|||
|
||||
<br><br><br>
|
||||
|
||||
Isaac Newton was pretty sure he was one smart cookie.
|
||||
I mean, after inventing calculus, classical mechanics, and a theory of gravity,
|
||||
Sir Isaac Newton was pretty sure he was one smart cookie.
|
||||
I mean, after inventing calculus and a theory of gravity,
|
||||
he should be smart enough to do some financial investing, right?
|
||||
Anyway,
|
||||
long story short, he lost $4,600,000 (in today's dollars)
|
||||
|
@ -172,11 +172,10 @@ let's play! →
|
|||
|
||||
<b>But <i>why</i> do some crowds become wise or mad?</b>
|
||||
Can we calculate the madness, or wisdom, of people?
|
||||
According to a new field of science,
|
||||
the answer is not to look at a crowd's <i>individuals</i>,
|
||||
but at...
|
||||
According to the new field of <b>network science</b>,
|
||||
the answer is not in the <i>individual people</i>, but in...
|
||||
|
||||
<next>...its <i>network</i> →</next>
|
||||
<next>...their <i>connections</i> →</next>
|
||||
|
||||
</span></div>
|
||||
</words>
|
||||
|
@ -290,7 +289,7 @@ let's play! →
|
|||
But ideas/behaviors aren't just passively observed, they actively <i>spread</i>.
|
||||
So now, let's look at something network scientists call...
|
||||
|
||||
<next>“Simple Contagion!” →</next>
|
||||
<next>“Contagions!” →</next>
|
||||
|
||||
<b>← bonus challenge:</b> make everyone think
|
||||
<i>less than half</i> of their friends are binge-drinkers
|
||||
|
@ -303,30 +302,112 @@ let's play! →
|
|||
<!-- 2. Simple Contagions -->
|
||||
|
||||
<words id="_2_simple">
|
||||
blah blah simple
|
||||
Below, we start with one person (img) who has some information.
|
||||
Some <i>mis</i>information. "Fake news", as the cool kids say.
|
||||
And every day, that person spreads the rumor to their friends.
|
||||
And they spread it to <i>their</i> friends. And so on.
|
||||
<br><br>
|
||||
<b>Run the simulation, step-by-step ↓</b>
|
||||
(p.s: you can't draw <i>while</i> the sim's running)
|
||||
</words>
|
||||
|
||||
<words id="_2_simple_2">
|
||||
Note: despite the negative name, "contagions" can be good or bad.
|
||||
There's strong statistical evidence(*) that
|
||||
smoking, happiness, obesity, voting patterns, and cooperation levels
|
||||
are all "contagious" --
|
||||
and even some evidence that suicides(*) and mass shootings(*) are, too.
|
||||
</words>
|
||||
|
||||
<words id="_2_simple_end">
|
||||
<next wiggle>next</next>
|
||||
<next wiggle>well that's depressing →</next>
|
||||
</words>
|
||||
|
||||
<words id="_2_cascade">
|
||||
blah blah simple cascade
|
||||
Indeed it is.
|
||||
Anyway, <b>PUZZLE TIME!</b>
|
||||
<br>
|
||||
Draw a network & run the simulation,
|
||||
so that <i>everyone</i> gets infected with the "contagion".
|
||||
(new rule: you can't cut the <i>thick</i> connections)
|
||||
</words>
|
||||
|
||||
<words id="_2_cascade_end">
|
||||
<next wiggle>onwards...</next>
|
||||
<next wiggle>fan-flipping-tastic →</next>
|
||||
</words>
|
||||
|
||||
<words id="_2_post_cascade">
|
||||
This madness-spreading is called an <b>"information cascade"</b>.
|
||||
Mr. Newton fell for such a cascade in 1720.
|
||||
The world's markets fell for such a cascade in 2008.
|
||||
But so what? You already knew ideas spread.
|
||||
However, network scientists recently found a <i>new</i> kind of contagion,
|
||||
one that spreads strangely. And they're called...
|
||||
</words>
|
||||
|
||||
<words id="_2_post_cascade_end">
|
||||
<next wiggle>“<i>Complex</i> Contagions!” →</next>
|
||||
</words>
|
||||
|
||||
<!-- 3. Complex Contagions -->
|
||||
|
||||
<words id="_3_complex">
|
||||
blah blah complex vs simple
|
||||
|
||||
Truth may be stranger than fiction, but it doesn't sell as well.
|
||||
|
||||
<br><br>
|
||||
|
||||
<b>Simple contagions</b>, like juicy rumors or hot takes,
|
||||
only need one "infected" friend to spread.
|
||||
That doesn't mean the contagion <i>will</i> spread,
|
||||
just that one exposure <i>can</i> be enough to spread.
|
||||
This, by the way, is how <i>biological</i> contagions like viruses work.
|
||||
|
||||
<br><br>
|
||||
|
||||
<b>Complex contagions</b> are weirder.
|
||||
Some things -- like norms, habits and hard-to-accept ideas --
|
||||
need more social encouragement.
|
||||
They need not a minimum <i>number</i> of friends to spread,
|
||||
but a minimum <i>percentage</i> of friends to spread!(*)
|
||||
|
||||
<br><br>
|
||||
|
||||
<b>On the right, a person needs <i>at least 25%</i> of their friends to
|
||||
adopt a complex fact (img) before they do.
|
||||
Try "infecting" them all with <i>wisdom!</i> →</b>
|
||||
|
||||
</words>
|
||||
|
||||
<words id="_3_complex_end">
|
||||
herp derp blah blah
|
||||
<next wiggle>next</next>
|
||||
<words id="_3_complex_2">
|
||||
|
||||
<b>CAUTION:</b>
|
||||
just because an idea/behavior is "complex" doesn't mean it's good,
|
||||
(e.g. conspiracy theories)
|
||||
and just because it's "simple" doesn't mean it's bad!
|
||||
(e.g. "floss daily")
|
||||
|
||||
<br><br>
|
||||
|
||||
Think of it this way:
|
||||
simple contagions are weeds, complex contagions are trees,
|
||||
and a network is an ecosystem.
|
||||
Sometimes weeds are good, sometimes trees are bad.
|
||||
But if your ecosystem can <i>only</i> support weeds,
|
||||
something's very wrong.
|
||||
|
||||
<br><br>
|
||||
|
||||
(BONUS: OTHER KINDS OF CONTAGIONS)
|
||||
|
||||
<br><br>
|
||||
|
||||
So, how <i>do</i> we make sure our social ecosystem is healthy?
|
||||
Let's revisit...
|
||||
|
||||
<next wiggle>...the cascade!</next>
|
||||
|
||||
|
||||
</words>
|
||||
|
||||
<words id="_3_cascade">
|
||||
|
|
|
@ -20,13 +20,16 @@ SLIDES.push(
|
|||
// Intro text
|
||||
{
|
||||
type:"box",
|
||||
id:"_2_simple",
|
||||
text:"_2_simple",
|
||||
x:0, y:0, w:350, h:200
|
||||
x:80, y:0, w:800, h:160,
|
||||
align: "center"
|
||||
},
|
||||
|
||||
// Lil' contagion
|
||||
{
|
||||
type:"sim",
|
||||
id:"contagion",
|
||||
x:0, y:80,
|
||||
fullscreen: true,
|
||||
network: {
|
||||
|
@ -43,6 +46,7 @@ SLIDES.push(
|
|||
// UI for the simulation
|
||||
{
|
||||
type:"box",
|
||||
id:"ui",
|
||||
x:380, y:165,
|
||||
sim_ui:"red"
|
||||
},
|
||||
|
@ -68,25 +72,58 @@ SLIDES.push(
|
|||
if(peep.infected) peepCount++;
|
||||
});
|
||||
if(peepCount==sim.peeps.length){
|
||||
var boxes = slideshow.boxes;
|
||||
boxes.showChildByID("end", true);
|
||||
/*var boxes = slideshow.boxes;
|
||||
boxes.showChildByID("end", true);*/
|
||||
state.ended = true;
|
||||
slideshow.next();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
remove:[
|
||||
{type:"box", id:"_2_simple"}
|
||||
],
|
||||
move:[
|
||||
{type:"box", id:"ui", y:5},
|
||||
{type:"sim", id:"contagion", y:-80}
|
||||
],
|
||||
add:[
|
||||
{
|
||||
type:"box",
|
||||
text:"_2_simple_2",
|
||||
x:0, y:390, w:650, h:100,
|
||||
align: "right"
|
||||
},
|
||||
{
|
||||
type:"box",
|
||||
text:"_2_simple_end",
|
||||
x:660, y:440, w:300, h:90
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
chapter: "Simple-Cascade",
|
||||
clear:true,
|
||||
|
||||
add:[
|
||||
|
||||
// Intro text
|
||||
{
|
||||
type:"box",
|
||||
id:"_2_cascade",
|
||||
text:"_2_cascade",
|
||||
x:80, y:0, w:800, h:100,
|
||||
align: "center"
|
||||
},
|
||||
|
||||
// Sim
|
||||
{
|
||||
type:"sim",
|
||||
x:0, y:-140,
|
||||
id:"contagion",
|
||||
x:0, y:-60,
|
||||
fullscreen: true,
|
||||
network: {
|
||||
"contagion":0,
|
||||
|
@ -103,23 +140,17 @@ SLIDES.push(
|
|||
// UI for the simulation
|
||||
{
|
||||
type:"box",
|
||||
x:380, y:290,
|
||||
id:"ui",
|
||||
x:380, y:360,
|
||||
sim_ui:"red"
|
||||
},
|
||||
|
||||
// Intro text
|
||||
{
|
||||
type:"box",
|
||||
text:"_2_cascade",
|
||||
x:0, y:400, w:600, h:140
|
||||
},
|
||||
|
||||
// End text
|
||||
{
|
||||
id:"end",
|
||||
type:"box",
|
||||
text:"_2_cascade_end",
|
||||
x:660, y:440, w:300, h:100,
|
||||
x:330, y:460, w:300, h:100,
|
||||
hidden:true
|
||||
},
|
||||
|
||||
|
@ -145,4 +176,27 @@ SLIDES.push(
|
|||
}
|
||||
|
||||
},
|
||||
{
|
||||
remove:[
|
||||
{type:"box", id:"_2_cascade"},
|
||||
{type:"box", id:"end"}
|
||||
],
|
||||
move:[
|
||||
{type:"box", id:"ui", y:360-80},
|
||||
{type:"sim", id:"contagion", y:-140}
|
||||
],
|
||||
add:[
|
||||
{
|
||||
type:"box",
|
||||
text:"_2_post_cascade",
|
||||
x:0, y:390, w:650, h:150,
|
||||
align: "right"
|
||||
},
|
||||
{
|
||||
type:"box",
|
||||
text:"_2_post_cascade_end",
|
||||
x:660, y:450, w:300, h:90
|
||||
}
|
||||
]
|
||||
},
|
||||
);
|
|
@ -11,8 +11,9 @@ SLIDES.push(
|
|||
// Intro text
|
||||
{
|
||||
type:"box",
|
||||
id:"_3_complex",
|
||||
text:"_3_complex",
|
||||
x:0, y:0, w:360, h:370
|
||||
x:0, y:0, w:480, h:540
|
||||
},
|
||||
|
||||
// Sim
|
||||
|
@ -22,46 +23,37 @@ SLIDES.push(
|
|||
fullscreen: true,
|
||||
network: {
|
||||
"contagion":0.25,
|
||||
"peeps":[[432,144,1],[438,410,1],[636,139,0],[638,414,0],[789,68,0],[916,101,0],[855,195,0],[798,320,0],[887,346,0],[917,445,0],[840,503,0]],
|
||||
"connections":[[0,2,0],[2,4,0],[2,5,0],[6,2,0],[1,3,0],[3,10,0],[3,7,0],[8,3,0],[9,3,0]]
|
||||
"peeps":[[819,90,0],[911,182,0],[905,310,0],[821,413,0],[688,252,0],[551,251,1]],
|
||||
"connections":[[4,3,0],[2,4,0],[4,1,0],[4,0,0]]
|
||||
},
|
||||
options:{
|
||||
infectedFrame: 3,
|
||||
scale: 1.25
|
||||
scale: 1.75
|
||||
}
|
||||
},
|
||||
|
||||
// UI for the simulation
|
||||
{
|
||||
type:"box",
|
||||
x:440, y:225,
|
||||
x:520, y:340,
|
||||
sim_ui:"red"
|
||||
},
|
||||
|
||||
// End text
|
||||
{
|
||||
id:"end",
|
||||
type:"box",
|
||||
text:"_3_complex_end",
|
||||
x:0, y:370, w:360, h:170, align:"right",
|
||||
hidden:true
|
||||
},
|
||||
}
|
||||
|
||||
],
|
||||
|
||||
onupdate:function(slideshow, state){
|
||||
|
||||
// Show end if at least 5 infected
|
||||
// Show end if ALL infected
|
||||
if(!state.ended){
|
||||
var sim = slideshow.simulations.sims[0];
|
||||
var peepCount = 0;
|
||||
sim.peeps.forEach(function(peep){
|
||||
if(peep.infected) peepCount++;
|
||||
});
|
||||
if(peepCount>=5){
|
||||
var boxes = slideshow.boxes;
|
||||
boxes.showChildByID("end", true);
|
||||
if(peepCount==sim.peeps.length){
|
||||
state.ended = true;
|
||||
sim.win();
|
||||
slideshow.next();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -69,6 +61,19 @@ SLIDES.push(
|
|||
|
||||
},
|
||||
|
||||
{
|
||||
remove:[
|
||||
{type:"box", id:"_3_complex"}
|
||||
],
|
||||
add:[
|
||||
{
|
||||
type:"box",
|
||||
text:"_3_complex_2",
|
||||
x:0, y:0, w:480, h:540
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
chapter: "Complex-Cascade",
|
||||
clear:true,
|
||||
|
|
|
@ -29,6 +29,6 @@ window.onload = function(){
|
|||
window.requestAnimationFrame(update);
|
||||
|
||||
// First slide!
|
||||
slideshow.gotoChapter("Networks-Majority");
|
||||
slideshow.gotoChapter("Complex");
|
||||
|
||||
}
|
|
@ -72,8 +72,18 @@ function Slideshow(){
|
|||
slide.move.forEach(function(childConfig){
|
||||
switch(childConfig.type){
|
||||
case "box":
|
||||
//var box = self.boxes.getChildByID(childConfig.id);
|
||||
//tweenBox(box, childConfig);
|
||||
var box = self.boxes.getChildByID(childConfig.id);
|
||||
box.classList.add("transitionable");
|
||||
var from = {
|
||||
x: parseInt(box.style.left),
|
||||
y: parseInt(box.style.top)
|
||||
};
|
||||
var to = {
|
||||
x: (childConfig.x===undefined) ? from.x : childConfig.x,
|
||||
y: (childConfig.y===undefined) ? from.y : childConfig.y
|
||||
};
|
||||
box.style.left = to.x+"px";
|
||||
box.style.top = to.y+"px";
|
||||
break;
|
||||
case "sim":
|
||||
var sim = self.simulations.getChildByID(childConfig.id);
|
||||
|
|
Loading…
Reference in New Issue