From bec3f354c758cd0add79c059618f498c234e8c2c Mon Sep 17 00:00:00 2001 From: Nicky Case Date: Sun, 22 Apr 2018 10:17:49 -0400 Subject: [PATCH] bonus box --- css/index.css | 17 +- index.html | 609 +++++++++++++++++++++++++++++++++---- js/slideshow/Modal.js | 27 +- js/slideshow/Navigation.js | 11 + js/slideshow/Preloader.js | 5 +- 5 files changed, 598 insertions(+), 71 deletions(-) diff --git a/css/index.css b/css/index.css index 508b75f..07d504f 100644 --- a/css/index.css +++ b/css/index.css @@ -234,16 +234,19 @@ b, strong{ } #modal h3{ - font-size: 1.5em; - margin-bottom: 0.5em; + font-size: 1.3em; + margin-bottom: 0.7em; + padding-top: 0.7em; + margin-top: 1em; + border-top: 2px solid #333; } #modal[size=small]{ - width: 640px; + width: 700px; height: 300px; } #modal[size=large]{ width: 800px; - height: 450px; + height: 540px; } #modal_close{ position: absolute; @@ -263,6 +266,12 @@ b, strong{ margin:1.5em; letter-spacing: 1px; } +#modal a{ + color: #ff4040; +} +#modal a:hover{ + color: #ff6060; +} /* NAVIGATION */ #navigation_container{ diff --git a/index.html b/index.html index a555361..6949a15 100644 --- a/index.html +++ b/index.html @@ -84,10 +84,6 @@ MY "WHY" FOR MAKING THIS: 5 5. It's A Small World -
6 6. In Conclusion... @@ -107,11 +103,11 @@ MY "WHY" FOR MAKING THIS:
? - Bonus Boxes! (Notes) + Bonus Boxes!
* - References + Links & References
- optional extra bonus notes ↑ + optional extra bonus notes! ↑
↓ links and references @@ -836,40 +832,241 @@ MY "WHY" FOR MAKING THIS: reset & re-draw - - - + + + - -

- BONUS BOX: How Else Can We Be Connected? -

-
- (blah blah blah, one-directional, weighted connections, etc) -
- +

- BONUS BOX: A quick response to James Surowiecki's The Wisdom of Crowds + A quick response to James Surowiecki's The Wisdom of Crowds

+
- (blah blah blah) + + + + First off, I'm not dissing + + this book. + It's a good book, and Surowiecki was trying to tackle the same question I am: + “why do some crowds turn to madness, or wisdom?” + +

+ + 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. + 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. + +

+ + 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, + “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". + +

+ + So that's what I'll try to explain in this explorable explanation: + how to get that sweet spot between independence and interdependence — + that is, how to get a wise crowd. +
+ - + +

- BONUS BOX: Wait, Where Was The Math? + What other kinds of connections are there?

+
- (blah blah blah: map, extending the model with ecologies or randomness, etc) + + 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: + +
+
+ + + 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: + the relationship only goes one way. + In contrast, "friends" is a bidirectional relationship: + the relationship goes both ways. (well, hopefully) + +
+
+ + + 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.) + +
+
+ + + 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! + 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. +
+ + + + +

+ What other kinds of contagions are there? +

+ +
+ + 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: + +
+
+ + + 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". + +
+
+ + + 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. + +
+
+ + + 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? + For example, a simple "madness" contagion and a complex "wisdom" contagion. + If someone's infected with madness, can they still be infected with wisdom? + Or vice versa? + Can someone be infected with both? + +
+
+ + + 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. + +
+ +

Further Reading

+
+ + 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: + +

+ + + + Book: + + 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! + + Here's a link to an excerpt. + + +
+
+ + + + 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! + +

+ + + + + 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. + +
+
+ + + + + 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/or diversity can arise from the bottom up. +
+ @@ -879,163 +1076,449 @@ MY "WHY" FOR MAKING THIS: +

- “a 1991 study showed that virtually all [college] students reported that their friends drank more than they did.” + “virtually all [college] students reported that their friends drank more than they did.”

+
- [link] + + “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.
+ +

“The Majority Illusion”

+
- [link] - [also, interactive NYT version] + + + “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! +
+

“strong statistical evidence that smoking, health, happiness, voting patterns, and cooperation levels are all contagious”

+
- [Nicholas Christakis and James Fowler, again] + + This is all laid out in Nicholas Christakis and James Fowler's + well-written, layperson-friendly 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. +
+

“some evidence that suicides are [contagious], too”

+
- [link] + + + “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. +
+ +

“some evidence that mass shootings are [contagious], too”

