circular intro, yo
This commit is contained in:
Nicky Case
parent
9ef8b2a7c7
commit
7d51bbe937
|
|
@ -11,6 +11,11 @@ body{
|
|||
font-size: 20px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
/* fake bold */
|
||||
b, strong{
|
||||
font-weight: normal;
|
||||
text-shadow:1px 0 0 currentColor;
|
||||
}
|
||||
|
||||
/* SIMULATION and SLIDESHOW */
|
||||
#container{
|
||||
|
|
@ -47,8 +52,8 @@ body{
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
#slideshow .next_button{
|
||||
display: inline-block;
|
||||
/*margin: 0 auto;*/
|
||||
/*display: inline-block;*/
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
width: 300px;
|
||||
|
|
@ -272,5 +277,26 @@ words, bonus, glossary{
|
|||
border: 1px solid #eee;
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
/* A NICE CIRCLE */
|
||||
/* Thanks to: https://skeate.github.io/2015/07/13/Wrapping-Text-to-Fit-Shaped-Containers-with-CSS.html */
|
||||
.circle {
|
||||
/*background: #accede;*/
|
||||
text-align: center;
|
||||
width: 540px;
|
||||
height: 540px;
|
||||
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%);
|
||||
}
|
||||
.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%);
|
||||
}
|
||||
54
index.html
54
index.html
|
|
@ -135,19 +135,57 @@ let's play! →
|
|||
</words>
|
||||
|
||||
<words id="_0_intro">
|
||||
Why is it that the <i>same</i> people,
|
||||
in <i>different</i> groups, can be kind, cruel, smart, stupid?
|
||||
In this explorable explanation,
|
||||
I'll show how the <i>network</i> of a group itself
|
||||
can shape the people caught in its web.
|
||||
<button onclick="slideshow.next()">NEXT</button>
|
||||
<div class="circle"><span>
|
||||
|
||||
<br><br><br>
|
||||
|
||||
Isaac Newton was pretty sure he was one smart cookie.
|
||||
I mean, after inventing calculus, classical mechanics, 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)
|
||||
in the nationwide speculation frenzy known as the South Sea Bubble of 1720.
|
||||
|
||||
<br><br>
|
||||
|
||||
As Mr. Newton later said:
|
||||
<i>“I can calculate the motion of heavenly bodies, but not the madness of people.”</i>
|
||||
|
||||
<next>yeah sucks for him →</next>
|
||||
|
||||
</span></div>
|
||||
</words>
|
||||
|
||||
<words id="_0_intro_2">
|
||||
<div class="circle"><span>
|
||||
|
||||
<br>
|
||||
Of course, that's not the only time markets, institutions, or entire democracies went crazy:
|
||||
the <i>madness</i> of crowds.
|
||||
And yet, just when you lose hope in humanity,
|
||||
you see citizens rescuing each other in hurricanes,
|
||||
communities banding together after tragedy,
|
||||
movements of ordinary people fighting for a better world:
|
||||
the <i>wisdom</i> of crowds!
|
||||
|
||||
<br><br>
|
||||
|
||||
<b>But <i>why</i> do some crowds become wise or mad?</b>
|
||||
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 <i>individuals</i>,
|
||||
but at...
|
||||
|
||||
<next>...its <i>network</i> →</next>
|
||||
|
||||
</span></div>
|
||||
</words>
|
||||
|
||||
<!-- 1. Networks -->
|
||||
|
||||
<words id="_1_tutorial_start">
|
||||
blah blah blah blah blah<br>
|
||||
let's make a network of friends!
|
||||
Let's draw a network!
|
||||
Each connection represents a friendship between two people:
|
||||
</words>
|
||||
|
||||
<words id="_1_tutorial_connect">
|
||||
|
|
|
|||
|
|
@ -21,10 +21,29 @@ SLIDES.push(
|
|||
splash: true,
|
||||
randomStart: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Words
|
||||
{
|
||||
type:"box",
|
||||
id:"_0_intro",
|
||||
text:"_0_intro", x:210, y:0, w:540, h:540, align:"center"
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
},
|
||||
{
|
||||
remove:[
|
||||
{ type:"box", id:"_0_intro" }
|
||||
],
|
||||
add:[
|
||||
{
|
||||
type:"box",
|
||||
id:"_0_intro_2",
|
||||
text:"_0_intro_2", x:210, y:0, w:540, h:540, align:"center"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
);
|
||||
|
|
@ -12,7 +12,7 @@ SLIDES.push(
|
|||
// The top instructions
|
||||
{
|
||||
type:"box",
|
||||
text:"_1_tutorial_start", x:280, y:0, w:400, h:70, align:"center"
|
||||
text:"_1_tutorial_start", x:260, y:0, w:440, h:70, align:"center"
|
||||
},
|
||||
|
||||
// The fullscreen simulation
|
||||
|
|
@ -56,7 +56,7 @@ SLIDES.push(
|
|||
type:"box",
|
||||
id:"end_words",
|
||||
text:"_1_tutorial_end", x:230, y:425, w:500, h:70, align:"center",
|
||||
//hidden:true
|
||||
hidden:true
|
||||
}
|
||||
|
||||
],
|
||||
|
|
|
|||
|
|
@ -29,6 +29,6 @@ window.onload = function(){
|
|||
window.requestAnimationFrame(update);
|
||||
|
||||
// First slide!
|
||||
slideshow.gotoChapter("Introduction");
|
||||
slideshow.gotoChapter("Networks");
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue