NotDotTeam/crowds
NotDotTeam
/
crowds
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed for Safari

This commit is contained in:
Nicky Case 2018-04-24 10:22:06 -04:00
parent e378f2dcc8
commit 1ef8e92c3f
9 changed files with 257 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
README.md Normal file
View File

31
css/index.css
View File

@ -233,12 +233,18 @@ b, strong{
color: #fff; color: #fff;
} }
#modal #modal_content > div:first-child > h3{
border-top: none;
}
#modal #modal_content > h3{
border-top: none;
}
#modal h3{ #modal h3{
font-size: 1.3em; font-size: 1.3em;
margin-bottom: 0.7em; margin-bottom: 0.7em;
padding-top: 0.7em; padding-top: 0.7em;
margin-top: 1em; margin-top: 1em;
border-top: 2px solid #333; border-top: 5px solid #282828;
} }
#modal[size=small]{ #modal[size=small]{
width: 700px; width: 700px;
@ -356,6 +362,7 @@ b, strong{
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
line-height: 34px; line-height: 34px;
position: relative;
} }
#navigation > div[highlight]{ #navigation > div[highlight]{
background: #fff; background: #fff;
@ -363,6 +370,8 @@ b, strong{
} }
#navigation > div > span:nth-child(1){ #navigation > div > span:nth-child(1){
display: block; display: block;
position: absolute;
width: 100%;
} }
#navigation > div > span:nth-child(2){ #navigation > div > span:nth-child(2){
display: none; display: none;
@ -508,16 +517,16 @@ ref:hover:before{
border-radius: 100%; border-radius: 100%;
} }
.circle::before { .circle::before {
content: ''; content: '';
height: 100%; height: 100%;
width: 50%; width: 50%;
float: left; 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%); 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 { .circle > span::before {
content: ''; content: '';
height: 100%; height: 100%;
width: 50%; width: 50%;
float: right; 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%); 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%);
} }

BIN
favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

405
index.html
View File

