1675 lines
51 KiB
HTML
1675 lines
51 KiB
HTML
<!--
|
||
|
||
THE WISDOM AND/OR MADNESS OF CROWDS
|
||
by Nicky Case | apr 2018
|
||
|
||
- - - - - - - - - - -
|
||
|
||
FAN TRANSLATION GUIDE:
|
||
https://github.com/ncase/crowds#how-to-translate-this-thing
|
||
|
||
Hello fan-translaters! Thank you so, so much for your help.
|
||
I hope you know what you've gotten yourself into.
|
||
There's about 3600+ WORDS to translate, including
|
||
the Bonus Boxes and References.
|
||
|
||
To make things easier (or less painful, anyway) I've marked
|
||
what needs to be translated and how with big "TRANSLATE" comments.
|
||
Ctrl+F for "TRANSLATE" in uppercase to see what needs to be translated!
|
||
|
||
BUT BEFORE YOU TRANSLATE ANYTHING, DO THIS:
|
||
1) Look up the two-letter code of the language you're translating to:
|
||
https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
|
||
2) *COPY* index.html, and name the copy [two-letter-code].html
|
||
For example: de.html, ar.html, zh.html, etc...
|
||
3) Translate *THAT* page. Do NOT modify the original index.html!
|
||
|
||
And once you're done, go to "translations.txt", and follow the
|
||
instructions there to let this game "know" your translation exists.
|
||
|
||
Good luck, and thanks again!
|
||
|
||
<3,
|
||
~ Nicky Case
|
||
|
||
-->
|
||
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
|
||
<!-- Meta Info -->
|
||
<title>Moudrost a/nebo šílenství davů</title> <!-- <title>(TRANSLATE this part only)</title> -->
|
||
<meta name="description" content="interaktivní průvodce sítí mezilidských vztahů"/> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||
<meta content="utf-8" http-equiv="encoding">
|
||
<meta charset="utf-8">
|
||
<link rel="icon" type="image/png" href="favicon.png">
|
||
|
||
<!-- Sharing -->
|
||
<meta itemprop="name" content="Moudrost a/nebo šílenství davů"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta itemprop="description" content="interaktivní průvodce sítí mezilidských vztahů"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta itemprop="image" content="http://ncase.me/crowds/social/thumb.png">
|
||
|
||
<meta name="twitter:title" content="Moudrost a/nebo šílenství davů"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta name="twitter:description" content="interaktivní průvodce sítí mezilidských vztahů"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:site" content="@ncasenmare">
|
||
<meta name="twitter:creator" content="@ncasenmare">
|
||
<meta name="twitter:image" content="http://ncase.me/crowds/social/thumb.png">
|
||
|
||
<meta property="og:title" content="Moudrost a/nebo šílenství davů"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta property="og:description" content="interaktivní průvodce sítí mezilidských vztahů"> <!-- content="(TRANSLATE this part only)" -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="http://ncase.me/crowds/">
|
||
<meta property="og:image" content="http://ncase.me/crowds/social/thumb.png">
|
||
|
||
<!-- Styles -->
|
||
<link rel="stylesheet" type="text/css" href="css/index.css?v=3">
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!-- THE SLIDESHOW -->
|
||
<div id="container">
|
||
|
||
<!-- 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 -->
|
||
<canvas id="scratch" width="711" height="400"></canvas>
|
||
|
||
<!-- Skip -->
|
||
<div id="skip">přeskočit ></div> <!-- TRANSLATE -->
|
||
|
||
<!-- Modal -->
|
||
<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>
|
||
|
||
</div>
|
||
|
||
<!-- Navigation: Audio, Contents, Share, Translations -->
|
||
<div id="navigation_container">
|
||
<div id="sound" mute="no">
|
||
<div id="sound_icon"></div>
|
||
<span id="sound_on">Zapnuto</span> <!-- TRANSLATE -->
|
||
<span id="sound_off">Vypnuto</span> <!-- TRANSLATE -->
|
||
</div>
|
||
<div id="sharing">
|
||
<a id="fb" target="_blank" href="TODO"></a>
|
||
<a id="tw" target="_blank" href="TODO"></a>
|
||
<a id="em" target="_blank" href="TODO"></a>
|
||
<span id="share_title">
|
||
Moudrost a/nebo šílenství davů <!-- TRANSLATE -->
|
||
</span>
|
||
<span id="share_desc">
|
||
<!-- TRANSLATOR: keep this on ONE LINE or the social sharing will break! -->
|
||
Proč se skupiny lidí chovají rozumně, hloupě, laskavě nebo krutě? Interaktivní průvodce sítí mezilidských vztahů: <!-- TRANSLATE -->
|
||
</span>
|
||
</div>
|
||
<div id="navigation">
|
||
|
||
<!-- The chapters -->
|
||
<!-- TRANSLATE all the Chapter names! -->
|
||
<div chapter="Introduction">
|
||
<span>0</span>
|
||
<span>0. Úvod</span>
|
||
</div>
|
||
<div chapter="Networks">
|
||
<span>1</span>
|
||
<span>1. Vztahy</span>
|
||
</div>
|
||
<div chapter="Simple">
|
||
<span>2</span>
|
||
<span>2. Nakažlivé chování</span>
|
||
</div>
|
||
<div chapter="Complex">
|
||
<span>3</span>
|
||
<span>3. Podmíněná nakažlivost</span>
|
||
</div>
|
||
<div chapter="BB">
|
||
<span>4</span>
|
||
<span>4. Svazky a mosty</span>
|
||
</div>
|
||
<div chapter="SmallWorld">
|
||
<span>5</span>
|
||
<span>5. Svět je malý</span>
|
||
</div>
|
||
<div chapter="Conclusion">
|
||
<span>6</span>
|
||
<span>6. Na závěr…</span>
|
||
</div>
|
||
<div chapter="Credits">
|
||
<span>7</span>
|
||
<span>7. Autoři</span>
|
||
</div>
|
||
<div chapter="Sandbox">
|
||
<span>★</span>
|
||
<span>★ Volná hra! ★</span>
|
||
</div>
|
||
|
||
<!-- A divider -->
|
||
<span class="nav_divider"></span>
|
||
|
||
<!-- Bonus Notes & References -->
|
||
<div modal="bonus">
|
||
<span>?</span>
|
||
<span>Bonusové poznámky!</span> <!-- TRANSLATE -->
|
||
</div>
|
||
<div modal="references">
|
||
<span style="margin-top: 7px; font-size: 35px;">*</span>
|
||
<span>Odkazy a literatura</span> <!-- TRANSLATE -->
|
||
</div>
|
||
<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>Překlady</span> <!-- TRANSLATE -->
|
||
</div>
|
||
|
||
<!-- The hover bubble -->
|
||
<span id="nav_bubble"></span>
|
||
|
||
</div>
|
||
<div id="translations"></div>
|
||
<div id="social"></div>
|
||
</div>
|
||
|
||
<!-- The Pencil -->
|
||
<div id="pencil_container">
|
||
<canvas id="pencil"></canvas>
|
||
</div>
|
||
|
||
<!-- Preloader -->
|
||
<div id="pre_preloader">
|
||
<div>načítám…</div> <!-- TRANSLATE -->
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
<!-- - - - - -->
|
||
<!-- SCRIPTS -->
|
||
<!-- - - - - -->
|
||
|
||
<script src="js/lib/helpers.js"></script>
|
||
<script src="js/lib/minpubsub.src.js"></script>
|
||
<script src="js/lib/howler.min.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>
|
||
<script src="js/slideshow/Scratch.js"></script>
|
||
<script src="js/slideshow/Navigation.js"></script>
|
||
<script src="js/slideshow/SimUI.js"></script>
|
||
<script src="js/slideshow/SandboxUI.js"></script>
|
||
<script src="js/slideshow/Modal.js"></script>
|
||
<script src="js/slideshow/Preloader.js"></script>
|
||
<script src="js/slideshow/Translations.js?v=2"></script>
|
||
|
||
<script src="js/sim/Peep.js?v=2"></script>
|
||
<script src="js/sim/Connection.js"></script>
|
||
<script src="js/sim/ConnectorCutter.js"></script>
|
||
<script src="js/sim/Simulations.js"></script>
|
||
|
||
<script src="js/chapters/A_Preloader.js"></script>
|
||
<script src="js/chapters/B_Introduction.js"></script>
|
||
<script src="js/chapters/C_Networks.js"></script>
|
||
<script src="js/chapters/D_Simple_Contagion.js"></script>
|
||
<script src="js/chapters/E_Complex_Contagion.js"></script>
|
||
<script src="js/chapters/F_Bonding_And_Bridging.js"></script>
|
||
<script src="js/chapters/G_Small_World.js"></script>
|
||
<script src="js/chapters/H_Conclusion.js"></script>
|
||
<script src="js/chapters/I_Credits.js"></script>
|
||
<script src="js/chapters/J_Sandbox.js?v=2"></script>
|
||
|
||
<script src="js/main.js"></script>
|
||
|
||
|
||
<!-- - - - - - - - - - - - -->
|
||
<!-- THE SLIDESHOW'S WORDS -->
|
||
<!-- - - - - - - - - - - - -->
|
||
|
||
<!--
|
||
|
||
This is the bulk of what you need to TRANSLATE!
|
||
Translate just the text that's within the <tag></tags>
|
||
If you're using a code editor (like Sublime Text https://www.sublimetext.com/),
|
||
it should automatically highlight what the text is (usually in white).
|
||
|
||
-->
|
||
|
||
<span style="display:none">
|
||
|
||
<!-- Preloader -->
|
||
|
||
<words id="preloader_title">
|
||
|
||
<div style="font-size: 30px;">
|
||
<span style="font-size: 50px;">MOUDROST</span>
|
||
<span style="position:relative;top: -10px;">a/nebo</span>
|
||
<span style="font-size: 50px;">ŠÍLENSTVÍ</span>
|
||
<br>
|
||
<span style="font-size: 100px;line-height: 100px;position: relative; display:block;">DAVŮ</span>
|
||
</div>
|
||
|
||
<div style="color:#999">
|
||
<!-- TRANSLATE note: comment out the line below... -->
|
||
délka hry: 30 minut • autor: Nicky Case, duben 2018<br>
|
||
<!-- ...and UN-comment + TRANSLATE this line! -->
|
||
překlad: Martin Doucha • <a href=".">original in English</a>
|
||
</div>
|
||
|
||
</words>
|
||
|
||
<words id="preloader_button">
|
||
<next></next>
|
||
</words>
|
||
|
||
<words id="preloader_loading">
|
||
načítám…
|
||
</words>
|
||
|
||
<words id="preloader_play">
|
||
Spustit hru! <div class="rarr"></div>
|
||
</words>
|
||
|
||
<!-- Introduction -->
|
||
<!--
|
||
|
||
TRANSLATE note: to make the text stay in a circle, I added lots of <br> breaks.
|
||
You may have to re-arrange the <br>'s in order to do your translation.
|
||
It shouldn't look too bad if they're slightly off, though!
|
||
|
||
Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
|
||
|
||
-->
|
||
|
||
<words id="intro">
|
||
|
||
<br><br>
|
||
|
||
Sir Isaac Newton si myslel, že má pěkně
|
||
<br>
|
||
pod čepicí. Vždyť přece vymyslel teorii gravitace
|
||
<br>
|
||
a infinitezimální počet, takže investování na burze by
|
||
<br>
|
||
pro něj měla být hračka, že? Ale ve zkratce, v roce 1720
|
||
<br>
|
||
prohrál v burzovním krachu známém jako Jihomořská
|
||
<br>
|
||
bublina 92 milionů korun (v přepočtu na dnešní peníze).
|
||
|
||
<br><br>
|
||
|
||
Jak pan Newton později řekl: <i>“Umím spočítat pohyb
|
||
<br>
|
||
nebeských těles, ale ne lidské bláznovství.”</i>
|
||
|
||
<next>no, to měl smůlu <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<words id="intro_2">
|
||
|
||
<div style="height:0.5em"></div>
|
||
|
||
To samozřejmě není jediný
|
||
<br>
|
||
případ, kdy se splašily trhy, instituce
|
||
<br>
|
||
nebo celé demokratické státy — <i>šílenství</i> davů.
|
||
<br>
|
||
Ale vždycky, když skoro ztratíte víru v lidstvo, tak
|
||
<br>
|
||
si najednou všimnete, jak lidé sami organizují záchranu
|
||
<br>
|
||
ostatních při hurikánech, jak komunity společně řeší své
|
||
<br>
|
||
problémy a jak lidé bojují za lepší svět — <i>moudrost</i> davů!
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
<b>Ale <i>proč</i> z některých davů vzejde šílenství, a z jiných moudrost?</b>
|
||
<br>
|
||
Žádná teorie nevysvětluje úplně vše, ale podle mě nám to
|
||
<br>
|
||
pomůže pochopit nový vědní obor, <b>teorie sítí</b>! Jeho hlavní
|
||
<br>
|
||
myšlenka zní: pro pochopení chování davů nejsou
|
||
<br>
|
||
důležití <i>jednotlivci</i>, ale…
|
||
|
||
<next>…jejich <i>vztahy.</i> <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<!-- Networks -->
|
||
|
||
<words id="networks_tutorial_start">
|
||
<b>Nakreslíme si síť!</b>
|
||
Každá čára představuje přátelství mezi dvěma lidmi:
|
||
</words>
|
||
|
||
<words id="networks_tutorial_connect">
|
||
můžete kreslit nová
|
||
</words>
|
||
|
||
<words id="networks_tutorial_disconnect">
|
||
a škrtat existující
|
||
</words>
|
||
|
||
<words id="networks_tutorial_end">
|
||
|
||
až si vyhrajete do libosti,
|
||
<next wiggle>můžeme pokračovat <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<words id="networks_threshold">
|
||
|
||
Mezilidské vztahy ale představují víc než jen námět pro hezké obrázky.
|
||
Lidé vnímají své vztahy jako <i>vzor</i>, aby pochopili okolní svět.
|
||
Například lidé mohou sledovat, <b>jak velká část jejich přátel</b>
|
||
(sebe nepočítaje) jsou třeba notoričtí pijani. <icon name="yellow"></icon>
|
||
|
||
</words>
|
||
|
||
<words id="networks_threshold_instruction">
|
||
<b>Přidávejte/mažte vztahy a sledujte, co se stane! <div class="rarr"></div> </b>
|
||
</words>
|
||
|
||
<words id="networks_threshold_end">
|
||
<next>jasně, už to chápu</next>
|
||
</words>
|
||
|
||
<words id="networks_pre_puzzle">
|
||
Jenže sítě mohou také <i>klamat</i> lidi.
|
||
Podobně jako země vypadá placatá, protože stojíme na ní,
|
||
tak lidé mohou získat mylnou představu o společnosti, protože jsou <i>uvnitř</i>.
|
||
</words>
|
||
|
||
<words id="optional_reading">
|
||
<div style="position:absolute; top:5px;">
|
||
bonusové poznámky! <i>(navíc)</i> ↑
|
||
</div>
|
||
<div style="position:absolute; left:198px; top:10px;">
|
||
↓ odkazy a literatura
|
||
</div>
|
||
</words>
|
||
|
||
<words id="networks_pre_puzzle_2">
|
||
|
||
<bon id="books"></bon>
|
||
|
||
<br>
|
||
|
||
Například v jedné studii<ref id="drunk"></ref> z roku 1991 vyšlo, že
|
||
“prakticky všichni [vysokoškolští] studenti uvedli, že jejich přátelé pijí víc než oni sami.”
|
||
Ale to přece není možné!
|
||
Jak se to mohlo stát?
|
||
Ne tak rychle, za chvíli budete kreslit síť, ve které to možné je.
|
||
Je čas…
|
||
|
||
<next>VŠECHNY OKLAMAT <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<words id="networks_puzzle">
|
||
|
||
<b style="font-size:2em">HLAVOLAM!</b>
|
||
<br>
|
||
Zařiďte, aby si <i>všichni</i> mysleli,
|
||
že většina jejich přátel (alespoň 50 %) jsou notoričtí pijani <icon name="yellow"></icon>
|
||
(přestože jsou pijani v menšině 2 ku 1!)
|
||
|
||
</words>
|
||
<words id="networks_puzzle_metric">
|
||
<b>OKLAMÁNO:</b>
|
||
</words>
|
||
<words id="networks_puzzle_metric_2">
|
||
z 9 lidí
|
||
</words>
|
||
<words id="networks_puzzle_end">
|
||
Gratuluji! Podařilo se vám nakukat skupině studentů, že jeden
|
||
extrémně nezdravý zlozvyk je vlastně normální! Skvělá práce!
|
||
<next wiggle>…uh. díky?</next>
|
||
</words>
|
||
|
||
<words id="networks_post_puzzle">
|
||
|
||
Před chvílí jste vytvořili něco, čemu se říká Iluze většiny<ref id="majority"></ref>,
|
||
která také vysvětluje, proč lidé někdy považují své politické názory za obecný
|
||
konsensus nebo proč rozsah extremismu vypadá větší, než je ve skutečnosti.
|
||
<i>Šílenství.</i>
|
||
|
||
<bon id="connections"></bon>
|
||
|
||
Jenže lidé myšlenky a chování ostatních jen pasivně nesledují,
|
||
zároveň je i aktivně <i>napodobují</i>.
|
||
Takže teď se podíváme na něco, čemu vědci říkají…
|
||
|
||
<next>Nakažlivé chování! <div class="rarr"></div> </next>
|
||
|
||
|
||
</words>
|
||
|
||
<!-- Simple Contagions -->
|
||
|
||
<words id="simple_simple">
|
||
<i>K procentům skupiny se vrátíme za chvíli.</i>
|
||
Teď máme před sebou člověka <icon name="red"></icon> s jistou informací.
|
||
S jistou <i>dez</i>informací. „Fake news,“ jak se tomu teď moderně říká.
|
||
A ten člověk tuhle fámu každý den šíří mezi svými přáteli jako virus.
|
||
A ti ji pak šíří mezi <i>svými</i> přáteli, a tak dále.
|
||
<br>
|
||
<b>
|
||
Pusťte si simulaci! <div class="darr"></div>
|
||
(mimochodem, v průběhu simulace nemůžete kreslit)
|
||
</b>
|
||
</words>
|
||
|
||
<words id="simple_simple_2">
|
||
Poznámka: Přes lehce morbidní název může být „nakažlivé chování“
|
||
dobré i zlé (nebo neutrální, nebo nejednoznačné).
|
||
Statistiky<ref id="contagion"></ref> jasně dokazují, že
|
||
kouření, zdraví, štěstí, volební preference a ochota spolupracovat
|
||
vykazují jistou „nakažlivost“ —
|
||
a naznačují i nakažlivost sebevražd<ref id="suicides"></ref> a masových vražd<ref id="shootings"></ref>.
|
||
</words>
|
||
|
||
<words id="simple_simple_end">
|
||
<next wiggle>to je hrůza <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="simple_cascade">
|
||
To opravdu je.
|
||
Ale teď je čas na <b>HLAVOLAM!</b>
|
||
<br>
|
||
Nakreslete síť a spusťte simulaci,
|
||
aby této „epidemii“ podlehli <i>úplně všichni</i>.
|
||
<br>
|
||
(nové pravidlo: <b>silné</b> vztahy nemůžete škrtnout)
|
||
</words>
|
||
|
||
<words id="simple_cascade_end">
|
||
<next wiggle>paráda <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="simple_post_cascade">
|
||
Této vlně šílenství se říká <b>„informační kaskáda“</b>.
|
||
Pan Newton se v roce 1720 stal obětí právě takové kaskády.
|
||
Světové finanční instituce podobné kaskádě podlehly v roce 2008.<ref id="subprime"></ref>
|
||
<br><br>
|
||
<b>ALE</b>: <i>tahle simulace je špatně.</i>
|
||
Většina myšlenek se <i>nešíří</i> jako viry.
|
||
Obvykle musíte s danou myšlenkou nebo chováním přijít do styku vícekrát, abyste se „nakazili“.
|
||
Takže vědci vymysleli přesnější popis, jak se myšlenky a chování
|
||
mezi lidmi šíří, kterému budeme říkat…
|
||
<next wiggle>“<i>Podmíněná</i> nakažlivost!” <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<!-- Complex Contagions -->
|
||
|
||
<words id="complex_complex">
|
||
|
||
Vraťme se zpět k příkladu s počtem pijanů <icon name="yellow"></icon> ve skupině.
|
||
Minule neměly poměry ve skupině žádný vliv na chování jednotlivců.
|
||
|
||
<br><br>
|
||
|
||
Teď se podíváme, co se stane, když lidé začnou pít,
|
||
<i>pokud pije alespoň 50 % jejich přátel!</i>
|
||
<b>Než spustíte simulaci, zkuste se zamyslet, co by se tentokrát <i>mělo</i> stát.</b>
|
||
|
||
<br><br>
|
||
|
||
<b>Teď spusťte simulaci a sledujte, jak to dopadne! <div class="rarr"></div> </b>
|
||
</words>
|
||
|
||
<words id="complex_complex_2">
|
||
<span style="line-height:1.3em; display:block;">
|
||
|
||
Narozdíl od předchozí epidemie „fake news“ <icon name="red"></icon> se
|
||
tentokrát alkoholismem <icon name="yellow"></icon> <i>nenakazili</i> všichni!
|
||
Prvních několik lidí se „nakazilo“, protože byť se stýkají jen s jedním
|
||
pijanem, tenhle pijan představuje polovinu jejich přátel (jsou prostě osamělí).
|
||
Naopak člověk těsně před koncem řetězce se <i>nenakazil</i>, protože i když
|
||
měl mezi přáteli pijana, jeden na překročení hranice 50 % nestačil.
|
||
|
||
<div style="height:0.75em"></div>
|
||
|
||
Rozhodující je <i>relativní</i> podíl „nakažených“ přátel.
|
||
To je hlavní rozdíl mezi teorií <b>podmíněné nakažlivosti</b><ref id="complex"></ref>
|
||
a předchozí <b>jednoduchou nakažlivostí</b>, která se šíří jako epidemie.
|
||
(Dalo by se říci, že „jednoduchá nakažlivost“ znamená minimální hranici pro nakažení „více než 0%“)
|
||
|
||
<div style="height:0.75em"></div>
|
||
|
||
Jenže nakažlivé chování nemusí být vždy špatné —
|
||
takže dost o <i>šílenství</i> davů, a jak tedy vypadá…
|
||
<next>…<i>moudrost</i> davů?</next>
|
||
|
||
</span>
|
||
</words>
|
||
|
||
<words id="complex_complex_3">
|
||
|
||
Tady máme člověka <icon name="blue"></icon> který pomáhá jako dobrovolník… já nevím,
|
||
třeba zachraňovat lidi při hurikánech nebo doučovat sociálně slabé děti z okolí nebo něco podobně ušlechtilého.
|
||
Hlavní je, že je to „dobré“ nakažlivé chování.
|
||
Tentokrát ale bude hranice pro „nakažení“ jen 25 % —
|
||
lidé jsou ochotní pomáhat jako dobrovolníci, ale jen pokud už pomáhá alespoň 25 % jejich přátel.
|
||
I dobro potřebuje trochu podpořit.
|
||
|
||
<br><br>
|
||
|
||
<b>← „Nakažte“ všechny dobrosrdečností!</b>
|
||
|
||
</words>
|
||
|
||
<words id="complex_complex_3_end">
|
||
<span style="line-height:1.3em; display:block;">
|
||
|
||
<b>Poznámka:</b> Dobrovolnictví je jen jedno z <i>mnoha</i> podmíněných nakažlivých chování!
|
||
Další jsou například chození k volbám, životní styl, otevřenost k jiným názorům,
|
||
snaha porozumět problémům do hloubky — cokoliv,
|
||
s čím musíte přijít „do styku“ více než jednou.
|
||
Podmíněně nakažlivé chování není vždycky moudré,
|
||
ale moudrost je podmíněně nakažlivá.
|
||
|
||
<div style="height:0.75em"></div>
|
||
|
||
(A co je tedy ve skutečnosti <i>jednoduše</i> nakažlivé?
|
||
Většinou drobná fakta, třeba že „vačice má 13 bradavek“<ref id="possum"></ref>)
|
||
|
||
<bon id="contagions"></bon>
|
||
|
||
A teď, abyste <i>pořádně</i> viděli sílu a zvláštnosti podmíněné nakažlivosti, vraťme se zpět…
|
||
|
||
<next>…k dřívějšímu hlavolamu <div class="rarr"></div> </next>
|
||
|
||
</span>
|
||
</words>
|
||
|
||
<words id="complex_cascade">
|
||
Pamatujete si tuhle síť? S <i>podmíněnou</i> nakažlivostí <icon name="blue"></icon> to tentokrát bude trochu těžší…
|
||
<br>
|
||
<b>Zkuste všechny „nakazit“ podmíněnou moudrostí! <div class="darr"></div></b>
|
||
</words>
|
||
|
||
<words id="complex_cascade_feel_free">
|
||
(klidně jen spusťte simulaci a zkoušejte si různá řešení)
|
||
</words>
|
||
|
||
<words id="complex_cascade_end">
|
||
<next wiggle>NÁDHERA <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="complex_post_cascade">
|
||
Teď Vám možná připadá, že čím více vztahů, tím snadněji se bude nakažlivé chování šířit,
|
||
„jednoduché“ i „podmíněné“, dobré i zlé, moudré i bláznivé.
|
||
Ale je to vážně pravda? Pojďme se tedy vrátit…
|
||
</words>
|
||
<words id="complex_post_cascade_end">
|
||
<next wiggle>…k jinému hlavolamu<div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="complex_prevent">
|
||
Když teď spustíte simulaci, podmíněně nakažlivé chování <icon name="blue"></icon> ovládne celou síť.
|
||
Žádné překvapení.
|
||
Tentokrát ale zkusme vyřešit úplně <i>opačný</i> úkol:
|
||
<b>nakreslete síť, která <i>zabrání</i> nakažení všech lidí! <div class="darr"></div></b>
|
||
</words>
|
||
|
||
<words id="complex_prevent_2">
|
||
Vidíte?
|
||
Více vztahů sice usnadní šíření <i>jednoduchých</i> myšlenek,
|
||
<b>ale naopak může zabránit šíření <i>podmíněných</i> myšlenek!</b>
|
||
(Na Internetu by to mohl být problém, že?)
|
||
A není to jen hypotetický problém. Někdy je to otázka života…
|
||
</words>
|
||
|
||
<words id="complex_prevent_end">
|
||
<next wiggle>…a smrti. <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<words id="complex_groupthink">
|
||
|
||
Lidé v NASA měli pod čepicí.
|
||
Vždyť přece s pomocí Newtonových teorií dostali člověka na Měsíc.
|
||
Ale ve zkratce, v roce 1986,
|
||
<i>navzdory jasnému varování od inženýrů</i>,
|
||
vyslali do vesmíru raketoplán <i>Challenger</i>,
|
||
který vybuchl a zabil 7 lidí.
|
||
Přímá příčina:
|
||
Po ránu byla moc velká zima.
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
Nepřímá příčina: Manažeři ignorovali varování od inženýrů.
|
||
Proč? Kvůli <b>syndromu skupinového myšlení</b><ref id="groupthink"></ref>.
|
||
Když je skupina stmelená <i>až moc</i> (jak je běžné v nejvyšším vedení různých institucí),
|
||
tak členové začnou odmítat podmíněné myšlenky, které zpochybňují jejich názory nebo ego.
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
Takže tak mohou organizace podlehnout davovému šílenství.
|
||
A jak tedy vytvořit vhodné podmínky pro <i>moudrost</i> davů?
|
||
Odpovědí jsou dvě slova:
|
||
|
||
<next>Svazky a mosty <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
|
||
<!-- Bonding & Bridging -->
|
||
|
||
<words id="bonding_1">
|
||
← Příliš málo vztahů, a myšlenky se nemohou šířit.
|
||
<br>
|
||
Příliš mnoho vztahů, a vznikne skupinové myšlení. <div class="rarr"></div>
|
||
</words>
|
||
|
||
<words id="bonding_2">
|
||
<b>
|
||
Udělejte kompromis:
|
||
Nakreslete síť propojenou tak akorát, aby se podmíněná myšlenka mohla šířit!
|
||
<div class="darr"></div>
|
||
</b>
|
||
</words>
|
||
|
||
<words id="bonding_end">
|
||
Jak prosté!
|
||
Počet vztahů <i>uvnitř</i> skupiny se nazývá <b>svazující sociální kapitál</b><ref id="social_capital"></ref>.
|
||
Ale co vztahy…
|
||
<next wiggle>…<i>mezi</i> skupinami?</next>
|
||
</words>
|
||
|
||
<words id="bridging_1">
|
||
Jak jste už možná uhodli,
|
||
počet vztahů <i>mezi</i> různými skupinami se nazývá
|
||
<b>přemosťující sociální kapitál</b>.
|
||
Ten je důležitý, protože pomáhá nabourat myšlenkovou jednotvárnost skupin!
|
||
<br>
|
||
<b>Vytvořte most, abyste všechny „nakazili“ podmíněnou moudrostí:</b>
|
||
</words>
|
||
|
||
<words id="bridging_end">
|
||
Podobně jako u vnitřních svazků, i u mostů všeho moc škodí.<ref id="bridge"></ref>
|
||
(Bonusový úkol: Zkuste nakreslit tak tlustý most, že přes něj podmíněně nakažlivé chování
|
||
<i>nedokáže</i> projít!)
|
||
Když teď umíme „projektovat“ vazby <i>uvnitř</i> i <i>mezi</i> skupinami, zkusme…
|
||
<next wiggle>…udělat OBOJÍ současně!</next>
|
||
</words>
|
||
|
||
<words id="bb_1">
|
||
|
||
<b style="font-size:1.6em">ZÁVĚREČNÝ HLAVOLAM!</b>
|
||
<br>
|
||
Nakreslete vztahy uvnitř skupiny (svazky) a mezi skupinami (mosty),
|
||
aby se všichni nakazili moudrostí:
|
||
|
||
</words>
|
||
<words id="bb_2">
|
||
|
||
Gratuluji, právě jste nakreslili velmi výjimečný druh sítě!
|
||
Sítě se správným poměrem svazků a mostů jsou
|
||
nesmírně důležité a nazývají se…
|
||
<next wiggle>„Sítě malého světa“ <div class="rarr"></div> </next>
|
||
|
||
</words>
|
||
<words id="bb_small_world_1">
|
||
|
||
<i>„Jednota bez jednotvárnosti.“ „Rozmanitost bez rozepří.“ „E pluribus unum: Z mnohého jeden.“</i>
|
||
<br>
|
||
Bez ohledu na formulaci,
|
||
lidé z různých dob a kultur většinou došli ke stejné pravdě:
|
||
<b>
|
||
zdravá společnost potřebuje správné množství svazků <i>uvnitř</i> skupin
|
||
a mostů <i>mezi</i> skupinami.
|
||
</b>
|
||
To znamená:
|
||
|
||
</words>
|
||
<words id="bb_small_world_2">
|
||
Ne tohle…
|
||
<br>
|
||
(protože myšlenky se pak nemohou šířit)
|
||
</words>
|
||
<words id="bb_small_world_3">
|
||
ani tohle…
|
||
<br>
|
||
(protože vznikne skupinové myšlení)
|
||
</words>
|
||
<words id="bb_small_world_4">
|
||
…ale <i>TOHLE:</i>
|
||
</words>
|
||
<words id="bb_small_world_5">
|
||
|
||
Vědci pro tuto odvěkou pravdu dnes mají matematickou definici:
|
||
<b>síť malého světa</b><ref id="small_world"></ref>.
|
||
Tato optimální kombinace svazků a mostů popisuje,
|
||
jak jsou propojené neurony<ref id="swn_neurons"></ref>,
|
||
podporuje kolektivní tvořivost<ref id="swn_creativity"></ref>
|
||
a řešení problémů<ref id="swn_social_physics"></ref>,
|
||
a kdysi dokonce pomohla prezidentu USA Johnu F. Kennedymu (těsně) zabránit jaderné válce!<ref id="swn_jfk"></ref>
|
||
Takže ano, malé světy mají velký význam.
|
||
|
||
</words>
|
||
<words id="bb_small_world_end">
|
||
<next>takže si to shrneme… <div class="rarr"></div> </next>
|
||
</words>
|
||
|
||
<!-- Sandbox -->
|
||
|
||
<words id="sandbox_caption">
|
||
(pst... wanna know a secret?<ref id="sandbox"></ref>)
|
||
</words>
|
||
|
||
<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 Network
|
||
</words>
|
||
<words id="sandbox_tool_add">
|
||
Add Person
|
||
</words>
|
||
<words id="sandbox_tool_add_infected">
|
||
Add "Infected"
|
||
</words>
|
||
<words id="sandbox_tool_move">
|
||
Drag Person
|
||
</words>
|
||
<words id="sandbox_tool_delete">
|
||
Delete Person
|
||
</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 Person [2]: Add "Infected"
|
||
<br>
|
||
[Space]: Drag [Backspace]: Delete
|
||
</words>
|
||
|
||
<!-- Conclusion -->
|
||
|
||
<words id="conclusion_1">
|
||
|
||
<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; display:block;
|
||
">
|
||
Contagions & 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 & behaviors in a society.
|
||
Not only do we influence our friends,
|
||
we also influence our friends' friends, and even our friends' friends' friends!<ref id="three_degrees"></ref>
|
||
(“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>
|
||
</div>
|
||
|
||
<div style="
|
||
width: 350px;
|
||
position: absolute;
|
||
top: 410px;
|
||
left: 220px;
|
||
text-align: center;
|
||
color: #999;
|
||
">
|
||
(wanna make your own simulations?
|
||
check out Sandbox Mode, by clicking the (★) button below!)
|
||
</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>
|
||
|
||
</words>
|
||
|
||
<words id="conclusion_2">
|
||
<span style="line-height:1.4em; display:block;">
|
||
|
||
<div style="height:0.5em"></div>
|
||
|
||
From Newton to NASA to
|
||
<br>
|
||
network science, we've covered a lot here
|
||
<br>
|
||
today. Long story short, the madness of crowds
|
||
<br>
|
||
is not necessarily due to the <i>individual people</i>, but due
|
||
<br>
|
||
to how we're trapped in a network's sticky web.
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
That <i>does NOT</i> mean abandoning personal responsibility, for
|
||
<br>
|
||
we're also the <i>weavers</i> of that web. So, improve your contagions:
|
||
<br>
|
||
be skeptical of ideas that flatter you<ref id="flatter"></ref>, spend time understanding
|
||
<br>
|
||
complex ideas. And, improve your connections: bond with similar
|
||
<br>
|
||
folk, but also build bridges across cultural/political divides.
|
||
|
||
<div style="height:0.9em"></div>
|
||
|
||
We can weave a wise web. Sure, it's harder than doodling
|
||
<br>
|
||
lines on a screen...
|
||
|
||
<next>...but so, so worth it.</next>
|
||
|
||
</span>
|
||
</words>
|
||
|
||
<words id="conclusion_3">
|
||
<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 & Terry Pratchett
|
||
<div style="height:0.8em"></div>
|
||
<next small><3</next>
|
||
</words>
|
||
|
||
<!-- Credits -->
|
||
|
||
<words id="credits">
|
||
|
||
<div style="text-align:center; color:#fff; letter-spacing: 1px; font-size: 24px; line-height: 27px;">
|
||
|
||
<span style="color:#777; position:relative; top:5px;">
|
||
created by</span>
|
||
<div style="font-size: 3em; line-height: 1.0em;">
|
||
NICKY CASE</div>
|
||
<a target="_blank" href="http://ncase.me" style="text-decoration:none">
|
||
play my other shtuff</a> ·
|
||
<a target="_blank" href="https://twitter.com/ncasenmare" style="text-decoration:none">
|
||
follow my tweeter</a>
|
||
|
||
<br><br>
|
||
|
||
<span style="color:#777; position:relative; top:5px; display: inline-block; margin-top: 15px;">
|
||
lots of love and thanks to</span>
|
||
<div style="font-size: 3em; line-height: 1.0em;">
|
||
MY PATREON SUPPORTERS</div>
|
||
<a onclick='publish("reference/show", ["supporters"]);'>
|
||
see names & drawings of supporters</a> ·
|
||
<a onclick='publish("reference/show", ["playtesters"]);'>
|
||
see playtesters</a>
|
||
<br>
|
||
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
|
||
help me make more like this! <3</a>
|
||
|
||
<br><br>
|
||
|
||
<span style="display: inline-block; margin-top: 15px;">
|
||
♫ music is
|
||
<a target="_blank" href="http://freemusicarchive.org/music/Komiku/Tale_on_the_Late/" style="text-decoration:none">
|
||
"Friends 2018" and "Friends 2068"</a>
|
||
by Komiku
|
||
<br>
|
||
</> <i>Crowds</i> is
|
||
<a target="_blank" href="https://github.com/ncase/crowds" style="text-decoration:none">
|
||
fully open source</a>
|
||
</span>
|
||
|
||
<br>
|
||
|
||
<bon id="further_reading"></bon>
|
||
|
||
</div>
|
||
|
||
</words>
|
||
|
||
<!-- x. misc -->
|
||
<words id="WIN">
|
||
HOTOVO
|
||
</words>
|
||
<words id="sim_start">
|
||
spustit simulaci
|
||
</words>
|
||
<words id="sim_stop">
|
||
zastavit a upravit
|
||
</words>
|
||
<words id="translations_exist">
|
||
Překlady od fanoušků:
|
||
</words>
|
||
<words id="translations_do_not_exist">
|
||
<!-- There's no need to TRANSLATE this line since, well, -->
|
||
<!-- it'll only show up if no translations exist -->
|
||
Co to? Žádné překlady od fanoušků zatím neexistují?!
|
||
</words>
|
||
<words id="translations_add">
|
||
(přidejte nový překlad!)
|
||
</words>
|
||
|
||
<!-- - - - - - - -->
|
||
<!-- BONUS BOXES -->
|
||
<!-- - - - - - - -->
|
||
|
||
<!--
|
||
Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:
|
||
(And then afterwards, the final thing, translate the References)
|
||
-->
|
||
|
||
<bonus id="books">
|
||
|
||
<h3>
|
||
Pár slov ke knize <i>The Wisdom of Crowds</i> od Jamese Surowieckého
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<img src="sprites/bonus/surowieki.jpg" width="200" height="300" style="float:left; margin-right:1em"/>
|
||
|
||
First off, I'm not dissing
|
||
<a target="_blank" href="https://en.wikipedia.org/wiki/The_Wisdom_of_Crowds">
|
||
this book.</a>
|
||
It's a good book, and Surowiecki was trying to tackle the same question I am:
|
||
<b>“why do some crowds turn to madness, or wisdom?”</b>
|
||
|
||
<br><br>
|
||
|
||
Surowiecki's answer: crowds make good decisions when everybody is as independent as possible.
|
||
He gives the story of a county fair,
|
||
where the townsfolk were invited to guess the weight of an ox.
|
||
Surprisingly, the average of <i>all</i> their guesses was better than any <i>one</i> guess</i>.
|
||
But, here's the rub: the people have to guess <i>independently</i> of each other.
|
||
Otherwise,
|
||
they'd be influenced by earlier incorrect guesses,
|
||
and the average answer would be highly skewed.
|
||
|
||
<br><br>
|
||
|
||
But... I don't think "make everyone as independent as possible" is the full answer.
|
||
Even geniuses, who we mischaracterize as the most independent thinkers,
|
||
are deeply influenced by others. As Sir Isaac Newton said,
|
||
<i>“If I have seen further, it is by standing on the sholders of Giants.”</i>
|
||
|
||
<br><br>
|
||
|
||
So, which idea is correct?
|
||
Does wisdom come from thinking for yourself, or thinking with others?
|
||
The answer is: "yes".
|
||
|
||
<br><br>
|
||
|
||
So that's what I'll try to explain in this explorable explanation:
|
||
how to get that sweet spot between independence and interdependence —
|
||
that is, how to get a wise crowd.
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
<bonus id="connections">
|
||
|
||
<h3>
|
||
Existují také jiné druhy vztahů?
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
For the sake of simplicity,
|
||
my simulations pretend that people can only be connected through friendships,
|
||
and that all friendships are equal.
|
||
But network scientists <i>do</i> consider other ways we can be connected, such as:
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/connection1.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>Directional connections.</b> Alice is the boss of Bob, but Bob is not the boss of Alice.
|
||
Carol is the parent of Dave, but Dave is not the parent of Carol.
|
||
"Boss" & "parent" are <i>directional</i> relationships:
|
||
the relationship only goes one way.
|
||
In contrast, "friends" is a <i>bidirectional</i> relationship:
|
||
the relationship goes both ways. (well, hopefully)
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/connection2.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>Weighted connections.</b> Elinor and Frankie are mere acquaintances.
|
||
George and Harry are Best Friends Forever.
|
||
Even though there's a "friendship" connection in both cases, the second one is stronger.
|
||
We say that these two connections have different "weights".
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/map.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
Just remember: <b>all these simulations are wrong.</b> The same way any map is "wrong".
|
||
You see the map on the left? Buildings aren't gray featureless blocks!
|
||
Words don't float above the city! However, maps are useful not <i>despite</i> being simplified,
|
||
but <i>because</i> they're simplified. Same goes for simulations, or any scientific theory.
|
||
Of <i>course</i> they're "wrong" — that's what makes them <i>useful</i>.
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
<bonus id="contagions">
|
||
|
||
<h3>
|
||
Existují také další druhy nakažlivého chování?
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
There are so, so many ways that network scientists can simulate "contagions"!
|
||
I picked the simplest one, for educational purposes.
|
||
But here's other ways you could do it:
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion1.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>Contagions with Randomness</b>.
|
||
Being "exposed" to a contagion doesn't <i>guarantee</i> you'll be infected,
|
||
it only makes it more <i>likely</i>.
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion2.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>People have different contagion thresholds.</b>
|
||
My simulations pretend that everyone has the same threshold for binge-drinking (50%) or
|
||
volunteering (25%) or misinformation (0%).
|
||
Of course, that's not true in real life, and you could make your sim reflect that.
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion3.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>An ecology of contagions.</b>
|
||
What if there were <i>multiple</i> contagions, with <i>different</i> thresholds?
|
||
For example, a simple "madness" contagion and a complex "wisdom" contagion.
|
||
If someone's infected with madness, can they still be infected with wisdom?
|
||
Or vice versa?
|
||
Can someone be infected with both?
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/contagion4.png" width="250" height="150" style="float:left; margin-right:1em"/>
|
||
<b>Contagions that mutate and evolve.</b>
|
||
Ideas don't pass perfectly from one person to another the way a virus does.
|
||
Like a game of Telephone, the message gets mutated with each re-telling —
|
||
and sometimes the mutant will be more infectious than the original!
|
||
So, over time, ideas "evolve" to be more catchy, copy-able, contagious.
|
||
|
||
<div style="clear:both"></div>
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
<bonus id="further_reading">
|
||
|
||
<h3>
|
||
I wanna learn more! What else can I read and/or play?
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
This explorable explanation was just a springboard for your curiosity,
|
||
so you can dive deeper into a vast pool of knowledge!
|
||
Here's more stuff on networks or social systems:
|
||
|
||
<br><br>
|
||
|
||
<img src="sprites/bonus/connected.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
<b>Book:</b>
|
||
<a target="_blank" href="http://www.connectedthebook.com/">
|
||
Connected</a>
|
||
by Nicholas Christakis and James Fowler (2009).
|
||
An accessible tour of how our networks affect our lives, for good or ill.
|
||
<a target="_blank" href="http://www.connectedthebook.com/pdf/excerpt.pdf">
|
||
Here's an excerpt: Preface & Chapter 1
|
||
</a>
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/trust.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
<b>Interactive:</b>
|
||
<a target="_blank" href="http://ncase.me/trust/">
|
||
The Evolution of Trust</a> by Nicky Case (me) (2017).
|
||
A game about the game theory of how cooperation is built... or destroyed.
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/polygons.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
<b>Interactive:</b>
|
||
<a target="_blank" href="http://ncase.me/polygons/">
|
||
Parable of the Polygons</a> by Vi Hart and Nicky Case (also me) (2014).
|
||
A story about how harmless choices can create a harmful world.
|
||
|
||
<div style="clear:both"></div>
|
||
<br>
|
||
|
||
<img src="sprites/bonus/ee.png" width="200" height="200" style="float:left; margin-right:1em"/>
|
||
Or, if you just want to see a whole gallery of interactive edu-things, here's
|
||
<a target="_blank" href="http://explorabl.es/">
|
||
Explorable Explanations</a>,
|
||
a hub for learning through play!
|
||
|
||
<div style="clear:both"></div>
|
||
|
||
</div>
|
||
|
||
</bonus>
|
||
|
||
<!-- - - - - - - -->
|
||
<!-- REFERENCES -->
|
||
<!-- - - - - - - -->
|
||
|
||
<!--
|
||
Final thing! These references also need you to TRANSLATE:
|
||
-->
|
||
|
||
<reference id="drunk">
|
||
|
||
<h3>
|
||
“virtually all [college] students reported that their friends drank more than they did.”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://www.ncbi.nlm.nih.gov/pubmed/1758185">
|
||
“Biases in the perception of drinking norms among college students”</a> by Baer et al (1991)
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="majority">
|
||
|
||
<h3>
|
||
“The Majority Illusion”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0147617">
|
||
“The Majority Illusion in Social Networks”</a> by Lerman et al (2016).
|
||
<br>
|
||
Related: <a target="_blank" href="https://en.wikipedia.org/wiki/Friendship_paradox">
|
||
The Friendship Paradox</a>.
|
||
</div>
|
||
</reference>
|
||
<reference id="contagion">
|
||
|
||
<h3>
|
||
“strong statistical evidence that
|
||
smoking, health, happiness, voting patterns, and cooperation levels
|
||
are all contagious”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
From Nicholas Christakis and James Fowler's
|
||
wonderfully-written, layperson-accessible book,
|
||
<a target="_blank" href="http://www.connectedthebook.com/">
|
||
Connected</a> (2009).
|
||
|
||
</div>
|
||
</reference>
|
||
<reference id="suicides">
|
||
|
||
<h3>
|
||
“some evidence that suicides are [contagious], too”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="http://www.jstor.org/stable/42000514?seq=4#page_scan_tab_contents">
|
||
“Suicide Contagion and the Reporting of Suicide: Recommendations from a National Workshop”</a>
|
||
by O'Carroll et al (1994), endorsed by the frickin' Centers for Disease Control & Prevention (CDC).
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="shootings">
|
||
|
||
<h3>
|
||
“some evidence that mass shootings are [contagious], too”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0117259">
|
||
“Contagion in Mass Killings and School Shootings”</a> by Towers et al (2015).
|
||
|
||
<br><br>
|
||
|
||
Also see: the
|
||
<a target="_blank" href="http://www.dontnamethem.org/">
|
||
Don't Name Them</a> campaign,
|
||
which urges that news outlets <i>DO NOT</i> air mass murderers' names, manifestos, and social media feeds.
|
||
This spreads the contagion.
|
||
Instead, news outlets should focus on the victims, first responders, civilian heroes,
|
||
and the grieving, healing community.
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="subprime">
|
||
|
||
<h3>
|
||
“The world's financial institutions fell for such a cascade in 2008.”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://newrepublic.com/article/63023/wall-streets-lemmings">
|
||
“Lemmings of Wall Street”</a> by Cass Sunstein, is a quick, non-technical read.
|
||
Published in Oct 2008, right in the wake of the crash.
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="complex">
|
||
|
||
<h3>
|
||
“the complex contagion theory.”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<a target="_blank" href="https://www.unc.edu/~fbaum/teaching/articles/Granovetter_AJS_1978.pdf">
|
||
“Threshold Models of Collective Behavior”</a> by Granovetter (1978)
|
||
was the first time, as far as I know, anyone described a "complex contagion" model.
|
||
(although he didn't use that specific name)
|
||
|
||
<br><br>
|
||
|
||
<a target="_blank" href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0180802">
|
||
“Evidence for complex contagion models of social contagion from observational data”</a>
|
||
by Sprague & House (2017)
|
||
shows that complex contagions do, in fact, exist. (at least, in the social media data they looked at)
|
||
|
||
<br><br>
|
||
|
||
Finally,
|
||
<a target="_blank" href="https://arxiv.org/pdf/cond-mat/0403699.pdf">
|
||
“Universal behavior in a generalized model of contagion”</a> by Dodds & Watts (2004)
|
||
proposes a model that unifies <i>all</i> kinds of contagions:
|
||
simple and complex, biological and social!
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="possum">
|
||
<h3>
|
||
„vačice má 13 bradavek“
|
||
</h3>
|
||
<div>
|
||
12 bradavek uspořádaných do kruhu a jednu uprostřed
|
||
</div>
|
||
</reference>
|
||
<reference id="groupthink">
|
||
|
||
<h3>
|
||
„Syndrom skupinového myšlení“
|
||
</h3>
|
||
|
||
<div>
|
||
This Orwell-inspired phrase was coined by Irving L. Janis in 1971.
|
||
<a target="_blank" href="https://web.archive.org/web/20100401033524/http://apps.olin.wustl.edu/faculty/macdonald/GroupThink.pdf">
|
||
In his original article</a>,
|
||
Janis investigates cases of groupthink, lists its causes, and — thankfully —
|
||
some possible remedies.
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="social_capital">
|
||
|
||
<h3>
|
||
„Svazující a přemosťující sociální kapitál“
|
||
</h3>
|
||
|
||
<div>
|
||
These two types of social capital — "bonding" and "bridging" —
|
||
were named by Robert Putnam in his insightful 2000 book,
|
||
<a target="_blank" href="http://bowlingalone.com/">
|
||
Bowling Alone</a>. His discovery:
|
||
across almost <i>all</i> empircal measures of social connectiveness,
|
||
Americans are more alone than ever.
|
||
Golly.
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="bridge">
|
||
|
||
<h3>
|
||
„Ideální množství přemosťujícího sociálního kapitálu“
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://sociology.stanford.edu/sites/default/files/publications/the_strength_of_weak_ties_and_exch_w-gans.pdf">
|
||
“The Strength of Weak Ties”</a> by Granovetter (1973)
|
||
showed that connections across groups helps spread simple contagions (like information),
|
||
but
|
||
<a target="_blank" href="http://www.jstor.org/stable/10.1086/521848?seq=1#page_scan_tab_contents">
|
||
“Complex Contagions and the Weakness of Long Ties”</a> by Centola & Macy (2007)
|
||
showed that connections across groups may not help complex contagions,
|
||
and it fact, can hurt their spread!
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="small_world">
|
||
|
||
<h3>
|
||
“the small world network”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
The idea of the "small world" was popularized by
|
||
<a target="_blank" href="http://www.jstor.org/stable/2786545">Travers & Milgram's 1969 experiment</a>,
|
||
which showed that, on average, any two random people in the United States
|
||
were just six friendships apart — "six degrees of separation"!
|
||
|
||
<br><br>
|
||
|
||
The small-world network got more mathematical meat on its bones with
|
||
<a target="_blank" href="http://leonidzhukov.net/hse/2014/socialnetworks/papers/watts-collective_dynamics-nature_1998.pdf">
|
||
“Collective dynamics of small-world networks”</a> by Watts & Strogatz (1998),
|
||
which proposed an algorithm for creating networks
|
||
with both low average path length (low degree of separation)
|
||
and high clustering (friends have lots of mutual friends) —
|
||
that is, a network that hits the sweet spot!
|
||
|
||
<br><br>
|
||
|
||
You can also play with
|
||
<a target="_blank" href="http://worrydream.com/ScientificCommunicationAsSequentialArt/">
|
||
the visual, interactive adaptation of that paper</a> by Bret Victor (2011).
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_neurons">
|
||
|
||
<h3>
|
||
“[small world networks] describe how our neurons are connected”
|
||
</h3>
|
||
|
||
<div>
|
||
<a target="_blank" href="https://www.ncbi.nlm.nih.gov/pubmed/17079517">
|
||
“Small-world brain networks”</a> by Bassett & Bullmore (2006).
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_creativity">
|
||
|
||
<h3>
|
||
“[small world networks] give rise to collective creativity”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
<a target="_blank" href="http://www.jstor.org/stable/10.1086/432782?seq=1#page_scan_tab_contents">
|
||
“Collaboration and Creativity: The Small World Problem”</a> by Uzzi & Spiro (2005).
|
||
This paper analyzed the social network of the Broadway scene over time,
|
||
and discovered that, yup, the network's most creative when it's a "small world" network!
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_social_physics">
|
||
|
||
<h3>
|
||
“[small world networks] give rise to collective problem-solving”
|
||
</h3>
|
||
|
||
<div>
|
||
See
|
||
<a target="_blank" href="http://socialphysics.media.mit.edu/">
|
||
“Social Physics”</a> by MIT Professor Alex "Sandy" Pentland (2014)
|
||
for a data-based approach to collective intelligence.
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="swn_jfk">
|
||
|
||
<h3>
|
||
“[small world networks] helped John F. Kennedy (barely) avoid nuclear war!”
|
||
</h3>
|
||
|
||
<div>
|
||
|
||
Besides the NASA Challenger explosion, the most notorious example of groupthink
|
||
was the Bay of Pigs fiasco.
|
||
In 1961, US President John F. Kennedy and his team of advisors thought
|
||
— for some reason —
|
||
it would be a good idea to secretly invade Cuba and overthrow Fidel Castro.
|
||
They failed.
|
||
Actually, worse than failed: it led to the Cuban Missile Crisis of 1962,
|
||
<i>the closest the world had ever been to full-scale nuclear war.</i>
|
||
|
||
<br><br>
|
||
|
||
Yup, JFK really screwed up on that one.
|
||
|
||
<br><br>
|
||
|
||
But, having learnt some hard lessons from the Bay of Pigs fiasco,
|
||
JFK re-organized his team to avoid groupthink.
|
||
Among many things, he:
|
||
1) actively encouraged people to voice criticism,
|
||
thus lowering the "contagion threshold" for alternate ideas.
|
||
And
|
||
2) he broke his team up into sub-groups before reconvening,
|
||
which gave their group a "small world network"-like design!
|
||
Together, this arrangement allowed for a healthy diversity of opinion,
|
||
but without being too fractured — a wisdom of crowds.
|
||
|
||
<br><br>
|
||
|
||
And so, with the same <i>individuals</i> who decided the Bay of Pigs,
|
||
but re-arranged <i>collectively</i> to decide on the Cuban Missile Crisis...
|
||
JFK's team was able to reach a peaceful agreement with Soviet leader Nikita Khrushchev.
|
||
The Soviets would remove their missiles from Cuba, and in return,
|
||
the US would promise not to invade Cuba again.
|
||
(and also agreed, in secret, to remove the US missiles from Turkey)
|
||
|
||
<br><br>
|
||
|
||
And that's the story of how all of humanity almost died.
|
||
But a small world network saved the day! Sort of.
|
||
|
||
<br><br>
|
||
|
||
You can read more about this
|
||
<a target="_blank" href="https://hbr.org/2013/11/how-john-f-kennedy-changed-decision-making">
|
||
on Harvard Business Review</a>,
|
||
or from
|
||
<a target="_blank" href="https://web.archive.org/web/20100401033524/http://apps.olin.wustl.edu/faculty/macdonald/GroupThink.pdf">
|
||
the original article on groupthink</a>.
|
||
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="three_degrees">
|
||
|
||
<h3>
|
||
“we influence [...] our friends' friends' friends!”
|
||
</h3>
|
||
|
||
<div>
|
||
Again, from Nicholas Christakis and James Fowler's
|
||
wonderful book,
|
||
<a target="_blank" href="http://www.connectedthebook.com/">
|
||
Connected</a> (2009).
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="flatter">
|
||
<h3>
|
||
“be skeptical of ideas that flatter you”
|
||
</h3>
|
||
<div>
|
||
yes, including the ideas in <i>this</i> explorable explanation.
|
||
</div>
|
||
</reference>
|
||
<reference id="sandbox">
|
||
|
||
<h3>
|
||
★ Sandbox Mode ★
|
||
</h3>
|
||
|
||
<div>
|
||
The keyboard shortcuts (1, 2, space, backspace)
|
||
work in <i>all</i> the puzzles, not just Sandbox Mode!
|
||
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. Have fun!
|
||
</div>
|
||
|
||
</reference>
|
||
<reference id="supporters" hidden=yes large=yes>
|
||
<div>
|
||
To
|
||
<a target="_blank" href="https://www.patreon.com/ncase">my supporters on Patreon</a>:
|
||
I'm deeply grateful.
|
||
Your generosity <i>literally</i> feeds me and pays my rent,
|
||
and grants me the creative freedom to make these weird math/social-science games.
|
||
From the bottom of my heart, thank you!
|
||
</div>
|
||
</reference>
|
||
<reference id="playtesters" hidden=yes large=yes>
|
||
<div>
|
||
|
||
Thank you, everyone who playtested <i>Crowds</i>
|
||
during its many stages of life!
|
||
|
||
<br><br>
|
||
<b>The Prototype:</b>
|
||
<br>
|
||
Maria ·
|
||
Monica Srivastava
|
||
|
||
<br><br>
|
||
<b>The Alpha:</b>
|
||
<br>
|
||
Glen Chiacchieri ·
|
||
Kalli Repzeti ·
|
||
Mali Akmanalp ·
|
||
Toph Tucker
|
||
|
||
<br><br>
|
||
<b>The Beta:</b>
|
||
<br>
|
||
Alex Dytrych ·
|
||
Amit Patel ·
|
||
Cassandra McClure ·
|
||
Catherine Ray ·
|
||
Josh Comeau ·
|
||
Kayle Sawyer ·
|
||
Matthew Conlen ·
|
||
Srini Kadamati ·
|
||
Vanessa Shen ·
|
||
Wick Perry
|
||
|
||
</div>
|
||
</reference>
|
||
|
||
</span>
|
||
|
||
<!--
|
||
|
||
And that's it! That's the last of what needed to a TRANSLATE
|
||
|
||
Thank you so, so much for doing this again, wow.
|
||
|
||
Finally, go to "translations.txt" and follow the instructions there,
|
||
in order to let this game "know" your translation exists.
|
||
|
||
-->
|