diff --git a/audio/pencil.mp3 b/audio/pencil.mp3 index f55de17..e3e1d1c 100644 Binary files a/audio/pencil.mp3 and b/audio/pencil.mp3 differ diff --git a/audio/pencil_short.mp3 b/audio/pencil_short.mp3 index 702082e..cab9d0c 100644 Binary files a/audio/pencil_short.mp3 and b/audio/pencil_short.mp3 differ diff --git a/css/index.css b/css/index.css index 03058a8..254d709 100644 --- a/css/index.css +++ b/css/index.css @@ -75,7 +75,7 @@ a:hover{ top: -10px; width: 300px; height: 20px; - padding: 40px 0; + padding: 37px 0 43px 0; background-image: url(../sprites/button_large.png); background-size: 100% auto; text-align: center; @@ -135,6 +135,20 @@ a:hover{ transform: scale(1.2); } +/* Right & Down Arrows */ +.rarr, .darr{ + display: inline-block; + width: 1em; + height: 1em; + background: url(../sprites/ui/arrow.png); + background-size: 100% auto; + position: relative; + top: 3px; +} +.darr{ + transform: rotate(90deg); +} + /* Sim UI */ .sim_ui{ position: absolute; @@ -499,18 +513,41 @@ words, bonus, reference{ /* BONUS BOX */ bon{ - margin: 0.75em 0; + margin: 0.75em auto; display: block; + background: #ccc; color: #444; - padding: 15px 20px; - width: 280px; - line-height: 1.1em; + text-align: left; + + width: 300px; + height: 56px; + padding: 23px 20px 17px 80px; border-bottom: 4px solid rgba(0,0,0,0.25); + border-radius: 5px; + + line-height: 1.1em; + background-size: 400px auto; + + position: relative; + transition: top 0.1s ease-in-out; + top:0; +} +bon:before{ + content: ''; + display: block; + position: absolute; + + left: 25px; + top: 14px; + width: 35px; + height: 70px; + + background: url(../sprites/ui/bonus.png); + background-size: 100% 100%; } bon:hover{ - background: #ddd; - color: #666; + top:-3px; } /* REFERENCES */ diff --git a/index.html b/index.html index 0a9bbbb..eef8ce1 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ 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 4000 WORDS to translate, including +There's about 3600+ WORDS to translate, including the Bonus Boxes and References. To make things easier (or less painful, anyway) I've marked @@ -299,7 +299,7 @@ it should automatically highlight what the text is (usually in white). - let's play! → + let's play!
@@ -310,7 +310,6 @@ You may have to re-arrange the
's in order to do your translation. It shouldn't look too bad if they're slightly off, though! Also, bolds a word/phrase, and italicizes a word/phrase. -And → ← ↓ ↑ are pointy arrows. --> @@ -336,7 +335,7 @@ And → ← ↓ ↑ are pointy arrows.
heavenly bodies, but not the madness of people.” - yeah sucks for him → + yeah sucks for him
@@ -370,7 +369,7 @@ And → ← ↓ ↑ are pointy arrows.
people, but at... - ...their connections. + ...their connections.
@@ -392,7 +391,7 @@ And → ← ↓ ↑ are pointy arrows. when you're done doodling and playing around, - let's continue → + let's continue
@@ -402,12 +401,12 @@ And → ← ↓ ↑ are pointy arrows. People look to their social connections to understand their world. For example, people look to their peers to find out what % of their friends (not counting themselves) are, - say, binge-drinkers. + say, binge-drinkers. - Draw/erase connections, and see what happens! → + Draw/erase connections, and see what happens!
@@ -415,12 +414,24 @@ And → ← ↓ ↑ are pointy arrows. - However, networks can fool people. Just like how the earth seems flat because we're on it, people may get wrong ideas about society because they're in it. + + + +
+ optional extra bonus notes! ↑ +
+
+ ↓ links and references +
+
+ + + + -
For example, a 1991 study showed that @@ -430,25 +441,16 @@ And → ← ↓ ↑ are pointy arrows. Well, you're about to invent the answer yourself, by drawing a network. It's time to... - FOOL EVERYONE → + FOOL EVERYONE
- -
- optional extra bonus notes! ↑ -
-
- ↓ links and references -
-
- PUZZLE TIME!
Fool everyone into thinking - the majority of their friends (50% threshold) are binge-drinkers + the majority of their friends (50% threshold) are binge-drinkers (even though binge-drinkers are outnumbered 2-to-1!)
@@ -471,13 +473,13 @@ And → ← ↓ ↑ are pointy arrows. or why extremism seems more common than it actually is. Madness. - + But people don't just passively observe others' ideas and behaviors, they actively copy them. So now, let's look at something network scientists call... - “Contagions!” → + “Contagions!”
@@ -486,13 +488,13 @@ And → ← ↓ ↑ are pointy arrows. Let's put aside the "threshold" thing for now. - Below: we have a person with some information. + Below: we have a person with some information. Some misinformation. "Fake news", as the cool kids say. And every day, that person spreads the rumor, like a virus, to their friends. And they spread it to their friends. And so on.
- Start the simulation! ↓ + Start the simulation!
(p.s: you can't draw while the sim's running)
@@ -506,7 +508,7 @@ And → ← ↓ ↑ are pointy arrows. - well that's depressing → + well that's depressing
@@ -520,7 +522,7 @@ And → ← ↓ ↑ are pointy arrows. - fan-flipping-tastic → + fan-flipping-tastic
@@ -534,33 +536,33 @@ And → ← ↓ ↑ are pointy arrows. in order to be "infected". So, network scientists have come up with a new, better way to describe how ideas/behaviors spread, and they call it... - Complex Contagions!” → + Complex Contagions!”
- Let's bring back "thresholds", and the binge-drinking example! + Let's bring back "thresholds" and the binge-drinking example! When you played with this the first time, people didn't change their behavior.

- Now, let's simulate what happens if people do start drinking + Now, let's simulate what happens if people start drinking when 50%+ of their friends do! Before you start the sim, ask yourself what you think should happen.

- Now, run the sim, and see what actually happens! → + Now, run the sim, and see what actually happens!
- + - Unlike our earlier "fake news" contagion, - this contagion does not spread to everyone! + Unlike our earlier "fake news" contagion, + this contagion does not spread to everyone! The first few people get "infected", because although they're only exposed to one binge-drinker, that binge-drinker is 50% of their friends. (yeah, they're lonely) In contrast, the person near the end of the chain did not get "infected", @@ -570,7 +572,7 @@ And → ← ↓ ↑ are pointy arrows.
The relative % of "infected" friends matters. - That's the difference between the complex contagion theory, + That's the difference between the complex contagion theory, and our naive it-spreads-like-a-virus simple contagion theory. (you could say "simple contagions" are just contagions with a "more than 0%" infection threshold) @@ -585,7 +587,7 @@ And → ← ↓ ↑ are pointy arrows. - Here, we have a person who volunteers to... I don't know, + Here, we have a person who volunteers to... I don't know, rescue people in hurricanes, or tutor underprivileged kids in their local community, or something cool like that. Point is, it's a "good" complex contagion. This time, though, let's say the threshold is only 25% — @@ -599,30 +601,34 @@ And → ← ↓ ↑ are pointy arrows. + - NOTE: Volunteering is just one of many complex contagions! - Others include: voter turnout, lifestyle habits, - career choices, challenging your beliefs, - taking time to understand a issue deeply — basically, anything - that needs more than one "exposure", and some social encouragement. + NOTE: Volunteering is just one of many complex contagions! + Others include: voter turnout, lifestyle habits, + challenging your beliefs, + taking time to understand a issue deeply — anything + that needs more than one "exposure". + Complex contagions aren't necessarily wise, + but being wise is a complex contagion. -

+
- (So what's an example of a simple contagion, that only needs one exposure to "infect" someone? - Usually: bits of trivia, like, "the possum has 13 nipples") + (So what's a real-life simple contagion? + Usually bits of trivia, like, "the possum has 13 nipples") -

+ - Now, to really show the power and weirdness of complex contagions, let's revisit... + Now, to really show the power and weirdness of complex contagions, let's revisit... - ...an earlier puzzle → + ...an earlier puzzle
+
- Remember this? This time, with a complex contagion , it'll be a bit tougher... + Remember this? This time, with a complex contagion , it'll be a bit tougher...
- Try to "infect" everyone with complex wisdom! ↓ + Try to "infect" everyone with complex wisdom!
@@ -630,7 +636,7 @@ And → ← ↓ ↑ are pointy arrows. - HOT DANG → + HOT DANG
@@ -639,14 +645,14 @@ And → ← ↓ ↑ are pointy arrows. But is that really so? Well, let's revisit... - ...another earlier puzzle → + ...another earlier puzzle
- If you hit "start" below, the complex contagion will just spread to everyone. + If you hit "start" below, the complex contagion will just spread to everyone. No surprise there. But now, let's do the opposite of everything we've done before: - draw a network to prevent the contagion from spreading to everyone! ↓ + draw a network to prevent the contagion from spreading to everyone!
@@ -658,7 +664,7 @@ And → ← ↓ ↑ are pointy arrows. - ...or death. → + ...or death.
@@ -685,7 +691,7 @@ And → ← ↓ ↑ are pointy arrows. But how can we "design" for crowd wisdom? In short, two words: - Bonding & Bridging → + Bonding & Bridging
@@ -694,14 +700,14 @@ And → ← ↓ ↑ are pointy arrows. ← Too few connections, and an idea can't spread.
- Too many connections, and you get groupthink. → + Too many connections, and you get groupthink.
Draw a group that hits the sweet spot: just connected enough to spread a complex idea! - ↓ +
@@ -742,7 +748,7 @@ And → ← ↓ ↑ are pointy arrows. 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... - “Small World Networks” → + “Small World Networks”
@@ -784,18 +790,13 @@ And → ← ↓ ↑ are pointy arrows. - ok, let's wrap this up... → + ok, let's wrap this up...
- NOTE: "Sandbox Mode" is totally optional! - Feel free to skip it, or play around. - Whenever you're done, let's recap... - - - what we learnt today! + (pst... wanna know a secret?) @@ -888,6 +889,18 @@ And → ← ↓ ↑ are pointy arrows. bonding and bridging: e pluribus unum. +
+ (wanna make your own simulations? + check out Sandbox Mode, by clicking the (★) button below!) +
+
- CREDITS -
- CREDITS -
- CREDITS -
- CREDITS -
- SUPPORTERS -
- PLAYTESTERS -
- + +
+ + + created by +
+ NICKY CASE
+ + play my other shtuff + +

+ + + lots of love and thanks to +
+ MY PATREON SUPPORTERS
+ + see names & drawings of supporters · + + see playtesters +
+ + help me make more like this! <3 + +

+ + + ♫ music is + + "Friends 2018" and "Friends 2068" + by Komiku +
+ </> Crowds is + + fully open source +
+ +
+ + + +
+ @@ -1027,25 +1070,26 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:

Surowiecki's answer: crowds make good decisions when everybody is as independent as possible. - He gives the story of a game at a county fair, - where the rabble were invited to guess the weight of an ox. - Surprisingly, the average of all their guesses was better than any one individual guess. + He gives the story of a county fair, + where the townsfolk were invited to guess the weight of an ox. + Surprisingly, the average of all their guesses was better than any one guess. But, here's the rub: the people have to guess independently of each other. - If people knew the previous guesses before they put forth their own guess, - they'd be influenced by those guesses, and all the results would be skewed. + Otherwise, + they'd be influenced by earlier incorrect guesses, + and the average answer would be highly skewed.

- But... I don't think "make everyone be as independent as possible" is quite right. - Even geniuses, who we tend to mischaracterize as the most independent thinkers, - are actually influenced deeply by others. As Sir Isaac Newton said, + 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, “If I have seen further, it is by standing on the sholders of Giants.”

So, which idea is correct? Does wisdom come from thinking for yourself, or thinking with others? - As is usually the case with these kind of questions, the answer is: "yes". + The answer is: "yes".

@@ -1064,10 +1108,10 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:
- For the sake of simplicity, all the simulations here only have one kind of connection, - friendship, and all the friendships are equally strong. - But there's other kinds of connections that network scientists think about! - For example: + 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 do consider other ways we can be connected, such as:

@@ -1075,7 +1119,7 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too: Directional connections. 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. - Therefore, "boss" & "parent" are directional relationships: + "Boss" & "parent" are directional relationships: the relationship only goes one way. In contrast, "friends" is a bidirectional relationship: the relationship goes both ways. (well, hopefully) @@ -1084,19 +1128,17 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:
- Weighted connections. Elinor and Frankie are "friends", but not that close. - George and Harry are super-duper Best Friends Forever. - Even though there's a friendship connection in both cases, the second one is a stronger: - the connections have different "weights". - (The "weights" matter when we think about, say, how people influence each other. - Best Friends will influence each other more than casual acquaintances.) + Weighted connections. 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".

- Just remember: all the simulations in this game are wrong. The same way any map is "wrong". - You see the map on the left? Buildings aren't actually gray featureless blocks! + Just remember: all these simulations are wrong. 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 despite being simplified, but because they're simplified. Same goes for simulations, or any scientific theory. Of course they're "wrong" — that's what makes them useful. @@ -1112,34 +1154,33 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:
- There's so, so many ways that network scientists can simulate "contagions". - I'm just picking the simplest one, for educational purposes. - But, for completeness, here's other ways you could simulate contagions: + 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:

- Contagions with Randomness. Instead of "if your friend is infected, you'll get infected", - you could simulate "if your friend is infected, you'll get infected with an X% chance". + Contagions with Randomness. + Being "exposed" to a contagion doesn't guarantee you'll be infected, + it only makes it more likely.

People have different contagion thresholds. - In this simulation, I'm pretending everyone has the same threshold for binge-drinking (50%) or - volunteering (25%) or misinformation (0%). That's not true in real life, of course, - and you could make your simulation reflect that. + 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.

- An ecology of contagions. This is actually cutting-edge research, - and I'm not entirely sure how one would do this. - In my simulations, only one contagion is spreading at a time. - But what if there were multiple contagions, with different thresholds? + An ecology of contagions. + What if there were multiple contagions, with different 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? @@ -1150,13 +1191,12 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too: Contagions that mutate and evolve. - Ideas don't pass perfectly from one person to another the way a virus genome does. - Like a game of Telephone, the message gets mutated with each re-telling. - Sometimes the mutant will be more contagious than the original! - And so, over time, - ideas "evolve" to be more digestible, - urban legends "evolve" to be more shocking, - habits and behaviors "evolve" to be more copy-able. + 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. + +
@@ -1164,14 +1204,14 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too:

- Further Reading & Playing + I wanna learn more! What else can I read and/or play?

This explorable explanation was just a springboard for your curiosity, so you can dive deeper into a vast pool of knowledge! - So, here's two of my favorite things on networks: + Here's more stuff on networks or social systems:

@@ -1180,52 +1220,39 @@ Sorry, not done yet! These Bonus Boxes need you to TRANSLATE, too: Connected by Nicholas Christakis and James Fowler (2009). - A layperson-friendly yet rigorous tour of how networks affect our lives, - for good and ill. They summarize the science, and also present some of their original findings, - like the "Three Degrees of Influence": - you affect not just your friends, but your friends' friends, and your friends' friends' friends! + An accessible tour of how our networks affect our lives, for good or ill. - Here's a link to an excerpt. + Here's an excerpt: Preface & Chapter 1

- - Interactive: - - Collective Dynamics of Small World Networks, - original paper by Watts & Strogatz (1998), - turned into interactive visuals by Bret Victor in 2011. - Slightly technical, but it's a lot easier to understand when - paired with pictures you can play with! - -
-
- - Alternatively, if you want to play more explorable explanations about society, - (and not necessarily about networks), - check out these other interactives I've made! - -

- + Interactive: The Evolution of Trust by Nicky Case (2017). - This is a game about the game theory of how cooperation arises (or not). - You first play a game of trust, - then play a meta-game of that, then a meta-meta-game of that... - and discover what leads people to trust each other, or trust no one. + A game about the game theory of how cooperation is built... or destroyed.

+ Interactive: Parable of the Polygons by Vi Hart and Nicky Case (2014). A story about how harmless choices can create a harmful world. - Based off a Nobel Prize-winning game theorist's work, - this interactive shows how discrimination and diversity can arise from the bottom up. + +
+
+ + + Or, if you just want to see a whole gallery of interactive edu-things, here's + + Explorable Explanations, + a hub for learning through play! + +
@@ -1247,9 +1274,7 @@ Final thing! These references also need you to TRANSLATE:
- “Biases in the perception of drinking norms among college students” by Baer et al (1991). - The study finds that students greatly overestimate how much their peers drink. - And in other news, water is wet and sky is blue. + “Biases in the perception of drinking norms among college students” by Baer et al (1991)
@@ -1260,26 +1285,11 @@ Final thing! These references also need you to TRANSLATE:
- “The Majority Illusion in Social Networks” by Lerman et al (2016). - - In this paper, they found that the majority illusion is strongest in friendship networks - with “heterogeneous degree distribution and disassortative structure.” - Or, in Normal Human Words: when there are wide differences (heterogeneous) - in the # of friends each individual person has (degree), - and when low-friend people are friends with high-friend people (disassortative). - -

- - Another cool, related illusion: - - - The Friendship Paradox, - - which is the empirical finding that, on average, your friends will have more friends than you do. - I always used to feel lonely... but now, I have a mathematical excuse for feeling lonely! Hooray! - +
+ Related: + The Friendship Paradox.
@@ -1292,31 +1302,11 @@ Final thing! These references also need you to TRANSLATE:
- This is all laid out in Nicholas Christakis and James Fowler's - well-written, layperson-friendly book, + From Nicholas Christakis and James Fowler's + wonderfully-written, layperson-accessible book, Connected (2009). -

- - But how do they know that the friendships actually cause changes in health, happiness, etc, - rather than just being "mere" correlation? - They did two clever things: - -

- 1) They used the Framingham Heart Study dataset, which tracked thousands of people for generations. - The data showed that people were becoming friends first, and then becoming more similar. - It's true that similarities "cause" friendships (birds of a feather flock together), - but this proves that friendships "cause" similarities, too. - -

- And 2) They found pairs of people where Person A named Person B as their friend, - but Person B did not name Person A as their friend. Awkward. - In those cases, they found that the "contagion" only flows in one direction. - This proves that, indeed, changes in health are caused by social influence, - rather than caused by external variables like, I dunno, - a new McDonald's opening up in Person A & B's neighborhood. -
@@ -1326,25 +1316,9 @@ Final thing! These references also need you to TRANSLATE:
- “Suicide Contagion and the Reporting of Suicide: Recommendations from a National Workshop” by O'Carroll et al (1994), endorsed by the frickin' Centers for Disease Control & Prevention (CDC). - -

- - Here's what they found increases suicide-contagion: - repeated, sensationalist coverage, - reporting the exact step-by-step method of suicide, - presenting suicide as a means to effectively accomplish ends. - So, their CDC-endorsed recommendation to all news outlets: don't do that. - -

- - To the news outlets' credit, they've mostly adopted these guidelines on suicide-contagion. - But less so on mass-shooting-contagion. - See next footnote. -
@@ -1361,22 +1335,13 @@ Final thing! These references also need you to TRANSLATE:

- Just like how news outlets take caution in how they report suicides - in order to minimize the risk of suicide-contagion, - (see previous footnote) - many journalists/criminologists are calling on news outlets to take more responsibility - in how they cover mass shootings, - in order to minimize the risk of murder-contagion. - -

- - See: the + Also see: the Don't Name Them campaign, - which recommends that news outlets NOT give fame to mass shooters by airing their name, manifestos, - and social media profile bio — - and instead, focus on the victims, the first responders, the civilian heroes, - and the grieving & healing community. + which urges that news outlets DO NOT 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.
@@ -1390,15 +1355,14 @@ Final thing! These references also need you to TRANSLATE:
“Lemmings of Wall Street” by Cass Sunstein, is a quick, non-technical read. - Published in Oct 2008, during the crash, - he looks at the whole mess through the lens of information cascades & social psychology. + Published in Oct 2008, right in the wake of the crash.

- “Complex contagions are weirder.” + “the complex contagion theory.”

@@ -1406,19 +1370,18 @@ Final thing! These references also need you to TRANSLATE: “Threshold Models of Collective Behavior” by Granovetter (1978) was the first time, as far as I know, anyone described a "complex contagion" model. - Although: 1) he didn't name it "complex contagion", - and 2) the "thresholds" in his model are - based on absolute # of exposure, not relative % of exposure. + (although he didn't use that specific name) + +

