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

tiny fixes

This commit is contained in:
Nicky Case 2018-04-18 10:51:44 -04:00
parent ea24ccc42d
commit d189d59da5
10 changed files with 208 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/index.css
View File

@ -200,7 +200,7 @@ b, strong{
margin: auto;
top:0; left:0; right:0; bottom:0;
background: #222;
background: #444;
color: #fff;
}

148
index.html
View File

@ -138,6 +138,8 @@ MY "WHY" FOR MAKING THIS:
<!-- THE SLIDESHOW'S WORDS -->
<!-- - - - - - - - - - - - -->
<span style="display:none">
<!-- Preloader -->
<words id="preloader_title">
@ -197,23 +199,24 @@ MY "WHY" FOR MAKING THIS:
</words>
<words id="intro_2">
<div class="circle"><span>
<div class="circle" style="line-height:1.4em"><span>
<br>
Of course, that's not the only time markets, institutions, or entire democracies went crazy:
Of course, that's not the only time markets, institutions, or entire democracies went haywire &mdash;
the <i>madness</i> of crowds.
And yet, just when you lose hope in humanity,
you see citizens rescuing each other in hurricanes,
you see citizens coordinating to rescue each other in hurricanes,
communities creating solutions to problems,
movements of ordinary people fighting for a better world:
people fighting for a better world &mdash;
the <i>wisdom</i> of crowds!
<br><br>
<div style="height:0.9em"></div>
<b>But <i>why</i> do some crowds turn to madness, or wisdom?</b>
And how can we, collectively, get more of the latter?
According to the new field of <b>network science</b>,
the answer is not in the <i>individual people</i>, but in...
No theory can explain everything,
but I think a new field of study, <b>network science</b>,
can guide us! And its core idea is this:
to understand crowds, we should look not at the <i>individual people</i>, but at...
<next>...their <i>connections.</i> &rarr;</next>
@ -237,18 +240,17 @@ MY "WHY" FOR MAKING THIS:
<words id="networks_tutorial_end">
feel free to keep playing around, and draw whatever friendship network you want!
when you're done,
when you're done playing around,
<next wiggle>let's continue &rarr;</next>
</words>
<words id="networks_threshold">
But people don't just have social connections to make pretty pictures.
People look at their social connections, to understand their social world.
But social connections do more than just make pretty pictures.
People <i>look to</i> their social connections to understand their social world.
In this example, people look to their peers to
find out what % of their friends (not counting selves) are,
find out <b>what % of their friends</b> (not counting themselves) are,
say, binge-drinkers. <icon yellow></icon>
</words>
@ -257,18 +259,6 @@ MY "WHY" FOR MAKING THIS:
<b>Draw/erase connections, and see what happens! &rarr;</b>
</words>
<words id="networks_threshold_explanation">
<span style="color:#666">top-left:</span>
% of drinker friends &rarr;
<br>
<span style="color:#666">top-right:</span>
# of drinker friends / # of total friends &nbsp;&nbsp;&nbsp;&nbsp;
<br>
<span style="color:#666">black line:</span>
the 50% "majority" threshold &nbsp;&nbsp;&nbsp;&nbsp;
<br> (they'll glow if past threshold) &nbsp;&nbsp;&nbsp;&nbsp;
</words>
<words id="networks_threshold_end">
<next>cool, got it</next>
</words>
@ -276,8 +266,8 @@ MY "WHY" FOR MAKING THIS:
<words id="networks_pre_puzzle">
However, networks can <i>fool</i> people.
Just like how you see the earth as flat because you're on it,
people get wrong ideas about society because they're <i>in</i> it.
Just like how the earth seems flat because we're on it,
people may get wrong ideas about society because they're <i>in</i> it.
<bon id="connections"></bon>
<br>
@ -307,8 +297,8 @@ MY "WHY" FOR MAKING THIS:
<b style="font-size:2em">PUZZLE TIME!</b>
<br>
Fool <i>everyone</i> into thinking
the majority of their friends are binge-drinkers <icon yellow></icon>
(even though binge-drinkers are outnumbered 2-to-1)
the majority of their friends (50% threshold) are binge-drinkers <icon yellow></icon>
(even though binge-drinkers are outnumbered 2-to-1!)
</words>
<words id="networks_puzzle_metric">
@ -332,7 +322,8 @@ MY "WHY" FOR MAKING THIS:
<bon id="books"></bon>
But ideas/behaviors aren't just passively observed, they actively <i>spread</i>.
But people don't just passively <i>observe</i> others' ideas and behaviors,
they actively <i>copy</i> them.
So now, let's look at something network scientists call...
<next>“Contagions!” &rarr;</next>
@ -343,13 +334,16 @@ MY "WHY" FOR MAKING THIS:
<!-- Simple Contagions -->
<words id="simple_simple">
Below, we start with one person <icon red></icon> who has some information.
<i>Let's put aside the "threshold" thing for now.</i>
Below: we have a person <icon red></icon> with 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 every day, that person spreads the rumor, like a virus, to their friends.
And they spread it to <i>their</i> friends. And so on.
<br>
<b>Run the simulation, step-by-step &darr;</b>
<b>
Start the simulation! &darr;
(p.s: you can't draw <i>while</i> the sim's running)
</b>
</words>
<words id="simple_simple_2">
@ -381,47 +375,82 @@ MY "WHY" FOR MAKING THIS:
This madness-spreading is called an <b>"information cascade"</b>.
Mr. Newton fell for such a cascade in 1720.
The world's financial institutions fell for such a cascade in 2008.<ref id="subprime"></ref>
But so what? You already knew ideas spread.
However, some contagions act a bit more strangely... and they're called:
</words>
<words id="simple_post_cascade_end">
<br><br>
However: <i>this simulation is wrong.</i>
Ideas <i>don't</i> spread like viruses.
For many beliefs and behaviors, you need to be "exposed" to the contagion more than just once
in order to be "infected".
That is: we have to consider the <i>percentage (%) thresholds</i>.
So, network scientists have come up with a new, better way to
describe how ideas/behaviors spread, and they call it...
<next wiggle>“<i>Complex</i> Contagions!” &rarr;</next>
</words>
<!-- Complex Contagions -->
<words id="complex_complex">
<span style="line-height:1.4em">
Truth may be stranger than fiction, but it doesn't sell as well.
Let's bring back "thresholds", and the binge-drinking <icon yellow></icon> example!
When you played with this the first time, people didn't change their behavior.
<div style="height:0.7em"></div>
<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 bacteria &amp; viruses) work.
Now, let's simulate what happens if people <i>do</i> start drinking
<i>when 50%+ of their friends do!</i>
<b>Before you start the sim, ask yourself what you think <i>should</i> happen.
Now, run the sim, and see what actually happens! &rarr;</b>
<div style="height:0.7em"></div>
</words>
<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!<ref id="complex"></ref>
<words id="complex_complex_2">
<span style="line-height:1.2em">
Note that, unlike our earlier "fake news" <icon red></icon> contagion,
this contagion <icon yellow></icon> does <i>not</i> spread to everyone!
<div style="height:0.7em"></div>
<div style="height:1em"></div>
<b>On the right, a person needs <i>AT LEAST 25%</i> of their friends to
adopt a complex fact <icon blue></icon> before they do.
Try "infecting" them all with <i>wisdom!</i> &rarr;</b>
The first few people get "infected", because although they're only exposed to one
binge-drinker, that binge-drinker is 50% of their friends. (yeah, they're lonely)
In contrast, the person near the end of the chain did <i>not</i> get "infected",
because while they were exposed to a binge-drinking friend,
they did not exceed the 50%+ majority threshold.
<div style="height:1em"></div>
And <i>that's</i> the difference between the <b>"complex contagion"</b> theory,
and our earlier, naive, it-simply-spreads-like-a-virus "simple contagion" theory.
<div style="height:1em"></div>
But, as stated earlier, not all contagions are bad &mdash;
so enough about crowd madness, what about...
<next>...crowd <i>wisdom?</i></next>
</span>
</words>
<words id="complex_complex_2">
<words id="complex_complex_3">
Here, we have a person <icon blue></icon> who volunteers to... I don't know,
rescue people in hurricanes, help the poor in their local community, or something cool like that.
Point is, it's a "good" complex contagion.
This time, though, let's say the threshold is only 25% &mdash;
people are willing to volunteer, but only if 25% or more of their friends do so too.
Hey, goodwill needs a bit of social encouragement.
<br><br>
<b>Get everyone "infected" with the good vibes! &rarr;</b>
</words>
<words id="complex_complex_3_end">
</words>
<!--
<words id="complex_complex_3">
<span style="line-height:1.4em">
<b>CAUTION:</b>
@ -448,6 +477,7 @@ MY "WHY" FOR MAKING THIS:
</span>
</words>
-->
<words id="complex_cascade">
You did this before, but now, with a <i>complex</i> contagion <icon blue></icon>, it'll be tougher...
@ -868,7 +898,7 @@ MY "WHY" FOR MAKING THIS:
<reference id="contagion">
<h3>
“strong statistical evidence that
smoking, happiness, obesity, voting patterns, and cooperation levels
smoking, health, happiness, voting patterns, and cooperation levels
are all contagious”
</h3>
<div>
@ -1007,6 +1037,8 @@ MY "WHY" FOR MAKING THIS:
</div>
</reference>
</span>
<!-- - - - - -->
<!-- SCRIPTS -->
<!-- - - - - -->

16
js/chapters/2_Networks.js
View File

@ -119,19 +119,19 @@ SLIDES.push(
text:"networks_threshold_instruction", x:110, y:260, w:300,
align:"center"
},
{
/*{
type:"box",
id:"networks_threshold_explanation",
text:"networks_threshold_explanation", x:105, y:340, w:400,
text:"networks_threshold_explanation", x:205, y:345, w:300,
align:"right",
color:"#bbb",
fontSize:"0.75em",
lineHeight:"1.2em"
},
},*/
{
type:"box",
id:"networks_threshold_end",
text:"networks_threshold_end", x:60, y:430, w:400
text:"networks_threshold_end", x:60, y:350, w:400
},
// SIMULATION: THRESHOLD
@ -211,12 +211,12 @@ SLIDES.push(
{
type:"box",
id:"networks_puzzle_metric",
text:"networks_puzzle_metric", x:60, y:220, w:300
text:"networks_puzzle_metric", x:60, y:220+30, w:300
},
{
type:"box",
id:"networks_puzzle_end",
text:"networks_puzzle_end", x:60, y:220, w:300,
text:"networks_puzzle_end", x:60, y:300, w:300,
hidden:true
}
@ -273,8 +273,8 @@ SLIDES.push(
if(peepCount==9){
var boxes = slideshow.boxes;
state.won = true;
boxes.removeChildByID("networks_puzzle_metric");
boxes.showChildByID("networks_puzzle_end");
boxes.removeChildByID("networks_puzzle_metric", true);
boxes.showChildByID("networks_puzzle_end", true);
sim.win();
}
}

12
js/chapters/3_Simple_Contagion.js
View File

@ -182,21 +182,21 @@ SLIDES.push(
{type:"box", id:"end"}
],
move:[
{type:"box", id:"ui", y:360-80},
{type:"sim", id:"contagion", y:-140}
{type:"box", id:"ui", y:360-80-200},
{type:"sim", id:"contagion", y:-140-200}
],
add:[
{
type:"box",
text:"simple_post_cascade",
x:0, y:390, w:650, h:150,
align: "right"
},
x:80, y:210, w:800, h:150,
align: "center"
}/*,
{
type:"box",
text:"simple_post_cascade_end",
x:660, y:450, w:300, h:90
}
}*/
]
},
);

