crowds/index.html

476 lines
11 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
SLIDES:
Keep all words on index.html. This allows people to translate it to SAME repo!
/de.html, etc etc
Same format as EvoTrust. But also footnotes.
Cursor is allowed to flow EVERYWHERE though...
-->
<!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-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 -->
<div id="modal"></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">
<span>0</span>
<span>0. Introduction</span>
</div>
<div chapter="Networks">
<span>1</span>
<span>1. Networks</span>
</div>
<div chapter="Simple">
<span>2</span>
<span>2. Simple Contagion</span>
</div>
<div chapter="Complex">
<span>3</span>
<span>3. Complex Contagion</span>
</div>
<div chapter="BB">
<span>4</span>
<span>4. Bonding &amp; Bridging</span>
</div>
<div chapter="Sandbox">
<span>5</span>
<span>5. Sandbox</span>
</div>
<div chapter="Conclusion">
<span>6</span>
<span>6. In Conclusion...</span>
</div>
<div chapter="Credits">
<span>7</span>
<span>7. Credits</span>
</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">
<span style="margin-top:5px">*</span>
<span>References</span>
</div>
<!-- The hover bubble -->
<span id="nav_bubble">AHHHHHH</span>
</div>
<div id="social"></div>
2018-03-26 15:52:43 +00:00
</div>
2018-03-27 17:39:08 +00:00
<canvas id="pencil"></canvas>
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-01 16:34:52 +00:00
<!-- 0. Introduction -->
2018-03-27 17:39:08 +00:00
2018-04-01 16:34:52 +00:00
<words id="_0_title">
the
<br>
WISDOM and/or MADNESS
<br>
of CROWDS
</words>
2018-03-27 17:39:08 +00:00
2018-04-01 16:34:52 +00:00
<words id="_0_subtitle">
playing time: 30 min • by nicky case, april 2018
</words>
2018-03-28 14:57:19 +00:00
2018-04-01 16:34:52 +00:00
<words id="_0_loading">
loading...
</words>
2018-03-27 17:39:08 +00:00
2018-04-01 16:34:52 +00:00
<words id="_0_play">
let's play! &rarr;
</words>
2018-03-26 15:52:43 +00:00
2018-04-01 16:34:52 +00:00
<words id="_0_intro">
2018-04-11 20:44:12 +00:00
<div class="circle"><span>
<br><br><br>
Isaac Newton was pretty sure he was one smart cookie.
I mean, after inventing calculus, classical mechanics, and a theory of gravity,
he should be smart enough to do some financial investing, right?
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>
<words id="_0_intro_2">
<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,
communities banding together after tragedy,
movements of ordinary people fighting for a better world:
the <i>wisdom</i> of crowds!
<br><br>
<b>But <i>why</i> do some crowds become wise or mad?</b>
Can we calculate the madness, or wisdom, of people?
According to a new field of science,
the answer is not to look at a crowd's <i>individuals</i>,
but at...
<next>...its <i>network</i> &rarr;</next>
</span></div>
2018-03-26 15:52:43 +00:00
</words>
<!-- 1. Networks -->
2018-04-01 16:34:52 +00:00
2018-03-28 17:12:05 +00:00
<words id="_1_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-03-28 17:12:05 +00:00
<words id="_1_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-03-28 17:12:05 +00:00
<words id="_1_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-03-28 17:12:05 +00:00
<words id="_1_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
<words id="_1_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,
say, binge-drinkers. (img)
2018-04-01 16:34:52 +00:00
</words>
2018-04-12 17:12:45 +00:00
<words id="_1_threshold_instruction">
<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
<words id="_1_threshold_explanation">
<span style="color:#666">top-left:</span>
# of drinker friends / # of total friends &nbsp;&nbsp;&nbsp;&nbsp;
<br>
<span style="color:#666">top-right:</span>
% of drinker friends &rarr;
<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-01 16:34:52 +00:00
<words id="_1_threshold_end">
2018-04-12 17:12:45 +00:00
<next>cool, got it</next>
2018-04-01 16:34:52 +00:00
</words>
<words id="_1_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.
<br><br>
(BONUS BOX: OTHER CONNECTIONS)
<br><br>
For example, a 1991 study(*) showed that
“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>
<words id="_1_puzzle">
2018-04-12 17:12:45 +00:00
<b style="font-size:2em">PUZZLE TIME!</b>
<br>
Fool <i>everyone</i> into thinking
the majority of their friends are binge-drinkers (img)
(even though binge-drinkers are outnumbered 2-to-1)
2018-04-01 16:34:52 +00:00
</words>
<words id="_1_puzzle_metric">
2018-04-12 17:12:45 +00:00
<b>FOOLED:</b>
</words>
<words id="_1_puzzle_metric_2">
out of 9 people
2018-04-01 16:34:52 +00:00
</words>
<words id="_1_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>
<words id="_1_post_puzzle">
2018-04-12 17:12:45 +00:00
What you just created is called The Majority Illusion(*),
which also explains why people think their political views are consensus,
or why extremism seems more common than it actually is.
<i>Madness.</i>
<br><br>
But ideas/behaviors aren't just passively observed, they actively <i>spread</i>.
So now, let's look at something network scientists call...
<next>“Simple Contagion!” &rarr;</next>
<b>&larr; bonus challenge:</b> make everyone think
<i>less than half</i> of their friends are binge-drinkers
</words>
<words id="_1_post_puzzle_bonus">
🙌 yay you did it 🙌
2018-03-26 15:52:43 +00:00
</words>
<!-- 2. Simple Contagions -->
2018-04-01 16:34:52 +00:00
2018-04-03 17:32:26 +00:00
<words id="_2_simple">
blah blah simple
</words>
<words id="_2_simple_end">
<next wiggle>next</next>
</words>
<words id="_2_cascade">
blah blah simple cascade
</words>
<words id="_2_cascade_end">
<next wiggle>onwards...</next>
</words>
2018-03-26 15:52:43 +00:00
<!-- 3. Complex Contagions -->
2018-04-01 16:34:52 +00:00
2018-04-03 17:32:26 +00:00
<words id="_3_complex">
blah blah complex vs simple
</words>
<words id="_3_complex_end">
herp derp blah blah
<next wiggle>next</next>
</words>
<words id="_3_cascade">
blah blah complex cascade
</words>
<words id="_3_cascade_end">
<next wiggle>fweeee</next>
</words>
<words id="_3_prevent">
blah blah complex prevention
</words>
<words id="_3_prevent_end">
herp derp blah blah
<next wiggle>next</next>
</words>
2018-03-26 15:52:43 +00:00
<!-- 4. Bonding & Bridging -->
2018-04-01 16:34:52 +00:00
2018-03-26 15:52:43 +00:00
<!-- 5. Sandbox -->
2018-04-01 16:34:52 +00:00
2018-03-26 15:52:43 +00:00
<!-- 6. Conclusion -->
2018-04-03 17:32:26 +00:00
<!-- recap and CONCRETE LIFE TAKE-AWAYS. mirror intro UI -->
2018-03-26 15:52:43 +00:00
<!-- 7. Credits -->
2018-04-04 15:57:35 +00:00
<words id="_7_credits">
FWEEEEEE
</words>
2018-04-01 16:34:52 +00:00
<!-- x. misc -->
<words id="WIN">
WIN
</words>
<words id="sim_start">
2018-04-03 17:32:26 +00:00
&gt; start
2018-04-01 16:34:52 +00:00
</words>
<words id="sim_next">
2018-04-03 15:25:13 +00:00
&gt;&gt; next
2018-04-01 16:34:52 +00:00
</words>
<words id="sim_reset">
2018-04-03 17:32:26 +00:00
&olarr; reset
2018-04-01 16:34:52 +00:00
</words>
2018-04-06 16:06:55 +00:00
<words id="sandbox_contagion">
Contagion:
</words>
<words id="sandbox_contagion_simple">
simple
</words>
<words id="sandbox_contagion_complex">
complex
</words>
<words id="sandbox_color_chooser">
The Contagion's Color:
</words>
<words id="sandbox_tool_chooser">
Select a tool...
</words>
<words id="sandbox_tool_pencil">
2018-04-12 17:12:45 +00:00
Draw Network
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_add">
2018-04-12 17:12:45 +00:00
Add Person
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_add_infected">
2018-04-06 17:13:42 +00:00
Add "Infected"
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_move">
2018-04-12 17:12:45 +00:00
Move Person
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_delete">
2018-04-12 17:12:45 +00:00
Delete Person
2018-04-06 16:06:55 +00:00
</words>
<words id="sandbox_tool_clear">
<b>CLEAR IT ALL</b>
</words>
<words id="sandbox_shortcuts_label">
(...or, use keyboard shortcuts!)
</words>
<words id="sandbox_shortcuts">
2018-04-12 17:12:45 +00:00
[1]: Add Person
2018-04-06 16:06:55 +00:00
<br>
2018-04-12 17:12:45 +00:00
[2]: Add "Infected" Person
2018-04-06 16:06:55 +00:00
<br>
2018-04-12 17:12:45 +00:00
[Space]: Move Person
2018-04-06 16:06:55 +00:00
<br>
2018-04-12 17:12:45 +00:00
[Backspace]: Delete Person
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-02 17:43:20 +00:00
<bonus id="herp">
<title>HERP DERP</title>
<description>
Herp derp HERP derp derp? Herp derp DERP herp herp derp!
</description>
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-04 15:57:35 +00:00
<references>
</references>
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>
<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-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/_Game.js"></script-->
<script src="js/sim/Simulations.js"></script>
<script src="js/chapters/0_Introduction.js"></script>
<script src="js/chapters/1_Networks.js"></script>
<script src="js/chapters/2_Simple_Contagion.js"></script>
<script src="js/chapters/3_Complex_Contagion.js"></script>
<script src="js/chapters/4_Bonding_And_Bridging.js"></script>
<script src="js/chapters/5_Sandbox.js"></script>
<script src="js/chapters/6_Conclusion.js"></script>
<script src="js/chapters/7_Credits.js"></script>
<script src="js/main.js"></script>