AHHHHH
This commit is contained in:
Nicky Case
parent
c29dd472c7
commit
ded0c75c27
|
|
@ -410,7 +410,7 @@ ref:hover:before{
|
|||
|
||||
/* TO SEE LAYOUT */
|
||||
.box, #simulations{
|
||||
/*border: 1px solid #eee;*/
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* A NICE CIRCLE */
|
||||
|
|
|
|||
138
index.html
138
index.html
|
|
@ -402,28 +402,27 @@ MY "WHY" FOR MAKING THIS:
|
|||
</words>
|
||||
|
||||
<words id="complex_complex_2">
|
||||
<span style="line-height:1.2em">
|
||||
<span style="line-height:1.3em">
|
||||
|
||||
Note that, unlike our earlier "fake news" <icon red></icon> contagion,
|
||||
Unlike our earlier "fake news" <icon red></icon> contagion,
|
||||
this contagion <icon yellow></icon> does <i>not</i> spread to everyone!
|
||||
|
||||
<div style="height:1em"></div>
|
||||
|
||||
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 pass the 50%+ threshold.
|
||||
|
||||
<div style="height:1em"></div>
|
||||
<div style="height:0.75em"></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 <b>"simple contagion"</b> theory.
|
||||
The <i>relative</i> % of "infected" friends matters.
|
||||
<i>That's</i> the difference between the <b>complex contagion</b> theory,
|
||||
and our naive it-spreads-like-a-virus <b>simple contagion</b> theory.
|
||||
(you could say "simple contagions" are just contagions with a "more than 0%" infection threshold)
|
||||
|
||||
<div style="height:1em"></div>
|
||||
<div style="height:0.75em"></div>
|
||||
|
||||
But, as stated earlier, not all contagions are bad —
|
||||
so enough about crowd madness, what about...
|
||||
However, contagions aren't necessarily bad —
|
||||
so enough about crowd <i>madness</i>, what about...
|
||||
<next>...crowd <i>wisdom?</i></next>
|
||||
|
||||
</span>
|
||||
|
|
@ -432,55 +431,46 @@ MY "WHY" FOR MAKING THIS:
|
|||
<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.
|
||||
rescue people in hurricanes, or tutor underprivileged kids 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% —
|
||||
people are willing to volunteer, but only if 25% or more of their friends do so too.
|
||||
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! →</b>
|
||||
<b>← Get everyone "infected" with the good vibes!</b>
|
||||
|
||||
</words>
|
||||
|
||||
<words id="complex_complex_3_end">
|
||||
|
||||
<b>NOTE:</b> Volunteering is just <i>one</i> of many complex contagions!
|
||||
Others include: voter turnout, lifestyle habits,
|
||||
career choices, challenging your beliefs,
|
||||
taking time to understand a issue deeply — basically, anything
|
||||
that needs more than one "exposure", and some social encouragement.
|
||||
|
||||
<br><br>
|
||||
|
||||
(So what's an example of a <i>simple</i> contagion, that only needs one exposure to "infect" someone?
|
||||
Usually: bits of trivia, like, "the possum has 13 nipples")
|
||||
|
||||
<br><br>
|
||||
|
||||
Now, to <i>really</i> show the power and weirdness of complex contagions, let's revisit...
|
||||
|
||||
<next>...an earlier puzzle →</next>
|
||||
|
||||
</words>
|
||||
|
||||
<!--
|
||||
<words id="complex_complex_3">
|
||||
<span style="line-height:1.4em">
|
||||
|
||||
<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. cute cat videos)
|
||||
|
||||
<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>
|
||||
|
||||
So, how <i>do</i> we make sure our social ecosystem is healthy?
|
||||
To figure this out, let's first revisit...
|
||||
|
||||
<next wiggle>...the cascade puzzle!</next>
|
||||
|
||||
</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...
|
||||
Remember this? This time, with a <i>complex</i> contagion <icon blue></icon>, it'll be a bit tougher...
|
||||
<br>
|
||||
<b>Try to "infect" everyone with complex wisdom! ↓</b>
|
||||
</words>
|
||||
|
||||
<words id="complex_cascade_feel_free">
|
||||
(feel free to just hit 'start' and <i>try</i> as many solutions as you want)
|
||||
</words>
|
||||
|
||||
|
|
@ -489,30 +479,27 @@ MY "WHY" FOR MAKING THIS:
|
|||
</words>
|
||||
|
||||
<words id="complex_post_cascade">
|
||||
Now, you may think: so what, complex contagions <icon blue></icon> are just simple contagions <icon red></icon>
|
||||
that need more connections?
|
||||
Not so fast!
|
||||
The difference between "complex" and "simple" is a difference in <i>kind</i>, not degree.
|
||||
It's apples vs oranges, not apples vs more apples.
|
||||
This idea will be clearer if we revisit...
|
||||
Now, you may be thinking that you just need to keep adding connections to spread any contagion,
|
||||
"complex" or "simple", good or bad, wise or mad.
|
||||
But is that really so? Well, let's revisit...
|
||||
</words>
|
||||
<words id="complex_post_cascade_end">
|
||||
<next wiggle>...yet another puzzle! →</next>
|
||||
<next wiggle>...another earlier puzzle →</next>
|
||||
</words>
|
||||
|
||||
<words id="complex_prevent">
|
||||
Now, let's do the <i>opposite</i> of everything we've done before.
|
||||
If you hit "start" below now, the contagion will just spread to everyone.
|
||||
If you hit "start" below now, the complex contagion <icon blue></icon> will just spread to everyone.
|
||||
No surprise there.
|
||||
But now, here's your challenge:
|
||||
<b>draw a network to <i>prevent</i> the contagion from spreading to everyone! ↓</b>
|
||||
</words>
|
||||
|
||||
<words id="complex_prevent_2">
|
||||
And <i>that's</i> the important difference between "simple" and "complex" contagion.
|
||||
While more connections always helps spread <i>simple</i> ideas,
|
||||
more connections can <i>hurt</i> the spread of <i>complex</i> ideas!
|
||||
(makes you wonder 'bout the internet, hm)
|
||||
You see?
|
||||
While more connections will always help the spread of <i>simple</i> ideas,
|
||||
<b>more connections can hurt the spread of <i>complex</i> ideas!</b>
|
||||
(makes you wonder about the internet, hm?)
|
||||
And this isn't just a theoretical problem. This can be a matter of life...
|
||||
</words>
|
||||
|
||||
|
|
@ -536,12 +523,11 @@ MY "WHY" FOR MAKING THIS:
|
|||
The less immediate cause: the managers ignored the engineers' warnings.
|
||||
Why? Because of <b>groupthink</b><ref id="groupthink"></ref>.
|
||||
When a group is <i>too</i> closely knit, (as they tend to be at the top of institutions)
|
||||
they become resistant to hard-to-accept information
|
||||
that challenges one's beliefs or ego.
|
||||
they become resistant to complex ideas that challenge their beliefs, or ego.
|
||||
|
||||
<div style="height:0.9em"></div>
|
||||
|
||||
So, that's how to get crowd madness.
|
||||
So, that's how institutions can fall to crowd madness.
|
||||
But how can we "design" for crowd <i>wisdom?</i>
|
||||
In short, two words:
|
||||
|
||||
|
|
@ -566,22 +552,22 @@ MY "WHY" FOR MAKING THIS:
|
|||
</words>
|
||||
|
||||
<words id="bonding_end">
|
||||
This is called <b>bonding social capital</b><ref id="social_capital"></ref>,
|
||||
the strength of the connections <i>within</i> a single group.
|
||||
The connections <i>within</i> a group is called <b>bonding social capital</b><ref id="social_capital"></ref>.
|
||||
But what about the connections...
|
||||
<next wiggle>...<i>between</i> groups?</next>
|
||||
</words>
|
||||
|
||||
<words id="bridging_1">
|
||||
As you might have guessed, <b>bridging social capital</b>
|
||||
is the strength of the connections <i>between</i> groups.
|
||||
As you may have already guessed,
|
||||
the connections <i>between</i> groups is called
|
||||
<b>bridging social capital</b>.
|
||||
This is important, because it helps groups break out of their insular echo chambers!
|
||||
<br>
|
||||
<b>Try to "infect" everyone with wisdom:</b>
|
||||
<b>Try to "infect" everyone with complex wisdom:</b>
|
||||
</words>
|
||||
|
||||
<words id="bridging_end">
|
||||
Like bonding, bridging social capital has a sweet spot.<ref id="bridge"></ref>
|
||||
Like bonding, there's a sweet spot for bridging, too.<ref id="bridge"></ref>
|
||||
(extra challenge: try drawing a bridge so thick that the complex contagion
|
||||
<i>can't</i> pass through it!)
|
||||
Now that we know how to "design" connections <i>within</i> and <i>between</i> groups, let's...
|
||||
|
|
@ -593,7 +579,7 @@ MY "WHY" FOR MAKING THIS:
|
|||
<b style="font-size:2em">FINAL PUZZLE!</b>
|
||||
<br>
|
||||
Draw connections within groups (bonding) and between groups (bridging)
|
||||
to spread wisdom to everyone:
|
||||
to spread wisdom to the whole crowd:
|
||||
|
||||
</words>
|
||||
<words id="bb_2">
|
||||
|
|
@ -633,17 +619,17 @@ MY "WHY" FOR MAKING THIS:
|
|||
<words id="bb_small_world_5">
|
||||
|
||||
Network scientists now have a mathematical definition for this ancient wisdom:
|
||||
the <b>small world network</b><ref id="small_world"></ref>. This optimal mix of bonding+bridging describes how
|
||||
our neurons interact<ref id="swn_neurons"></ref>,
|
||||
gives rise to collective creativity<ref id="swn_creativity"></ref>
|
||||
the <b>small world network</b><ref id="small_world"></ref>.
|
||||
This optimal mix of bonding+bridging describes how
|
||||
our neurons are connected<ref id="swn_neurons"></ref>,
|
||||
fosters collective creativity<ref id="swn_creativity"></ref>
|
||||
and problem-solving<ref id="swn_social_physics"></ref>,
|
||||
and, at one point, has even helped us (barely) avoid full-out nuclear war!<ref id="swn_jfk"></ref>
|
||||
and even once helped US President John F Kennedy (barely) avoid nuclear war!<ref id="swn_jfk"></ref>
|
||||
So, yeah, small worlds are a big deal.
|
||||
|
||||
</words>
|
||||
<words id="bb_small_world_end">
|
||||
And finally, if you'd like to make a whole network from scratch, let's check out...
|
||||
<next>The Sandbox Mode →</next>
|
||||
<next>ok, let's wrap this up... →</next>
|
||||
</words>
|
||||
|
||||
<!-- Sandbox -->
|
||||
|
|
@ -745,7 +731,7 @@ MY "WHY" FOR MAKING THIS:
|
|||
Too <i>many</i> connections and complex ideas get crushed by groupthink.
|
||||
The trick is to build a small world network, the optimal mix of
|
||||
bonding and bridging: <i>e pluribus unum.</i>
|
||||
<bon id="limits"></bon>
|
||||
<bon id="math"></bon>
|
||||
</div>
|
||||
|
||||
<div style="
|
||||
|
|
@ -854,9 +840,9 @@ MY "WHY" FOR MAKING THIS:
|
|||
(blah blah blah)
|
||||
</div>
|
||||
</bonus>
|
||||
<bonus id="limits">
|
||||
<bonus id="math">
|
||||
<h3>
|
||||
BONUS BOX: Everything I Said Is Wrong
|
||||
BONUS BOX: Wait, Where Was The Math?
|
||||
</h3>
|
||||
<div>
|
||||
(blah blah blah: map, extending the model with ecologies or randomness, etc)
|
||||
|
|
|
|||
|
|
@ -72,16 +72,24 @@ SLIDES.push(
|
|||
},
|
||||
|
||||
{
|
||||
|
||||
chapter: "Complex-Wisdom",
|
||||
clear:true,
|
||||
|
||||
add:[
|
||||
|
||||
// Intro text
|
||||
{
|
||||
id:"complex_complex_3",
|
||||
type:"box",
|
||||
text:"complex_complex_3",
|
||||
x:0, y:0, w:480, h:540
|
||||
x:480, y:0, w:480, h:540
|
||||
},
|
||||
{
|
||||
id:"end",
|
||||
type:"box",
|
||||
text:"complex_complex_3_end",
|
||||
x:480, y:0, w:480, h:540,
|
||||
hidden:true
|
||||
},
|
||||
|
||||
// Sim
|
||||
|
|
@ -91,7 +99,7 @@ SLIDES.push(
|
|||
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]],
|
||||
"peeps":[[54,240,1],[227,237,0],[298,98,0],[405,157,0],[408,296,0],[311,380,0]],
|
||||
"connections":[[1,2,0],[1,3,0],[4,1,0],[1,5,0],[0,1,0]]
|
||||
},
|
||||
options:{
|
||||
|
|
@ -104,7 +112,7 @@ SLIDES.push(
|
|||
// UI for the simulation
|
||||
{
|
||||
type:"box",
|
||||
x:520, y:300,
|
||||
x:30, y:320,
|
||||
sim_ui:"red"
|
||||
}
|
||||
|
||||
|
|
@ -121,6 +129,7 @@ SLIDES.push(
|
|||
});
|
||||
if(peepCount==sim.peeps.length){
|
||||
var boxes = slideshow.boxes;
|
||||
boxes.removeChildByID("complex_complex_3", true);
|
||||
boxes.showChildByID("end", true);
|
||||
state.ended = true;
|
||||
sim.win();
|
||||
|
|
@ -172,13 +181,20 @@ SLIDES.push(
|
|||
x:380, y:370,
|
||||
sim_ui:"red"
|
||||
},
|
||||
{
|
||||
type:"box",
|
||||
id:"complex_cascade_feel_free",
|
||||
text:"complex_cascade_feel_free",
|
||||
x:330, y:440, w:300, h:100,
|
||||
align: "center"
|
||||
},
|
||||
|
||||
// End text
|
||||
{
|
||||
id:"end",
|
||||
type:"box",
|
||||
text:"complex_cascade_end",
|
||||
x:330, y:460, w:300, h:100,
|
||||
x:330, y:450, w:300, h:100,
|
||||
hidden:true
|
||||
},
|
||||
|
||||
|
|
@ -195,6 +211,7 @@ SLIDES.push(
|
|||
});
|
||||
if(peepCount==sim.peeps.length){
|
||||
var boxes = slideshow.boxes;
|
||||
boxes.removeChildByID("complex_cascade_feel_free", true);
|
||||
boxes.showChildByID("end", true);
|
||||
state.ended = true;
|
||||
sim.win();
|
||||
|
|
@ -218,7 +235,7 @@ SLIDES.push(
|
|||
{
|
||||
type:"box",
|
||||
text:"complex_post_cascade",
|
||||
x:0, y:390, w:650, h:150,
|
||||
x:50, y:390, w:600, h:150,
|
||||
align: "right"
|
||||
},
|
||||
{
|
||||
|
|
@ -307,7 +324,10 @@ SLIDES.push(
|
|||
var boxes = slideshow.boxes;
|
||||
setTimeout(function(){
|
||||
//boxes.showChildByID("end", true);
|
||||
sim.win();
|
||||
sim.win({
|
||||
x:350, y:270-90,
|
||||
width:260, height:260
|
||||
});
|
||||
},350);
|
||||
setTimeout(function(){
|
||||
slideshow.next();
|
||||
|
|
@ -362,29 +382,10 @@ SLIDES.push(
|
|||
|
||||
add:[
|
||||
|
||||
// Sim
|
||||
{
|
||||
type:"sim",
|
||||
x:-15, y:0,
|
||||
fullscreen: true,
|
||||
network: {
|
||||
"contagion":0.25,
|
||||
"peeps":[[409,457,1],[157,345,0],[62,221,0],[152,93,0],[301,94,0],[391,218,0],[306,347,0]],
|
||||
"connections":[[5,4,0],[4,3,0],[3,2,0],[2,1,0],[1,6,0],[6,5,0],[5,2,0],[2,4,0],[4,1,0],[1,3,0],[3,6,0],[6,2,0],[1,5,0],[5,3,0],[6,4,0],[0,6,0]]
|
||||
},
|
||||
options:{
|
||||
infectedFrame: 3,
|
||||
scale: 1.75,
|
||||
_wisdom: true
|
||||
}
|
||||
},
|
||||
|
||||
// UI for the simulation
|
||||
// NASA Image
|
||||
{
|
||||
type:"box",
|
||||
id:"ui",
|
||||
x:120, y:410,
|
||||
sim_ui:"blue"
|
||||
img:"sprites/nasa.png", x:0, y:0, w:400, h:250
|
||||
},
|
||||
|
||||
// Text
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ SLIDES.push(
|
|||
},
|
||||
{
|
||||
type:"box",
|
||||
text:"bb_small_world_end", x:640, y:360, w:320, h:180,
|
||||
text:"bb_small_world_end", x:640, y:440, w:320, h:100,
|
||||
align:"center"
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,15 +8,15 @@ SLIDES.push(
|
|||
add:[
|
||||
|
||||
// Words
|
||||
/*{
|
||||
type:"box",
|
||||
img:"sprites/conclusion.png", x:-10, y:-15, w:470, h:562
|
||||
},*/
|
||||
{
|
||||
type:"box",
|
||||
id:"conclusion_1",
|
||||
text:"conclusion_1", x:0, y:0, w:960, h:540
|
||||
},
|
||||
{
|
||||
type:"box",
|
||||
img:"sprites/conclusion.png", x:-10, y:-15, w:470, h:562
|
||||
},
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -401,9 +401,10 @@ function Sim(config){
|
|||
|
||||
self.nextStep = function(){
|
||||
|
||||
self.STEP++;
|
||||
|
||||
// "Infect" the peeps who need to get infected
|
||||
setTimeout(function(){
|
||||
self.STEP++;
|
||||
},400);
|
||||
|
||||
// CONNECTIONS: IF one is INFECTED and the other is PAST THRESHOLD, then ANIMATE
|
||||
self.connections.forEach(function(c){
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ subscribe("prepreload", function(){
|
|||
pre_preloader.parentNode.removeChild(pre_preloader);
|
||||
|
||||
//slideshow.gotoChapter("Preloader");
|
||||
slideshow.gotoChapter("BB");
|
||||
slideshow.gotoChapter("SmallWorld-Explanation");
|
||||
|
||||
publish("preload");
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Loading…
Reference in New Issue