crowds/index.html

1049 lines
27 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-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-11 20:44:12 +00:00
<div class="circle"><span>
<br>
Of course, that's not the only time markets, institutions, or entire democracies went crazy:
the <i>madness</i> of crowds.
And yet, just when you lose hope in humanity,
you see citizens rescuing each other in hurricanes,
2018-04-13 20:58:04 +00:00
communities creating solutions to problems,
2018-04-11 20:44:12 +00:00
movements of ordinary people fighting for a better world:
the <i>wisdom</i> of crowds!
<br><br>
2018-04-12 21:22:22 +00:00
<b>But <i>why</i> do some crowds turn to madness, or wisdom?</b>
And how can we, collectively, get more of the latter?
2018-04-12 19:50:59 +00:00
According to the new field of <b>network science</b>,
the answer is not in the <i>individual people</i>, but in...
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
feel free to keep playing around, and draw whatever friendship network you want!
when you're done,
<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
But people don't just have social connections to make pretty pictures.
People look at 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,
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_explanation">
2018-04-12 17:12:45 +00:00
<span style="color:#666">top-left:</span>
2018-04-16 19:14:08 +00:00
% of drinker friends &rarr;
2018-04-12 17:12:45 +00:00
<br>
<span style="color:#666">top-right:</span>
2018-04-16 19:14:08 +00:00
# of drinker friends / # of total friends &nbsp;&nbsp;&nbsp;&nbsp;
2018-04-12 17:12:45 +00:00
<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;
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.
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.
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-16 19:49:56 +00:00
the majority of their friends are binge-drinkers <icon yellow></icon>
2018-04-12 17:12:45 +00:00
(even though binge-drinkers are outnumbered 2-to-1)
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-12 17:12:45 +00:00
But ideas/behaviors aren't just passively observed, they actively <i>spread</i>.
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-16 19:49:56 +00:00
Below, we start with one person <icon red></icon> who has some information.
2018-04-12 19:50:59 +00:00
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.
2018-04-15 21:24:22 +00:00
<br>
2018-04-12 19:50:59 +00:00
<b>Run the simulation, step-by-step &darr;</b>
(p.s: you can't draw <i>while</i> the sim's running)
</words>
2018-04-16 15:44:14 +00:00
<words id="simple_simple_2">
2018-04-12 19:50:59 +00:00
Note: despite the negative name, "contagions" can be good or bad.
2018-04-16 19:14:08 +00:00
There's strong statistical evidence<ref id="contagion"></ref> that
2018-04-12 19:50:59 +00:00
smoking, happiness, obesity, voting patterns, and cooperation levels
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-12 19:50:59 +00:00
But so what? You already knew ideas spread.
2018-04-16 19:14:08 +00:00
However, some contagions act a bit more strangely... and they're called:
2018-04-12 19:50:59 +00:00
</words>
2018-04-16 15:44:14 +00:00
<words id="simple_post_cascade_end">
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-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
Truth may be stranger than fiction, but it doesn't sell as well.
2018-04-12 19:50:59 +00:00
2018-04-16 19:49:56 +00:00
<div style="height:0.7em"></div>
2018-04-12 19:50:59 +00:00
2018-04-15 21:24:22 +00:00
<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.
2018-04-12 19:50:59 +00:00
2018-04-16 19:49:56 +00:00
<div style="height:0.7em"></div>
2018-04-12 19:50:59 +00:00
2018-04-15 21:24:22 +00:00
<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,
2018-04-16 19:14:08 +00:00
but a minimum <i>percentage</i> of friends to spread!<ref id="complex"></ref>
2018-04-12 19:50:59 +00:00
2018-04-16 19:49:56 +00:00
<div style="height:0.7em"></div>
2018-04-12 19:50:59 +00:00
2018-04-15 21:24:22 +00:00
<b>On the right, a person needs <i>AT LEAST 25%</i> of their friends to
2018-04-16 19:49:56 +00:00
adopt a complex fact <icon blue></icon> before they do.
2018-04-15 21:24:22 +00:00
Try "infecting" them all with <i>wisdom!</i> &rarr;</b>
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-16 15:44:14 +00:00
<words id="complex_complex_2">
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-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>
Find the sweet spot, and draw a group that's <i>just</i> connected enough
to spread a complex idea! &darr;
</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>
a healthy society needs both tight bonds <i>within</i> groups
and thick bridges <i>between</i> groups.
</b>
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">
That is, not this...
<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">
&gt; start
</words>
<words id="sim_next">
&gt;&gt; next
</words>
<words id="sim_reset">
&olarr; reset
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
smoking, happiness, obesity, voting patterns, and cooperation levels
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-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>