crowds/pt.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>A Sabedoria e/ou Loucura das Multidões</title> <!-- <title>(TRANSLATE this part only)</title> -->
	<meta name="description" content="um guia interativo das relações humanas"/> <!-- 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="A Sabedoria e/ou Loucura das Multidões"> <!-- content="(TRANSLATE this part only)" -->
	<meta itemprop="description" content="um guia interativo das relações humanas"> <!-- content="(TRANSLATE this part only)" -->
	<meta itemprop="image" content="http://ncase.me/crowds/social/thumb.png">

	<meta name="twitter:title" content="A Sabedoria e/ou Loucura das Multidões"> <!-- content="(TRANSLATE this part only)" -->
	<meta name="twitter:description" content="um guia interativo das relações humanas"> <!-- 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="A Sabedoria e/ou Loucura das Multidões"> <!-- content="(TRANSLATE this part only)" -->
	<meta property="og:description" content="um guia interativo das relações humanas"> <!-- 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">pular &gt;</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">LIGADO</span> <!-- TRANSLATE -->
			<span id="sound_off">DESLIGADO</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">
			A Sabedoria e/ou Loucura das Multidões <!-- TRANSLATE -->
			</span>
			<span id="share_desc">
			<!-- TRANSLATOR: keep this on ONE LINE or the social sharing will break! -->
			Por que grupos de pessoas agem de forma inteligente, burra, gentil, cruel? Um guia interativo das relações humanas: <!-- TRANSLATE -->
			</span>
		</div>
		<div id="navigation">

			<!-- The chapters -->
			<!-- TRANSLATE all the Chapter names! -->
			<div chapter="Introduction">
				<span>0</span>
				<span>0. Introdução</span>
			</div>
			<div chapter="Networks">
				<span>1</span>
				<span>1. Conexões</span>
			</div>
			<div chapter="Simple">
				<span>2</span>
				<span>2. Contágios</span>
			</div>
			<div chapter="Complex">
				<span>3</span>
				<span>3. Contágios Complexos</span>
			</div>
			<div chapter="BB">
				<span>4</span>
				<span>4. Ligações &amp; Pontes</span> <!-- note: &amp; is html for the "and" sign -->
			</div>
			<div chapter="SmallWorld">
				<span>5</span>
				<span>5. Pequeno Mundo</span>
			</div>
			<div chapter="Conclusion">
				<span>6</span>
				<span>6. Concluindo...</span>
			</div>
			<div chapter="Credits">
				<span>7</span>
				<span>7. Créditos</span>
			</div>
			<div chapter="Sandbox">
				<span>★</span>
				<span>★ Modo Experimental! ★</span>
			</div>

			<!-- A divider -->
			<span class="nav_divider"></span>
			
			<!-- Bonus Notes & References -->
			<div modal="bonus">
				<span>?</span>
				<span>Caixas Bônus!</span> <!-- TRANSLATE -->
			</div>
			<div modal="references">
				<span style="margin-top: 7px; font-size: 35px;">*</span>
				<span>Links &amp; Referências</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>Traduções</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>carregando...</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>a</span>
		<br>
		<span style="font-size: 60px;letter-spacing: 4px;">SABEDORIA</span>
		<span style="position:relative;top: -10px;">e/ou</span>
		<span style="font-size: 60px;">LOUCURA</span>
		<br>
		<span style="position: relative;top: -11px;">das</span>
		<br>
		<span style="font-size: 100px;line-height: 80px;position: relative;top: -15px; display:block;">MULTIDÕES</span>
	</div>

	<div style="color:#999">
		<!-- TRANSLATE note: comment out the line below... -->
		<!-- playing time: 30 min • by nicky case, april 2018 -->
		<!-- ...and UN-comment + TRANSLATE this line! -->
		<small>por nicky case • traduzido por Italo Lelis e Iuri Rezende • <a href='/'>original em Inglês</a></small>
	</div>

</words>

<words id="preloader_button">
	<next></next>
</words>

<words id="preloader_loading">
	carregando...
</words>

<words id="preloader_play">
	vamos jogar! <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>

	Isaac Newton tinha certeza de que era um 
	<br>
	sabichão. Depois de inventar o cálculo e a teoria da
	<br>
	gravidade, ele deveria ser inteligente o suficiente para
	<br>
	fazer um investimento financeiro, certo? Bem, resumindo a história,
	<br>
	ele perdeu $4,600,000 (na cotação atual do dólar) na bolha nacional
	<br>
	especulativa conhecida como a Quebra dos Mares do Sul de 1720.

	<br><br>

	Como o próprio Sir Newton disse posteriormente: <i>“Eu consigo calcular
	<br>
	o movimento dos corpos celestiais, mas não a loucura das pessoas.”</i>

	<next>é, que ruim pra ele <div class="rarr"></div> </next>