“Evidence for complex contagion models of social contagion from observational data” by Sprague & House (2017) - gets data to show that complex contagion does, in fact, exist. Well, on the internet, at least. - Science is hard, okay? + shows that complex contagions do, in fact, exist. (at least, in the social media data they looked at)

- Finally — and this paper tickles by nerd-bones — + Finally, “Universal behavior in a generalized model of contagion” by Dodds & Watts (2004) proposes a model that unifies all kinds of contagions: @@ -1427,6 +1390,14 @@ Final thing! These references also need you to TRANSLATE:
+ +

+ “the possum has 13 nipples” +

+
+ arranged in a ring of 12 nipples, plus one in the middle +
+

@@ -1434,14 +1405,11 @@ Final thing! These references also need you to TRANSLATE:

- This Orwell-inspired phrase was coined by Irving L. Janis way back in 1971! + This Orwell-inspired phrase was coined by Irving L. Janis in 1971. In his original article, - he investigates the Bay of Pigs fiasco (and other cases where groups of experts made terrible decisions), - and lists groupthink's causes, symptoms, and — thankfully, some remedies. - (for more on how to remedy groupthink, and how "small worlds" once barely - saved the world from the drink of nuclear war, check out - this footnote.) + Janis investigates cases of groupthink, lists its causes, and — thankfully — + some possible remedies.
@@ -1453,10 +1421,11 @@ Final thing! These references also need you to TRANSLATE:
These two types of social capital — "bonding" and "bridging" — - were coined by Robert Putnam in his insightful, layperson-friendly 2000 book, + were named by Robert Putnam in his insightful 2000 book, - Bowling Alone. Using a bunch of data and statistics, he finds that, - across almost all measures of social connectiveness, Americans are more alone than ever. + Bowling Alone. His discovery: + across almost all empircal measures of social connectiveness, + Americans are more alone than ever. Golly.
@@ -1468,25 +1437,14 @@ Final thing! These references also need you to TRANSLATE:
- “The Strength of Weak Ties” by Granovetter (1973) - showed the world a really counterintuitive discovery – - people get new, useful information (like job openings) not from their close friendships (strong ties), - but from their distant acquaintances (weak ties)! This is because people in your group will mostly have the same - information you do, but people outside your group will be more likely to have novel information. - -

