crowds/index.html

1079 lines
28 KiB
HTML
Raw Normal View History

2018-03-26 15:52:43 +00:00
<!--
2018-03-27 17:39:08 +00:00
THE WISDOM AND/OR MADNESS OF CROWDS
by Nicky Case | apr 2018
MY "WHY" FOR MAKING THIS:
+ to build a foundation for further curiosity about networks, group dynamics
+ to practice teaching with problem-solving, a pre-req for skills
+ to instill transcendent sense of "fundamentally people", of Humanity's Brain <3
2018-03-26 15:52:43 +00:00
-->
<!doctype>
<html>
<head>
<title>The Wisdom and/or Madness of Crowds</title>
2018-04-06 17:13:42 +00:00
<link rel="stylesheet" type="text/css" href="css/index.css">
2018-03-26 15:52:43 +00:00
</head>
<body>
2018-03-27 17:39:08 +00:00
2018-04-16 15:44:14 +00:00
<!-- THE SLIDESHOW -->
2018-04-03 15:25:13 +00:00
<div id="container">
2018-04-02 17:43:20 +00:00
<!-- Simulation(s) in background -->
<div id="simulations_container">
<div id="simulations"></div>
</div>
<!-- Slideshow: words & buttons -->
<div id="slideshow_container">
<div id="slideshow"></div>
</div>
<!-- Scratch Transition -->
<div id="scratch"></div>
<!-- Modal -->
2018-04-16 19:14:08 +00:00
<div id="modal_container">
<div id="modal_bg"></div>
<div id="modal">
<div id="modal_close"></div>
<div id="modal_content_container">
<div id="modal_content"></div>
</div>
</div>
</div>
2018-03-27 17:39:08 +00:00
2018-03-26 15:52:43 +00:00
</div>
2018-03-27 17:39:08 +00:00
<!-- Navigation: Audio, Contents, Share, Translations -->
2018-04-04 15:57:35 +00:00
<div id="navigation_container">
<div id="audio"></div>
<div id="navigation">
<!-- The chapters -->
<div chapter="Introduction">
2018-04-15 21:24:22 +00:00
<span>1</span>
<span>1. Introduction</span>
2018-04-04 15:57:35 +00:00
</div>
<div chapter="Networks">
2018-04-15 21:24:22 +00:00
<span>2</span>
<span>2. Connections</span>
2018-04-04 15:57:35 +00:00
</div>
<div chapter="Simple">
2018-04-15 21:24:22 +00:00
<span>3</span>
<span>3. Contagions</span>
2018-04-04 15:57:35 +00:00
</div>
<div chapter="Complex">
2018-04-15 21:24:22 +00:00
<span>4</span>
<span>4. Complex Contagions</span>
2018-04-04 15:57:35 +00:00
</div>
<div chapter="BB">
2018-04-15 21:24:22 +00:00
<span>5</span>
<span>5. Bonding &amp; Bridging</span>
</div>
<div chapter="SmallWorld">
<span>6</span>
<span>6. It's A Small World</span>
2018-04-04 15:57:35 +00:00
</div>
<div chapter="Sandbox">
2018-04-15 21:24:22 +00:00
<span>7</span>
<span>7. Sandbox Mode</span>
2018-04-04 15:57:35 +00:00
</div>
<div chapter="Conclusion">
2018-04-15 21:24:22 +00:00
<span>8</span>
<span>8. In Conclusion...</span>
2018-04-04 15:57:35 +00:00
</div>
<div chapter="Credits">
2018-04-15 21:24:22 +00:00
<span>9</span>
<span>9. Credits</span>
2018-04-04 15:57:35 +00:00
</div>
<!-- A divider -->
<span class="nav_divider"></span>
<!-- Bonus Notes & References -->
<div modal="bonus">
<span>?</span>
<span>Bonus Boxes! (Notes)</span>
</div>
<div modal="references">
2018-04-15 21:24:22 +00:00
<span style="margin-top: 7px; font-size: 35px;">*</span>
2018-04-04 15:57:35 +00:00
<span>References</span>
</div>
2018-04-15 21:24:22 +00:00
<div modal="translations">
<span style="margin-top:5px; position:relative;"><span style="
position: absolute;
top: -8px;
left: 6px;
">A</span><span style="
position: absolute;
font-size: 16px;
top: -1px;
left: 16px;
">あ</span></span>
<span>Translations</span>
</div>
2018-04-04 15:57:35 +00:00
<!-- The hover bubble -->
2018-04-16 19:14:08 +00:00
<span id="nav_bubble"></span>
2018-04-04 15:57:35 +00:00
</div>
<div id="social"></div>
2018-03-26 15:52:43 +00:00
</div>
2018-03-27 17:39:08 +00:00
2018-04-16 15:44:14 +00:00
<!-- The Pencil -->
2018-03-27 17:39:08 +00:00
<canvas id="pencil"></canvas>
2018-04-16 15:44:14 +00:00
<!-- Preloader -->
<div id="pre_preloader">
<div>loading...</div>
</div>
2018-03-26 15:52:43 +00:00
</body>
</html>
2018-04-01 16:34:52 +00:00
<!-- - - - - - - - - - - - -->
<!-- THE SLIDESHOW'S WORDS -->
<!-- - - - - - - - - - - - -->
2018-03-27 17:39:08 +00:00
2018-04-18 14:51:44 +00:00
<span style="display:none">
2018-04-16 15:44:14 +00:00
<!-- Preloader -->
<words id="preloader_title">
<div style="font-size: 30px;">
<span>the</span>
<br>
<span style="font-size: 60px;letter-spacing: 4px;">WISDOM</span>
<span style="position:relative;top: -10px;">and/or</span>
<span style="font-size: 60px;">MADNESS</span>
<br>
<span style="position: relative;top: -11px;">of</span>
<br>
<span style="font-size: 100px;line-height: 80px;position: relative;top: -15px;">CROWDS</span>
</div>
<div style="color:#999">
playing time: 30 min • by nicky case, april 2018
</div>
2018-03-27 17:39:08 +00:00
2018-04-01 16:34:52 +00:00
</words>
2018-03-27 17:39:08 +00:00
2018-04-16 15:44:14 +00:00
<words id="preloader_button">
<next></next>
2018-04-01 16:34:52 +00:00
</words>
2018-03-28 14:57:19 +00:00
2018-04-16 15:44:14 +00:00
<words id="preloader_loading">
2018-04-13 20:58:04 +00:00
loading...
2018-04-01 16:34:52 +00:00
</words>
2018-03-27 17:39:08 +00:00
2018-04-16 15:44:14 +00:00
<words id="preloader_play">
2018-04-13 20:58:04 +00:00
let's play! &rarr;
2018-04-01 16:34:52 +00:00
</words>
2018-03-26 15:52:43 +00:00
2018-04-16 15:44:14 +00:00
<!-- Introduction -->
<words id="intro">
2018-04-11 20:44:12 +00:00
<div class="circle"><span>
2018-04-15 21:24:22 +00:00
<br><br>
2018-04-11 20:44:12 +00:00
2018-04-13 20:58:04 +00:00
Sir Isaac Newton was pretty sure he was a smart cookie.
2018-04-12 19:50:59 +00:00
I mean, after inventing calculus and a theory of gravity,
2018-04-13 20:58:04 +00:00
he should be clever enough to do some financial investing, right?
2018-04-11 20:44:12 +00:00
Anyway,
long story short, he lost $4,600,000 (in today's dollars)
in the nationwide speculation frenzy known as the South Sea Bubble of 1720.
<br><br>
As Mr. Newton later said:
<i>“I can calculate the motion of heavenly bodies, but not the madness of people.”</i>
<next>yeah sucks for him &rarr;</next>
</span></div>
</words>
2018-04-16 15:44:14 +00:00
<words id="intro_2">
2018-04-18 14:51:44 +00:00
<div class="circle" style="line-height:1.4em"><span>
2018-04-11 20:44:12 +00:00
<br>
2018-04-18 14:51:44 +00:00
Of course, that's not the only time markets, institutions, or entire democracies went haywire &mdash;
2018-04-11 20:44:12 +00:00
the <i>madness</i> of crowds.
And yet, just when you lose hope in humanity,
2018-04-18 14:51:44 +00:00
you see citizens coordinating to rescue each other in hurricanes,
2018-04-13 20:58:04 +00:00
communities creating solutions to problems,
2018-04-18 14:51:44 +00:00
people fighting for a better world &mdash;
2018-04-11 20:44:12 +00:00
the <i>wisdom</i> of crowds!
2018-04-18 14:51:44 +00:00
<div style="height:0.9em"></div>
2018-04-11 20:44:12 +00:00
2018-04-12 21:22:22 +00:00
<b>But <i>why</i> do some crowds turn to madness, or wisdom?</b>
2018-04-18 14:51:44 +00:00
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...
2018-04-11 20:44:12 +00:00
2018-04-12 21:22:22 +00:00
<next>...their <i>connections.</i> &rarr;</next>
2018-04-11 20:44:12 +00:00
</span></div>
2018-03-26 15:52:43 +00:00
</words>
2018-04-16 15:44:14 +00:00
<!-- Networks -->
2018-04-01 16:34:52 +00:00
2018-04-16 15:44:14 +00:00
<words id="networks_tutorial_start">
2018-04-12 17:12:45 +00:00
<b>Let's draw a network!</b>
Each connection represents a friendship between two people:
2018-03-26 15:52:43 +00:00
</words>
2018-04-01 16:34:52 +00:00
2018-04-16 15:44:14 +00:00
<words id="networks_tutorial_connect">
2018-04-12 17:12:45 +00:00
draw to connect
2018-03-28 17:12:05 +00:00
</words>
2018-04-01 16:34:52 +00:00
2018-04-16 15:44:14 +00:00
<words id="networks_tutorial_disconnect">
2018-04-12 17:12:45 +00:00
scratch to&nbsp;&nbsp;&nbsp;disconnect
2018-03-28 17:12:05 +00:00
</words>
2018-04-01 16:34:52 +00:00
2018-04-16 15:44:14 +00:00
<words id="networks_tutorial_end">
2018-04-12 17:12:45 +00:00
2018-04-18 18:02:27 +00:00
when you're done doodling and playing around,
2018-04-12 17:12:45 +00:00
<next wiggle>let's continue &rarr;</next>
2018-03-28 17:12:05 +00:00
</words>
2018-04-01 16:34:52 +00:00
2018-04-16 15:44:14 +00:00
<words id="networks_threshold">
2018-04-12 17:12:45 +00:00
2018-04-18 14:51:44 +00:00
But social connections do more than just make pretty pictures.
People <i>look to</i> their social connections to understand their social world.
2018-04-12 17:12:45 +00:00
In this example, people look to their peers to
2018-04-18 14:51:44 +00:00
find out <b>what % of their friends</b> (not counting themselves) are,
2018-04-16 19:49:56 +00:00
say, binge-drinkers. <icon yellow></icon>
2018-04-12 17:12:45 +00:00
2018-04-01 16:34:52 +00:00
</words>
2018-04-12 17:12:45 +00:00
2018-04-16 15:44:14 +00:00
<words id="networks_threshold_instruction">
2018-04-12 17:12:45 +00:00
<b>Draw/erase connections, and see what happens! &rarr;</b>
2018-04-01 16:34:52 +00:00
</words>
2018-04-12 17:12:45 +00:00
2018-04-16 15:44:14 +00:00
<words id="networks_threshold_end">
2018-04-12 17:12:45 +00:00
<next>cool, got it</next>
2018-04-01 16:34:52 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="networks_pre_puzzle">
2018-04-12 17:12:45 +00:00
However, networks can <i>fool</i> people.
2018-04-18 14:51:44 +00:00
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.
2018-04-12 17:12:45 +00:00
2018-04-16 19:14:08 +00:00
<bon id="connections"></bon>
<br>
2018-04-12 17:12:45 +00:00
2018-04-16 19:14:08 +00:00
For example, a 1991 study<ref id="drunk"></ref> showed that
2018-04-12 17:12:45 +00:00
“virtually all [college] students reported that their friends drank more than they did.”
But that seems impossible!
How can that be?
Well, you're about to invent the answer yourself, by drawing a network.
It's time to...
<next>FOOL EVERYONE &rarr;</next>
2018-04-01 16:34:52 +00:00
</words>
2018-04-16 19:14:08 +00:00
<words id="optional_reading">
<div style="position:absolute; top:-5px;">
<i>optional</i> extra bonus notes &uarr;
</div>
<div style="position:absolute; left:216px; top:10px;">
&darr; links and references
</div>
</words>
2018-04-16 15:44:14 +00:00
<words id="networks_puzzle">
2018-04-12 17:12:45 +00:00
<b style="font-size:2em">PUZZLE TIME!</b>
<br>
Fool <i>everyone</i> into thinking
2018-04-18 14:51:44 +00:00
the majority of their friends (50% threshold) are binge-drinkers <icon yellow></icon>
(even though binge-drinkers are outnumbered 2-to-1!)
2018-04-12 17:12:45 +00:00
2018-04-01 16:34:52 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="networks_puzzle_metric">
2018-04-12 17:12:45 +00:00
<b>FOOLED:</b>
</words>
2018-04-16 15:44:14 +00:00
<words id="networks_puzzle_metric_2">
2018-04-12 17:12:45 +00:00
out of 9 people
2018-04-01 16:34:52 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="networks_puzzle_end">
2018-04-12 17:12:45 +00:00
Congrats! You manipulated a group of students into believing
in the prevalance of an incredibly unhealthy social norm! Good going!
<next wiggle>...uh. thanks?</next>
2018-04-01 16:34:52 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="networks_post_puzzle">
2018-04-12 17:12:45 +00:00
2018-04-16 19:14:08 +00:00
What you just created is called The Majority Illusion<ref id="majority"></ref>,
2018-04-12 17:12:45 +00:00
which also explains why people think their political views are consensus,
or why extremism seems more common than it actually is.
<i>Madness.</i>
2018-04-16 19:14:08 +00:00
<bon id="books"></bon>
2018-04-13 20:58:04 +00:00
2018-04-18 14:51:44 +00:00
But people don't just passively <i>observe</i> others' ideas and behaviors,
they actively <i>copy</i> them.
2018-04-12 17:12:45 +00:00
So now, let's look at something network scientists call...
2018-04-12 19:50:59 +00:00
<next>“Contagions!” &rarr;</next>
2018-04-12 17:12:45 +00:00
</words>
2018-03-26 15:52:43 +00:00
2018-04-16 15:44:14 +00:00
<!-- Simple Contagions -->
2018-04-01 16:34:52 +00:00
2018-04-16 15:44:14 +00:00
<words id="simple_simple">
2018-04-18 14:51:44 +00:00
<i>Let's put aside the "threshold" thing for now.</i>
Below: we have a person <icon red></icon> with some information.
2018-04-12 19:50:59 +00:00
Some <i>mis</i>information. "Fake news", as the cool kids say.
2018-04-18 14:51:44 +00:00
And every day, that person spreads the rumor, like a virus, to their friends.
2018-04-12 19:50:59 +00:00
And they spread it to <i>their</i> friends. And so on.
2018-04-15 21:24:22 +00:00
<br>
2018-04-18 14:51:44 +00:00
<b>
Start the simulation! &darr;
2018-04-12 19:50:59 +00:00
(p.s: you can't draw <i>while</i> the sim's running)
2018-04-18 14:51:44 +00:00
</b>
2018-04-12 19:50:59 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="simple_simple_2">
2018-04-18 15:25:41 +00:00
Note: despite the negative name, "contagions" can be good or bad (or neutral or ambiguous).
2018-04-16 19:14:08 +00:00
There's strong statistical evidence<ref id="contagion"></ref> that
2018-04-18 15:25:41 +00:00
smoking, health, happiness, voting patterns, and cooperation levels
2018-04-12 19:50:59 +00:00
are all "contagious" --
2018-04-16 19:14:08 +00:00
and even some evidence that suicides<ref id="suicides"></ref> and mass shootings<ref id="shootings"></ref> are, too.
2018-04-03 17:32:26 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="simple_simple_end">
2018-04-12 19:50:59 +00:00
<next wiggle>well that's depressing &rarr;</next>
2018-04-03 17:32:26 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="simple_cascade">
2018-04-12 19:50:59 +00:00
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)
2018-04-03 17:32:26 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="simple_cascade_end">
2018-04-12 19:50:59 +00:00
<next wiggle>fan-flipping-tastic &rarr;</next>
</words>
2018-04-16 15:44:14 +00:00
<words id="simple_post_cascade">
2018-04-12 19:50:59 +00:00
This madness-spreading is called an <b>"information cascade"</b>.
Mr. Newton fell for such a cascade in 1720.
2018-04-16 19:14:08 +00:00
The world's financial institutions fell for such a cascade in 2008.<ref id="subprime"></ref>
2018-04-18 14:51:44 +00:00
<br><br>
However: <i>this simulation is wrong.</i>
2018-04-18 15:25:41 +00:00
Most ideas <i>don't</i> spread like viruses.
2018-04-18 14:51:44 +00:00
For many beliefs and behaviors, you need to be "exposed" to the contagion more than just once
in order to be "infected".
So, network scientists have come up with a new, better way to
describe how ideas/behaviors spread, and they call it...
2018-04-12 19:50:59 +00:00
<next wiggle><i>Complex</i> Contagions!” &rarr;</next>
2018-04-03 17:32:26 +00:00
</words>
2018-04-16 15:44:14 +00:00
<!-- Complex Contagions -->
2018-04-01 16:34:52 +00:00
2018-04-16 15:44:14 +00:00
<words id="complex_complex">
2018-04-12 19:50:59 +00:00
2018-04-18 14:51:44 +00:00
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.
<br><br>
2018-04-12 19:50:59 +00:00
2018-04-18 14:51:44 +00:00
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>
2018-04-12 19:50:59 +00:00
2018-04-18 14:51:44 +00:00
</words>
<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!
2018-04-12 19:50:59 +00:00
2018-04-18 14:51:44 +00:00
<div style="height:1em"></div>
2018-04-12 19:50:59 +00:00
2018-04-18 14:51:44 +00:00
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,
2018-04-18 15:25:41 +00:00
they did not pass the 50%+ threshold.
2018-04-12 19:50:59 +00:00
2018-04-18 14:51:44 +00:00
<div style="height:1em"></div>
2018-04-12 19:50:59 +00:00
2018-04-18 14:51:44 +00:00
And <i>that's</i> the difference between the <b>"complex contagion"</b> theory,
2018-04-18 15:25:41 +00:00
and our earlier, naive, it-simply-spreads-like-a-virus <b>"simple contagion"</b> theory.
2018-04-18 14:51:44 +00:00
<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>
2018-04-12 19:50:59 +00:00
2018-04-15 21:24:22 +00:00
</span>
2018-04-03 17:32:26 +00:00
</words>
2018-04-18 14:51:44 +00:00
<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">
2018-04-15 21:24:22 +00:00
<span style="line-height:1.4em">
2018-04-12 19:50:59 +00:00
2018-04-15 21:24:22 +00:00
<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)
2018-04-12 19:50:59 +00:00
2018-04-16 19:14:08 +00:00
<br><br>
2018-04-15 21:24:22 +00:00
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.
2018-04-12 19:50:59 +00:00
2018-04-16 19:14:08 +00:00
<br><br>
2018-04-12 19:50:59 +00:00
2018-04-15 21:24:22 +00:00
So, how <i>do</i> we make sure our social ecosystem is healthy?
2018-04-16 19:14:08 +00:00
To figure this out, let's first revisit...
2018-04-12 19:50:59 +00:00
2018-04-15 21:24:22 +00:00
<next wiggle>...the cascade puzzle!</next>
2018-04-12 19:50:59 +00:00
2018-04-15 21:24:22 +00:00
</span>
2018-04-03 17:32:26 +00:00
</words>
2018-04-18 14:51:44 +00:00
-->
2018-04-03 17:32:26 +00:00
2018-04-16 15:44:14 +00:00
<words id="complex_cascade">
2018-04-16 19:49:56 +00:00
You did this before, but now, with a <i>complex</i> contagion <icon blue></icon>, it'll be tougher...
2018-04-15 21:24:22 +00:00
<b>Try to "infect" everyone with complex wisdom! &darr;</b>
(feel free to just hit 'start' and <i>try</i> as many solutions as you want)
2018-04-03 17:32:26 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="complex_cascade_end">
2018-04-12 21:22:22 +00:00
<next wiggle>HOT DANG &rarr;</next>
</words>
2018-04-16 15:44:14 +00:00
<words id="complex_post_cascade">
2018-04-16 19:49:56 +00:00
Now, you may think: so what, complex contagions <icon blue></icon> are just simple contagions <icon red></icon>
2018-04-13 17:42:02 +00:00
that need more connections?
2018-04-12 21:22:22 +00:00
Not so fast!
2018-04-13 17:42:02 +00:00
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...
2018-04-12 21:22:22 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="complex_post_cascade_end">
2018-04-12 21:22:22 +00:00
<next wiggle>...yet another puzzle! &rarr;</next>
2018-04-03 17:32:26 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="complex_prevent">
2018-04-12 21:22:22 +00:00
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.
No surprise there.
But now, here's your challenge:
<b>draw a network to <i>prevent</i> the contagion from spreading to everyone! &darr;</b>
2018-04-03 17:32:26 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="complex_prevent_2">
2018-04-13 17:42:02 +00:00
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)
And this isn't just a theoretical problem. This can be a matter of life...
</words>
2018-04-16 15:44:14 +00:00
<words id="complex_prevent_end">
2018-04-13 17:42:02 +00:00
<next wiggle>...or death. &rarr;</next>
2018-04-12 21:22:22 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="complex_groupthink">
2018-04-12 21:22:22 +00:00
2018-04-13 17:42:02 +00:00
The people at NASA were smart cookies.
I mean, they'd used Newton's theories to get us to the moon.
Anyway, long story short, in 1986,
<i>despite warnings from the engineers</i>,
they launched the <i>Challenger</i>,
which blew up and killed 7 people.
The immediate cause:
it was too cold that morning.
2018-04-15 21:24:22 +00:00
<div style="height:0.9em"></div>
2018-04-13 17:42:02 +00:00
The less immediate cause: the managers ignored the engineers' warnings.
2018-04-16 19:14:08 +00:00
Why? Because of <b>groupthink</b><ref id="groupthink"></ref>.
2018-04-13 17:42:02 +00:00
When a group is <i>too</i> closely knit, (as they tend to be at the top of institutions)
2018-04-15 21:24:22 +00:00
they become resistant to hard-to-accept information
that challenges one's beliefs or ego.
2018-04-13 17:42:02 +00:00
2018-04-15 21:24:22 +00:00
<div style="height:0.9em"></div>
2018-04-13 17:42:02 +00:00
2018-04-13 20:58:04 +00:00
So, that's how to get crowd madness.
But how can we "design" for crowd <i>wisdom?</i>
In short, two words:
2018-04-12 21:22:22 +00:00
2018-04-13 20:58:04 +00:00
<next>Bonding &amp; Bridging &rarr;</next>
2018-04-12 21:22:22 +00:00
2018-04-03 17:32:26 +00:00
</words>
2018-04-16 15:44:14 +00:00
<!-- Bonding & Bridging -->
2018-04-01 16:34:52 +00:00
2018-04-13 20:58:04 +00:00
<words id="bonding_1">
&larr; Too few connections, and an idea can't spread.
<br>
Too many connections, and you get groupthink. &rarr;
</words>
2018-04-01 16:34:52 +00:00
2018-04-13 20:58:04 +00:00
<words id="bonding_2">
<b>
2018-04-18 18:02:27 +00:00
Draw a group that hits the sweet spot:
just connected enough to spread a complex idea!
&darr;
2018-04-13 20:58:04 +00:00
</b>
</words>
2018-03-26 15:52:43 +00:00
2018-04-13 20:58:04 +00:00
<words id="bonding_end">
2018-04-16 19:14:08 +00:00
This is called <b>bonding social capital</b><ref id="social_capital"></ref>,
2018-04-13 20:58:04 +00:00
the strength of the connections <i>within</i> a single group.
But what about the connections...
<next wiggle>...<i>between</i> groups?</next>
</words>
2018-03-26 15:52:43 +00:00
2018-04-13 20:58:04 +00:00
<words id="bridging_1">
As you might have guessed, <b>bridging social capital</b>
is the strength of the connections <i>between</i> groups.
This is important, because it helps groups break out of their insular echo chambers!
<br>
<b>Try to "infect" everyone with wisdom:</b>
2018-04-04 15:57:35 +00:00
</words>
2018-04-13 20:58:04 +00:00
<words id="bridging_end">
2018-04-16 19:14:08 +00:00
Like bonding, bridging social capital has a sweet spot.<ref id="bridge"></ref>
(extra challenge: try drawing a bridge so thick that the complex contagion
2018-04-13 20:58:04 +00:00
<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...
<next wiggle>...do BOTH. &rarr;</next>
2018-04-01 16:34:52 +00:00
</words>
2018-04-13 20:58:04 +00:00
<words id="bb_1">
<b style="font-size:2em">FINAL PUZZLE!</b>
<br>
Draw connections within groups (bonding) and between groups (bridging)
2018-04-15 21:24:22 +00:00
to spread wisdom to everyone:
2018-04-13 20:58:04 +00:00
2018-04-01 16:34:52 +00:00
</words>
2018-04-13 20:58:04 +00:00
<words id="bb_2">
2018-04-15 21:24:22 +00:00
You just drew a very special kind of network!
Networks with high bonding and bridging
are profoundly important, and they're called...
<next wiggle>“Small World Networks” &rarr;</next>
</words>
<words id="bb_small_world_1">
2018-04-13 20:58:04 +00:00
2018-04-15 21:24:22 +00:00
<i>"Unity without uniformity". "Diversity without division". "E Pluribus Unum: out of many, one".</i>
<br>
No matter how it's phrased,
people -- across times and cultures -- have often arrived at the same piece of wisdom:
<b>
2018-04-18 18:02:27 +00:00
a healthy society needs a sweet spot of bonds <i>within</i> groups
and bridges <i>between</i> groups.
2018-04-15 21:24:22 +00:00
</b>
2018-04-18 18:02:27 +00:00
That is:
2018-04-13 20:58:04 +00:00
2018-04-01 16:34:52 +00:00
</words>
2018-04-15 21:24:22 +00:00
<words id="bb_small_world_2">
2018-04-18 18:02:27 +00:00
Not this...
2018-04-15 21:24:22 +00:00
<br>
(because ideas can't spread)
</words>
<words id="bb_small_world_3">
nor this...
<br>
(because you'll get groupthink)
</words>
<words id="bb_small_world_4">
...but <i>THIS:</i>
</words>
<words id="bb_small_world_5">
Network scientists now have a mathematical definition for this ancient wisdom:
2018-04-16 19:14:08 +00:00
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>
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>
2018-04-15 21:24:22 +00:00
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 &rarr;</next>
2018-04-01 16:34:52 +00:00
</words>
2018-04-13 20:58:04 +00:00
2018-04-16 15:44:14 +00:00
<!-- Sandbox -->
2018-04-13 20:58:04 +00:00
<words id="sandbox_caption">
2018-04-15 21:24:22 +00:00
<b>NOTE: "Sandbox Mode" is totally optional!</b>
2018-04-16 19:14:08 +00:00
Feel free to skip it, or play around.<ref id="sandbox"></ref>
2018-04-15 21:24:22 +00:00
Whenever you're done, let's recap...
2018-04-13 20:58:04 +00:00
</words>
<words id="sandbox_next">
<next>what we learnt today!</next>
</words>
2018-04-06 16:06:55 +00:00
<words id="sandbox_contagion">
2018-04-13 20:58:04 +00:00
Contagion:
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_contagion_simple">
2018-04-13 20:58:04 +00:00
simple
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_contagion_complex">
2018-04-13 20:58:04 +00:00
complex
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_color_chooser">
2018-04-13 20:58:04 +00:00
The Contagion's Color:
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_chooser">
2018-04-13 20:58:04 +00:00
Select a tool...
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_pencil">
2018-04-13 20:58:04 +00:00
Draw Network
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_add">
2018-04-13 20:58:04 +00:00
Add Person
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_add_infected">
2018-04-13 20:58:04 +00:00
Add "Infected"
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_move">
2018-04-13 20:58:04 +00:00
Drag Person
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_delete">
2018-04-13 20:58:04 +00:00
Delete Person
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_clear">
2018-04-13 20:58:04 +00:00
<b>CLEAR IT ALL</b>
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_shortcuts_label">
2018-04-13 20:58:04 +00:00
(...or, use keyboard shortcuts!)
2018-04-06 16:06:55 +00:00
</words>
2018-04-13 20:58:04 +00:00
2018-04-06 16:06:55 +00:00
<words id="sandbox_shortcuts">
2018-04-13 20:58:04 +00:00
[1]: Add Person &nbsp;&nbsp;&nbsp; [2]: Add "Infected"
<br>
[Space]: Drag &nbsp;&nbsp;&nbsp; [Backspace]: Delete
</words>
2018-04-16 15:44:14 +00:00
<!-- Conclusion -->
2018-04-13 20:58:04 +00:00
<words id="conclusion_1">
2018-04-15 21:24:22 +00:00
<div style="font-size: 30px;">
IN CONCLUSION: it's all about...
</div>
<div style="
width: 100%;
position: absolute;
font-size: 88px;
top: 20px;
line-height: 100px;
">
Contagions &amp; Connections
</div>
<div style="
width: 710px;
position: absolute;
top: 125px;
left: 250px;
">
<b>Contagions:</b>
Like how neurons pass signals in a brain,
people pass beliefs &amp; behaviors in a society.
Not only do we influence our friends,
2018-04-16 19:14:08 +00:00
we also influence our friends' friends, and even our friends' friends' friends!<ref id="three_degrees"></ref>
2018-04-15 21:24:22 +00:00
(“be the change you wanna see in the world” etc etc)
But, like neurons, it's not just signals that matter, it's also...
</div>
<div style="
width: 710px;
position: absolute;
top: 275px;
left: 250px;
">
<b>Connections:</b>
Too few connections and complex ideas can't spread.
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>
2018-04-16 19:14:08 +00:00
<bon id="limits"></bon>
2018-04-15 21:24:22 +00:00
</div>
<div style="
width: 400px;
position: absolute;
top: 395px;
right: 0px;
text-align: right;
">
so, what about our question from the very beginning?
why <i>do</i> some crowds turn to...
</div>
<div style="
width: 300px;
position: absolute;
top: 460px;
right: 0px;
">
<next>...wisdom and/or madness?</next>
</div>
2018-04-13 20:58:04 +00:00
</words>
<words id="conclusion_2">
2018-04-15 21:24:22 +00:00
<div class="circle" style="font-size:22px; line-height:1.3em;"><span>
<br>
From Newton to NASA to network science, we've covered a lot here today.
Long story short, the madness of crowds is not necessarily due to the
<i>individual people</i>, but how we're trapped in a network's sticky web.
<br><br>
That <i>does NOT</i> mean abandoning personal responsibility,
for we're also the <i>weavers</i> of that web.
So, improve your contagions:
2018-04-16 19:14:08 +00:00
be skeptical of ideas that flatter you<ref id="flatter"></ref>,
2018-04-15 21:24:22 +00:00
spend time understanding complex ideas.
And, improve your connections: bond with similar folk,
but also build bridges across cultural/political divides.
<br><br>
We can weave a wise web.
Sure, it's harder than drawing lines on a screen...
<next>...but so, so worth it.</next>
2018-04-13 20:58:04 +00:00
</span></div>
</words>
<words id="conclusion_3">
2018-04-15 21:24:22 +00:00
<i>
“The great triumphs and tragedies of history are caused,
not by people being fundamentally good or fundamentally bad,
but by people being fundamentally people.”
</i>
<br>
<span style="position:relative; top:5px">~</span> Neil Gaiman &amp; Terry Pratchett
<next small>&lt;3</next>
2018-04-13 20:58:04 +00:00
</words>
2018-04-16 15:44:14 +00:00
<!-- Credits -->
2018-04-13 20:58:04 +00:00
2018-04-16 15:44:14 +00:00
<words id="credits">
2018-04-13 20:58:04 +00:00
CREDITS
<br>
CREDITS
<br>
CREDITS
<br>
CREDITS
<br>
CREDITS
2018-04-16 19:14:08 +00:00
<br>
<bon id="further_reading"></bon>
2018-04-13 20:58:04 +00:00
</words>
<!-- x. misc -->
<words id="WIN">
WIN
</words>
<words id="sim_start">
2018-04-18 18:02:27 +00:00
start simulation
2018-04-13 20:58:04 +00:00
</words>
2018-04-18 15:25:41 +00:00
<words id="sim_stop">
2018-04-18 18:02:27 +00:00
reset &amp; re-draw
2018-04-06 16:06:55 +00:00
</words>
2018-04-01 16:34:52 +00:00
2018-03-27 17:39:08 +00:00
<!-- - - - - - - - - - - - - -->
2018-03-26 15:52:43 +00:00
<!-- BONUS BOXES (footnotes) -->
2018-03-27 17:39:08 +00:00
<!-- - - - - - - - - - - - - -->
2018-04-16 19:14:08 +00:00
<bonus id="connections">
<h3>
BONUS BOX: How Else Can We Be Connected?
</h3>
<div>
(blah blah blah, one-directional, weighted connections, etc)
</div>
</bonus>
<bonus id="books">
<h3>
BONUS BOX: A quick response to James Surowiecki's <i>The Wisdom of Crowds</i>
</h3>
<div>
(blah blah blah)
</div>
</bonus>
<bonus id="limits">
<h3>
BONUS BOX: Everything I Said Is Wrong
</h3>
<div>
(blah blah blah: map, extending the model with ecologies or randomness, etc)
</div>
</bonus>
<bonus id="further_reading">
<h3>
Further Reading
</h3>
<div>
</div>
2018-03-26 15:52:43 +00:00
</bonus>
2018-04-04 15:57:35 +00:00
<!-- - - - - - - -->
<!-- REFERENCES -->
<!-- - - - - - - -->
2018-03-27 17:39:08 +00:00
2018-04-16 19:14:08 +00:00
<reference>
</reference>
<reference id="drunk">
<h3>
“a 1991 study showed that virtually all [college] students reported that their friends drank more than they did.”
</h3>
<div>
[link]
</div>
</reference>
<reference id="majority">
<h3>
“The Majority Illusion”
</h3>
<div>
[link]
[also, interactive NYT version]
</div>
</reference>
<reference id="contagion">
<h3>
“strong statistical evidence that
2018-04-18 14:51:44 +00:00
smoking, health, happiness, voting patterns, and cooperation levels
2018-04-16 19:14:08 +00:00
are all contagious”
</h3>
<div>
[Nicholas Christakis and James Fowler, again]
</div>
</reference>
<reference id="suicides">
<h3>
“some evidence that suicides are [contagious], too”
</h3>
<div>
[link]
</div>
</reference>
<reference id="shootings">
<h3>
“some evidence that mass shootings are [contagious], too”
</h3>
<div>
[link - also Don't Say Their Names]
</div>
</reference>
<reference id="subprime">
<h3>
“The world's financial institutions fell for such a cascade in 2008.”
</h3>
<div>
[link to Cass Sunstein's Lemmings of Wall Street right after the prices plunged - not technical]
<!-- https://newrepublic.com/article/63023/wall-streets-lemmings -->
</div>
</reference>
<reference id="complex">
<h3>
“Complex contagions are weirder.”
</h3>
<div>
[link to empirical proof of twitter complex contagion]
[also, Granovetter's Threshold model]
[and Dodds &amp; Watt's Universal Contagion]
[not to mention contrarians]
</div>
</reference>
<reference id="groupthink">
<h3>
“groupthink”
</h3>
<div>
[link to Janis's Groupthink article]
</div>
</reference>
<reference id="social_capital">
<h3>
“bonding and bridging social capital”
</h3>
<div>
[link to Robert Putnam's Bowling Alone]
</div>
</reference>
<reference id="bridge">
<h3>
“bridging social capital has a sweet spot”
</h3>
<div>
[link to Granovetter's Strength of Weak Ties]
[and response for complex contagion, the Weakness of Long Ties!]
</div>
</reference>
<reference id="small_world">
<h3>
“the small world network”
</h3>
<div>
[link to Strogatz and Watts]
[also the Bret Victor version]
</div>
</reference>
<reference id="swn_neurons">
<h3>
“[small world networks] describe how our neurons interact”
</h3>
<div>
[link plz]
</div>
</reference>
<reference id="swn_creativity">
<h3>
“[small world networks] give rise to collective creativity”
</h3>
<div>
[link to that Broadway and small world study. note PARABOLIC relationship]
</div>
</reference>
<reference id="swn_social_physics">
<h3>
“[small world networks] give rise to collective problem-solving”
</h3>
<div>
[link to Social Physics book]
</div>
</reference>
<reference id="swn_jfk">
<h3>
“[small world networks] helped us (barely) avoid nuclear war!”
</h3>
<div>
[JFK and the Cuban Missile Crisis, his small-world team undid his earlier screw-up
with the Bay of Pigs,
</div>
</reference>
<reference id="sandbox">
<h3>
“Sandbox Mode”
</h3>
<div>
pst... wanna hear a secret? those keyboard shortcuts (1,2,space,delete)
can edit not just the simulation in sandbox mode, but <i>all</i> the simulations
in this explorable explanation! seriously, you can go back to a different chapter,
and edit the simulation right there.
in fact, that's how <i>I</i> created all these puzzles!
</div>
</reference>
<reference id="three_degrees">
<h3>
“we influence [...] our friends' friends' friends!”
</h3>
<div>
[link to Connected by Nicholas Christakis and James Fowler]
</div>
</reference>
<reference id="flatter">
<h3>
“be skeptical of ideas that flatter you”
</h3>
<div>
yes, including all the ideas in <i>this</i> explorable explanation.
</div>
</reference>
2018-03-26 15:52:43 +00:00
2018-04-18 14:51:44 +00:00
</span>
2018-04-01 16:34:52 +00:00
<!-- - - - - -->
<!-- SCRIPTS -->
<!-- - - - - -->
<script src="js/lib/helpers.js"></script>
<script src="js/lib/minpubsub.src.js"></script>
2018-04-16 19:14:08 +00:00
<script src="js/lib/howler.min.js"></script>
2018-04-01 16:34:52 +00:00
<script src="js/lib/Key.js"></script>
<script src="js/lib/Mouse.js"></script>
<script src="js/lib/Sprite.js"></script>
<script src="js/slideshow/Slideshow.js"></script>
<script src="js/slideshow/Pencil.js"></script>
<script src="js/slideshow/Boxes.js"></script>
2018-04-02 17:43:20 +00:00
<script src="js/slideshow/Scratch.js"></script>
2018-04-04 15:57:35 +00:00
<script src="js/slideshow/Navigation.js"></script>
2018-04-06 16:06:55 +00:00
<script src="js/slideshow/SimUI.js"></script>
<script src="js/slideshow/SandboxUI.js"></script>
2018-04-16 19:14:08 +00:00
<script src="js/slideshow/Modal.js"></script>
2018-04-16 15:44:14 +00:00
<script src="js/slideshow/Preloader.js"></script>
2018-04-01 16:34:52 +00:00
<script src="js/sim/Peep.js"></script>
<script src="js/sim/Connection.js"></script>
<script src="js/sim/ConnectorCutter.js"></script>
<script src="js/sim/Simulations.js"></script>
2018-04-16 15:44:14 +00:00
<script src="js/chapters/0_Preloader.js"></script>
2018-04-15 21:24:22 +00:00
<script src="js/chapters/1_Introduction.js"></script>
<script src="js/chapters/2_Networks.js"></script>
<script src="js/chapters/3_Simple_Contagion.js"></script>
<script src="js/chapters/4_Complex_Contagion.js"></script>
<script src="js/chapters/5_Bonding_And_Bridging.js"></script>
<script src="js/chapters/6_Small_World.js"></script>
<script src="js/chapters/7_Sandbox.js"></script>
<script src="js/chapters/8_Conclusion.js"></script>
<script src="js/chapters/9_Credits.js"></script>
2018-04-01 16:34:52 +00:00
<script src="js/main.js"></script>