@ -12,134 +12,164 @@ MY "WHY" FOR MAKING THIS:
<!doctype> <!doctype>
<html> <html>
<head> <head>
<title>The Wisdom and/or Madness of Crowds</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- THE SLIDESHOW --> <!-- TO TRANSLATE: "title", "description" -->
<div id="container"> <title>The Wisdom and/or Madness of Crowds</title>
<meta name="description" content="blah_blah_blah_blah_blah"/>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png">
<!-- Simulation(s) in background --> <!-- TO TRANSLATE: "name", "description" -->
<div id="simulations_container"> <meta itemprop="name" content="The Wisdom and/or Madness of Crowds">
<div id="simulations"></div> <meta itemprop="description" content="blah_blah_blah_blah_blah">
</div> <meta itemprop="image" content="http://ncase.me/crowds/social/thumbnail.png">
<!-- Slideshow: words & buttons --> <!-- TO TRANSLATE: "name", "description" -->
<div id="slideshow_container"> <meta name="twitter:card" content="summary_large_image">
<div id="slideshow"></div> <meta name="twitter:site" content="@ncasenmare">
</div> <meta name="twitter:title" content="The Wisdom and/or Madness of Crowds">
<meta name="twitter:description" content="blah_blah_blah_blah_blah">
<meta name="twitter:creator" content="@ncasenmare">
<meta name="twitter:image" content="http://ncase.me/crowds/social/thumbnail.png">
<!-- Scratch Transition --> <!-- TO TRANSLATE: "name", "description" -->
<div id="scratch"></div> <meta property="og:title" content="The Wisdom and/or Madness of Crowds">
<meta property="og:type" content="website">
<meta property="og:url" content="http://ncase.me/crowds/">
<meta property="og:image" content="http://ncase.me/crowds/social/thumbnail.png">
<meta property="og:description" content="blah_blah_blah_blah_blah">
<!-- Skip --> <!-- Styles -->
<div id="skip">skip &gt;</div> <link rel="stylesheet" type="text/css" href="css/index.css">
<!-- Modal --> </head>
<div id="modal_container"> <body>
<div id="modal_bg"></div>
<div id="modal">
<div id="modal_close">⨯</div>
<div id="modal_content_container">
<div id="modal_content"></div>
</div>
</div>
</div>
</div> <!-- THE SLIDESHOW -->
<div id="container">
<!-- Navigation: Audio, Contents, Share, Translations -->
<div id="navigation_container">
<div id="sound" mute="no">
<div id="sound_icon"></div>
<span id="sound_on">ON</span>
<span id="sound_off">OFF</span>
</div>
<div id="navigation">
<!-- The chapters --> <!-- Simulation(s) in background -->
<div chapter="Introduction"> <div id="simulations_container">
<span>0</span> <div id="simulations"></div>
<span>0. Introduction</span>
</div>
<div chapter="Networks">
<span>1</span>
<span>1. Connections</span>
</div>
<div chapter="Simple">
<span>2</span>
<span>2. Contagions</span>
</div>
<div chapter="Complex">
<span>3</span>
<span>3. Complex Contagions</span>
</div>
<div chapter="BB">
<span>4</span>
<span>4. Bonding &amp; Bridging</span>
</div>
<div chapter="SmallWorld">
<span>5</span>
<span>5. It's A Small World</span>
</div>
<div chapter="Conclusion">
<span>6</span>
<span>6. In Conclusion...</span>
</div>
<div chapter="Credits">
<span>7</span>
<span>7. Credits</span>
</div>
<div chapter="Sandbox">
<span>★</span>
<span>★ Sandbox Mode! ★</span>
</div>
<!-- A divider -->
<span class="nav_divider"></span>
<!-- Bonus Notes & References -->
<div modal="bonus">
<span>?</span>
<span>Bonus Boxes!</span>
</div>
<div modal="references">
<span style="margin-top: 7px; font-size: 35px;">*</span>
<span>Links &amp; References</span>
</div>
<div modal="translations">
<span style="margin-top:5px; position:relative;"><span style="
position: absolute;
top: -8px;
left: 6px;
">A</span><span style="
position: absolute;
font-size: 16px;
top: -1px;
left: 16px;
">あ</span></span>
<span>Translations</span>
</div>
<!-- The hover bubble -->
<span id="nav_bubble"></span>
</div>
<div id="translations"></div>
<div id="social"></div>
</div>
<!-- The Pencil -->
<canvas id="pencil"></canvas>
<!-- Preloader -->
<div id="pre_preloader">
<div>loading...</div>
</div> </div>
</body> <!-- Slideshow: words & buttons -->
<div id="slideshow_container">
<div id="slideshow"></div>
</div>
<!-- Scratch Transition -->
<div id="scratch"></div>
<!-- Skip -->
<div id="skip">skip &gt;</div>
<!-- Modal -->
<div id="modal_container">
<div id="modal_bg"></div>
<div id="modal">
<div id="modal_close">⨯</div>
<div id="modal_content_container">
<div id="modal_content"></div>
</div>
</div>
</div>
</div>
<!-- Navigation: Audio, Contents, Share, Translations -->
<div id="navigation_container">
<div id="sound" mute="no">
<div id="sound_icon"></div>
<span id="sound_on">ON</span>
<span id="sound_off">OFF</span>
</div>
<div id="navigation">
<!-- The chapters -->
<div chapter="Introduction">
<span>0</span>
<span>0. Introduction</span>
</div>
<div chapter="Networks">
<span>1</span>
<span>1. Connections</span>
</div>
<div chapter="Simple">
<span>2</span>
<span>2. Contagions</span>
</div>
<div chapter="Complex">
<span>3</span>
<span>3. Complex Contagions</span>
</div>
<div chapter="BB">
<span>4</span>
<span>4. Bonding &amp; Bridging</span>
</div>
<div chapter="SmallWorld">
<span>5</span>
<span>5. It's A Small World</span>
</div>
<div chapter="Conclusion">
<span>6</span>
<span>6. In Conclusion...</span>
</div>
<div chapter="Credits">
<span>7</span>
<span>7. Credits</span>
</div>
<div chapter="Sandbox">
<span>★</span>
<span>★ Sandbox Mode! ★</span>
</div>
<!-- A divider -->
<span class="nav_divider"></span>
<!-- Bonus Notes & References -->
<div modal="bonus">
<span>?</span>
<span>Bonus Boxes!</span>
</div>
<div modal="references">
<span style="margin-top: 7px; font-size: 35px;">*</span>
<span>Links &amp; References</span>
</div>
<div modal="translations">
<span style="margin-top:5px; position:relative;"><span style="
position: absolute;
top: -8px;
left: 6px;
">A</span><span style="
position: absolute;
font-size: 16px;
top: -1px;
left: 16px;
">あ</span></span>
<span>Translations</span>
</div>
<!-- The hover bubble -->
<span id="nav_bubble"></span>
</div>
<div id="translations"></div>
<div id="social"></div>
</div>
<!-- The Pencil -->
<canvas id="pencil"></canvas>
<!-- Preloader -->
<div id="pre_preloader">
<div>loading...</div>
</div>
</body>
</html> </html>
<!-- - - - - - - - - - - - --> <!-- - - - - - - - - - - - -->
@ -185,50 +215,63 @@ MY "WHY" FOR MAKING THIS:
<!-- Introduction --> <!-- Introduction -->
<words id="intro"> <words id="intro">
<div class="circle"><span>
<br><br> <br><br>
Sir Isaac Newton was pretty sure he was a smart cookie. Sir Isaac Newton was pretty sure he was a
I mean, after inventing calculus and a theory of gravity, <br>
he should be clever enough to do some financial investing, right? smart cookie. I mean, after inventing calculus and
Anyway, <br>
long story short, he lost $4,600,000 (in today's dollars) a theory of gravity, he should be clever enough to do
in the nationwide speculation frenzy known as the South Sea Bubble of 1720. <br>
some financial investing, right? Anyway, long story short, he
<br>
lost $4,600,000 (in today's dollars) in the nationwide
<br>
speculation frenzy known as the South Sea Bubble of 1720.
<br><br> <br><br>
As Mr. Newton later said: As Mr. Newton later said: <i>“I can calculate the motion of
<i>“I can calculate the motion of heavenly bodies, but not the madness of people.”</i> <br>
heavenly bodies, but not the madness of people.”</i>
<next>yeah sucks for him &rarr;</next> <next>yeah sucks for him &rarr;</next>
</span></div>
</words> </words>
<words id="intro_2"> <words id="intro_2">
<div class="circle" style="line-height:1.4em"><span>
<br> <div style="height:0.5em"></div>
Of course, that's not the only time markets, institutions, or entire democracies went haywire &mdash;
the <i>madness</i> of crowds.
And yet, just when you lose hope in humanity,
you see citizens coordinating to rescue each other in hurricanes,
communities creating solutions to problems,
people fighting for a better world &mdash;
the <i>wisdom</i> of crowds!
<div style="height:0.9em"></div> Of course, that's not the only
<br>
time markets, institutions, or entire
<br>
democracies went haywire &mdash; the <i>madness</i> of
<br>
crowds. And yet, just when you lose hope in humanity,
<br>
you see citizens coordinating to rescue each other in
<br>
hurricanes, communities creating solutions to problems,
<br>
people fighting for a better world &mdash; the <i>wisdom</i> of crowds!
<b>But <i>why</i> do some crowds turn to madness, or wisdom?</b> <div style="height:0.9em"></div>
No theory can explain everything,
but I think a new field of study, <b>network science</b>,
can guide us! And its core idea is this:
to understand crowds, we should look not at the <i>individual people</i>, but at...
<next>...their <i>connections.</i> &rarr;</next> <b>But <i>why</i> do some crowds turn to madness, or wisdom?</b> No theory
<br>
can explain everything, but I think a new field of study,
<br>
<b>network science</b>, can guide us! And its core idea is this: to
<br>
understand crowds, we should look not at the <i>individual
<br>
people</i>, but at...
<next>...their <i>connections.</i> &rarr;</next>
</span></div>
</words> </words>
<!-- Networks --> <!-- Networks -->
@ -743,7 +786,6 @@ MY "WHY" FOR MAKING THIS:
Too <i>many</i> connections and complex ideas get crushed by groupthink. Too <i>many</i> connections and complex ideas get crushed by groupthink.
The trick is to build a small world network, the optimal mix of The trick is to build a small world network, the optimal mix of
bonding and bridging: <i>e pluribus unum.</i> bonding and bridging: <i>e pluribus unum.</i>
<bon id="math"></bon>
</div> </div>
<div style=" <div style="
@ -768,30 +810,41 @@ MY "WHY" FOR MAKING THIS:
</words> </words>
<words id="conclusion_2"> <words id="conclusion_2">
<div class="circle" style="font-size:22px; line-height:1.3em;"><span> <span style="line-height:1.4em;">
<div style="height:0.5em"></div>
From Newton to NASA to
<br> <br>
From Newton to NASA to network science, we've covered a lot here today. network science, we've covered a lot here
Long story short, the madness of crowds is not necessarily due to the <br>
<i>individual people</i>, but due to how we're trapped in a network's sticky web. today. Long story short, the madness of crowds
<br>
is not necessarily due to the <i>individual people</i>, but due
<br>
to how we're trapped in a network's sticky web.
<br><br> <div style="height:0.9em"></div>
That <i>does NOT</i> mean abandoning personal responsibility, That <i>does NOT</i> mean abandoning personal responsibility, for
for we're also the <i>weavers</i> of that web. <br>
So, improve your contagions: we're also the <i>weavers</i> of that web. So, improve your contagions:
be skeptical of ideas that flatter you<ref id="flatter"></ref>, <br>
spend time understanding complex ideas. be skeptical of ideas that flatter you<ref id="flatter"></ref>, spend time understanding
And, improve your connections: bond with similar folk, <br>
but also build bridges across cultural/political divides. complex ideas. And, improve your connections: bond with similar
<br>
folk, but also build bridges across cultural/political divides.
<br><br> <div style="height:0.9em"></div>
We can weave a wise web. Sure, it's harder than doodling
<br>
lines on a screen...
We can weave a wise web.
Sure, it's harder than doodling lines on a screen...
<next>...but so, so worth it.</next> <next>...but so, so worth it.</next>
</span></div> </span>
</words> </words>
<words id="conclusion_3"> <words id="conclusion_3">
@ -1016,11 +1069,9 @@ MY "WHY" FOR MAKING THIS:
<br><br> <br><br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/> <img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/>
<b> <b>Book:</b>
Book:
<a target="_blank" href="http://www.connectedthebook.com/"> <a target="_blank" href="http://www.connectedthebook.com/">
Connected</a> Connected</a>
</b>
by Nicholas Christakis and James Fowler (2009). by Nicholas Christakis and James Fowler (2009).
A layperson-friendly yet rigorous tour of how networks affect our lives, 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, 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:
<br> <br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/> <img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/>
<b> <b>Interactive:</b>
Interactive:
<a target="_blank" href="http://worrydream.com/ScientificCommunicationAsSequentialArt/"> <a target="_blank" href="http://worrydream.com/ScientificCommunicationAsSequentialArt/">
Collective Dynamics of Small World Networks</a> Collective Dynamics of Small World Networks</a>,
</b>,
original paper by Watts &amp; Strogatz (1998), original paper by Watts &amp; Strogatz (1998),
turned into interactive visuals by Bret Victor in 2011. turned into interactive visuals by Bret Victor in 2011.
Slightly technical, but it's a lot easier to understand when Slightly technical, but it's a lot easier to understand when
@ -1054,11 +1103,8 @@ MY "WHY" FOR MAKING THIS:
<br><br> <br><br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/> <img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/>
<b>
<a target="_blank" href="https://mrpandey.github.io/d3graphTheory/"> <a target="_blank" href="https://mrpandey.github.io/d3graphTheory/">
The Evolution of Trust The Evolution of Trust</a> by Nicky Case (2017).
</a>
</b> by Nicky Case (2017).
This is a game about the game theory of how cooperation arises (or not). This is a game about the game theory of how cooperation arises (or not).
You first play a game of trust, You first play a game of trust,
then play a meta-game of that, then a meta-meta-game of that... then play a meta-game of that, then a meta-meta-game of that...
@ -1068,11 +1114,8 @@ MY "WHY" FOR MAKING THIS:
<br> <br>
<img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/> <img src="sdas" width="200" height="200" style="float:left; margin-right:1em"/>
<b>
<a target="_blank" href="https://mrpandey.github.io/d3graphTheory/"> <a target="_blank" href="https://mrpandey.github.io/d3graphTheory/">
Parable of the Polygons Parable of the Polygons</a> by Vi Hart and Nicky Case (2014).
</a>
</b> by Vi Hart and Nicky Case (2014).
A story about how harmless choices can create a harmful world. A story about how harmless choices can create a harmful world.
Based off a Nobel Prize-winning game theorist's work, Based off a Nobel Prize-winning game theorist's work,
this interactive shows how discrimination and diversity can arise from the bottom up. this interactive shows how discrimination and diversity can arise from the bottom up.
@ -1085,8 +1128,6 @@ MY "WHY" FOR MAKING THIS:
<!-- REFERENCES --> <!-- REFERENCES -->
<!-- - - - - - - --> <!-- - - - - - - -->
<reference>
</reference>
<reference id="drunk"> <reference id="drunk">
<h3> <h3>

4
js/chapters/B_Introduction.js
View File

@ -27,7 +27,7 @@ SLIDES.push(
{ {
type:"box", type:"box",
id:"intro", 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", type:"box",
id:"intro_2", 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"
} }
] ]
} }