- - So, that may lead you to think that more weak ties, more bridging, is always better - (at least, for spreading contagions). - But a newer paper, + showed that connections across groups helps spread simple contagions (like information), + but “Complex Contagions and the Weakness of Long Ties” by Centola & Macy (2007) - shows that while Granovetter's findings hold up for simple contagions, - they fail for complex contagions! And, in fact, - “as adoption thresholds increase, long ties can impede diffusion.” [emphasis added] - + showed that connections across groups may not help complex contagions, + and it fact, can hurt their spread!
@@ -1498,20 +1456,20 @@ Final thing! These references also need you to TRANSLATE:
- // Milgram, six degrees of separation popularized + The idea of the "small world" was popularized by + Stanley Milgram's 1969 experiment, + which showed that, on average, any two random people in the United States + were just six friendships apart — "six degrees of separation"!

- The "small world network" became an academic celebrity - with the release of + The small-world network got more mathematical meat on its bones with - “Collective dynamics of small-world networks” by Watts & Strogatz (1998). - // sweet spot (totally regular, random) - I'll admit, it's a really technical paper, - and I didn't understand it until I played - - the visual, interactive adaptation by Bret Victor! (2011) - Seriously, check that one out. + “Collective dynamics of small-world networks” 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!
@@ -1523,16 +1481,8 @@ Final thing! These references also need you to TRANSLATE:
- “Small-world brain networks” by Bassett & Bullmore (2006). - The authors do some magic science stuff to monkey and cat brains, - something something something, et voila, they're small-world networks! - -

