+
@@ -339,10 +343,10 @@ let's play! →
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.
+ The world's financial institutions 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...
+ However, network scientists recently found a new, strange kind of contagion.
+ And they're called...
@@ -373,7 +377,7 @@ let's play! →
- On the right, a person needs at least 25% of their friends to
+ 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! →
@@ -473,92 +477,197 @@ let's play! →
- So, too connected, and ideas are crushed.
- But, too disconnected, and ideas can't even spread.
- So, how can we "design" a crowd, a group, a society with...
+ So, that's how to get crowd madness.
+ But how can we "design" for crowd wisdom?
+ In short, two words:
- ...the right balance?
+ Bonding & Bridging →
+
+ ← Too few connections, and an idea can't spread.
+
+ Too many connections, and you get groupthink. →
+
+
+
+
+ Find the sweet spot, and draw a group that's just connected enough
+ to spread a complex idea! ↓
+
+
+
+
+ This is called bonding social capital,
+ the strength of the connections within a single group.
+ But what about the connections...
+ ...between groups?
+
+
+
+ As you might have guessed, bridging social capital
+ is the strength of the connections between groups.
+ This is important, because it helps groups break out of their insular echo chambers!
+
+ Try to "infect" everyone with wisdom:
+
+
+
+ Like bonding, bridging social capital has a sweet spot.
+ (optional challenge: draw a bridge so thick that the complex contagion
+ can't pass through it!)
+
+ Now that we know how to "design" connections within and between groups, let's...
+ ...do BOTH. →
+
+
+
+
+ FINAL PUZZLE!
+
+ Draw connections within groups (bonding) and between groups (bridging)
+ however you want, to spread wisdom to everyone:
+
+
+
+
+ derp derp
+ derp derp →
+
+ // "SMALL WORLD"
+ // e pluribus unum
+ // unity in diversity?
+ // examples
+ // JFK story in footnote
+
+
+
+
+
+
+ NOTE: "Sandbox Mode" is totally optional.
+ Feel free to skip it, or play around!(*)
+ When you're done, let's recap...
+
+
+ what we learnt today!
+
+
+
+ Contagion:
+
+
+ simple
+
+
+ complex
+
+
+ The Contagion's Color:
+
+
+ Select a tool...
+
+
+
+ Draw Network
+
+
+ Add Person
+
+
+ Add "Infected"
+
+
+ Drag Person
+
+
+ Delete Person
+
+
+ CLEAR IT ALL
+
+
+
+ (...or, use keyboard shortcuts!)
+
+
+
+ [1]: Add Person [2]: Add "Infected"
+
+ [Space]: Drag [Backspace]: Delete
+
+
+
+ IN CONCLUSION:
+ Contagion & Connections.
+ derp
+
+
+
+
+ in the final circle
+ recap all stories,
+ HUMAN BRAIN.
+ derp
+
+
+
+
+
+ GOOD OMENS QUOTE.
+ derp
+
+
+
-FWEEEEEE
+ CREDITS
+
+ CREDITS
+
+ CREDITS
+
+ CREDITS
+
+ CREDITS
-WIN
+ WIN
-> start
+ > start
->> next
+ >> next
-↺ reset
-
-
-Contagion:
-
-
-simple
-
-
-complex
-
-
-The Contagion's Color:
-
-
-Select a tool...
-
-
-
-Draw Network
-
-
-Add Person
-
-
-Add "Infected"
-
-
-Move Person
-
-
-Delete Person
-
-
-CLEAR IT ALL
-
-
-
-(...or, use keyboard shortcuts!)
-
-
-[1]: Add Person
-
-[2]: Add "Infected" Person
-
-[Space]: Move Person
-
-[Backspace]: Delete Person
+ ↺ reset
+
+
HERP DERP
diff --git a/js/chapters/0_Introduction.js b/js/chapters/0_Introduction.js
index becb1d2..903434a 100644
--- a/js/chapters/0_Introduction.js
+++ b/js/chapters/0_Introduction.js
@@ -1,4 +1,12 @@
// 0 - INTRODUCTION
+
+// FOR REUSE:
+var SPLASH_NETWORK = {
+ "contagion":0,
+ "peeps":[[-432,-121,0],[308,-101,0],[401,-224,0],[-226,392,0],[-217,-397,0],[303,356,0],[-70,-439,0],[280,-373,0],[35,-322,0],[125,299,0],[-549,-108,0],[489,118,0],[387,78,0],[189,385,0],[-425,-214,0],[69,602,0],[214,244,0],[305,108,0],[15,436,0],[389,236,0],[-271,-178,0],[-100,-308,0],[-106,440,0],[-346,4,0],[172,-372,0],[-575,-257,0],[457,-131,0],[-215,-242,0],[-318,-58,0],[22,323,0],[122,475,0],[388,461,0],[-492,27,0],[114,-303,0],[307,-252,0],[487,-347,0],[264,187,0],[231,-226,0],[-181,269,0],[-68,317,0],[-333,399,0],[-437,289,0],[-286,259,0],[-265,186,0],[-571,201,0],[-317,66,0],[618,35,0],[587,190,0],[574,-217,0],[-259,546,0],[-296,-307,0],[-618,53,0],[-127,-531,0],[489,336,0],[324,-9,0],[261,551,0],[-275,-535,0],[-396,-444,0],[-447,-333,0],[477,-26,0],[-406,486,0],[22,-464,0],[-3,-619,0],[-86,587,0],[382,-457,0],[266,-556,0],[119,-529,0],[-421,168,0]],
+ "connections":[[24,37,0],[37,1,0],[1,2,0],[26,1,0],[34,1,0],[13,9,0],[9,30,0],[30,29,0],[29,9,0],[9,18,0],[18,29,0],[18,30,0],[30,13,0],[13,29,0],[18,13,0],[36,19,0],[19,5,0],[19,12,0],[19,16,0],[17,19,0],[11,19,0],[14,25,0],[10,25,0],[10,14,0],[28,20,0],[20,0,0],[0,32,0],[8,21,0],[6,8,0],[21,27,0],[4,21,0],[4,27,0],[21,6,0],[39,3,0],[3,38,0],[38,22,0],[22,39,0],[39,38,0],[22,3,0],[6,4,0],[23,32,0],[42,40,0],[40,41,0],[41,42,0],[37,7,0],[37,33,0],[45,43,0],[47,46,0],[55,31,0],[57,56,0],[58,50,0],[59,54,0],[60,49,0],[62,52,0],[62,61,0],[63,15,0],[64,65,0],[65,66,0],[44,51,0],[48,35,0],[67,43,0],[67,45,0],[61,52,0],[23,0,0],[28,0,0]]
+};
+
SLIDES.push(
{
@@ -12,11 +20,7 @@ SLIDES.push(
type:"sim",
x:960/2, y:540/2,
fullscreen: true,
- network: {
- "contagion":0,
- "peeps":[[-432,-121,0],[308,-101,0],[401,-224,0],[-226,392,0],[-217,-397,0],[303,356,0],[-70,-439,0],[280,-373,0],[35,-322,0],[125,299,0],[-549,-108,0],[489,118,0],[387,78,0],[189,385,0],[-425,-214,0],[69,602,0],[214,244,0],[305,108,0],[15,436,0],[389,236,0],[-271,-178,0],[-100,-308,0],[-106,440,0],[-346,4,0],[172,-372,0],[-575,-257,0],[457,-131,0],[-215,-242,0],[-318,-58,0],[22,323,0],[122,475,0],[388,461,0],[-492,27,0],[114,-303,0],[307,-252,0],[487,-347,0],[264,187,0],[231,-226,0],[-181,269,0],[-68,317,0],[-333,399,0],[-437,289,0],[-286,259,0],[-265,186,0],[-571,201,0],[-317,66,0],[618,35,0],[587,190,0],[574,-217,0],[-259,546,0],[-296,-307,0],[-618,53,0],[-127,-531,0],[489,336,0],[324,-9,0],[261,551,0],[-275,-535,0],[-396,-444,0],[-447,-333,0],[477,-26,0],[-406,486,0],[22,-464,0],[-3,-619,0],[-86,587,0],[382,-457,0],[266,-556,0],[119,-529,0],[-421,168,0]],
- "connections":[[24,37,0],[37,1,0],[1,2,0],[26,1,0],[34,1,0],[13,9,0],[9,30,0],[30,29,0],[29,9,0],[9,18,0],[18,29,0],[18,30,0],[30,13,0],[13,29,0],[18,13,0],[36,19,0],[19,5,0],[19,12,0],[19,16,0],[17,19,0],[11,19,0],[14,25,0],[10,25,0],[10,14,0],[28,20,0],[20,0,0],[0,32,0],[8,21,0],[6,8,0],[21,27,0],[4,21,0],[4,27,0],[21,6,0],[39,3,0],[3,38,0],[38,22,0],[22,39,0],[39,38,0],[22,3,0],[6,4,0],[23,32,0],[42,40,0],[40,41,0],[41,42,0],[37,7,0],[37,33,0],[45,43,0],[47,46,0],[55,31,0],[57,56,0],[58,50,0],[59,54,0],[60,49,0],[62,52,0],[62,61,0],[63,15,0],[64,65,0],[65,66,0],[44,51,0],[48,35,0],[67,43,0],[67,45,0],[61,52,0],[23,0,0],[28,0,0]]
- },
+ network: SPLASH_NETWORK,
options:{
splash: true,
randomStart: 20
diff --git a/js/chapters/1_Networks.js b/js/chapters/1_Networks.js
index d3ebfda..5f6d38c 100644
--- a/js/chapters/1_Networks.js
+++ b/js/chapters/1_Networks.js
@@ -294,13 +294,14 @@ SLIDES.push(
id:"_1_post_puzzle",
text:"_1_post_puzzle", x:560, y:0, w:400
},
- {
+ /*{
type:"box",
id:"_1_post_puzzle_bonus",
text:"_1_post_puzzle_bonus", x:170, y:1000 // offscreen!
- },
+ },*/
],
+ /*
onupdate:function(slideshow, state){
// How many peeps passed?
@@ -322,6 +323,7 @@ SLIDES.push(
}
}
+ */
}
diff --git a/js/chapters/3_Complex_Contagion.js b/js/chapters/3_Complex_Contagion.js
index 4592ec2..9186dba 100644
--- a/js/chapters/3_Complex_Contagion.js
+++ b/js/chapters/3_Complex_Contagion.js
@@ -331,8 +331,7 @@ SLIDES.push(
{
type:"box",
text:"_3_groupthink",
- x:460, y:0, w:500, h:540,
- lineHeight:"1.4em"
+ x:460, y:0, w:500, h:540
},
diff --git a/js/chapters/4_Bonding_And_Bridging.js b/js/chapters/4_Bonding_And_Bridging.js
index 862fb22..5b19c9f 100644
--- a/js/chapters/4_Bonding_And_Bridging.js
+++ b/js/chapters/4_Bonding_And_Bridging.js
@@ -6,22 +6,87 @@ SLIDES.push(
clear:true,
add:[
+
// Sim
+ // DRAWING FOR SOFT CONSTRAINTS...
{
type:"sim",
x:0, y:130,
fullscreen: true,
network: {
"contagion":0.25,
- "peeps":[[92,52,1],[178,54,0],[25,131,0],[83,213,0],[174,213,0],[233,135,0],[421,50,1],[365,141,0],[423,230,0],[527,228,0],[586,135,0],[522,54,0],[772,50,1],[711,128,0],[770,211,0],[864,210,0],[933,126,0],[858,52,0]],
- "connections":[[13,12,0],[12,17,0],[16,15,0],[15,14,0],[14,13,0],[13,16,0],[16,14,0],[14,17,0],[17,15,0],[15,12,0],[12,16,0],[15,13,0],[17,16,0],[14,12,0],[13,17,0],[0,1,0],[2,5,0],[4,3,0]]
+ "peeps":[
+ [90,-67,1],[181,-71,0],[36,21,0],[107,98,0],[206,92,0],[244,6,0],
+ [416,106,1],[352,181,0],[415,267,0],[528,268,0],[595,186,0],[532,107,0],
+ [769,-68,1],[701,6,0],[753,96,0],[855,110,0],[928,35,0],[867,-59,0]
+ ],
+ "connections":[[13,12,0],[12,17,0],[16,15,0],[14,13,0],[13,16,0],[14,17,0],[17,15,0],[15,12,0],[12,16,0],[15,13,0],[17,16,0],[14,12,0],[13,17,0],[0,1,0],[2,5,0],[4,3,0],[15,14,0],[14,16,0]]
},
options:{
infectedFrame: 3,
scale: 1
}
},
- ]
+
+ // UI for the simulation
+ {
+ type:"box",
+ id:"ui",
+ x:370, y:445,
+ sim_ui:"blue"
+ },
+
+ // Words
+ {
+ type:"box",
+ text:"bonding_1",
+ x:230, y:0+15, w:500, h:70,
+ align:"center"
+ },
+
+ // Words 2
+ {
+ type:"box",
+ text:"bonding_2",
+ x:300, y:70+15, w:360, h:100,
+ align:"center"
+ },
+
+ // Words End
+ {
+ id:"end",
+ type:"box",
+ text:"bonding_end",
+ x:660, y:290, w:300, h:250,
+ hidden:true
+ }
+
+ ],
+
+ onupdate:function(slideshow, state){
+
+ // If Peeps[6] to Peep[11] pass..
+ var sim = slideshow.simulations.sims[0];
+ var peepCount = 0;
+ for(var i=6; i<=11; i++){
+ var peep = sim.peeps[i];
+ if(peep.infected) peepCount++;
+ }
+
+ // Win
+ if(!state.ended){
+ if(peepCount==6){
+ var boxes = slideshow.boxes;
+ boxes.showChildByID("end", true);
+ state.ended = true;
+ sim.win({
+ x:330+5, y:160-120+5,
+ width:280, height:280
+ });
+ }
+ }
+
+ }
},
@@ -30,15 +95,16 @@ SLIDES.push(
clear:true,
add:[
+
// Sim
{
type:"sim",
- x:0, y:0,
+ x:-70, y:-30,
fullscreen: true,
network: {
"contagion":0.25,
- "peeps":[[314,58,1],[418,87,0],[234,139,0],[277,234,0],[386,264,0],[460,180,0],[538,390,0],[617,309,0],[719,333,0],[766,432,0],[680,514,0],[572,491,0]],
- "connections":[[7,6,0],[6,11,0],[11,10,0],[9,8,0],[8,7,0],[6,10,0],[6,9,0],[9,11,0],[11,7,0],[7,10,0],[9,7,0],[8,10,0],[10,9,0],[6,8,0],[8,11,0],[0,1,0],[2,5,0],[4,3,0]]
+ "peeps":[[182,92,1],[300,106,0],[107,196,0],[151,300,0],[301,309,0],[354,213,0],[441,384,0],[500,290,0],[644,304,0],[691,422,0],[621,510,0],[491,488,0]],
+ "connections":[[6,7,1],[7,8,1],[8,9,1],[9,10,1],[10,11,1],[11,6,1],[6,9,1],[9,11,1],[11,8,1],[8,10,1],[10,7,1],[7,9,1],[11,7,1],[6,10,1],[6,8,1],[0,1,1],[1,5,1],[5,4,1],[4,3,1],[2,3,1],[2,0,1],[3,1,1]]
},
options:{
infectedFrame: 3,
@@ -46,7 +112,53 @@ SLIDES.push(
startUncuttable: true
}
},
- ]
+
+ // UI for the simulation
+ {
+ type:"box",
+ id:"ui",
+ x:95, y:390,
+ sim_ui:"blue"
+ },
+
+ // Words
+ {
+ type:"box",
+ text:"bridging_1",
+ x:340, y:30, w:620, h:120
+ },
+
+ // Words End
+ {
+ id:"end",
+ type:"box",
+ text:"bridging_end",
+ x:660, y:180, w:300, h:360,
+ hidden:true
+ }
+
+ ],
+
+ onupdate:function(slideshow, state){
+
+ // If ALL infected...
+ var sim = slideshow.simulations.sims[0];
+ var peepCount = 0;
+ sim.peeps.forEach(function(peep){
+ if(peep.infected) peepCount++;
+ });
+
+ // Win
+ if(!state.ended){
+ if(peepCount==sim.peeps.length){
+ var boxes = slideshow.boxes;
+ boxes.showChildByID("end", true);
+ state.ended = true;
+ sim.win();
+ }
+ }
+
+ }
},
@@ -55,15 +167,16 @@ SLIDES.push(
clear:true,
add:[
+
// Sim
// use a DRAWING to impose SOFT CONSTRAINTS
{
type:"sim",
- x:0, y:0,
+ x:150, y:0,
fullscreen: true,
network: {
"contagion":0.25,
- "peeps":[[474,46,1],[578,100,0],[388,94,0],[568,195,0],[392,190,0],[486,233,0],[273,318,0],[183,363,0],[183,447,0],[256,498,0],[355,376,0],[347,469,0],[630,367,0],[696,308,0],[791,360,0],[784,442,0],[725,495,0],[637,450,0]],
+ "peeps":[[485,50,1],[581,97,0],[389,101,0],[579,200,0],[399,193,0],[487,243,0],[290,312,0],[201,358,0],[196,446,0],[278,509,0],[381,374,0],[367,469,0],[596,370,0],[680,315,0],[778,354,0],[784,454,0],[700,506,0],[604,459,0]],
"connections":[]
},
options:{
@@ -72,7 +185,54 @@ SLIDES.push(
startUncuttable: true
}
},
- ]
+
+ // UI for the simulation
+ {
+ type:"box",
+ id:"ui",
+ x:70, y:190,
+ sim_ui:"blue"
+ },
+
+
+ // Words
+ {
+ type:"box",
+ text:"bb_1",
+ x:0, y:10, w:350, h:170
+ },
+
+ // Words
+ {
+ id:"end",
+ type:"box",
+ text:"bb_2",
+ x:0, y:310, w:300, h:230,
+ //hidden: true
+ }
+
+ ],
+
+ onupdate:function(slideshow, state){
+
+ // If ALL infected...
+ var sim = slideshow.simulations.sims[0];
+ var peepCount = 0;
+ sim.peeps.forEach(function(peep){
+ if(peep.infected) peepCount++;
+ });
+
+ // Win
+ if(!state.ended){
+ if(peepCount==sim.peeps.length){
+ var boxes = slideshow.boxes;
+ boxes.showChildByID("end", true);
+ state.ended = true;
+ sim.win();
+ }
+ }
+
+ }
},
diff --git a/js/chapters/5_Sandbox.js b/js/chapters/5_Sandbox.js
index 01c0b34..8648128 100644
--- a/js/chapters/5_Sandbox.js
+++ b/js/chapters/5_Sandbox.js
@@ -12,10 +12,10 @@ SLIDES.push(
x:0, y:0,
fullscreen: true,
network: {
- "contagion":0,
- "peeps":[[443,213,1],[570,309,0],[686,194,0]],
+ "contagion":0.25,
+ "peeps":[[506,195,1],[621,270,0],[724,194,0]],
"connections":[[0,1,0],[1,2,0]]
- }
+ },
},
// The Sandbox UI
@@ -28,9 +28,21 @@ SLIDES.push(
// Simulation UI
{
type:"box",
- x:35, y:450,
+ x:35, y:365,
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
+ },
]
diff --git a/js/chapters/6_Conclusion.js b/js/chapters/6_Conclusion.js
index f0b8cf4..431da98 100644
--- a/js/chapters/6_Conclusion.js
+++ b/js/chapters/6_Conclusion.js
@@ -1,7 +1,36 @@
// 0 - INTRODUCTION
SLIDES.push(
-{
+/*{
chapter: "Conclusion",
clear:true
-}
+}*/
+
+{
+ chapter: "Conclusion",
+ clear:true,
+
+ add:[
+
+ // Splash
+ {
+ type:"sim",
+ x:960/2, y:540/2,
+ fullscreen: true,
+ network: SPLASH_NETWORK,
+ options:{
+ splash: true,
+ randomStart: 20
+ }
+ },
+
+ // Words
+ {
+ type:"box",
+ text:"conclusion_2", x:210, y:0, w:540, h:540, align:"center"
+ },
+
+ ]
+
+},
+
);
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 9a5352d..119a17e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -29,6 +29,6 @@ window.onload = function(){
window.requestAnimationFrame(update);
// First slide!
- slideshow.gotoChapter("Complex-Groupthink");
+ slideshow.gotoChapter("Sandbox");
}
\ No newline at end of file
diff --git a/js/sim/Simulations.js b/js/sim/Simulations.js
index 06ac02c..4a66be4 100644
--- a/js/sim/Simulations.js
+++ b/js/sim/Simulations.js
@@ -315,7 +315,7 @@ function Sim(config){
self.confetti = [];
self.winWord = {x:0, y:0, ticker:-1};
- self.win = function(){
+ self.win = function(bounds){
// ONLY ONCE
if(self.wonBefore) return;
@@ -324,7 +324,7 @@ function Sim(config){
// Get center of peeps
var fullscreenOffsetX = config.x + simOffset.x;
var fullscreenOffsetY = config.y + simOffset.y;
- var bounds = getBoundsOfPoints(self.peeps);
+ bounds = bounds || getBoundsOfPoints(self.peeps); // OPTIONAL BOUNDS
var cx = bounds.x + bounds.width/2;
var cy = bounds.y + bounds.height/2;
cx += fullscreenOffsetX;
diff --git a/js/slideshow/SandboxUI.js b/js/slideshow/SandboxUI.js
index 39accec..23e6827 100644
--- a/js/slideshow/SandboxUI.js
+++ b/js/slideshow/SandboxUI.js
@@ -44,9 +44,11 @@ function SandboxUI(container){
// Choose Color of Peeps //
///////////////////////////
+ var GAP = "0.5em";
+
var colorChooserLabel = document.createElement("div");
colorChooserLabel.innerHTML = getWords("sandbox_color_chooser");
- colorChooserLabel.style.marginTop = "1em";
+ colorChooserLabel.style.marginTop = GAP;
var colorChooser = new ChooseOne({
options:[
1, // red
@@ -75,7 +77,7 @@ function SandboxUI(container){
var toolChooserLabel = document.createElement("div");
toolChooserLabel.innerHTML = getWords("sandbox_tool_chooser");
- toolChooserLabel.style.marginTop = "1em";
+ toolChooserLabel.style.marginTop = "0.25em"; //GAP;
var tools = [
"pencil",
"add",
@@ -122,7 +124,7 @@ function SandboxUI(container){
var shortcutsLabel = document.createElement("div");
shortcutsLabel.innerHTML = getWords("sandbox_shortcuts_label");
shortcutsLabel.id = "sandbox_shortcuts_label";
- shortcutsLabel.style.marginTop = "1em";
+ shortcutsLabel.style.marginTop = GAP;
var shortcuts = document.createElement("div");
shortcuts.innerHTML = getWords("sandbox_shortcuts");
shortcuts.id = "sandbox_shortcuts";