diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/css/index.css b/css/index.css index b3397d5..b51e163 100644 --- a/css/index.css +++ b/css/index.css @@ -233,12 +233,18 @@ b, strong{ color: #fff; } +#modal #modal_content > div:first-child > h3{ + border-top: none; +} +#modal #modal_content > h3{ + border-top: none; +} #modal h3{ font-size: 1.3em; margin-bottom: 0.7em; padding-top: 0.7em; margin-top: 1em; - border-top: 2px solid #333; + border-top: 5px solid #282828; } #modal[size=small]{ width: 700px; @@ -356,6 +362,7 @@ b, strong{ text-align: center; overflow: hidden; line-height: 34px; + position: relative; } #navigation > div[highlight]{ background: #fff; @@ -363,6 +370,8 @@ b, strong{ } #navigation > div > span:nth-child(1){ display: block; + position: absolute; + width: 100%; } #navigation > div > span:nth-child(2){ display: none; @@ -508,16 +517,16 @@ ref:hover:before{ border-radius: 100%; } .circle::before { - content: ''; - height: 100%; - width: 50%; - float: left; - shape-outside: polygon(0 0, 100% 0, 60% 4%, 40% 10%, 20% 20%, 10% 28.2%, 5% 34.4%, 0 50%, 5% 65.6%, 10% 71.8%, 20% 80%, 40% 90%, 60% 96%, 100% 100%, 0% 100%); + content: ''; + height: 100%; + width: 50%; + float: left; + shape-outside: polygon(0 0, 100% 0, 60% 4%, 40% 10%, 20% 20%, 10% 28.2%, 5% 34.4%, 0 50%, 5% 65.6%, 10% 71.8%, 20% 80%, 40% 90%, 60% 96%, 100% 100%, 0% 100%); } .circle > span::before { - content: ''; - height: 100%; - width: 50%; - float: right; - shape-outside: polygon(100% 0, 0 0, 40% 4%, 60% 10%, 80% 20%, 90% 28.2%, 95% 34.4%, 100% 50%, 95% 65.6%, 90% 71.8%, 80% 80%, 60% 90%, 40% 96%, 0 100%, 100% 100%); + content: ''; + height: 100%; + width: 50%; + float: right; + shape-outside: polygon(100% 0, 0 0, 40% 4%, 60% 10%, 80% 20%, 90% 28.2%, 95% 34.4%, 100% 50%, 95% 65.6%, 90% 71.8%, 80% 80%, 60% 90%, 40% 96%, 0 100%, 100% 100%); } \ No newline at end of file diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..b9b7ee0 Binary files /dev/null and b/favicon.png differ diff --git a/index.html b/index.html index d5d7cf6..005614b 100644 --- a/index.html +++ b/index.html @@ -12,134 +12,164 @@ MY "WHY" FOR MAKING THIS: - - The Wisdom and/or Madness of Crowds - - - + - -
+ + The Wisdom and/or Madness of Crowds + + + + + - -
-
-
+ + + + - -
-
-
+ + + + + + + - -
+ + + + + + - - + + - - + + -
- - -
-
+ +
+ + From Newton to NASA to
- From Newton to NASA to network science, we've covered a lot here today. - Long story short, the madness of crowds is not necessarily due to the - individual people, but due to how we're trapped in a network's sticky web. + network science, we've covered a lot here +
+ today. Long story short, the madness of crowds +
+ is not necessarily due to the individual people, but due +
+ to how we're trapped in a network's sticky web. -

+
- That does NOT mean abandoning personal responsibility, - for we're also the weavers of that web. - So, improve your contagions: - be skeptical of ideas that flatter you, - spend time understanding complex ideas. - And, improve your connections: bond with similar folk, - but also build bridges across cultural/political divides. + That does NOT mean abandoning personal responsibility, for +
+ we're also the weavers of that web. So, improve your contagions: +
+ be skeptical of ideas that flatter you, spend time understanding +
+ complex ideas. And, improve your connections: bond with similar +
+ folk, but also build bridges across cultural/political divides. -

+
+ + We can weave a wise web. Sure, it's harder than doodling +
+ lines on a screen... - We can weave a wise web. - Sure, it's harder than doodling lines on a screen... ...but so, so worth it. -
+ @@ -1016,11 +1069,9 @@ MY "WHY" FOR MAKING THIS:

- - Book: + 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, @@ -1034,11 +1085,9 @@ MY "WHY" FOR MAKING THIS:
- - Interactive: + Interactive: - Collective Dynamics of Small World Networks - , + 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 @@ -1054,11 +1103,8 @@ MY "WHY" FOR MAKING THIS:

- - The Evolution of Trust - - by Nicky Case (2017). + 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... @@ -1068,11 +1114,8 @@ MY "WHY" FOR MAKING THIS:
- - Parable of the Polygons - - by Vi Hart and Nicky Case (2014). + 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. @@ -1085,8 +1128,6 @@ MY "WHY" FOR MAKING THIS: - -

diff --git a/js/chapters/B_Introduction.js b/js/chapters/B_Introduction.js index 87f450a..aeb3cec 100644 --- a/js/chapters/B_Introduction.js +++ b/js/chapters/B_Introduction.js @@ -27,7 +27,7 @@ SLIDES.push( { type:"box", id:"intro", - text:"intro", x:210, y:0, w:540, h:540, align:"center" + text:"intro", x:180, y:0, w:600, h:540, align:"center" }, ] @@ -41,7 +41,7 @@ SLIDES.push( { type:"box", id:"intro_2", - text:"intro_2", x:210, y:0, w:540, h:540, align:"center" + text:"intro_2", x:180, y:0, w:600, h:540, align:"center" } ] } diff --git a/js/chapters/H_Conclusion.js b/js/chapters/H_Conclusion.js index f362bf0..e513cf5 100644 --- a/js/chapters/H_Conclusion.js +++ b/js/chapters/H_Conclusion.js @@ -61,7 +61,7 @@ SLIDES.push( { type:"box", id:"conclusion_2", - text:"conclusion_2", x:210, y:0, w:540, h:540, align:"center" + text:"conclusion_2", x:180, y:0, w:600, h:540, align:"center" }, ] diff --git a/js/lib/helpers.js b/js/lib/helpers.js index 42769f0..85d5b2c 100644 --- a/js/lib/helpers.js +++ b/js/lib/helpers.js @@ -178,3 +178,10 @@ function rotateVector(v, a){ } } +// Cross Browser Crap +function _getBoundingClientRect(dom){ + var bounds = dom.getBoundingClientRect(); + if(!bounds.x) bounds.x = bounds.left; // crossbrowser crap + if(!bounds.y) bounds.y = bounds.top; // crossbrowser crap + return bounds; +} \ No newline at end of file diff --git a/js/sim/Simulations.js b/js/sim/Simulations.js index 90f329c..440da5c 100644 --- a/js/sim/Simulations.js +++ b/js/sim/Simulations.js @@ -131,7 +131,7 @@ function Sim(config){ // Canvas if(config.fullscreen){ var container = $("#simulations_container"); - var simOffset = self.container.dom.getBoundingClientRect(); + var simOffset = _getBoundingClientRect(self.container.dom); self.canvas = createCanvas(container.clientWidth, container.clientHeight); self.canvas.style.left = -simOffset.x; self.canvas.style.top = -simOffset.y; @@ -186,7 +186,7 @@ function Sim(config){ self.update = function(){ // "Mouse", offset! - var canvasBounds = self.canvas.getBoundingClientRect(); + var canvasBounds = _getBoundingClientRect(self.canvas); self.mouse = cloneObject(Mouse); self.mouse.x -= canvasBounds.x; self.mouse.y -= canvasBounds.y; @@ -440,7 +440,7 @@ function Sim(config){ }else if(self._canPlayBonkSound && !isEveryoneInfected){ self._canPlayBonkSound = false; - if(!config.options.NO_BONK){ + if(!self.options.NO_BONK){ SOUNDS.bonk.play(); } diff --git a/js/slideshow/Navigation.js b/js/slideshow/Navigation.js index 85f9940..01e0678 100644 --- a/js/slideshow/Navigation.js +++ b/js/slideshow/Navigation.js @@ -63,7 +63,7 @@ function Navigation(){ var isShowingBubble = false; var _showBubble = function(nav){ - var offset = nav.getBoundingClientRect().x - $("#navigation").getBoundingClientRect().x; + var offset = _getBoundingClientRect(nav).x - _getBoundingClientRect($("#navigation")).x; var label = nav.children[1].innerHTML; bubble.style.left = offset - (220/2) + (36/2); bubble.innerHTML = label;