- ...okay, this paper totally flew over my head. - But it's got 1500+ citations, so, it's probably fine. -
@@ -1546,15 +1496,8 @@ Final thing! These references also need you to TRANSLATE: “Collaboration and Creativity: The Small World Problem” by Uzzi & Spiro (2005). - This paper analyzed the social networks of artists in the Broadway scene from 1945 to 1989, - measured the financial & critical success of the musicals they made, - and discovered that, yup, you're most creative when you're in a small world network! - -

- - Also of note: they found that “the small world effect was parabolic [upside-down U shape]”. That is: - creativity was hurt by both too little and too much connectivity — - you need a sweet spot! + 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!
@@ -1566,23 +1509,10 @@ Final thing! These references also need you to TRANSLATE:
- + See “Social Physics” by MIT Professor Alex "Sandy" Pentland (2014) - analyzes a whole bunch of data, - and finds that people make collective decisions best when they're connected but not too connected - — a sweet spot. - -

- - Pentland was also the co-author of my favorite papers, - - “Evidence for a Collective Intelligence Factor in the Performance of Human Groups” by Woolley et al (2004). - Turns out, the secret sauce behind smart groups is "social sensitivity", or, empathy. - (but, as Irving Janis pointed out a few decades earlier, too much of a - buddy-buddy everyone-get-along feeling can lead to groupthink. - See this footnote.) - + for a data-based approach to collective intelligence.
@@ -1595,9 +1525,12 @@ Final thing! These references also need you to TRANSLATE:
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, + 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, the closest the world had ever been to full-scale nuclear war.