2
js/chapters/H_Conclusion.js
View File

@ -61,7 +61,7 @@ SLIDES.push(
{ {
type:"box", type:"box",
id:"conclusion_2", 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"
}, },
] ]

7
js/lib/helpers.js
View File

@ -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;
}

6
js/sim/Simulations.js
View File

@ -131,7 +131,7 @@ function Sim(config){
// Canvas // Canvas
if(config.fullscreen){ if(config.fullscreen){
var container = $("#simulations_container"); 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 = createCanvas(container.clientWidth, container.clientHeight);
self.canvas.style.left = -simOffset.x; self.canvas.style.left = -simOffset.x;
self.canvas.style.top = -simOffset.y; self.canvas.style.top = -simOffset.y;
@ -186,7 +186,7 @@ function Sim(config){
self.update = function(){ self.update = function(){
// "Mouse", offset! // "Mouse", offset!
var canvasBounds = self.canvas.getBoundingClientRect(); var canvasBounds = _getBoundingClientRect(self.canvas);
self.mouse = cloneObject(Mouse); self.mouse = cloneObject(Mouse);
self.mouse.x -= canvasBounds.x; self.mouse.x -= canvasBounds.x;
self.mouse.y -= canvasBounds.y; self.mouse.y -= canvasBounds.y;
@ -440,7 +440,7 @@ function Sim(config){
}else if(self._canPlayBonkSound && !isEveryoneInfected){ }else if(self._canPlayBonkSound && !isEveryoneInfected){
self._canPlayBonkSound = false; self._canPlayBonkSound = false;
if(!config.options.NO_BONK){ if(!self.options.NO_BONK){
SOUNDS.bonk.play(); SOUNDS.bonk.play();
} }

2
js/slideshow/Navigation.js
View File

@ -63,7 +63,7 @@ function Navigation(){
var isShowingBubble = false; var isShowingBubble = false;
var _showBubble = function(nav){ 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; var label = nav.children[1].innerHTML;
bubble.style.left = offset - (220/2) + (36/2); bubble.style.left = offset - (220/2) + (36/2);
bubble.innerHTML = label; bubble.innerHTML = label;