diff --git a/index.html b/index.html index 7866b15..ea9ed5e 100644 --- a/index.html +++ b/index.html @@ -56,15 +56,15 @@ Cursor is allowed to flow EVERYWHERE though...
1 - 1. Networks + 1. Connections
2 - 2. Simple Contagion + 2. Contagions
3 - 3. Complex Contagion + 3. Complex Contagions
4 @@ -139,8 +139,8 @@ let's play! →


- Isaac Newton was pretty sure he was one smart cookie. - I mean, after inventing calculus, classical mechanics, and a theory of gravity, + Sir Isaac Newton was pretty sure he was one smart cookie. + I mean, after inventing calculus and a theory of gravity, he should be smart enough to do some financial investing, right? Anyway, long story short, he lost $4,600,000 (in today's dollars) @@ -172,11 +172,10 @@ let's play! → But why do some crowds become wise or mad? Can we calculate the madness, or wisdom, of people? - According to a new field of science, - the answer is not to look at a crowd's individuals, - but at... + According to the new field of network science, + the answer is not in the individual people, but in... - ...its network → + ...their connections →
@@ -290,7 +289,7 @@ let's play! → But ideas/behaviors aren't just passively observed, they actively spread. So now, let's look at something network scientists call... - “Simple Contagion!” → + “Contagions!” → ← bonus challenge: make everyone think less than half of their friends are binge-drinkers @@ -303,30 +302,112 @@ let's play! → -blah blah simple + Below, we start with one person (img) who has some information. + Some misinformation. "Fake news", as the cool kids say. + And every day, that person spreads the rumor to their friends. + And they spread it to their friends. And so on. +

+ Run the simulation, step-by-step ↓ + (p.s: you can't draw while the sim's running) + + + + Note: despite the negative name, "contagions" can be good or bad. + There's strong statistical evidence(*) that + smoking, happiness, obesity, voting patterns, and cooperation levels + are all "contagious" -- + and even some evidence that suicides(*) and mass shootings(*) are, too. -next + well that's depressing → -blah blah simple cascade + Indeed it is. + Anyway, PUZZLE TIME! +
+ Draw a network & run the simulation, + so that everyone gets infected with the "contagion". + (new rule: you can't cut the thick connections) -onwards... + fan-flipping-tastic → + + + + This madness-spreading is called an "information cascade". + Mr. Newton fell for such a cascade in 1720. + The world's markets fell for such a cascade in 2008. + But so what? You already knew ideas spread. + However, network scientists recently found a new kind of contagion, + one that spreads strangely. And they're called... + + + + “Complex Contagions!” → -blah blah complex vs simple + + Truth may be stranger than fiction, but it doesn't sell as well. + +

+ + Simple contagions, like juicy rumors or hot takes, + only need one "infected" friend to spread. + That doesn't mean the contagion will spread, + just that one exposure can be enough to spread. + This, by the way, is how biological contagions like viruses work. + +

+ + Complex contagions are weirder. + Some things -- like norms, habits and hard-to-accept ideas -- + need more social encouragement. + They need not a minimum number of friends to spread, + but a minimum percentage of friends to spread!(*) + +

+ + On the right, a person needs at least 25% of their friends to + adopt a complex fact (img) before they do. + Try "infecting" them all with wisdom! → + - -herp derp blah blah -next + + + CAUTION: + just because an idea/behavior is "complex" doesn't mean it's good, + (e.g. conspiracy theories) + and just because it's "simple" doesn't mean it's bad! + (e.g. "floss daily") + +

+ + Think of it this way: + simple contagions are weeds, complex contagions are trees, + and a network is an ecosystem. + Sometimes weeds are good, sometimes trees are bad. + But if your ecosystem can only support weeds, + something's very wrong. + +

+ + (BONUS: OTHER KINDS OF CONTAGIONS) + +

+ + So, how do we make sure our social ecosystem is healthy? + Let's revisit... + + ...the cascade! + + diff --git a/js/chapters/2_Simple_Contagion.js b/js/chapters/2_Simple_Contagion.js index 0fb352b..bc2d8ab 100644 --- a/js/chapters/2_Simple_Contagion.js +++ b/js/chapters/2_Simple_Contagion.js @@ -20,13 +20,16 @@ SLIDES.push( // Intro text { type:"box", + id:"_2_simple", text:"_2_simple", - x:0, y:0, w:350, h:200 + x:80, y:0, w:800, h:160, + align: "center" }, // Lil' contagion { type:"sim", + id:"contagion", x:0, y:80, fullscreen: true, network: { @@ -43,6 +46,7 @@ SLIDES.push( // UI for the simulation { type:"box", + id:"ui", x:380, y:165, sim_ui:"red" }, @@ -68,25 +72,58 @@ SLIDES.push( if(peep.infected) peepCount++; }); if(peepCount==sim.peeps.length){ - var boxes = slideshow.boxes; - boxes.showChildByID("end", true); + /*var boxes = slideshow.boxes; + boxes.showChildByID("end", true);*/ state.ended = true; + slideshow.next(); } } } }, +{ + remove:[ + {type:"box", id:"_2_simple"} + ], + move:[ + {type:"box", id:"ui", y:5}, + {type:"sim", id:"contagion", y:-80} + ], + add:[ + { + type:"box", + text:"_2_simple_2", + x:0, y:390, w:650, h:100, + align: "right" + }, + { + type:"box", + text:"_2_simple_end", + x:660, y:440, w:300, h:90 + } + ] +}, { chapter: "Simple-Cascade", clear:true, add:[ + // Intro text + { + type:"box", + id:"_2_cascade", + text:"_2_cascade", + x:80, y:0, w:800, h:100, + align: "center" + }, + // Sim { type:"sim", - x:0, y:-140, + id:"contagion", + x:0, y:-60, fullscreen: true, network: { "contagion":0, @@ -103,23 +140,17 @@ SLIDES.push( // UI for the simulation { type:"box", - x:380, y:290, + id:"ui", + x:380, y:360, sim_ui:"red" }, - // Intro text - { - type:"box", - text:"_2_cascade", - x:0, y:400, w:600, h:140 - }, - // End text { id:"end", type:"box", text:"_2_cascade_end", - x:660, y:440, w:300, h:100, + x:330, y:460, w:300, h:100, hidden:true }, @@ -145,4 +176,27 @@ SLIDES.push( } }, +{ + remove:[ + {type:"box", id:"_2_cascade"}, + {type:"box", id:"end"} + ], + move:[ + {type:"box", id:"ui", y:360-80}, + {type:"sim", id:"contagion", y:-140} + ], + add:[ + { + type:"box", + text:"_2_post_cascade", + x:0, y:390, w:650, h:150, + align: "right" + }, + { + type:"box", + text:"_2_post_cascade_end", + x:660, y:450, w:300, h:90 + } + ] +}, ); \ No newline at end of file diff --git a/js/chapters/3_Complex_Contagion.js b/js/chapters/3_Complex_Contagion.js index 0ca92df..cc5c1bc 100644 --- a/js/chapters/3_Complex_Contagion.js +++ b/js/chapters/3_Complex_Contagion.js @@ -11,8 +11,9 @@ SLIDES.push( // Intro text { type:"box", + id:"_3_complex", text:"_3_complex", - x:0, y:0, w:360, h:370 + x:0, y:0, w:480, h:540 }, // Sim @@ -22,46 +23,37 @@ SLIDES.push( fullscreen: true, network: { "contagion":0.25, - "peeps":[[432,144,1],[438,410,1],[636,139,0],[638,414,0],[789,68,0],[916,101,0],[855,195,0],[798,320,0],[887,346,0],[917,445,0],[840,503,0]], - "connections":[[0,2,0],[2,4,0],[2,5,0],[6,2,0],[1,3,0],[3,10,0],[3,7,0],[8,3,0],[9,3,0]] + "peeps":[[819,90,0],[911,182,0],[905,310,0],[821,413,0],[688,252,0],[551,251,1]], + "connections":[[4,3,0],[2,4,0],[4,1,0],[4,0,0]] }, options:{ infectedFrame: 3, - scale: 1.25 + scale: 1.75 } }, // UI for the simulation { type:"box", - x:440, y:225, + x:520, y:340, sim_ui:"red" - }, - - // End text - { - id:"end", - type:"box", - text:"_3_complex_end", - x:0, y:370, w:360, h:170, align:"right", - hidden:true - }, + } ], onupdate:function(slideshow, state){ - // Show end if at least 5 infected + // Show end if ALL infected if(!state.ended){ var sim = slideshow.simulations.sims[0]; var peepCount = 0; sim.peeps.forEach(function(peep){ if(peep.infected) peepCount++; }); - if(peepCount>=5){ - var boxes = slideshow.boxes; - boxes.showChildByID("end", true); + if(peepCount==sim.peeps.length){ state.ended = true; + sim.win(); + slideshow.next(); } } @@ -69,6 +61,19 @@ SLIDES.push( }, +{ + remove:[ + {type:"box", id:"_3_complex"} + ], + add:[ + { + type:"box", + text:"_3_complex_2", + x:0, y:0, w:480, h:540 + } + ] +}, + { chapter: "Complex-Cascade", clear:true, diff --git a/js/main.js b/js/main.js index 596e7f8..1a30b84 100644 --- a/js/main.js +++ b/js/main.js @@ -29,6 +29,6 @@ window.onload = function(){ window.requestAnimationFrame(update); // First slide! - slideshow.gotoChapter("Networks-Majority"); + slideshow.gotoChapter("Complex"); } \ No newline at end of file diff --git a/js/slideshow/Slideshow.js b/js/slideshow/Slideshow.js index 81f6347..ec76eee 100644 --- a/js/slideshow/Slideshow.js +++ b/js/slideshow/Slideshow.js @@ -72,8 +72,18 @@ function Slideshow(){ slide.move.forEach(function(childConfig){ switch(childConfig.type){ case "box": - //var box = self.boxes.getChildByID(childConfig.id); - //tweenBox(box, childConfig); + var box = self.boxes.getChildByID(childConfig.id); + box.classList.add("transitionable"); + var from = { + x: parseInt(box.style.left), + y: parseInt(box.style.top) + }; + var to = { + x: (childConfig.x===undefined) ? from.x : childConfig.x, + y: (childConfig.y===undefined) ? from.y : childConfig.y + }; + box.style.left = to.x+"px"; + box.style.top = to.y+"px"; break; case "sim": var sim = self.simulations.getChildByID(childConfig.id);