@@ -1614,7 +1547,7 @@ Final thing! These references also need you to TRANSLATE: And 2) he broke his team up into sub-groups before reconvening, which gave their group a "small world network"-like design! - Together, this "group design" allowed for a healthy diversity of opinion, + Together, this arrangement allowed for a healthy diversity of opinion, but without being too fractured — a wisdom of crowds.

@@ -1638,7 +1571,7 @@ Final thing! These references also need you to TRANSLATE: on Harvard Business Review, or from - Irving Janis's original article on groupthink. + the original article on groupthink.
@@ -1651,11 +1584,9 @@ Final thing! These references also need you to TRANSLATE:
Again, from Nicholas Christakis and James Fowler's - great, layperson-friendly book, + wonderful book, Connected (2009). - See this footnote for details on how they did their analysis. -
@@ -1674,9 +1605,8 @@ Final thing! These references also need you to TRANSLATE:
- Pst... wanna hear a secret? - Those keyboard shortcuts (1, 2, space, delete) - work not just in the Sandbox Mode, but in all the puzzles! + The keyboard shortcuts (1, 2, space, delete) + work in all 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 created all these puzzles. Have fun! diff --git a/js/chapters/C_Networks.js b/js/chapters/C_Networks.js index 6437c30..74b921f 100644 --- a/js/chapters/C_Networks.js +++ b/js/chapters/C_Networks.js @@ -168,12 +168,18 @@ SLIDES.push( type:"box", id:"networks_pre_puzzle", text:"networks_pre_puzzle", x:60, y:0, w:400, - lineHeight:1.3 + lineHeight:"1.3em" + }, + { + type:"box", + id:"networks_pre_puzzle_2", + text:"networks_pre_puzzle_2", x:60, y:107, w:400, + lineHeight:"1.3em" }, { type:"box", text:"optional_reading", x:60, y:220, w:400, h:30, - fontSize:17, color:"#bbb" + fontSize:"17px", color:"#bbb" } ] }, diff --git a/js/chapters/E_Complex_Contagion.js b/js/chapters/E_Complex_Contagion.js index e10f96a..fac788f 100644 --- a/js/chapters/E_Complex_Contagion.js +++ b/js/chapters/E_Complex_Contagion.js @@ -84,13 +84,6 @@ SLIDES.push( text:"complex_complex_3", x:480, y:0, w:480, h:540 }, - { - id:"end", - type:"box", - text:"complex_complex_3_end", - x:480, y:0, w:480, h:540, - hidden:true - }, // Sim { @@ -129,12 +122,11 @@ SLIDES.push( }); if(peepCount==sim.peeps.length){ var boxes = slideshow.boxes; - boxes.removeChildByID("complex_complex_3", true); - boxes.showChildByID("end", true); state.ended = true; sim.win({ small:true }); + slideshow.next(); } } @@ -142,6 +134,20 @@ SLIDES.push( }, +{ + remove:[ + {type:"box", id:"complex_complex_3"} + ], + add:[ + { + id:"end", + type:"box", + text:"complex_complex_3_end", + x:480, y:0, w:480, h:540 + } + ] +}, + { chapter: "Complex-Cascade", clear:true, diff --git a/js/chapters/I_Credits.js b/js/chapters/I_Credits.js index 140b911..a7f8a53 100644 --- a/js/chapters/I_Credits.js +++ b/js/chapters/I_Credits.js @@ -14,7 +14,7 @@ SLIDES.push( // CREDITS { type:"box", - text:"credits", x:280, y:0, w:400, h:70, align:"center", color:"#fff" + text:"credits", x:0, y:0, w:960, h:540 } ] diff --git a/js/chapters/J_Sandbox.js b/js/chapters/J_Sandbox.js index f2bd456..7f07fb0 100644 --- a/js/chapters/J_Sandbox.js +++ b/js/chapters/J_Sandbox.js @@ -27,21 +27,17 @@ SLIDES.push( // Simulation UI { type:"box", - x:35, y:375, + x:35, y:385, sim_ui:"red" }, // Words - /*{ - type:"box", - text:"sandbox_caption", - x:70, y:470, w:550, h:70 - }, { type:"box", - text:"sandbox_next", - x:605, y:455, w:300, h:100 - },*/ + text:"sandbox_caption", + x:660, y:500, w:300, h:40, + align:"right" + } ] diff --git a/js/lib/Sprite.js b/js/lib/Sprite.js index f40bcf8..2f23b36 100644 --- a/js/lib/Sprite.js +++ b/js/lib/Sprite.js @@ -13,9 +13,6 @@ function Sprite(config){ self.scaleY = 1; self.rotation = 0; // radians - // The image! - self.image = IMAGES[config.img]; - // Frames self.currentFrame = 0; self.totalFrames = config.frames; @@ -43,7 +40,8 @@ function Sprite(config){ ctx.scale(self.scaleX, self.scaleY); } ctx.translate(-self.pivotX, -self.pivotY); - ctx.drawImage(self.image, sx, sy, sw, sh, 0, 0, sw, sh); + var image = IMAGES[config.img]; + ctx.drawImage(image, sx, sy, sw, sh, 0, 0, sw, sh); ctx.restore(); }; diff --git a/js/main.js b/js/main.js index 9dd247d..b5c379f 100644 --- a/js/main.js +++ b/js/main.js @@ -40,9 +40,9 @@ subscribe("prepreload/done", function(){ window.requestAnimationFrame(update); // Go to THE SPLASH - slideshow.gotoChapter("Preloader"); - //slideshow.gotoChapter("Credits"); - //$("#navigation").style.display = "block"; + //slideshow.gotoChapter("Preloader"); + slideshow.gotoChapter("Credits"); + $("#navigation").style.display = "block"; // HACK - MOBILE IS HORRIBLE $all("a").forEach(function(a){ diff --git a/js/slideshow/Boxes.js b/js/slideshow/Boxes.js index 45fb30f..510c0ac 100644 --- a/js/slideshow/Boxes.js +++ b/js/slideshow/Boxes.js @@ -107,7 +107,7 @@ function Boxes(){ // Bonus boxes... box.querySelectorAll("bon").forEach(function(bon){ var title = $("bonus#"+bon.id+" > h3").innerHTML.trim(); - bon.innerHTML = "(?) "+title; + bon.innerHTML = title; bon.onclick = function(){ publish("bonus/show", [bon.id]); }; @@ -118,7 +118,7 @@ function Boxes(){ box.querySelectorAll("icon").forEach(function(icon){ // Create next button - var name = icon.getAttributeNames()[0]; + var name = icon.getAttribute("name"); var src = "sprites/icons/"+name+".png"; var img = new Image(); img.src = src; diff --git a/js/slideshow/Modal.js b/js/slideshow/Modal.js index 90b3dd3..cfac484 100644 --- a/js/slideshow/Modal.js +++ b/js/slideshow/Modal.js @@ -10,7 +10,7 @@ subscribe("bonus/show", function(bonus_id){ }); // SHOW REFERENCES -var SHOWING_SUPPORTERS = false; +//var SHOWING_SUPPORTERS = false; subscribe("reference/show", function(ref_id){ publish("sound/button"); @@ -20,8 +20,7 @@ subscribe("reference/show", function(ref_id){ var noteLength = $("#modal_content").innerText.length; // innerTEXT, so no links // HACK: IF IT'S PATREON PEOPLE, *NOW* SHOW IFRAME - if(!SHOWING_SUPPORTERS && ref_id=="supporters"){ - SHOWING_SUPPORTERS = true; // ONCE + if(ref_id=="supporters"){ $("#modal_content").innerHTML = footnote+'

