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 & 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! →
|
|
|
|
|
</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 →</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> →</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-11 20:44:12 +00:00
|
|
|
Let's draw a network!
|
|
|
|
|
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">
|
|
|
|
|
draw to connect
|
|
|
|
|
</words>
|
2018-04-01 16:34:52 +00:00
|
|
|
|
2018-03-28 17:12:05 +00:00
|
|
|
<words id="_1_tutorial_disconnect">
|
|
|
|
|
scratch to disconnect
|
|
|
|
|
</words>
|
2018-04-01 16:34:52 +00:00
|
|
|
|
2018-03-28 17:12:05 +00:00
|
|
|
<words id="_1_tutorial_end">
|
2018-04-01 16:34:52 +00:00
|
|
|
feel free to play around! when you're done,
|
|
|
|
|
<next wiggle>let's continue →</next>
|
2018-03-28 17:12:05 +00:00
|
|
|
</words>
|
2018-04-01 16:34:52 +00:00
|
|
|
|
|
|
|
|
<words id="_1_threshold">
|
|
|
|
|
blah blah blah blah
|
|
|
|
|
blah blah blah blah
|
|
|
|
|
blah blah blah blah
|
2018-04-02 17:43:20 +00:00
|
|
|
<span bonus="herp"></span>
|
2018-04-01 16:34:52 +00:00
|
|
|
blah blah blah blah
|
|
|
|
|
blah blah blah blah
|
|
|
|
|
thresholds NOT COUNTING THEMSELVES
|
|
|
|
|
</words>
|
|
|
|
|
<words id="_1_threshold_count1">
|
|
|
|
|
# of drinker friends / # of total friends
|
|
|
|
|
</words>
|
|
|
|
|
<words id="_1_threshold_count2">
|
|
|
|
|
% of friends are drinkers
|
|
|
|
|
</words>
|
|
|
|
|
<words id="_1_threshold_count3">
|
|
|
|
|
(black line shows the 50% "majority" mark)
|
|
|
|
|
</words>
|
|
|
|
|
<words id="_1_threshold_end">
|
|
|
|
|
<next>and next...</next>
|
|
|
|
|
</words>
|
|
|
|
|
|
|
|
|
|
<words id="_1_pre_puzzle">
|
|
|
|
|
blah blah drinking
|
|
|
|
|
<next>blah blah next</next>
|
|
|
|
|
</words>
|
|
|
|
|
|
|
|
|
|
<words id="_1_puzzle">
|
|
|
|
|
blah blah puzzle
|
|
|
|
|
</words>
|
|
|
|
|
<words id="_1_puzzle_metric">
|
|
|
|
|
HOW MANY PEEPS FOOLED:
|
|
|
|
|
</words>
|
|
|
|
|
<words id="_1_puzzle_end">
|
|
|
|
|
blah blah puzzle
|
|
|
|
|
<next wiggle>a winrar is you</next>
|
|
|
|
|
</words>
|
|
|
|
|
|
|
|
|
|
<words id="_1_post_puzzle">
|
|
|
|
|
blah blah post-puzzle
|
|
|
|
|
<next>simple contagion...</next>
|
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
|
|
|
> start
|
2018-04-01 16:34:52 +00:00
|
|
|
</words>
|
|
|
|
|
<words id="sim_next">
|
2018-04-03 15:25:13 +00:00
|
|
|
>> next
|
2018-04-01 16:34:52 +00:00
|
|
|
</words>
|
|
|
|
|
<words id="sim_reset">
|
2018-04-03 17:32:26 +00:00
|
|
|
↺ 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">
|
|
|
|
|
Draw Connections
|
|
|
|
|
</words>
|
|
|
|
|
<words id="sandbox_tool_add">
|
|
|
|
|
Add Peep
|
|
|
|
|
</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">
|
|
|
|
|
Move Peep
|
|
|
|
|
</words>
|
|
|
|
|
<words id="sandbox_tool_delete">
|
|
|
|
|
Delete Peep
|
|
|
|
|
</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">
|
|
|
|
|
[1]: Add Peep
|
|
|
|
|
<br>
|
2018-04-06 17:13:42 +00:00
|
|
|
[2]: Add "Infected" Peep
|
2018-04-06 16:06:55 +00:00
|
|
|
<br>
|
|
|
|
|
[Space]: Move Peep
|
|
|
|
|
<br>
|
|
|
|
|
[Backspace]: Delete Peep
|
|
|
|
|
</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>
|
|
|
|
|
|