</words>

<words id="intro_2">

	<div style="height:0.5em"></div>

  Claro, não foi a única vez que
	<br>
  mercados, instituições, ou democracias
	<br>
  inteiras saíram de controle &mdash; a <i>loucura</i> das massas.
	<br>
	Ainda assim, logo que se perde a esperança na humanidade,
	<br>
  veem-se cidadãos coordenando para se resgatar uns aos
	<br>
  outros em furacões, comunidades criando soluções para problemas,
	<br>
  pessoas lutando por um mundo melhor &mdash; a <i>sabedoria</i> das massas!

	<div style="height:0.9em"></div>

	<b>Mas <i>por que</i> algumas massas se rendem à loucura, ou à sabedoria?</b> Nenhuma teoria
	<br>
  consegue explicar tudo, mas acredito que um novo campo de estudo,
	<br>
	<b>ciência das redes</b>, pode nos guiar! E sua ideia central é esta: para
	<br>
  entender massas, deveríamos olhar não às <i>pessoas
	<br>
	individuais</i>, mas para...

	<next>...suas <i>conexões.</i> <div class="rarr"></div> </next>

</words>

<!-- Networks -->

<words id="networks_tutorial_start">
	<b>Vamos desenhar uma rede!</b>
    Cada conexão representa uma amizade entre duas pessoas:
</words>

<words id="networks_tutorial_connect">
    desenhe para conectar
</words>

<words id="networks_tutorial_disconnect">
	risque para&nbsp;&nbsp;&nbsp;desconectar
</words>

<words id="networks_tutorial_end">

    quando você estiver pronto desenhando e brincando,
	<next wiggle>vamos continuar <div class="rarr"></div> </next>

</words>

<words id="networks_threshold">

    Agora, conexões sociais são mais do que apenas figuras bonitinhas.
    As pessoas <i>olham para</i> suas conexões sociais para entender o mundo.
    Por exemplo, as pessoas olham para seus próximos para 
    descobrir <b>qual % de seus amigos</b> (não contando a si mesmos),
    digamos, bebem demais. <icon name="yellow"></icon>

</words>

<words id="networks_threshold_instruction">
	<b>Desenhe/apague conexões, e veja o que acontece! <div class="rarr"></div> </b>
</words>

<words id="networks_threshold_end">
	<next>legal, entendi</next>
</words>

<words id="networks_pre_puzzle">
    Entretanto, redes podem <i>enganar</i> pessoas.
    Do mesmo jeito que a Terra parece plana porque estamos nela,
	as pessoas podem pegar ideias erradas sobre a sociedade por que estão <i>dentro</i> dela.
</words>

<words id="optional_reading">
	<div style="position:absolute; top:5px;">
		<i>opcional</i> notas bônus extras! &uarr;
	</div>
	<div style="position:absolute; left:216px; top:10px;">
		&darr; links e referências
	</div>
</words>

<words id="networks_pre_puzzle_2">
	
	<bon id="books"></bon>

	<br>

	Por exemplo, um estudo de 1991<ref id="drunk"></ref> mostrou que 
	“virtualmente todos os estudantes [universitários] reportaram que seus amigos bebiam mais que eles próprios.”
    Mas isso parece impossível!
    Como isso pode ser?
    Bem, você está prestes a obter a resposta, desenhando uma rede.
    É hora de...

	<next>ENGANAR TODO MUNDO <div class="rarr"></div> </next>

</words>

<words id="networks_puzzle">

	<b style="font-size:2em">HORA DO DESAFIO!</b>
	<br>
	Engane <i>todo mundo</i> para pensar que
	a maioria de seus amigos (mais de 50%) bebem demais <icon name="yellow"></icon>
	(mesmo que quem bebe demais estejam em desvantagem de 2 para 1!)

</words>
<words id="networks_puzzle_metric">
	<b>ENGANADOS:</b>
</words>
<words id="networks_puzzle_metric_2">
	de 9 pessoas
</words>
<words id="networks_puzzle_end">
	Parabéns! Você manipulou um grupo de estudantes a acreditar
    na prevalência de uma norma social incrivelmente não saudável! Muito bem!
	<next wiggle>...tá. obrigado?</next>
</words>

<words id="networks_post_puzzle">

	O que você acabou de criar se chama A Ilusão da Maioria<ref id="majority"></ref>,
	o que também explica porque as pessoas acham que sua visão política é consenso,
	ou porque o extremismo parece mais comum do que é na realidade.
	<i>Loucura.</i>

	<bon id="connections"></bon>

	Mas as pessoas não apenas <i>observam</i> passivamente ideias e comportamentos dos outros,
	elas ativamente os <i>copiam</i>.
	Então agora, vamos olhar para algo que os cientistas chamam de...

	<next>“Contágios!” <div class="rarr"></div> </next>


</words>

<!-- Simple Contagions -->

<words id="simple_simple">
	<i>Vamos desconsiderar a palavra "maioria" por agora.</i>
	Abaixo: temos uma pessoa <icon name="red"></icon> com alguma informação.
	Alguma <i>des</i>informação. "Fake news", como os bam-bam-bans dizem.
	E todo dia, essa pessoa espalha o rumor, como um vírus, para seus amigos.
	E eles, por sua vez, espalham aos amigos <i>dos amigos</i>. E assim vai.
	<br>
	<b>
	Iniciar a simulação! <div class="darr"></div>
	(p.s: não pode desenhar <i>enquanto</i> está simulando)
	</b>
</words>

<words id="simple_simple_2">
	Nota: apesar do nome negativo, "contágios" podem ser bons ou ruins (ou neutros ou ambíguos).
	Existe forte evidência estatística<ref id="contagion"></ref> de que
    fumar, saúde, felicidade, eleições, e níveis de cooperação
	são todos "contagiosos" --
	e até alguma evidência de que suicídios<ref id="suicides"></ref> e tiroteios em massa<ref id="shootings"></ref> também são.
</words>

<words id="simple_simple_end">
	<next wiggle>bem, isso é deprimente <div class="rarr"></div> </next>
</words>

<words id="simple_cascade">
	É verdade.
	De qualquer forma, <b>HORA DO DESAFIO!</b>
	<br>
	Desenhe uma rede &amp; simule,
	de modo que <i>todo mundo</i> se infeccione com o "contágio".
	<br>
	(regra nova: você não pode cortar conexões <i>grossas</i>)
</words>

<words id="simple_cascade_end">
	<next wiggle>fan-super-tástico <div class="rarr"></div> </next>
</words>

<words id="simple_post_cascade">
	Essa propagação de loucura é chamada <b>"cascata de informações"</b>.
    O Sr. Newton caiu nessa cascata em 1720.
    As instituições financeiras cairam nessa cascata em 2008.<ref id="subprime"></ref>
	<br><br>
	Entretanto: <i>esta simulação está incorreta.</i>
	A maioria das ideias <i>não</i> propagam como vírus.
	Para várias crenças e comportamentos, você deve ser "exposto" ao contágio mais que apenas uma vez
	para ser "infectado".
    Então, cientistas criaram uma maneira nova e melhor de
    descrever como ideias/comportamentos propagam, e os chamaram de...
	<next wiggle>“Contágios <i>Complexos</i>!” <div class="rarr"></div> </next>
</words>

<!-- Complex Contagions -->

<words id="complex_complex">

	Vamos voltar com a ideia de "maioria" e o beber demais <icon name="yellow"></icon> do exemplo anterior!
    Quando você brincou com isso na primeira vez, as pessoas não mudavam seu comportamento.

	<br><br>

    Agora, vamos simular o que acontece se as pessoas começarem a beber demais
	<i>quando 50%+ de seus amigos o fazem!</i> 
	<b>Antes de simular, se pergunte o que <i>deveria</i> acontecer.</b>

	<br><br>
	
	<b>Agora, comece a simular, e veja o que realmente acontece! <div class="rarr"></div> </b>

</words>

<words id="complex_complex_2">
	<span style="line-height:1.3em; display:block;">
		
		Diferente do contágio anterior "fake news" <icon name="red"></icon>,
		este contágio <icon name="yellow"></icon> <i>não</i> propaga a todo mundo!
        As primeiras pessoas se "infectam", porque apesar de estarem expostos a um indivíduo
		que bebe demais, esse bebedor representa 50% de seus amigos. (é, solitário)
		Em contraste, a pessoa próxima ao final da cadeia <i>não</i> se "infectou",
        porque enquanto ela foi exposta a um amigo que bebe demais,
        esse amigo não passou da linha de + de 50%.

		<div style="height:0.75em"></div>

		Essa <i>relativa</i> % de amigos "infectados" importa.
		<i>Essa é</i> a diferença entre a teoria dos <b>contágios complexos</b><ref id="complex"></ref>,
		e a inocente teoria viral dos <b>contágios simples</b>.
        (dá para dizer que "contágios simples" são contágios que infectam com "mais de 0%")

		<div style="height:0.75em"></div>

		Entretanto, contágios não são necessariamente ruins &mdash;
		então chega de  <i>madness</i> das multidões, que tal...
		<next>...<i>sabedoria</i> das multidões?</next>

	</span>
</words>

<words id="complex_complex_3">

	Aqui, temos uma pessoa <icon name="blue"></icon> que faz trabalho voluntário para... não sei,
	resgatar pessoas em furacões, ou ensinar crianças sem privilégios na comunidade local, ou algo legal assim.
    O ponto é, esse é um contágio complexo "bom".
    Dessa vez, entretanto, digamos que o limite é de apenas 25% &mdash;
    as pessoas querem fazer trabalho voluntário, mas apenas se 25% ou mais de seus amigos o faz também.
    Ei, boa vontade necessita de um pouco de encorajamento social.

	<br><br>

	<b>&larr; "Infecte" todo mundo com as boas vibrações!</b>

</words>

<words id="complex_complex_3_end">
	<span style="line-height:1.3em; display:block;">

		<b>NOTE:</b> Volunteering is just <i>one</i> of many complex contagions!
		Others include: voter turnout, lifestyle habits, 
		challenging your beliefs,
		taking time to understand a issue deeply &mdash; anything
		that needs more than one "exposure".
		Complex contagions aren't <i>necessarily</i> wise,
		but being wise is a complex contagion.

		<div style="height:0.75em"></div>

		(Então, o que é um contágio <i>simples</i> na vida real?
		Geralmente curiosidades, como, "o gambá possui 13 mamilos"<ref id="possum"></ref>)

		<bon id="contagions"></bon>

		Agora, para <i>realmente</i> mostrar o poder e a esquisitice de contágios complexos, vamos revisitar...

		<next>...um desafio anterior <div class="rarr"></div> </next>

	</span>
</words>

<words id="complex_cascade">
	Lembra disso? Desta vez, com um contágio <i>complexo</i> <icon name="blue"></icon>, vai ser um pouco mais difícil...
	<br>
	<b>Tente "infectar" todo mundo com sabedoria complexa! <div class="darr"></div></b>
</words>

<words id="complex_cascade_feel_free">
	(sinta-se livre para apertar 'iniciar' e <i>tentar</i> quantas soluções quiser)
</words>

<words id="complex_cascade_end">
	<next wiggle>DING DING DING <div class="rarr"></div> </next>
</words>

<words id="complex_post_cascade">
	Agora, você pode achar que você só precisa adicionar conexões para propagar qualquer contágio,
	"complexo" ou "simples", bom ou ruim, sábio ou louco.
	Mas isso realmente é verdade? Bem, vamos revisitar...
</words>
<words id="complex_post_cascade_end">
	<next wiggle>...outro desafio anterior <div class="rarr"></div> </next>
</words>

<words id="complex_prevent">
	Se você apertar "iniciar" abaixo, o contágio complexo <icon name="blue"></icon> vai se propagar para todo mundo.
	Nenhuma surpresa aqui.
	Mas agora, vamos fazer o <i>oposto</i> de tudo o que fizemos até agora:
	<b>desenhe uma rede para <i>evitar</i> que o contágio se espalhe para todo mundo! <div class="darr"></div></b>
</words>

<words id="complex_prevent_2">
	Você viu?
	Enquanto mais conexões irão sempre ajudar a propagar ideias <i>simples</i>,
	<b>mais conexões podem atrapalhar o propagação de ideias <i>complexas</i>!</b>
	(faz você pensar sobre a internet, né?)
	E este não é apenas um problema teórico. Isso pode ser questão de vida...
</words>

<words id="complex_prevent_end">
	<next wiggle>...ou morte. <div class="rarr"></div> </next>
</words>

<words id="complex_groupthink">
		
	As pessoas na NASA eram sabichões.
	Digo, eles usavam as teorias de Newton para nos levar à lua.
	De qualquer modo, resumindo, em 1986,
	<i>apesar das advertências dos engenheiros</i>,
	eles lançaram o <i>Challenger</i>,
	que explodiu e matou 7 pessoas.
	A causa imediata: 
	estava muito frio naquela manhã.

	<div style="height:0.9em"></div>

	A causa menos imediata: os gerentes ignoraram as advertências dos engenheiros.
	Por quê? Devido ao <b>pensamento de grupo</b><ref id="groupthink"></ref>.
	Quando um grupo está ligado <i>demais</i>, (como tendem a ser no topo de instituições)
	ele se torna resistente a ideias complexas que desafiam suas crenças ou ego.

	<div style="height:0.9em"></div>

	Então, é assim que instituições podem cair na loucura das multidões.
	Mas como podemos "desenhar" para <i>sabedoria</i> das multidões?
	Em resumo, duas palavras:

	<next>Ligações &amp; Pontes <div class="rarr"></div> </next>

</words>

<!-- Bonding & Bridging -->

<words id="bonding_1">
	&larr; Poucas conexões e uma ideia não consegue se espalhar.
	<br>
	Muitas conexões e você tem o pensamento de grupo. <div class="rarr"></div> 
</words>

<words id="bonding_2">
	<b>
	Desenhe um grupo que está no meio termo:
	faça conexões suficientes para espalhar uma ideia complexa!
	<div class="darr"></div>
	</b>
