Finish 2/3

This commit is contained in:
chairco 2018-05-07 23:30:24 +08:00
parent f4e287e808
commit 127d65a64f
1 changed files with 158 additions and 176 deletions

View File

@ -347,34 +347,31 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
<div style="height:0.5em"></div>
Of course, that's not the only
當然,那不是唯一
當然,市場,機構甚至
<br>
time markets, institutions, or entire
整個民主國家的失控並非
<br>
democracies went haywire &mdash; the <i>madness</i> of
只有這一次 &mdash; 群眾的<i>瘋狂</i>
<br>
crowds. And yet, just when you lose hope in humanity,
然而當你對人失去希望時,
<br>
you see citizens coordinating to rescue each other in
你會看見公民們在颶風中相互協助,
<br>
hurricanes, communities creating solutions to problems,
社區會為各類疑難雜症找出解決方案,人們戰鬥是
<br>
people fighting for a better world &mdash; the <i>wisdom</i> of crowds!
為了更美好的世界 &mdash; 群眾的<i>智慧</i>
<div style="height:0.9em"></div>
<b>But <i>why</i> do some crowds turn to madness, or wisdom?</b> No theory
<b>但是 <i>為什麼</i> 時而瘋狂時而智慧呢?</b>
<br>
can explain everything, but I think a new field of study,
沒有任何理論可以解釋這一切,但我認為有個新的研究領域,
<br>
<b>network science</b>, can guide us! And its core idea is this: to
<b>網絡科學</b>, 可以給我們指引! 他的核心思想:
<br>
understand crowds, we should look not at the <i>individual
<br>
people</i>, but at...
理解群眾, 我們不應該關注 <i>個人</i>,而是...
<next>...their <i>connections.</i> <div class="rarr"></div> </next>
<next>...<i>他們之間的連接。</i> <div class="rarr"></div> </next>
</words>
@ -692,150 +689,143 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
<!-- Bonding & Bridging -->
<words id="bonding_1">
&larr; Too few connections, and an idea can't spread.
&larr; 過少的連結,導致思想無法被傳遞。
<br>
Too many connections, and you get groupthink. <div class="rarr"></div>
過多的連接,結果就是團體迷思。<div class="rarr"></div>
</words>
<words id="bonding_2">
<b>
Draw a group that hits the sweet spot:
just connected enough to spread a complex idea!
繪製一個群組可以得到最佳的結果:
僅僅用足夠的連接來傳遞複雜想法!
<div class="darr"></div>
</b>
</words>
<words id="bonding_end">
Simple enough!
The number of connections <i>within</i> a group is called <b>bonding social capital</b><ref id="social_capital"></ref>.
But what about the connections...
<next wiggle>...<i>between</i> groups?</next>
簡單吧!
在這<i>裡頭</i>團體被連接的數量被稱為<b>結合型社會資本</b><ref id="social_capital"></ref>.
但這是怎樣的一種連接...
<next wiggle>...<i>伴隨</i> 團體?</next>
</words>
<words id="bridging_1">
As you may have already guessed,
the number of connections <i>between</i> groups is called
<b>bridging social capital</b>.
This is important, because it helps groups break out of their insular echo chambers!
正如你已經猜想的那樣,
團體<i>之間</i>所連接的數量被
稱為
<b>橋接型社會資本</b>
這非常重要,因為他協助團體打破他們自己的疆界!
<br>
<b>Build a bridge, to "infect" everyone with complex wisdom:</b>
<b>建立一座橋樑,用複雜智慧去“感染”每一個人:</b>
</words>
<words id="bridging_end">
Like bonding, there's a sweet spot for bridging, too.<ref id="bridge"></ref>
(extra challenge: try drawing a bridge so thick that the complex contagion
<i>can't</i> pass through it!)
Now that we know how to "design" connections <i>within</i> and <i>between</i> groups, let's...
<next wiggle>...do BOTH at the same time!</next>
如同結合,橋接也是有一個蜜月點。<ref id="bridge"></ref>
(額外挑戰: 嘗試繪製一個厚橋,以至於複雜傳染
<i>無法</i> 通過它!)
現在我們理解如何“設計”連接組<i></i>與組<i></i>,讓我們...
<next wiggle>...兩者同時一起進行!</next>
</words>
<words id="bb_1">
<b style="font-size:2em">FINAL PUZZLE!</b>
<b style="font-size:2em">最終地圖!</b>
<br>
Draw connections within groups (bonding) and between groups (bridging)
to spread wisdom to the whole crowd:
繪製一個連接組內(結合)和組外(橋接)來傳遞智慧給所有的群眾:
</words>
<words id="bb_2">
Congrats, you've just drawn a very special kind of network!
Networks with the right mix of bonding and bridging
are profoundly important, and they're called...
<next wiggle>“Small World Networks” <div class="rarr"></div> </next>
恭喜,你在剛剛畫出一個非常特殊的網絡!
網絡同時具有正確的結合以及橋接是非常重要的,他們被稱為...
<next wiggle>“小世界網絡” <div class="rarr"></div> </next>
</words>
<words id="bb_small_world_1">
<i>"Unity without uniformity". "Diversity without division". "E Pluribus Unum: out of many, one".</i>
<i>“統一但又不統一”。“具有多樣性卻又不具差異”。“E Pluribus Unum拉丁語: 合眾為一”</i>
<br>
No matter how it's phrased,
people across times and cultures often arrive at the same piece of wisdom:
不管用何種方式表達,不同時代和文化的人們通常會得到相同的智慧:
<b>
a healthy society needs a sweet spot of bonds <i>within</i> groups
and bridges <i>between</i> groups.
</b>
That is:
一個健康的社會需要團體<i></i>結合以及團體<i></i>橋樑的蜜月點。
</b>
這就是:
</words>
<words id="bb_small_world_2">
Not this...
不是這樣...
<br>
(because ideas can't spread)
(因為想法無法傳遞)
</words>
<words id="bb_small_world_3">
nor this...
也不是這樣...
<br>
(because you'll get groupthink)
(因為會造成團體迷思)
</words>
<words id="bb_small_world_4">
...but <i>THIS:</i>
...而是 <i>這樣:</i>
</words>
<words id="bb_small_world_5">
Network scientists now have a mathematical definition for this ancient wisdom:
the <b>small world network</b><ref id="small_world"></ref>.
This optimal mix of bonding+bridging describes how
our neurons are connected<ref id="swn_neurons"></ref>,
fosters collective creativity<ref id="swn_creativity"></ref>
and problem-solving<ref id="swn_social_physics"></ref>,
and even once helped US President John F. Kennedy (barely) avoid nuclear war!<ref id="swn_jfk"></ref>
So, yeah, small worlds are a big deal.
網絡科學家對於這古老智慧有一個數學上的定義:
<b>小世界網絡</b><ref id="small_world"></ref>
這個最佳混合了結合+橋接描述了神經網路如何連接<ref id="swn_neurons"></ref>
培養集體創意<ref id="swn_creativity"></ref>與問題解決<ref id="swn_social_physics"></ref>,甚至協助美國總統約翰 F. 甘迺迪(幾乎)避免了一場核戰!<ref id="swn_jfk"></ref>是的,所以,小世界是件大事。
</words>
<words id="bb_small_world_end">
<next>ok, let's wrap this up... <div class="rarr"></div> </next>
<next>ok, 準備開始收尾了... <div class="rarr"></div> </next>
</words>
<!-- Sandbox -->
<words id="sandbox_caption">
(pst... wanna know a secret?<ref id="sandbox"></ref>)
(噓... 想知道一個秘密嗎?<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>
<b>清除全部</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"
[1]: 新增人 &nbsp;&nbsp;&nbsp; [2]: 新增 “感染源”
<br>
[Space]: Drag &nbsp;&nbsp;&nbsp; [Backspace]: Delete
[空格]: 移動 &nbsp;&nbsp;&nbsp; [退後鍵]: 刪除
</words>
<!-- Conclusion -->
@ -843,7 +833,7 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
<words id="conclusion_1">
<div style="font-size: 30px;">
IN CONCLUSION: it's all about...
言而總之: 這一切都是關於...
</div>
<div style="
width: 100%;
@ -852,7 +842,7 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
top: 20px;
line-height: 100px; display:block;
">
Contagions &amp; Connections
傳染 &amp; 連接
</div>
<div style="
@ -861,13 +851,14 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
top: 125px;
left: 250px;
">
<b>Contagions:</b>
Like how neurons pass signals in a brain,
people pass beliefs &amp; behaviors in a society.
Not only do we influence our friends,
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...
<b>傳染:</b>
就像是神經元在大腦內傳遞訊號一樣,
人們在社會中傳遞信念 &amp; 行為.
不僅僅影響我們的朋友,我們也間接影響了朋友的朋友,
甚至是我們朋友的朋友的朋友的朋友!<ref id="three_degrees"></ref>
(像是要“改變世界不如先改變自己”此類)但是如同神經元,
這不僅是信號的問題,這也是...
</div>
<div style="
@ -876,11 +867,11 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
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>
<b>連接:</b>
太少的連接使得複雜的想法無法被傳遞。
<i>過多</i>的連結會使得複雜的想法被團體迷思所破壞。
這裡的竅門在於建構一個小型世界網絡並使用最佳的
結合和橋接組合: <i>e pluribus unum.(合眾為一)</i>
</div>
<div style="
@ -891,8 +882,8 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
text-align: center;
color: #999;
">
(wanna make your own simulations?
check out Sandbox Mode, by clicking the (★) button below!)
(想要自己模擬一下嗎?
試試沙盒模式, 點擊下面的 (★) 按鈕!)
</div>
<div style="
@ -902,8 +893,8 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
right: 0px;
text-align: right;
">
So, what about our question from the very beginning?
Why <i>do</i> some crowds turn to...
那,關於我們一開始所提出的問題?
為什麼有些團體<i>變得</i>...
</div>
<div style="
width: 300px;
@ -911,7 +902,7 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
top: 460px;
right: 0px;
">
<next>...wisdom and/or madness?</next>
<next>...智慧 且/或 瘋狂?</next>
</div>
</words>
@ -921,44 +912,40 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
<div style="height:0.5em"></div>
From Newton to NASA to
從牛頓到 NASA 網絡科學,
<br>
network science, we've covered a lot here
今天我們在這提了非常多東西
<br>
today. Long story short, the madness of crowds
長或短說,群眾的瘋狂無法歸咎於 <i>獨立的個人</i>,而應該
<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
<i>並不</i> 意味著拋棄了個人的責任,對我們而也其實
也是這張網絡的<i>編織者</i>。所以,改善你的傳播時的想法:
<br>
we're also the <i>weavers</i> of that web. So, improve your contagions:
對於奉承阿諛奉承的話保持懷疑態度<ref id="flatter"></ref>,花點時間來理解
<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>
<next>...但這是值得的。</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 &amp; Terry Pratchett
@ -973,39 +960,39 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
<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>
創作者</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> ·
<a target="_blank" href="https://twitter.com/ncasenmare" style="text-decoration:none">
follow my tweeter</a>
關注我的 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>
非常,以及特別感謝</span>
<div style="font-size: 3em; line-height: 1.0em;">
MY PATREON SUPPORTERS</div>
我的 PATREON 支持者</div>
<a target="_blank" href="https://www.patreon.com/ncase" style="text-decoration:none">
help me make more like this! &lt;3</a>
讓我做出更多像這部一樣美好的作品!&lt;3</a>
<br>
<a onclick='publish("reference/show", ["supporters"]);'>
see my supporters</a> ·
看看支持的的名字</a> ·
<a onclick='publish("reference/show", ["playtesters"]);'>
see my playtesters</a>
看看測試的好友們</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>
"Friends 2018" "Friends 2068"</a>
by Komiku
<br>
&lt;/&gt; <i>Crowds</i> is
&lt;/&gt; <i>Crowds</i>
<a target="_blank" href="https://github.com/ncase/crowds" style="text-decoration:none">
fully open source</a>
完全開源</a>
</span>
<br>
@ -1021,13 +1008,13 @@ Also, <b></b> bolds a word/phrase, and <i></i> italicizes a word/phrase.
WIN
</words>
<words id="sim_start">
start simulation
開始模擬
</words>
<words id="sim_stop">
reset &amp; re-draw
重置 &amp; 重畫
</words>
<words id="translations_exist">
Fan-made translations:
紛絲製作的翻譯們:
</words>
<words id="translations_do_not_exist">
<!-- There's no need to TRANSLATE this line since, well, -->
@ -1055,48 +1042,45 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:
<bonus id="books">
<h3>
A quick response to James Surowiecki's <i>The Wisdom of Crowds</i>
對 James Surowiecki 的著作<i>群眾的智慧</i>
簡短的評論
</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>
這本書。</a>
這是一本非常棒的書,同事 Surowiecki 不斷嘗試
回答同一個問題,那就是:
<b>“為何同樣的情況,群眾可能會變得瘋狂,但也可能變得更具智慧?”
</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.
Surowiecki 的答案是: 當群眾內的每個人都能儘量做出獨立的判斷
就能做出明智的選擇。
他給了一個鄉村裡所發生的故事,鎮上的村名被邀請去猜一把斧頭的重量。令人震驚的事,他們<i>所有的人</i>的猜測平均數會比任何,<i>一人</i>所猜測的平均數更為接近。
但這有個前提: 人們必須<i>獨立地</i>進行猜測。否則他們可能就會被先前錯誤的猜測所影響,而且平均答案也會因此而嚴重的扭曲。
<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>
但是... 我不認為“讓每個人儘量保持獨立可能性”是完整的答案。
即便是天才,那寫可能被我們認為是有史以來最為獨立的思考者們也可能深深被被別人所影響著。就像是艾薩克·牛頓爵士所說的,<i>“如果我看得比別人更遠,那是因為我站在巨人的肩膀上。”</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 &mdash;
that is, how to get a wise crowd.
所以這就是我在這個探索學習中嘗試想要解釋的:
如何保持獨立與互相依賴中得到最佳的蜜月點 &mdash;
也就是說,如何得到一個富有智慧的群眾。
</div>
@ -1104,45 +1088,43 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:
<bonus id="connections">
<h3>
What other kinds of connections are there?
還有其他種類的連接方式嗎?
</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:
簡單來說,我的模擬僅僅假設人們會透過友誼互相連接,
以及所有的友誼皆是平等。
但網絡科學家<i>的確</i>會把其他我們可能連接在一起的關係考慮進來,例如:
<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" &amp; "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)
<b>單向聯繫。</b> Alice 是 Bob 的老闆, 但 Bob 不是 Alice 的老闆。
Carol 是 Dave 的父母,但 Dave 不是 Carol 的父母。
“老闆” &amp; “父母” 就是 <i>單向</i> 的關聯:
這種關係是單一方向。
反過來,“朋友”是一個<i>雙向</i>
關係: 這種關係兩邊都能相通。(希望如此)
<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".
<b>權重關係。</b> Elinor 和 Frankie 只是相互認識。
George 和 Harry 是彼此最好的朋友。
即使這些都是“友誼”連結,第二類的連結顯然更強些。
我們說這兩種關係具備不同“權重”。
<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" &mdash; that's what makes them <i>useful</i>.
要記住: <b>這些模擬情境都是錯誤的。</b> 同樣的,所有的地圖也都是“錯誤的”。
你看到左邊的地圖嗎?建築物才不是灰灰的一大塊!
語言文字不會飄散在都市上空!然而地圖是有用的<i>儘管</i>並非他們被簡化,而是<i>因為</i>他們是被簡化的。
<i>當然</i>,他們是“錯誤” &mdash; 這使得他們變得<i>有用</i>
</div>
@ -1150,20 +1132,20 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:
<bonus id="contagions">
<h3>
What other kinds of contagions are there?
還有其他類型的傳染存在嗎?
</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>.
<b>隨機性的傳染</b>.
Being "exposed" to a contagion doesn't <i>guarantee</i> you'll be infected,
it only makes it more <i>likely</i>.