81
js/chapters/4_Complex_Contagion.js
View File

@ -22,20 +22,21 @@ SLIDES.push(
x:0, y:0,
fullscreen: true,
network: {
"contagion":0.25,
"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]]
"contagion":0.5,
"peeps":[[849,356,0],[794,225,0],[543,97,1],[665,147,0],[781,480,0],[906,480,0]],
"connections":[[0,1,0],[2,3,0],[3,1,0],[4,0,0],[0,5,0]]
},
options:{
infectedFrame: 3,
scale: 1.75
infectedFrame: 2,
scale: 1.75,
startUncuttable: true
}
},
// UI for the simulation
{
type:"box",
x:520, y:340,
x:520, y:230,
sim_ui:"red"
}
@ -43,16 +44,11 @@ SLIDES.push(
onupdate:function(slideshow, state){
// Show end if ALL infected
// Show next if SIM STEP >= 3
if(!state.ended){
var sim = slideshow.simulations.sims[0];
var peepCount = 0;
sim.peeps.forEach(function(peep){
if(peep.infected) peepCount++;
});
if(peepCount==sim.peeps.length){
if(sim.STEP>=3){
state.ended = true;
sim.win();
slideshow.next();
}
}
@ -74,6 +70,65 @@ SLIDES.push(
]
},
{
clear:true,
add:[
// Intro text
{
type:"box",
text:"complex_complex_3",
x:0, y:0, w:480, h:540
},
// Sim
{
type:"sim",
x:0, y:0,
fullscreen: true,
network: {
"contagion":0.25,
"peeps":[[550,227,1],[717,226,0],[813,68,0],[881,181,0],[874,314,0],[793,411,0]],
"connections":[[1,2,0],[1,3,0],[4,1,0],[1,5,0],[0,1,0]]
},
options:{
infectedFrame: 3,
scale: 1.75
}
},
// UI for the simulation
{
type:"box",
x:520, y:300,
sim_ui:"red"
}
],
onupdate:function(slideshow, state){
// Show end if EVERYONE is infected
if(!state.ended){
var sim = slideshow.simulations.sims[0];
var peepCount = 0;
sim.peeps.forEach(function(peep){
if(peep.infected) peepCount++;
});
if(peepCount==sim.peeps.length){
var boxes = slideshow.boxes;
boxes.showChildByID("end", true);
state.ended = true;
sim.win();
}
}
}
},
{
chapter: "Complex-Cascade",
clear:true,

2
js/main.js
View File

@ -36,6 +36,8 @@ window.onload = function(){
subscribe("START", function(){
// Music
SOUNDS.bg_music.volume(0.5);
SOUNDS.bg_music.loop(true);
SOUNDS.bg_music.play();
// Navigation

28
js/sim/Peep.js
View File

@ -242,13 +242,19 @@ function Peep(config){
var uiColor = "#333";
// Say: Infected/Friends (% then n/n)
ctx.translate(0,-43);
ctx.translate(0,-46);
ctx.font = '12px PatrickHand';
ctx.fillStyle = uiColor;
ctx.textBaseline = "middle";
ctx.fontWeight = "bold";
if(self.numFriends>0){
// %, centered
ctx.textAlign = "center";
var labelPercent = Math.round(100*(self.numInfectedFriends/self.numFriends)) + "%";
ctx.fillText(labelPercent, 0, 0);
/*
// %
ctx.textAlign = "left";
var labelPercent = Math.round(100*(self.numInfectedFriends/self.numFriends)) + "%";
@ -258,6 +264,7 @@ function Peep(config){
ctx.textAlign = "right";
var labelNum = self.numInfectedFriends+"/"+self.numFriends;
ctx.fillText(labelNum, barWidth/2, 0);
*/
}else{
@ -266,7 +273,7 @@ function Peep(config){
}
// the gray bg
ctx.translate(0,10);
ctx.translate(0,13);
ctx.fillStyle = bgColor;
ctx.beginPath();
ctx.rect(-barWidth/2, -barHeight/2, barWidth, barHeight);
@ -286,10 +293,10 @@ function Peep(config){
ctx.translate(barWidth*self.sim.contagion - barWidth/2, 0);
ctx.lineCap = "butt";
ctx.strokeStyle = uiColor;
ctx.lineWidth = 1;
ctx.lineWidth = 1.5;
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,barHeight);
ctx.moveTo(0,-2);
ctx.lineTo(0,barHeight+2);
ctx.stroke();
ctx.restore();
@ -303,14 +310,21 @@ function Peep(config){
// Hit Test
self.hitTest = function(x,y,buffer){
if(buffer===undefined) buffer=0;
// ACTUALLY IGNORE BUFFER'S AMOUNT, IT'S TRUE OR FALSE.
// if(buffer===undefined) buffer=0;
buffer = !!buffer;
var dx = self.x-x;
var dy = self.y-y;
var dist2 = dx*dx+dy*dy;
var r = radius+buffer;
var r = radius;
var s;
if(s = self.sim.options.scale) r*=s;
r = buffer ? Math.max(r+10, 40) : r;
return (dist2<r*r);
};
// Infect

14
js/sim/Simulations.js
View File

@ -213,7 +213,7 @@ function Sim(config){
});
if(self.winWord.ticker>=0){
self.winWord.ticker += 1/60;
if(self.winWord.ticker>5){
if(self.winWord.ticker>3){
self.winWord.ticker = -1;
}
}
@ -277,8 +277,8 @@ function Sim(config){
}
// fade away
if(self.winWord.ticker>4){
var alpha = -(self.winWord.ticker-5);
if(self.winWord.ticker>2){
var alpha = -(self.winWord.ticker-3);
ctx.globalAlpha = alpha;
}
@ -460,10 +460,10 @@ function Sim(config){
self._addPeepAtMouse(true);
}));
self._addPeepAtMouse = function(infected){
var overlapPeep = self.getHoveredPeep(20);
if(!overlapPeep){
self.addPeep(self.mouse.x, self.mouse.y, infected);
}
//var overlapPeep = self.getHoveredPeep(20);
//if(!overlapPeep){
self.addPeep(self.mouse.x, self.mouse.y, infected);
//}
};
_keyHandlers.push(subscribe("key/down/delete",function(){
_resetConnectorCutter();

5
js/slideshow/Preloader.js
View File

@ -14,7 +14,10 @@ subscribe("prepreload", function(){
if(progress==1){
var pre_preloader = $("#pre_preloader");
pre_preloader.parentNode.removeChild(pre_preloader);
slideshow.gotoChapter("Preloader");
//slideshow.gotoChapter("Preloader");
slideshow.gotoChapter("Networks-Threshold");
publish("preload");
}
});

1
js/slideshow/Slideshow.js
View File

@ -161,6 +161,7 @@ function Slideshow(){
self.boxes.clear();
self.simulations.clear();
self.dom.innerHTML = "";
pencil.gotoFrame(0);
};
// Update