</words>

<words id="bonding_end">
	Muito simples!
	O número de conexões <i>dentro</i> de um grupo é chamado <b>capital social de ligação</b><ref id="social_capital"></ref>.
	Mas e as conexões...
	<next wiggle>...<i>entre</i> grupos?</next>
</words>

<words id="bridging_1">
	Como você já deve ter imaginado, 
	o número de conexões <i>entre</i> grupos é chamado
	<b>capital social de ponte</b>.
	Isso é importante porque ajuda os grupos a saírem de sua bolha de visão limitada!
	<br>
	<b>Construa uma ponte para "infectar" todo mundo com bondade:</b>
</words>

<words id="bridging_end">
	Assim como a ligação, existe também um meio termo ideal para as pontes.<ref id="bridge"></ref>
	(desafio extra: tente desenhar uma ponte tão densa que o contáio complexo
	<i>não consegue</i> passar por ela!)
	Agora que nós sabemos como "construir" conexões <i>dentro</i> e <i>entre</i> grupos, vamos...
	<next wiggle>...fazer AMBOS ao mesmo tempo!</next>
</words>

<words id="bb_1">

	<b style="font-size:2em">DESAFIO FINAL!</b>
	<br>
	Desenhe conexões dentro dos grupos (ligações) e entre os grupos (pontes)
    para espalhar sabedoria por toda a multidão:

</words>
<words id="bb_2">

	Parabéns, você acaba de desenhar um tipo muito especial de rede!
    Redes com a mistura exata de ligações e pontes
    são profundamente importantes, e são chamadas...
	<next wiggle>“Redes de Pequeno Mundo” <div class="rarr"></div> </next>

</words>
<words id="bb_small_world_1">

	<i>"Unidade sem uniformidade". "Diversidade sem divisão". "E Pluribus Unum: de muitos, um".</i>
	<br>
	Não importa como é dito,
	pessoas de diferentes épocas e culturas geralmente chegam nessa mesma sabedoria:
	<b>
	uma sociedade saudável precisa de um ponto estável de ligações <i>dentro</i> dos grupos
    e pontes <i>entre</i> os grupos.
	</b>
	Assim:

</words>
<words id="bb_small_world_2">
	Não isto...
	<br>
	(porque ideias não propagam)
</words>
<words id="bb_small_world_3">
	nem isto...
	<br>
	(porque você vai ter pensamento de grupo)
</words>
<words id="bb_small_world_4">
	...mas <i>ISTO:</i>
</words>
<words id="bb_small_world_5">
	
	Cientistas de rede hoje possuem uma definição matemática para essa sabedoria antiga:
	a <b>rede de mundo pequeno</b><ref id="small_world"></ref>.
	Essa mistura ótima de ligações+pontes descreve como
	nossos neurônios estão conectados<ref id="swn_neurons"></ref>,
	nutre criatividade coletiva<ref id="swn_creativity"></ref>
	e solucionamento de problemas<ref id="swn_social_physics"></ref>,
	e até uma vez ajudou o Presidente dos EUA John F. Kennedy (quase) evitar uma guerra nuclear!<ref id="swn_jfk"></ref>
	Então, sim, mundos pequenos têm grande importância.

</words>
<words id="bb_small_world_end">
	<next>ok, vamos resumir isto... <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 &nbsp;&nbsp;&nbsp; [2]: Add "Infected"
	<br>
	[Space]: Drag &nbsp;&nbsp;&nbsp; [Backspace]: Delete
</words>

<!-- Conclusion -->

<words id="conclusion_1">
	
	<div style="font-size: 30px;">
		CONCLUINDO: tudo trata de...
	</div>
	<div style="
		width: 100%;
	    position: absolute;
	    font-size: 88px;
	    top: 20px;
	    line-height: 100px; display:block;
	">
	    Contágios &amp; Conexões
	</div>

	<div style="
	    width: 710px;
	    position: absolute;
	    top: 125px;
	    left: 250px;
	">
		<b>Contágios:</b>
        Assim como neurônios transmitem sinais no cérebro,
        pessoas transmitem crenças &amp; comportamentos em uma sociedade.
        Não apenas influenciamos nossos amigos,
        também influenciamos os amigos de nossos amigos, e até os amigos dos amigos de nossos amigos!<ref id="three_degrees"></ref>
		(“seja a mudança que você quer ver no mundo” etc etc)
        Mas, como neurônios, não são apenas sinais que importam, são também...
	</div>

	<div style="
	    width: 710px;
	    position: absolute;
	    top: 275px;
	    left: 250px;
	">
		<b>Conexões:</b>
        Muito poucas conexões e ideias complexas não propagam.
		Conexões <i>demais</i> e ideias complexas são exterminadas por pensamento de grupo.
        O truque é construir uma rede de mundo pequeno, a mistura ótima entre
		ligações e pontes: <i>de muitos, um.</i>
	</div>

	<div style="
	    width: 350px;
	    position: absolute;
	    top: 410px;
	    left: 220px;
	    text-align: center;
	    color: #999;
	">
		(quer fazer suas próprias simulações?
		olhe o Modo Experimental, clicando na (★) abaixo!)
	</div>

	<div style="
	    width: 400px;
	    position: absolute;
	    top: 395px;
	    right: 0px;
	    text-align: right;
	">
		Então, e a questão do comecinho?
		Por que algumas multidões <i>tendem</i> à...
	</div>
	<div style="
	    width: 300px;
	    position: absolute;
	    top: 460px;
	    right: 0px;
	">
		<next>...sabedoria e/ou loucura?</next>
	</div>