'+ ''; } diff --git a/js/slideshow/Preloader.js b/js/slideshow/Preloader.js index 7d2681f..3855411 100644 --- a/js/slideshow/Preloader.js +++ b/js/slideshow/Preloader.js @@ -16,6 +16,10 @@ subscribe("prepreload", function(){ {id:"snip1", audio:"audio/snip1.mp3"}, {id:"snip2", audio:"audio/snip2.mp3"}, + // UI + {id:"sound", image:"sprites/ui/sound.png"}, + {id:"sharing", image:"sprites/ui/sharing.png"}, + ],function(progress){ if(progress==1){ publish("prepreload/done"); @@ -69,6 +73,10 @@ subscribe("preload", function(){ {id:"tutorial_connect", image:"sprites/tutorial_connect.png"}, {id:"tutorial_disconnect", image:"sprites/tutorial_disconnect.png"}, + // UI + {id:"arrow", image:"sprites/ui/arrow.png"}, + {id:"bonus", image:"sprites/ui/bonus.png"} + ],function(progress){ window.PRELOAD_PROGRESS = progress; }); diff --git a/sprites/bonus/ee.png b/sprites/bonus/ee.png new file mode 100644 index 0000000..8e86cfd Binary files /dev/null and b/sprites/bonus/ee.png differ diff --git a/sprites/bonus/swn.png b/sprites/bonus/swn.png deleted file mode 100644 index eafaf50..0000000 Binary files a/sprites/bonus/swn.png and /dev/null differ diff --git a/sprites/ui/arrow.png b/sprites/ui/arrow.png new file mode 100644 index 0000000..3d5b895 Binary files /dev/null and b/sprites/ui/arrow.png differ diff --git a/sprites/ui/bonus.png b/sprites/ui/bonus.png new file mode 100644 index 0000000..092c1ee Binary files /dev/null and b/sprites/ui/bonus.png differ