+
- [link - also Don't Say Their Names] + + + “Contagion in Mass Killings and School Shootings” by Towers et al (2015). + +

+ + 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 + + 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. +
+ +

“The world's financial institutions fell for such a cascade in 2008.”

+
- [link to Cass Sunstein's Lemmings of Wall Street right after the prices plunged - not technical] - + + “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.
+ +

“Complex contagions are weirder.”

+
- [link to empirical proof of twitter complex contagion] - [also, Granovetter's Threshold model] - [and Dodds & Watt's Universal Contagion] - [not to mention contrarians] + + + “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. + + + “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? + +

+ + Finally — and this paper tickles by nerd-bones — + + “Universal behavior in a generalized model of contagion” by Dodds & Watts (2004) + proposes a model that unifies all kinds of contagions: + simple and complex, biological and social! +
+ +

“groupthink”

+
- [link to Janis's Groupthink article] + This Orwell-inspired phrase was coined by Irving L. Janis way back 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.)
+ +

“bonding and bridging social capital”

+
- [link to Robert Putnam's Bowling Alone] + These two types of social capital — "bonding" and "bridging" — + were coined by Robert Putnam in his insightful, layperson-friendly 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. + Golly.
+ +

“bridging social capital has a sweet spot”

+
- [link to Granovetter's Strength of Weak Ties] - [and response for complex contagion, the Weakness of Long Ties!] + + + “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, + + “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] +
+ +

“the small world network”

+
- [link to Strogatz and Watts] - [also the Bret Victor version] + + // Milgram, six degrees of separation popularized + +

+ + The "small world network" became an academic celebrity + with the release of + + “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. +
+ +

- “[small world networks] describe how our neurons interact” + “[small world networks] describe how our neurons are connected”

+
- [link plz] + + + “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. +
+ +

“[small world networks] give rise to collective creativity”

+
- [link to that Broadway and small world study. note PARABOLIC relationship] + + + “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! +
+ +

“[small world networks] give rise to collective problem-solving”

+
- [link to Social Physics book] + + + “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.) +
+ +

- “[small world networks] helped us (barely) avoid nuclear war!” + “[small world networks] helped John F. Kennedy (barely) avoid nuclear war!”

+
- [JFK and the Cuban Missile Crisis, his small-world team undid his earlier screw-up - with the Bay of Pigs, -
- - -

- “Sandbox Mode” -

-
- pst... wanna hear a secret? those keyboard shortcuts (1,2,space,delete) - can edit not just the simulation in sandbox mode, but all the simulations - in this explorable explanation! 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! + + 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, + the closest the world had ever been to full-scale nuclear war. + +

+ + Yup, JFK really screwed up on that one. + +

+ + 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 "group design" allowed for a healthy diversity of opinion, + but without being too fractured — a wisdom of crowds. + +

+ + And so, with the same individuals who decided the Bay of Pigs, + but re-arranged collectively 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) + +

+ + And that's the story of how all of humanity almost died. + But a small world network saved the day! Sort of. + +

+ + You can read more about this + + on Harvard Business Review, + or from + + Irving Janis's original article on groupthink. +
+ +

“we influence [...] our friends' friends' friends!”

+
- [link to Connected by Nicholas Christakis and James Fowler] + Again, from Nicholas Christakis and James Fowler's + great, layperson-friendly book, + + Connected (2009). + See this footnote for details on how they did their analysis. +
+

“be skeptical of ideas that flatter you”

- yes, including all the ideas in this explorable explanation. + yes, including the ideas in this explorable explanation.
+ + +

+ ★ Sandbox Mode ★ +

+ +
+ Pst... wanna hear a secret? + Those keyboard shortcuts (1, 2, space, delete) + work not just in the Sandbox Mode, but in all the puzzles! + 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/slideshow/Modal.js b/js/slideshow/Modal.js index 3ee45d3..51e8a0c 100644 --- a/js/slideshow/Modal.js +++ b/js/slideshow/Modal.js @@ -10,7 +10,8 @@ subscribe("bonus/show", function(bonus_id){ subscribe("reference/show", function(ref_id){ var footnote = document.querySelector("reference#"+ref_id+" > div").innerHTML.trim(); $("#modal_content").innerHTML = footnote; - Modal.show(false); // show small for references + var noteLength = $("#modal_content").innerText.length; // innerTEXT, so no links + Modal.show(noteLength>500); // variable length }); // ESCAPE (keyboard shortcut) @@ -22,12 +23,34 @@ window.Modal = { show: function(large){ $("#modal_container").setAttribute("show","yes"); $("#modal").setAttribute("size", large ? "large" : "small"); + $("#modal_content_container").scrollTop = 0; // scroll to top }, hide: function(){ publish("sound/button"); $("#modal_container").removeAttribute("show"); + }, + showAll: function(thing){ + + // ALL the things, in one go! + var html = ""; + $all(thing).forEach(function(thing){ + html += "
"+thing.innerHTML+"
"; + }); + $("#modal_content").innerHTML = html; + + // Show in large box + Modal.show(true); + } }; $("#modal_bg").onclick = Modal.hide; -$("#modal_close").onclick = Modal.hide; \ No newline at end of file +$("#modal_close").onclick = Modal.hide; + +// Show big collected modals +subscribe("modal/bonus", function(){ + Modal.showAll("bonus"); +}); +subscribe("modal/references", function(){ + Modal.showAll("reference"); +}); \ No newline at end of file diff --git a/js/slideshow/Navigation.js b/js/slideshow/Navigation.js index 75c57a4..85f9940 100644 --- a/js/slideshow/Navigation.js +++ b/js/slideshow/Navigation.js @@ -33,6 +33,17 @@ function Navigation(){ })(nav, chapter); } + // If it's a modal... + var modal = nav.getAttribute("modal"); + if(modal){ + (function(nav, modal){ + nav.onclick = function(){ + publish("sound/button"); + publish("modal/"+modal); + }; + })(nav, modal); + } + }); subscribe("slideshow/goto/",function(chapterID){ diff --git a/js/slideshow/Preloader.js b/js/slideshow/Preloader.js index dc05a3a..d4661fd 100644 --- a/js/slideshow/Preloader.js +++ b/js/slideshow/Preloader.js @@ -21,8 +21,9 @@ subscribe("prepreload", function(){ var pre_preloader = $("#pre_preloader"); pre_preloader.parentNode.removeChild(pre_preloader); - slideshow.gotoChapter("Preloader"); - //slideshow.gotoChapter("Simple-Cascade"); + //slideshow.gotoChapter("Preloader"); + slideshow.gotoChapter("Credits"); + $("#navigation").style.display = "block"; publish("preload"); }