</words>

<words id="conclusion_2">
	<span style="line-height:1.4em; display:block;">

		<div style="height:0.5em"></div>

        De Newton à NASA à
		<br>
        ciência de rede, cobrimos muito aqui
		<br>
        hoje. Resumindo tudo, a loucura das multidões
		<br>
        não necessariamente se deve às <i>pessoas individuais</i>, mas a
		<br>
        como estamos enroscados em uma grudenta teia da rede.

		<div style="height:0.9em"></div>

		Isso <i>NÃO</i> significa abandonar responsabilidade pessoal, porque
		<br>
		também somos os <i>tecelões</i> dessa teia. Então, melhore seus contágios:
		<br>
	    seja cético de ideias que te lisonjeiam<ref id="flatter"></ref>, use tempo entendendo
		<br>
		ideias complexas. E melhore suas conexões: ligue-se a pessoas similares,
		<br>
		mas também construa pontes entre divisões culturais/políticas.

		<div style="height:0.9em"></div>

        Podemos tecer uma rede sábia. Claro, é mais difícil que desenhar
		<br>
        linhas em uma tela...

		<next>...mas ainda assim, compensa.</next>

	</span>
</words>

<words id="conclusion_3">
	<i>
		“Os grandes triunfos e tragédias da história são causados,
		não por pessoas sendo fundamentalmente boas ou fundamentalmente más,
		mas por pessoas sendo fundamentalmente pessoas.”
	</i>
	<br>
	<span style="position:relative; top:5px">~</span> Neil Gaiman &amp; Terry Pratchett
	<div style="height:0.8em"></div>
	<next small>&lt;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;">
			criado por</span>
		<div style="font-size: 3em; line-height: 1.0em;">
			NICKY CASE</div>
		<a target="_blank" href="http://ncase.me" style="text-decoration:none">
			brinque com minhas outras coisas</a> ·
		<a target="_blank" href="https://twitter.com/ncasenmare" style="text-decoration:none">
			siga meu twitter</a>
		
		<br><br>

		<span style="color:#777; position:relative; top:5px; display: inline-block; margin-top: 15px;">
			muito amor e obrigado a</span>
		<div style="font-size: 3em; line-height: 1.0em;">
			MEUS APOIADORES NO PATREON</div>
		<a onclick='publish("reference/show", ["supporters"]);'>
			veja nomes &amp; desenhos dos apoiadores</a> ·
		<a onclick='publish("reference/show", ["playtesters"]);'>
			veja testadores</a>
		<br>
		<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
			me ajude a fazer mais disso! &lt;3</a>

		<br><br>

		<span style="display: inline-block; margin-top: 15px;">
			♫ música é
			<a target="_blank" href="http://freemusicarchive.org/music/Komiku/Tale_on_the_Late/" style="text-decoration:none">
				"Friends 2018" and "Friends 2068"</a>
			por Komiku
			<br>
			&lt;/&gt; <i>Multidões</i> é
			<a target="_blank" href="https://github.com/ncase/crowds" style="text-decoration:none">
				completamente open source</a>
		</span>

		<br>

		<bon id="further_reading"></bon>

	</div>

</words>

<!-- x. misc -->
<words id="WIN">
	ACERTOU
</words>
<words id="sim_start">
	iniciar simulação
</words>
<words id="sim_stop">
	reiniciar &amp; redesenhar
</words>
<words id="translations_exist">
	Traduções de fãs:
</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 -->
	Mas o quê, ainda não existem traduções de fãs?!
</words>
<words id="translations_add">
	(adicione suas próprias!)
