NotDotTeam/crowds
NotDotTeam
/
crowds
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

awwwww YEAH

This commit is contained in:
Nicky Case 2018-04-12 15:50:59 -04:00
parent 51d91e9c20
commit 94f3a6541f
5 changed files with 203 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
index.html
View File

@ -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! &rarr;
<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! &rarr;
<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> &rarr;</next>
<next>...their <i>connections</i> &rarr;</next>
</span></div>
</words>
@ -290,7 +289,7 @@ let's play! &rarr;
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!” &rarr;</next>
<next>“Contagions!” &rarr;</next>
<b>&larr; bonus challenge:</b> make everyone think
<i>less than half</i> of their friends are binge-drinkers
@ -303,30 +302,112 @@ let's play! &rarr;
<!-- 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 &darr;</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 &rarr;</next>
</words>
<words id="_2_cascade">
blah blah simple cascade
Indeed it is.
Anyway, <b>PUZZLE TIME!</b>
<br>
Draw a network &amp; 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 &rarr;</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!” &rarr;</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> &rarr;</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">

80
js/chapters/2_Simple_Contagion.js
View File

@ -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
}
]
},
);

43
js/chapters/3_Complex_Contagion.js
View File

@ -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,

2
js/main.js
View File

@ -29,6 +29,6 @@ window.onload = function(){
window.requestAnimationFrame(update);
// First slide!
slideshow.gotoChapter("Networks-Majority");
slideshow.gotoChapter("Complex");
}

14
js/slideshow/Slideshow.js
View File

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