</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>
	Uma resposta rápida à <i>Sabedoria das Multidões</i> de James Surowiecki
	</h3>

	<div>

	<img src="sprites/bonus/surowieki.jpg" width="200" height="300" style="float:left; margin-right:1em"/>
	
	Primeiramente, eu não estou desmentindo
	<a target="_blank" href="https://en.wikipedia.org/wiki/The_Wisdom_of_Crowds">
	esse livro.</a>
	Trata-se de um livro bom, e Surowiecki estava tentando chegar à mesma pergunta que eu:
	<b>“por que algumas multidões se voltam pra loucura ou pra sabedoria?”</b>

	<br><br>

	A resposta de Surowiecki: multidões tomam boas decisões quando é tão independente quanto possível.
	Ele conta a história de uma feira municipal,
	na qual os cidadãos foram convidados a estimar o peso de um boi.
	Surpreendentemente, a média de <i>todos</i> os palpites foi melhor do que <i>qualquer um</i> palpites isoladamente</i>.
	Mas este é o detalhe: as pessoas tem que dar os seus palpites de forma <i>independente</i> dos outros.
	Caso contrário,
	eles seriam influenciados pelos palpites anteriores incorretos,
	e a resposta média seria altamente enviesada.

	<br><br>

	Mas... Eu não acho que "tornar as pessoas as mais independentes possível" é a resposta completa.
	Até mesmo gênios, que nós caracterizamos de forma errada como os pensadores mais independentes
	são altamente influenciados pelos outros. Como Sir Isaac Newton disse,
	<i>“Se vi mais longe foi por estar de pé sobre ombros de gigantes.”</i>

	<br><br>

	Pois então, qual ideia está correta?
	Por acaso sabedoria resulta de pensar por você mesmo ou pensar com os outros?
	A resposta é: "sim".

	<br><br>

	É por isso que eu vou tentar explicar dessa forma que gera mais perguntas:
	tentar encontrar o meio termo entre dependência e interdependência &mdash;
	isto é, como encontrar uma multidão sensata.

	</div>

</bonus>
<bonus id="connections">

	<h3>
	Quais são os outros tipos de conexões existentes?
	</h3>

	<div>

	Para simplificar,
	minha simulação finge que as pessoas só podem estar conectadas através de amizades,
	e todos os tipos de amizades são iguais.
	Mas cientistas de conexões <i>consideram</i> outras formas de se conectar, como por exemplo:

	<div style="clear:both"></div>
	<br>

	<img src="sprites/bonus/connection1.png" width="250" height="150" style="float:left; margin-right:1em"/>
	<b>Conexões unidirecionais.</b> Alice é o chefe de Bob, mas Bob não é o chefe de Alice.
	Carol é mãe de Dave, mas Dave não é pai de Carol.
	"Chefe" &amp; "pais" são relacionamentos <i>unidirecionais</i>:
	o relacionamento é de via única.
	Em contrapartida, "amizade" é um relacionamento <i>bidirecional</i>:
	a relação flui em ambos os lados. (bem, pelo menos é assim que deveria ser)

	<div style="clear:both"></div>
	<br>

	<img src="sprites/bonus/connection2.png" width="250" height="150" style="float:left; margin-right:1em"/>
	<b>Conexões de Peso.</b> Elinor e Frankie são meros conhecidos.
	George e Harry são Melhores Amigos.
	Mesmo que exista uma relação de "amizade" em ambos os casos, a segunda é mais forte.
	Nós então dizemos que essas duas conexões tem "pesos" diferentes.

	<div style="clear:both"></div>
	<br>

	<img src="sprites/bonus/map.png" width="200" height="200" style="float:left; margin-right:1em"/>
	Lembre-se: <b>todas estas simulações estão erradas.</b> Da mesma forma que um mapa está "errado".
	Você está vendo o mapa na esquerda? Edifícios não são blocos cinza sem expressão!
	Palavras não voam por cima da cidade! Todavia, mapas são úteis não <i>apesar</i> de serem simplificados,
	mas <i>porque</i> são simplificados. O mesmo se aplica às simulações, ou qualquer teoria científica.
	É <i>claro</i> que eles estão "errados" &mdash; é isso que os torna <i>úteis</i>.

	</div>

</bonus>
<bonus id="contagions">

	<h3>
	Quais são os outros tipos de contágios existentes?
	</h3>

	<div>
	
	Existem tantos muitas, mas muitas outras formas que cientistas de conexões pode simular o "contágio"!
	Eu escolhi a forma mais simples por motivos educacionais.
	Mas existe outras formas de fazer isso:

	<div style="clear:both"></div>
	<br>

	<img src="sprites/bonus/contagion1.png" width="250" height="150" style="float:left; margin-right:1em"/>
	<b>Contágio por Aleatoriedade</b>.
	Ser "exposto" por um contágio não <i>garante</i> que você será infectado,
	isso apenas torna o evento mais <i>provável</i>.

	<div style="clear:both"></div>
	<br>

	<img src="sprites/bonus/contagion2.png" width="250" height="150" style="float:left; margin-right:1em"/>
	<b>Pessoas tem diferentes limiares de contágio.</b> 
	Minha simulação finge que todo mundo tem o mesmo limiar para beber demais (50%) ou
	voluntariado (25%) ou desinformação (0%). 
	Claro, essa não acontece na vida real, e você pode fazer sua simulação refletir isso.

	<div style="clear:both"></div>
	<br>

	<img src="sprites/bonus/contagion3.png" width="250" height="150" style="float:left; margin-right:1em"/>
	<b>A ecologia do contágio.</b>
	E se existissem <i>múltiplos</i> contágios com <i>diferentes</i> limiares?
	Por exemplo, um tipo de contágio de "loucura" simples e um tipo de contágio de "sabedoria" complexo.
	Se alguém infectado com loucura, eles podem ser infectados com sabedoria?
	ou vice-versa?
	Alguém consegue ser infectado com ambos?

	<div style="clear:both"></div>
	<br>

	<img src="sprites/bonus/contagion4.png" width="250" height="150" style="float:left; margin-right:1em"/>
	<b>Contágios mutantes e que evoluem.</b>
	Ideias não são transmitidas perfeitamente de uma pessoa à outra como um vírus.
	Como um jogo de Telefone sem Fio, a mensagem vai se modificando cada vez que é contada &mdash;
	e, às vezes, a mensagem mutante vai ser mais infecciosa que a original!
	Então, com o decorrer do tempo, ideias "evoluem" para serem mais cativantes, copiáveis, contagiantes.

	<div style="clear:both"></div>

	</div>

</bonus>
<bonus id="further_reading">
	
	<h3>
	Quero aprender mais! O que mais eu posso ler e/ou jogar?
	</h3>
	
	<div>
	
	Essa explicação jogável foi apenas um ponto de partida para a sua curiosidade,
	então você pode ir mais fundo em um vasto oceano de conhecimento!
	Aqui estão mais coisas sobre conexões e sistemas sociais:

	<br><br>

	<img src="sprites/bonus/connected.png" width="200" height="200" style="float:left; margin-right:1em"/>
	<b>Livro:</b>
	<a target="_blank" href="http://www.connectedthebook.com/">
	Conectados (Connected)</a>
	por Nicholas Christakis e James Fowler (2009).
	Um tour acessível de como as conexões afetam nossas vidas, para o bem ou para o mal.
	<a target="_blank" href="http://www.connectedthebook.com/pdf/excerpt.pdf">
	Aqui está um fragmento: Prefácio &amp; Capítulo 1 (em inglês)
	</a>

	<div style="clear:both"></div>
	<br>

	<img src="sprites/bonus/trust.png" width="200" height="200" style="float:left; margin-right:1em"/>
	<b>Interativo:</b>
	<a target="_blank" href="https://brunolemos.github.io/trust/">
	A Evolução da Confiança</a> por Nicky Case (eu) (2017) <a target="_blank" href="http://ncase.me/trust/">(original em inglês)</a>.
	Um jogo acerca da teoria dos jogos sobre como a cooperação é construída... ou destruída.

	<div style="clear:both"></div>
	<br>

	<img src="sprites/bonus/polygons.png" width="200" height="200" style="float:left; margin-right:1em"/>
	<b>Interativo:</b>
	<a target="_blank" href="http://ncase.me/polygons-pt-br/">
	Parábola dos Polígonos</a> por Vi Hart e Nicky Case (eu de novo) (2014) <a target="_blank" href="http://ncase.me/polygons/">(original em inglês)</a>.
	Uma história de como escolhas inofensivas podem criar um mundo perigoso.

	<div style="clear:both"></div>
	<br>

	<img src="sprites/bonus/ee.png" width="200" height="200" style="float:left; margin-right:1em"/>
	Ou se você apenas deseja ver uma galeria de projetos educacionais interativos, aqui está o
	<a target="_blank" href="http://explorabl.es/">
	Explorable Explanations (em inglês)</a>,
	um hub para aprender jogando!

	<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 &amp; 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 &amp; 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 &amp; 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>
	“the possum has 13 nipples”
	</h3>
	<div>
	arranged in a ring of 12 nipples, plus one in the middle
	</div>
</reference>
<reference id="groupthink">

	<h3>
	“groupthink”
	</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 &mdash; thankfully &mdash;
	some possible remedies.
	</div>

</reference>
<reference id="social_capital">

	<h3>
	“bonding and bridging social capital”
	</h3>

	<div>
	These two types of social capital &mdash; "bonding" and "bridging" &mdash;
	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>
	“bridging social capital has a sweet spot”
	</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 &amp; 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 &amp; Milgram's 1969 experiment</a>,
	which showed that, on average, any two random people in the United States
	were just six friendships apart &mdash; "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 &amp; 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) &mdash;
	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 &amp; 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 &amp; 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
	&mdash; for some reason &mdash;
	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 &mdash; 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.

-->