carolineartz
5/13/2015 - 10:32 PM
data
data
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DataViz</title>
<link rel="stylesheet" href="http://fast.fonts.net/cssapi/2ee4c1f6-c49c-4386-89fd-b62b816b15e7.css" />
<link rel="stylesheet" href="https://fontastic.s3.amazonaws.com/ymT4mmqRVwUUT4LuhJ4xLa/icons.css">
<style>
html {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
/* CSS compiled from SCSS */
/* --------------------------------------- */
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
html,
body {
height: 100%;
}
a img {
border: none;
}
blockquote {
quotes: none;
}
blockquote:before,
blockquote:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 75%;
}
@media screen and (min-width: 34.375em) {
html {
font-size: 87.5%;
}
}
@media screen and (min-width: 50em) {
html {
font-size: 93.75%;
}
}
@media screen and (min-width: 64em) {
html {
font-size: 106.25%;
}
}
@media screen and (min-width: 100em) {
html {
font-size: 118.75%;
}
}
body {
font-family: Georgia;
font-style: normal;
font-weight: 400;
line-height: 2rem;
font-size: 1.3333333333rem;
}
@media screen and (min-width: 34.375em) {
body {
font-size: 1.2142857143rem;
}
}
@media screen and (min-width: 50em) {
body {
font-size: 1.2rem;
}
}
@media screen and (min-width: 64em) {
body {
font-size: 1.1764705882rem;
}
}
@media screen and (min-width: 100em) {
body {
font-size: 1.1578947368rem;
}
}
a {
-webkit-transition: color 0.1s, background-color 0.1s;
-moz-transition: color 0.1s, background-color 0.1s;
-ms-transition: color 0.1s, background-color 0.1s;
-o-transition: color 0.1s, background-color 0.1s;
transition: color 0.1s, background-color 0.1s;
color: #0E58F5;
text-decoration: none;
}
a:hover,
a:active,
a:focus {
color: #0B348B;
text-decoration: none;
}
.typeset:not(#text) p a,
.typeset:not(#text) li a {
background-image: -webkit-linear-gradient(top, transparent 50%, #709cf9 50%);
background-image: -moz-linear-gradient(top, transparent 50%, #709cf9 50%);
background-image: -o-linear-gradient(top, transparent 50%, #709cf9 50%);
background-image: linear-gradient(to bottom, transparent 50%, #709cf9 50%);
background-position: 0 93%;
background-repeat: repeat-x;
background-size: 100% 0.15rem;
text-shadow: 0.1rem 0 #FCFCFC, 0.15rem 0 #FCFCFC, -0.1rem 0 #FCFCFC, -0.15rem 0 #FCFCFC;
}
.typeset:not(#text) p a:hover,
.typeset:not(#text) p a:active,
.typeset:not(#text) p a:focus,
.typeset:not(#text) li a:hover,
.typeset:not(#text) li a:active,
.typeset:not(#text) li a:focus {
background-image: -webkit-linear-gradient(top, transparent 50%, #1257ea 50%);
background-image: -moz-linear-gradient(top, transparent 50%, #1257ea 50%);
background-image: -o-linear-gradient(top, transparent 50%, #1257ea 50%);
background-image: linear-gradient(to bottom, transparent 50%, #1257ea 50%);
}
.typeset p {
-webkit-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
-moz-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
-ms-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
-o-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
line-height: 2rem;
margin-bottom: 1.4533233333rem;
padding-top: 0.5466766667rem;
}
@media screen and (min-width: 34.375em) {
.typeset p {
margin-bottom: 1.4128471429rem;
padding-top: 0.5871528571rem;
}
}
@media screen and (min-width: 50em) {
.typeset p {
margin-bottom: 1.40799rem;
padding-top: 0.59201rem;
}
}
@media screen and (min-width: 64em) {
.typeset p {
margin-bottom: 1.39999rem;
padding-top: 0.60001rem;
}
}
@media screen and (min-width: 100em) {
.typeset p {
margin-bottom: 1.3936742105rem;
padding-top: 0.6063257895rem;
}
}
.typeset h1,
.typeset h2,
.typeset h3,
.typeset h4,
.typeset h5,
.typeset h6 {
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-ms-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
color: #2E2E2E;
font-family: 'Avenir Next';
font-style: normal;
font-weight: 700;
}
.typeset h1,
.typeset .alpha {
line-height: 3rem;
font-size: 2.3333333333rem;
margin-bottom: 0.2233233333rem;
padding-top: 0.7766766667rem;
}
@media screen and (min-width: 34.375em) {
.typeset h1,
.typeset .alpha {
font-size: 2.1428571429rem;
margin-bottom: 0.1642757143rem;
padding-top: 0.8357242857rem;
}
}
@media screen and (min-width: 50em) {
.typeset h1,
.typeset .alpha {
font-size: 2.1333333333rem;
margin-bottom: 0.1613233333rem;
padding-top: 0.8386766667rem;
}
}
@media screen and (min-width: 64em) {
.typeset h1,
.typeset .alpha {
font-size: 2.3529411765rem;
margin-bottom: 0.2294017647rem;
padding-top: 0.7705982353rem;
}
}
@media screen and (min-width: 100em) {
.typeset h1,
.typeset .alpha {
font-size: 2.6315789474rem;
margin-bottom: 0.3157794737rem;
padding-top: 0.6842205263rem;
}
}
.typeset h2,
.typeset .beta {
line-height: 3rem;
font-size: 2.0833333333rem;
margin-bottom: 0.1458233333rem;
padding-top: 0.8541766667rem;
}
@media screen and (min-width: 34.375em) {
.typeset h2,
.typeset .beta {
font-size: 1.9rem;
margin-bottom: 0.08899rem;
padding-top: 0.91101rem;
}
}
@media screen and (min-width: 50em) {
.typeset h2,
.typeset .beta {
font-size: 1.8733333333rem;
margin-bottom: 0.0807233333rem;
padding-top: 0.9192766667rem;
}
}
@media screen and (min-width: 64em) {
.typeset h2,
.typeset .beta {
font-size: 2.0882352941rem;
margin-bottom: 0.1473429412rem;
padding-top: 0.8526570588rem;
}
}
@media screen and (min-width: 100em) {
.typeset h2,
.typeset .beta {
font-size: 2.3105263158rem;
margin-bottom: 0.2162531579rem;
padding-top: 0.7837468421rem;
}
}
.typeset h3,
.typeset .gamma {
line-height: 3rem;
font-size: 1.8666666667rem;
margin-bottom: 0.0786566667rem;
padding-top: 0.9213433333rem;
}
@media screen and (min-width: 34.375em) {
.typeset h3,
.typeset .gamma {
font-size: 1.7142857143rem;
margin-bottom: 0.0314185714rem;
padding-top: 0.9685814286rem;
}
}
@media screen and (min-width: 50em) {
.typeset h3,
.typeset .gamma {
font-size: 1.7066666667rem;
margin-bottom: 0.0290566667rem;
padding-top: 0.9709433333rem;
}
}
@media screen and (min-width: 64em) {
.typeset h3,
.typeset .gamma {
font-size: 1.7647058824rem;
margin-bottom: 0.0470488235rem;
padding-top: 0.9529511765rem;
}
}
@media screen and (min-width: 100em) {
.typeset h3,
.typeset .gamma {
font-size: 1.8578947368rem;
margin-bottom: 0.0759373684rem;
padding-top: 0.9240626316rem;
}
}
.typeset h4,
.typeset .delta {
line-height: 2rem;
font-size: 1.6666666667rem;
margin-bottom: -0.4833433333rem;
padding-top: 0.4833433333rem;
}
@media screen and (min-width: 34.375em) {
.typeset h4,
.typeset .delta {
font-size: 1.5214285714rem;
margin-bottom: -0.5283671429rem;
padding-top: 0.5283671429rem;
}
}
@media screen and (min-width: 50em) {
.typeset h4,
.typeset .delta {
font-size: 1.5rem;
margin-bottom: -0.53501rem;
padding-top: 0.53501rem;
}
}
@media screen and (min-width: 64em) {
.typeset h4,
.typeset .delta {
font-size: 1.5705882353rem;
margin-bottom: -0.5131276471rem;
padding-top: 0.5131276471rem;
}
}
@media screen and (min-width: 100em) {
.typeset h4,
.typeset .delta {
font-size: 1.6368421053rem;
margin-bottom: -0.4925889474rem;
padding-top: 0.4925889474rem;
}
}
.typeset h5,
.typeset .epsilon {
line-height: 2rem;
font-size: 1.4916666667rem;
margin-bottom: -0.5375933333rem;
padding-top: 0.5375933333rem;
}
@media screen and (min-width: 34.375em) {
.typeset h5,
.typeset .epsilon {
font-size: 1.3714285714rem;
margin-bottom: -0.5748671429rem;
padding-top: 0.5748671429rem;
}
}
@media screen and (min-width: 50em) {
.typeset h5,
.typeset .epsilon {
font-size: 1.3666666667rem;
margin-bottom: -0.5763433333rem;
padding-top: 0.5763433333rem;
}
}
@media screen and (min-width: 64em) {
.typeset h5,
.typeset .epsilon {
font-size: 1.3235294118rem;
margin-bottom: -0.5897158824rem;
padding-top: 0.5897158824rem;
}
}
@media screen and (min-width: 100em) {
.typeset h5,
.typeset .epsilon {
font-size: 1.3157894737rem;
margin-bottom: -0.5921152632rem;
padding-top: 0.5921152632rem;
}
}
.typeset h6,
.typeset .zeta {
line-height: 2rem;
font-size: 1.3333333333rem;
margin-bottom: -0.5866766667rem;
padding-top: 0.5866766667rem;
}
@media screen and (min-width: 34.375em) {
.typeset h6,
.typeset .zeta {
font-size: 1.2142857143rem;
margin-bottom: -0.6235814286rem;
padding-top: 0.6235814286rem;
}
}
@media screen and (min-width: 50em) {
.typeset h6,
.typeset .zeta {
font-size: 1.2rem;
margin-bottom: -0.62801rem;
padding-top: 0.62801rem;
}
}
@media screen and (min-width: 64em) {
.typeset h6,
.typeset .zeta {
font-size: 1.1764705882rem;
margin-bottom: -0.6353041176rem;
padding-top: 0.6353041176rem;
}
}
@media screen and (min-width: 100em) {
.typeset h6,
.typeset .zeta {
font-size: 1.1578947368rem;
margin-bottom: -0.6410626316rem;
padding-top: 0.6410626316rem;
}
}
.typeset ul,
.typeset ol {
line-height: 2rem;
margin-bottom: 1.4533233333rem;
padding-top: 0.5466766667rem;
}
@media screen and (min-width: 34.375em) {
.typeset ul,
.typeset ol {
margin-bottom: 1.4128471429rem;
padding-top: 0.5871528571rem;
}
}
@media screen and (min-width: 50em) {
.typeset ul,
.typeset ol {
margin-bottom: 1.40799rem;
padding-top: 0.59201rem;
}
}
@media screen and (min-width: 64em) {
.typeset ul,
.typeset ol {
margin-bottom: 1.39999rem;
padding-top: 0.60001rem;
}
}
@media screen and (min-width: 100em) {
.typeset ul,
.typeset ol {
margin-bottom: 1.3936742105rem;
padding-top: 0.6063257895rem;
}
}
.typeset ul li,
.typeset ol li {
-webkit-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
-moz-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
-ms-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
-o-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
margin-left: 2rem;
}
@media screen and (min-width: 34.375em) {
.typeset ul li,
.typeset ol li {
margin-left: 0;
}
}
.typeset b,
.typeset strong,
.typeset .bold {
font-weight: 700;
}
.typeset em,
.typeset i,
.typeset .italic {
font-style: italic;
}
.typeset small,
.typeset .caption {
font-family: 'Avenir Next';
font-style: normal;
font-size: 1.0666666667rem;
}
@media screen and (min-width: 34.375em) {
.typeset small,
.typeset .caption {
font-size: 0.9714285714rem;
}
}
@media screen and (min-width: 50em) {
.typeset small,
.typeset .caption {
font-size: 0.96rem;
}
}
@media screen and (min-width: 64em) {
.typeset small,
.typeset .caption {
font-size: 0.8823529412rem;
}
}
@media screen and (min-width: 100em) {
.typeset small,
.typeset .caption {
font-size: 0.8210526316rem;
}
}
.typeset small {
line-height: 1rem;
}
.typeset .caption {
color: #BDC8CC;
line-height: 2rem;
margin-bottom: 1.3306566667rem;
padding-top: 0.6693433333rem;
}
@media screen and (min-width: 34.375em) {
.typeset .caption {
margin-bottom: 1.3011328571rem;
padding-top: 0.6988671429rem;
}
}
@media screen and (min-width: 50em) {
.typeset .caption {
margin-bottom: 1.29759rem;
padding-top: 0.70241rem;
}
}
@media screen and (min-width: 64em) {
.typeset .caption {
margin-bottom: 1.2735194118rem;
padding-top: 0.7264805882rem;
}
}
@media screen and (min-width: 100em) {
.typeset .caption {
margin-bottom: 1.2545163158rem;
padding-top: 0.7454836842rem;
}
}
.typeset h1 + .caption,
.typeset .alpha + .caption,
.typeset h2 + .caption,
.typeset .beta + .caption,
.typeset h3 + .caption,
.typeset .gamma + .caption {
margin-top: -1rem;
}
.typeset .delta + .caption,
.typeset .epsilon + .caption,
.typeset .zeta + .caption {
margin-top: 0rem;
}
.typeset blockquote p {
border-left: 0.15rem solid #0E58F5;
font-style: italic;
padding-left: 1rem;
margin-bottom: 1.9066566667rem;
padding-bottom: 0.5466766667rem;
}
@media screen and (min-width: 34.375em) {
.typeset blockquote p {
margin-bottom: 1.8257042857rem;
padding-bottom: 0.5871528571rem;
}
}
@media screen and (min-width: 50em) {
.typeset blockquote p {
margin-bottom: 1.81599rem;
padding-bottom: 0.59201rem;
}
}
@media screen and (min-width: 64em) {
.typeset blockquote p {
margin-bottom: 1.79999rem;
padding-bottom: 0.60001rem;
}
}
@media screen and (min-width: 100em) {
.typeset blockquote p {
margin-bottom: 1.7873584211rem;
padding-bottom: 0.6063257895rem;
}
}
@media screen and (min-width: 34.375em) {
.typeset blockquote {
margin-left: -1rem;
}
}
.typeset hr {
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#BDC8CC));
background-image: -webkit-linear-gradient(top, transparent 50%, #BDC8CC 50%);
background-image: linear-gradient(to bottom, transparent 50%, #BDC8CC 50%);
background-position: 0 50%;
background-repeat: repeat-x;
background-size: 100% 0.15rem;
border: 0;
margin: 0;
padding-bottom: 3rem;
padding-top: 3rem;
}
.typeset code,
.typeset pre {
background-color: #F5F4F2;
font-family: 'Source Code Pro', Menlo, monospace;
}
.typeset pre {
display: block;
margin-bottom: 2rem;
padding: 1rem;
white-space: pre;
white-space: pre-wrap;
word-break: break-all;
word-wrap: break-word;
}
.typeset code {
line-height: 1rem;
font-size: 1.0666666667rem;
}
@media screen and (min-width: 34.375em) {
.typeset code {
font-size: 0.9714285714rem;
}
}
@media screen and (min-width: 50em) {
.typeset code {
font-size: 0.96rem;
}
}
@media screen and (min-width: 64em) {
.typeset code {
font-size: 0.8823529412rem;
}
}
@media screen and (min-width: 100em) {
.typeset code {
font-size: 0.8210526316rem;
}
}
.typeset .upper {
letter-spacing: 0.1rem;
text-transform: uppercase;
}
.typeset .small-caps {
-webkit-font-feature-settings: 'smcp' 1, 'kern' 1;
-moz-font-feature-settings: 'smcp' 1, 'kern' 1;
-ms-font-feature-settings: 'smcp' 1, 'kern' 1;
-o-font-feature-settings: 'smcp' 1, 'kern' 1;
font-feature-settings: 'smcp' 1, 'kern' 1;
letter-spacing: 0.1rem;
}
.typeset .lining-numerals {
-webkit-font-feature-settings: 'lnum' 1, 'kern' 1;
-moz-font-feature-settings: 'lnum' 1, 'kern' 1;
-ms-font-feature-settings: 'lnum' 1, 'kern' 1;
-o-font-feature-settings: 'lnum' 1, 'kern' 1;
font-feature-settings: 'lnum' 1, 'kern' 1;
}
.typeset .oldstyle-numerals {
-webkit-font-feature-settings: 'onum' 1, 'kern' 1;
-moz-font-feature-settings: 'onum' 1, 'kern' 1;
-ms-font-feature-settings: 'onum' 1, 'kern' 1;
-o-font-feature-settings: 'onum' 1, 'kern' 1;
font-feature-settings: 'onum' 1, 'kern' 1;
}
.section {
margin: 0 auto;
position: relative;
width: 94%;
}
.section:before,
.section:after {
display: table;
content: "";
}
.section:after {
clear: both;
}
@media screen and (min-width: 64em) {
.section {
max-width: 64.7058823529rem;
}
}
@media screen and (min-width: 100em) {
.section {
max-width: 68.4210526316rem;
}
}
.single {
margin: 0 auto;
max-width: 41.6666666667rem;
}
@media screen and (min-width: 34.375em) {
.single {
max-width: 39.2857142857rem;
}
}
@media screen and (min-width: 50em) {
.single {
max-width: 40rem;
}
}
@media screen and (min-width: 64em) {
.single {
max-width: 40rem;
}
}
@media screen and (min-width: 100em) {
.single {
max-width: 39.4736842105rem;
}
}
.column {
margin: 0 auto;
width: 100%;
max-width: 41.6666666667rem;
}
@media screen and (min-width: 34.375em) {
.column {
float: left;
margin: inherit;
max-width: auto;
padding-left: 1rem;
padding-right: 1rem;
}
}
@media screen and (min-width: 64em) {
.column {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media screen and (min-width: 34.375em) {
.column--duo {
width: 50%;
}
}
@media screen and (min-width: 34.375em) {
.column--trio {
width: 33.333%;
}
}
@media screen and (min-width: 34.375em) {
.column--quad {
width: 50%;
}
}
@media screen and (min-width: 50em) {
.column--quad {
width: 25%;
}
}
@media screen and (min-width: 34.375em) {
.column--main {
max-width: 65%;
}
}
@media screen and (min-width: 50em) {
.column--main {
max-width: 65%;
}
}
@media screen and (min-width: 64em) {
.column--main {
max-width: 65%;
}
}
@media screen and (min-width: 100em) {
.column--main {
max-width: 63.5384615385%;
}
}
@media screen and (min-width: 34.375em) {
.column--sidebar {
padding-right: 2rem;
max-width: 35%;
}
}
@media screen and (min-width: 50em) {
.column--sidebar {
max-width: 35%;
}
}
@media screen and (min-width: 64em) {
.column--sidebar {
padding-right: 4rem;
max-width: 35%;
}
}
@media screen and (min-width: 100em) {
.column--sidebar {
max-width: 36.4615384615%;
}
}
@media screen and (min-width: 34.375em) {
.column--main + .column--sidebar {
padding-left: 2rem;
padding-right: 1rem;
}
}
@media screen and (min-width: 64em) {
.column--main + .column--sidebar {
padding-left: 4rem;
padding-right: 2rem;
}
}
@media screen and (min-width: 64em) {
.column--trio p,
.column--trio li,
.column--quad p,
.column--quad li,
.column--sidebar p,
.column--sidebar li {
line-height: 2rem;
font-size: 0.9941176471rem;
margin-bottom: 1.33799rem;
padding-top: 0.66201rem;
}
}
@media screen and (min-width: 100em) {
.column--trio p,
.column--trio li,
.column--quad p,
.column--quad li,
.column--sidebar p,
.column--sidebar li {
line-height: 2rem;
font-size: 0.9263157895rem;
margin-bottom: 1.3149373684rem;
padding-top: 0.6850626316rem;
}
}
@media screen and (min-width: 34.375em) {
.column--right {
max-width: 65%;
margin-left: 35%;
}
}
@media screen and (min-width: 50em) {
.column--right {
max-width: 65%;
margin-left: 35%;
}
}
@media screen and (min-width: 64em) {
.column--right {
max-width: 65%;
margin-left: 35%;
}
}
@media screen and (min-width: 100em) {
.column--right {
max-width: 63.5384615385%;
margin-left: 36.4615384615%;
}
}
@media screen and (min-width: 34.375em) {
.column--right .sidenote {
left: 0;
padding-left: 1rem;
padding-right: 2rem;
position: absolute;
max-width: 35%;
}
}
@media screen and (min-width: 50em) {
.column--right .sidenote {
max-width: 35%;
}
}
@media screen and (min-width: 64em) {
.column--right .sidenote {
padding-right: 4rem;
max-width: 35%;
}
}
@media screen and (min-width: 100em) {
.column--right .sidenote {
padding-left: 2rem;
max-width: 36.4615384615%;
}
}
@media screen and (min-width: 34.375em) {
.column--left {
max-width: 65%;
}
}
@media screen and (min-width: 50em) {
.column--left {
max-width: 65%;
}
}
@media screen and (min-width: 64em) {
.column--left {
max-width: 65%;
}
}
@media screen and (min-width: 100em) {
.column--left {
max-width: 63.5384615385%;
}
}
@media screen and (min-width: 34.375em) {
.column--left .sidenote {
padding-left: 2rem;
padding-right: 1rem;
position: absolute;
max-width: 35%;
left: 65%;
}
}
@media screen and (min-width: 50em) {
.column--left .sidenote {
max-width: 35%;
left: 65%;
}
}
@media screen and (min-width: 64em) {
.column--left .sidenote {
padding-left: 4rem;
max-width: 35%;
left: 65%;
}
}
@media screen and (min-width: 100em) {
.column--left .sidenote {
padding-right: 2rem;
max-width: 36.4615384615%;
left: 63.5384615385%;
}
}
*,
body {
box-sizing: border-box;
outline: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
*::before,
*::after,
body::before,
body::after {
box-sizing: inherit;
}
body {
width: 100%;
padding: 0 20px;
margin: 0 auto;
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzMwMCcgaGVpZ2h0PSczMDAnPgoJPGRlZnM+CgkJPGZpbHRlciBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9J3NSR0InIGlkPSdmaWx0ZXIzMDAxJz4KCQkJPGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzEwMCAuODUnIG51bU9jdGF2ZXM9JzEnLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IGhlaWdodD0nMjAwJScgd2lkdGg9JzIwMCUnIHN0eWxlPSdmaWx0ZXI6dXJsKCNmaWx0ZXIzMDAxKScgLz4KCTxyZWN0IGhlaWdodD0nMjAwJScgd2lkdGg9JzIwMCUnIHN0eWxlPSdmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjAuODM7Jy8+Cjwvc3ZnPg==");
}
#visualization {
margin-top: 30px;
}
svg {
overflow: visible;
}
header {
display: block;
}
header:before,
header:after {
display: table;
content: "";
}
header:after {
clear: both;
}
.info {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 82.9403914003%;
margin-left: 8.5298042998%;
background-color: #fff;
border: 1px solid transparent;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
padding: 10px 20px 20px;
}
.info:last-child {
margin-right: 0;
}
@media screen and (min-width: 750px) {
.info {
position: absolute;
float: left;
display: block;
margin-right: 2.3576515979%;
width: 23.2317613015%;
margin-left: 72.5033365485%;
}
.info:last-child {
margin-right: 0;
}
}
.info h2,
.info p {
font-family: 'Avenir Next';
}
.info h2 {
text-align: center;
text-transform: uppercase;
font-weight: 400;
font-size: 1.5em;
}
#bubbles {
position: relative;
}
#form-container {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 100%;
margin-top: 20px;
}
#form-container:last-child {
margin-right: 0;
}
@media screen and (min-width: 750px) {
#form-container {
margin-top: 50px;
}
}
#form-container form#g-form {
background-color: #fff;
border: 1px solid transparent;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
float: left;
display: block;
margin-right: 2.3576515979%;
width: 82.9403914003%;
margin-left: 8.5298042998%;
}
#form-container form#g-form:last-child {
margin-right: 0;
}
@media screen and (min-width: 750px) {
#form-container form#g-form {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 31.7615656014%;
margin-left: 34.1192171993%;
}
#form-container form#g-form:last-child {
margin-right: 0;
}
}
#form-container form#g-form input {
padding: 6px;
float: left;
display: block;
margin-right: 2.8425855704%;
width: 100%;
font-family: 'Avenir Next';
font-size: 1.25rem;
border: 1px solid transparent;
background-color: white;
font-weight: 400;
border-radius: 1px;
margin-right: 0;
}
#form-container form#g-form input:last-child {
margin-right: 0;
}
@media screen and (min-width: 750px) {
#form-container form#g-form input {
float: left;
display: block;
width: 80.567227764%;
}
#form-container form#g-form input:last-child {
width: 73.144257412%;
}
}
#form-container form#g-form input::-webkit-input-placeholder {
font-family: 'Avenir Next';
}
#form-container form#g-form input::-moz-placeholder {
font-family: 'Avenir Next';
}
#form-container form#g-form input:-moz-placeholder {
font-family: 'Avenir Next';
}
#form-container form#g-form input:-ms-input-placeholder {
font-family: 'Avenir Next';
}
#form-container form#g-form input:focus,
#form-container form#g-form input:active {
background-color: #f7f7f8;
color: #2b353e;
border-right: 0;
}
#form-container form#g-form button {
float: left;
display: block;
margin-right: 2.8425855704%;
width: 100%;
height: 34px;
background: #bfc1ca;
border: none;
cursor: pointer;
color: #404e5c;
}
#form-container form#g-form button:last-child {
margin-right: 0;
}
@media screen and (min-width: 550px) {
#form-container form#g-form button {
height: 38px;
}
}
@media screen and (min-width: 800px) {
#form-container form#g-form button {
height: 40px;
}
}
@media screen and (min-width: 1024px) {
#form-container form#g-form button {
height: 43px;
}
}
@media screen and (min-width: 1600px) {
#form-container form#g-form button {
height: 47px;
}
}
@media screen and (min-width: 750px) {
#form-container form#g-form button {
float: left;
display: block;
width: 26.855742588%;
margin-right: 0;
}
#form-container form#g-form button:last-child {
width: 19.432772236%;
}
}
#form-container form#g-form button::before {
font-family: 'wsc';
content: "c";
font-size: 2em;
}
input {
-webkit-text-fill-color: #b6bfc9;
}
input:focus,
input:active {
color: black;
-webkit-text-fill-color: black;
}
input:hover {
-webkit-text-fill-color: black;
}
.g-overlay {
fill: none;
pointer-events: all;
}
.g-node g {
fill: #888b9b;
}
.g-node circle {
background-color: #fff;
border: 1px solid transparent;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
border-color: #ebeff6;
}
.g-node.g-hover g {
fill: #7a7d90;
}
.g-node.g-selected g {
fill: #6d7183;
-webkit-box-shadow: rgba(0, 0, 0, 0.09706) 0px 1px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.09706) 0px 1px 1px 0px;
}
a.g-label {
color: inherit;
cursor: pointer;
display: block;
text-align: center;
text-decoration: none;
line-height: 1em;
position: absolute;
font-family: "AvenirNextCondensed-Medium", 'Avenir Next', Arial;
text-transform: uppercase;
}
a.g-label .g-value {
font-size: 11px;
white-space: nowrap;
}
#text {
width: 100%;
min-height: 700px;
}
#text .mentions-wrapper,
#text .header-wrapper {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 100%;
}
#text .mentions-wrapper:last-child,
#text .header-wrapper:last-child {
margin-right: 0;
}
.mention-wrapper,
.heading-wrapper {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 100%;
}
.mention-wrapper:last-child,
.heading-wrapper:last-child {
margin-right: 0;
}
.g-mentions {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 100%;
}
.g-mentions:last-child {
margin-right: 0;
}
@media screen and (min-width: 750px) {
.g-mentions {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 31.7615656014%;
}
.g-mentions:last-child {
margin-right: 0;
}
}
.g-mentions {
padding-left: 30px;
margin-bottom: 30px;
}
@media screen and (min-width: 750px) {
.g-mentions {
margin-bottom: 0;
}
}
.g-mentions .g-header {
border-bottom: 1px dashed #dddddd;
margin-left: -30px;
}
.g-mentions .g-header h2 {
text-align: center;
text-transform: uppercase;
font-weight: 400;
font-family: 'Avenir Next W01 Light','Avenir Next', 'Arial';
}
.g-mentions .g-header h2 span.emphasize {
font-family: 'Avenir Next LT W02 Demi', 'Avenir Next', 'Arial';
font-weight: 600;
}
@media screen and (min-width: 750px) {
.g-mentions .g-header h2 span {
display: block;
}
}
.g-mentions .g-header h2 span {
font-weight: 700;
}
.g-mentions.g-barrier h2 span {
color: #a04467;
}
.g-mentions.g-accomplish h2 span {
color: #3c9ba9;
}
.g-mentions.g-help {
margin-right: 0;
}
.g-mentions.g-help h2 span {
color: #ff6814;
}
.g-mention {
padding: 0 15px 0 30px;
margin-top: 30px !important;
clear: both;
margin: -1px 0 1.5em 0;
}
.g-mention p {
color: #444444;
font-family: Georgia;
padding-right: 20px;
}
.g-mention p::before {
right: 5px;
content: 'a';
margin: 0.25em 0 0 -20px;
}
.g-mention p::after {
top: 7px;
content: 'b';
margin: 0.25em -20px 0 0.1em;
padding-left: 2px;
}
.g-mention p::before,
.g-mention p::after {
color: #dddddd;
font-family: wsc;
position: relative;
width: 15px;
font-size: .8em;
}
.g-mention a {
border-radius: 3px;
padding: 0px 3px 3px;
text-decoration: none;
}
.g-has-topic .g-isnt-topic,
.g-hasnt-topic .g-is-topic {
display: none;
}
.g-help a {
background-color: #ffdbc7;
color: #e05000;
}
.g-accomplish a {
background-color: #c0dbde;
color: #2e7984;
}
.g-barrier a {
background-color: #ffd2e3;
color: #a04467;
}
</style>
</head>
<body>
<div id="visualization">
<section class="info">
<h2>About</h2>
<p>this is data from ....</p>
</section>
<header class="typeset">
<div id="form-container">
<form id="g-form">
<input type="text" name="search" placeholder="Add word or phrase" tabindex="1" class="p">
<button></button>
</form>
</div>
</header>
<section id="bubbles">
<div class="g-labels"></div>
<svg width="100%" height="540" class="g-nodes">
<defs>
<filter id="drop-shadow">
<fegaussianblur in="SourceGraphic" stddeviation=".4" result="shadow" />
<feoffset in="shadow" dx="1" dy="1.5" result="shadow" />
<fecolormatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0 0 .08 .04 .09 0" result="shadow" />
<feblend in="SourceGraphic" in2="shadow" />
</filter>
</defs>
</svg>
</section>
<section id="text" class="typeset">
<div class="heading-wrapper"></div>
<div class="mention-wrapper">
<div class="g-mentions g-accomplish">
<div class="g-header">
<h2>I'm Here to <span class="emphasize">Accomplish</span></h2>
</div>
</div>
<div class="g-mentions g-barrier">
<div class="g-header">
<h2>These are My <span class="emphasize">Barriers</span></h2>
</div>
</div>
<div class="g-mentions g-help">
<div class="g-header">
<h2>This is What Will <span class="emphasize">Help</span></h2>
</div>
</div>
</div>
</section>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = {};
(function() {
data.sentiments = [{
name: "accomplish",
notes: [
"Be able to speak the tech jargon more confidently",
"Be more welcoming to new friends",
"Become a better public attendee by becoming less nervous",
"Become confident in my knowledge and skills",
"Become more confident speaking in public",
"Blog regularly",
"Build a marketable Rails app",
"Build a real website",
"Build my network of amazing awesome female developers",
"Build with Ruby Rails JavaScript",
"Choose one speaking idea to build out and see through",
"Contribute to Open Source",
"Contribute to Open Source projects",
"Create a reputation for myself in the tech community",
"Do a collaborative project with others here",
"Do more public speaking in Chicago",
"Do one lightning talk",
"Establish myself as a thought leader in the tech community",
"Finish Open Source project",
"Gain better writing skills",
"Gain confidence to speak in public",
"Gain confidence and peace of mind",
"Get a job in technology",
"Get blog running",
"Get help learning a new technology",
"Get my first freelance client",
"Get talks accepted at conferences",
"Give a lightning talk",
"Give a lightning talk",
"Give a lightning talk ",
"Give a talk",
"Give back to the tech community",
"Help lead more with Write/Speak/Code",
"I'd like to develop a tech-related talk",
"Learn about Ruby Rails Java Python HTML CSS everything",
"Learn more about Open Source and how to contribute",
"Learn more about how to write better code",
"Make an app",
"Master Wordpress",
"Meet women developers",
"Open Source contribution",
"Practice speaking in public",
"Rock my Ruby class",
"Speak at a conference",
"Speak at a conference this year",
"Submit a talk for a conference",
"Submit to a conference outside of Chicago",
"Write an article and publish it",
"Write blog posts related to things I'm learning",
"Write code with understanding what it is",
"Write more proposals to conferences",
"Write my ideas out and finish them",
"Write proposal and practice it"
]
}, {
name: "barriers",
notes: [
"Coming up with topics and finding time to improve my knowledge enough",
"Fear of shaking and forgetting what I want to say",
"Hard to get downtown for activities",
"I don't know enough. What I know is not new or cutting edge. If I post what I know people will see I am a beginner or there are better ways to do it",
"I need more experience; I'm very hard on myself; I don't dedicate time everyday to learning and practicing\u2026so basically me.",
"I think I have nothing to talk about",
"I'm tired",
"Inertia: can't think of a good topic that's interesting and I know about",
"Lack of money/time/energy",
"Lack of organization self-confidence over-commitment",
"Lack of self-confidence",
"My nerves/procrastination",
"My professional network within the tech community isn't very strong",
"No design/UX experience",
"Not confident in my skills",
"Not knowing how to write a good talk proposal",
"Procrastination and habit",
"Saying something incorrectly or not knowing the terminology",
"Shyness",
"Skill Level",
"Social Anxiety",
"Social Anxiety",
"Time",
"Time",
"Too little spare time",
"Just to have Learn here"
]
}, {
name: "help",
notes: [
"7:30 start time",
"A better laptop",
"A mentor closely related to my career path to help guide me",
"A supportive audience",
"A workshop to develop my personal toolkit",
"Accountability",
"An event/night/exercise focused on sharing our technical skills to remind me that I have them!",
"Any advice on how to get over it and sound more confident",
"Be confident",
"Being around awesome encouraging women at WSC will encourage me to actually do these things",
"Being reminded of the value of my voice",
"Breathing exercises",
"Code more",
"Coffee or Whiskey",
"Faking it until I change",
"Feedback on talk proposal",
"Feeling accountable",
"Fishing for compliments",
"Focus",
"Forums etc. to keep involved with unable to attend in person",
"Friends",
"Friends who can see the real me",
"Go to seminars and network ",
"Going out more",
"Having fun with it",
"Help coming up with topics that use the amount of knowledge I already have. Not what I think I need to know and help finding audience",
"How did other attendees get started?",
"How to find an opportunity to present",
"I need to believe I have something to share and just do it",
"I'd like to accomplish my goals by friending a supportive group of individuals",
"Join more groups",
"Keep learning",
"Keep on attending workshops meetups and get togethers to help foster learning",
"Meet people that are doing code",
"More exposure to speaking",
"More metopes",
"Motivation from other people doing interesting things",
"My calendar",
"Positive feedback and support",
"Positive self-talk",
"Power posing",
"Practice",
"Practice",
"Reach out for help more",
"Research such as Google",
"Support",
"Support from friends",
"Take a design class",
"Talking to more people",
"Time to practice with equipment",
"Tips",
"What are the steps to contribute to Open Source",
"Workshop on how to write them",
"Write Speak Code",
"hearing more from conference organizers and attendees",
"make a presentation at a user group meeting",
"topic brainstorming reviewing proposals",
"work on a project with someone outside my company",
"speed dating proposal ideas",
"just to have Learn here too",
"I have hope, only here! Hope."
]
}].map(sentiment);
data.topics = [{
name: "Conference",
re: /\b(conference?)\b/gi,
x: 558,
y: 181
}, {
name: "Talk",
re: /\b(talk|talking|talks)\b/gi,
x: 43,
y: 203
}, {
name: "Motivation",
re: /\b(Motivation|motivate|motivated|motivates)\b/gi,
x: 267,
y: 218
}, {
name: "Proposal",
re: /\b(Proposal(?:s)?)\b/gi,
x: 393,
y: 224
}, {
name: "Learn",
re: /\b(Learn)\b/gi,
x: 214,
y: 248
}, {
name: "Write",
re: /\b(write|writing)\b/gi,
x: 829,
y: 215
}, {
name: "Contribute",
re: /\b(Contribute|contrubution|contributor)\b/gi,
x: 139,
y: 177
}, {
name: "Open Source",
re: /\b(open source)\b/gi,
x: 677,
y: 211
}, {
name: "Confident",
re: /\b(confiden(?:ce|t|tial)?)\b/gi,
x: 264,
y: 272
}, {
name: "Jobs",
re: /\b(job[a-z]*)\b/gi,
x: 505,
y: 116
}, {
name: "Leadership",
re: /\b(leader[a-z]*)\b/gi,
x: 598,
y: 275
}, {
name: "Success",
re: /\b(succe[a-z]*)\b/gi,
x: 669
}, {
name: "Women",
re: /\b(wom[ae]n)\b/gi,
x: 308,
y: 323,
arrow: "women"
}].map(topic);
data.topic = function(name) {
var t = topic({
name: name,
re: new RegExp("\\b(" + d3.requote(name) + ")\\b", "gi")
}, data.topics.length);
data.topics.push(t);
return t;
};
function sentiment(sentiment) {
sentiment.notes = sentiment.notes.map(note);
sentiment.sections = sections(sentiment.notes);
sentiment.wordCount = d3.sum(sentiment.sections, function(d) {
return countWords(d.note.text.substring(d.i, d.j));
});
return sentiment;
}
function note(text, i) {
return {
text: text,
id: i
};
}
function sections(notes) {
var attendeeRe = /(?:\n|^)([A-Z\.()\- ]+): /g,
sections = [];
notes.forEach(function(note) {
var attendeeName = "AUDIENCE",
match,
i = attendeeRe.lastIndex = 0;
while (match = attendeeRe.exec(note.text)) {
if (match.index > i) sections.push({
attendee: attendeeName,
note: note,
i: i,
j: match.index
});
attendeeName = match[1];
i = attendeeRe.lastIndex;
}
sections.push({
attendee: "",
note: note,
i: 0,
j: note.text.length
});
});
return sections;
}
function topic(topic, i) {
topic.id = i;
topic.count = 0;
topic.cx = topic.x;
topic.cy = topic.y;
topic.sentiments = data.sentiments.map(function(sentiment) {
var count = 0,
mentions = [];
sentiment.sections.forEach(function(section) {
var text = section.note.text.substring(section.i, section.j),
match;
topic.re.lastIndex = 0;
while (match = topic.re.exec(text)) {
++count;
mentions.push({
topic: topic,
section: section,
i: section.i + match.index,
j: section.i + topic.re.lastIndex
});
}
});
topic.count += count = count / sentiment.wordCount * 25e3;
return {
count: count,
mentions: mentions
};
});
// console.log(topic);
// console.log(topic.count);
return topic;
}
function countWords(text) {
return text.split(/\s+/g)
.filter(function(d) {
return d !== "—";
})
.length;
}
})();
(function() {
var height = 540;
var width = function width() {
return parseInt(d3.select("#bubbles").style("width"));
}
var collisionPadding = 4,
clipPadding = 4,
minRadius = 16, // minimum collision radius
maxRadius = 65, // also determines collision search radius
maxMentions = 100, // don't show full transcripts
activeTopic; // currently-displayed topic
var formatShortCount = d3.format(",.0f"),
formatLongCount = d3.format(".1f"),
formatCount = function(d) {
return (d < 10 ? formatLongCount : formatShortCount)(d);
};
var r = d3.scale.sqrt()
.domain([0, d3.max(data.topics, function(d) {
return d.count;
})])
.range([0, maxRadius]);
var force = d3.layout.force()
.charge(0)
.size([width(), height - 80])
.on("tick", tick);
var node = d3.select(".g-nodes").selectAll(".g-node"),
label = d3.select(".g-labels").selectAll(".g-label"),
arrow = d3.select(".g-nodes").selectAll(".g-note-arrow");
d3.select(window).on("hashchange", hashchange);
d3.select(window).on('resize', resize);
d3.select("#g-form").on("submit", submit);
updateTopics(data.topics);
hashchange();
// Update the known topics.
function updateTopics(topics) {
topics.forEach(function(d) {
d.r = r(d.count);
d.cr = Math.max(minRadius, d.r);
d.k = NaN;
if (isNaN(d.k)) d.k = .5;
if (isNaN(d.x)) d.x = (.1 - d.k) * (width() / 3) + Math.random();
d.bias = 0;
});
force.nodes(data.topics = topics).start();
updateNodes();
updateLabels();
tick({
alpha: 0
}); // synchronous update
}
function resize(e){
var width = function width() {
return parseInt(d3.select("#bubbles").style("width"));
}
force.size([width(), height]).resume();
}
// Update the displayed nodes.
function updateNodes() {
node = node.data(data.topics, function(d) {
return d.name;
});
node.exit().remove();
var nodeEnter = node.enter().append("a")
.attr("class", "g-node")
.attr("xlink:href", function(d) {
return "#" + encodeURIComponent(d.name);
});
node.call(force.drag).call(linkTopic);
nodeEnter.append("g").append("circle")
.attr("filter", "url(#drop-shadow)");
node.selectAll("rect")
.attr("y", function(d) {
return -d.r - clipPadding;
})
.attr("height", function(d) {
return 2 * d.r + 2 * clipPadding;
});
node.selectAll("circle")
.attr("r", function(d) {
return r(d.count);
});
}
// Update the displayed node labels.
function updateLabels() {
label = label.data(data.topics, function(d) {
return d.name;
});
label.exit().remove();
var labelEnter = label.enter().append("a")
.attr("class", "g-label")
.attr("href", function(d) {
return "#" + encodeURIComponent(d.name);
})
.call(force.drag)
.call(linkTopic);
labelEnter.append("div")
.attr("class", "g-name")
.text(function(d) {
return d.name;
});
label
.style("font-size", function(d) {
return Math.max(8, d.r / 2) + "px";
})
.style("width", function(d) {
return d.r * 2.5 + "px";
});
// Create a temporary span to compute the true text width.
label.append("span")
.text(function(d) {
return d.name;
})
.each(function(d) {
d.dx = Math.max(d.r * 2.5, this.getBoundingClientRect().width);
})
.remove();
label
.style("width", function(d) {
return d.dx + "px";
})
.select(".g-value")
.text(function(d) {
return formatShortCount(d.sentiments[0].count) + " - " + formatShortCount(d.sentiments[1].count);
});
// Compute the height of labels when wrapped.
label.each(function(d) {
d.dy = this.getBoundingClientRect().height;
});
}
// Update the active topic.
function updateActiveTopic(topic) {
d3.selectAll(".g-head").attr("class", topic ? "g-head g-has-topic" : "g-head g-hasnt-topic");
if (activeTopic = topic) {
node.classed("g-selected", function(d) {
return d === topic;
});
updateMentions(findMentions(topic));
d3.selectAll(".g-head a").text(topic.name);
d3.select(".g-accomplish .g-head span.g-count").text(formatCount(topic.sentiments[0].count));
d3.select(".g-barrier .g-head span.g-count").text(formatCount(topic.sentiments[1].count));
d3.select(".g-help .g-head span.g-count").text(formatCount(topic.sentiments[2].count));
} else {
node.classed("g-selected", false);
updateMentions(sampleMentions());
d3.selectAll(".g-head a").text("various topics");
d3.selectAll(".g-head span.g-count").text("some number of");
}
}
// Update displayed excerpts.
function updateMentions(mentions) {
var column = d3.selectAll(".g-mentions")
.data(mentions);
column.select(".g-truncated")
.style("display", function(d) {
return d.truncated ? "block" : null;
});
var mention = column.selectAll(".g-mention")
.data(groupMentionsByAttendee, function(d) {
return d.key;
});
mention.exit().remove();
mention.selectAll("p")
.remove();
var mentionEnter = mention.enter().insert("div", ".g-truncated")
.attr("class", "g-mention");
mention
.sort(function(a, b) {
return b.values.length - a.values.length;
});
var p = mention.selectAll("p")
.data(function(d) {
return d.values;
})
.enter().append("p")
.html(function(d) {
return d.section.note.text.substring(d.start, d.end).replace(d.topic.re, "<a>$1</a>");
});
if (activeTopic) {
p.attr("class", "g-hover");
} else {
p.each(function(d) {
d3.select(this).selectAll("a")
.datum(d.topic)
.attr("href", "#" + encodeURIComponent(d.topic.name))
.call(linkTopic);
});
}
}
// Return a random sample of mentions per sentiment, one per topic.
// Mentions are returned in chronological order.
function sampleMentions() {
// console.log(data.sentiments.length());
return data.sentiments.map(function(sentiment, i) {
return data.topics
.map(function(d) {
return d.sentiments[i].mentions;
})
.filter(function(d) {
return d.length;
})
.map(function(d) {
return d[Math.floor(Math.random() * d.length)];
})
.sort(orderMentions);
});
}
// Return displayable mentions per sentiment for the specified topic.
// If too many, a random sample of matching mentions is returned.
// Mentions are returned in chronological order.
function findMentions(topic) {
return data.sentiments.map(function(sentiment, i) {
var mentions = topic.sentiments[i].mentions;
if (mentions.length > maxMentions) {
shuffle(mentions).length = maxMentions;
mentions.sort(orderMentions);
mentions.truncated = true;
}
return mentions;
});
}
// Group mentions by attendee, collapse overlapping excerpts.
function groupMentionsByAttendee(mentions) {
return d3.nest()
.key(function(d) {
return d.section.attendee;
})
.rollup(collapseMentions)
.entries(mentions);
}
// Given an array of mentions, computes the start and end point of the context
// excerpt, and then collapses any overlapping excerpts.
function collapseMentions(mentions) {
var sentenceRe = /([!?.)]+)\s+/g, // sentence splitting requires NLP
i,
n = mentions.length,
d0,
d1;
// First compute the excerpt contexts.
for (i = 0; i < n; ++i) {
d0 = mentions[i];
d0.start = excerptStart(d0);
d0.end = excerptEnd(d0);
}
// Then collapse any overlapping excerpts (from the same note).
for (i = 1, d1 = mentions[0]; i < n; ++i) {
d0 = d1;
d1 = mentions[i];
if (d1.section.note.id === d0.section.note.id && d1.start >= d0.start && d1.start < d0.end) {
d1.start = -1;
d0.end = d1.end;
d1 = d0;
}
}
// Returns the start index of the excerpt for the specified mention.
function excerptStart(mention) {
var i = sentenceRe.lastIndex = Math.max(mention.section.i, mention.i - 80),
match;
while (match = sentenceRe.exec(mention.section.note.text)) {
if (match.index < mention.i - 20) return match.index + match[0].length;
if (i <= mention.section.i) break;
sentenceRe.lastIndex = i = Math.max(mention.section.i, i - 20);
}
return mention.section.i;
}
// Returns the end index of the excerpt for the specified mention.
function excerptEnd(mention) {
var i = mention.section.j,
match;
sentenceRe.lastIndex = mention.j + 40;
match = sentenceRe.exec(mention.section.note.text);
return match ? Math.min(match.index + match[1].length, i) : i;
}
return mentions.filter(function(d) {
return d.start >= 0;
});
}
// Orders mentions chronologically: by note and position within note.
function orderMentions(a, b) {
return a.section.note.id - b.section.note.id || a.i - b.i;
}
// Assign event handlers to topic links.
function linkTopic(a) {
a.on("click", click)
.on("mouseover", mouseover)
.on("mouseout", mouseout);
}
// Returns the topic matching the specified name, approximately.
// If no matching topic is found, returns undefined.
function findTopic(name) {
for (var i = 0, n = data.topics.length, t; i < n; ++i) {
if ((t = data.topics[i]).name === name || new RegExp("^" + (t = data.topics[i]).re.source + "$", "i").test(name)) {
return t;
}
}
}
// Returns the topic matching the specified name, approximately.
// If no matching topic is found, a new one is created.
function findOrAddTopic(name) {
var topic = findTopic(name);
if (!topic) {
topic = data.topic(name.substring(0, 1).toUpperCase() + name.substring(1));
topic.y = 0;
updateTopics(data.topics);
}
return topic;
}
// Simulate forces and update node and label positions on tick.
function tick(e) {
node
.each(bias(e.alpha * 105))
.each(collide(.5))
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
label
.style("left", function(d) {
return (d.x - d.dx / 2) + "px";
})
.style("top", function(d) {
return (d.y - d.dy / 2) + "px";
});
arrow.style("stroke-opacity", function(d) {
var dx = d.x - d.cx,
dy = d.y - d.cy;
return dx * dx + dy * dy < d.r * d.r ? 1 : 0;
});
}
// A left-right bias causing topics to orient by sentiment preference.
function bias(alpha) {
return function(d) {
d.x += d.bias * alpha;
};
}
// Resolve collisions between nodes.
function collide(alpha) {
var q = d3.geom.quadtree(data.topics);
return function(d) {
var r = d.cr + maxRadius + collisionPadding,
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
q.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d) && d.other !== quad.point && d !== quad.point.other) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.cr + quad.point.r + collisionPadding;
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
};
}
// Fisher–Yates shuffle.
function shuffle(array) {
var m = array.length,
t, i;
while (m) {
i = Math.floor(Math.random() * m--);
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
// Given two quantities a and b, returns the fraction to split the circle a + b.
function fraction(a, b) {
var k = a / (a + b);
if (k > 0 && k < 1) {
var t0, t1 = Math.pow(12 * k * Math.PI, 1 / 3);
for (var i = 0; i < 10; ++i) { // Solve for theta numerically.
t0 = t1;
t1 = (Math.sin(t0) - t0 * Math.cos(t0) + 2 * k * Math.PI) / (1 - Math.cos(t0));
}
k = (1 - Math.cos(t1 / 2)) / 2;
}
return k;
}
// Update the active topic on hashchange, perhaps creating a new topic.
function hashchange() {
var name = decodeURIComponent(location.hash.substring(1)).trim();
updateActiveTopic(name && name != "!" ? findOrAddTopic(name) : null);
}
// Trigger a hashchange on submit.
function submit() {
var name = this.search.value.trim();
location.hash = name ? encodeURIComponent(name) : "!";
this.search.value = "";
d3.event.preventDefault();
}
// Clear the active topic when clicking on the chart background.
function clear() {
location.replace("#!");
}
// Rather than flood the browser history, use location.replace.
function click(d) {
location.replace("#" + encodeURIComponent(d === activeTopic ? "!" : d.name));
d3.event.preventDefault();
}
// When hovering the label, highlight the associated node and vice versa.
// When no topic is active, also cross-highlight with any mentions in excerpts.
function mouseover(d) {
node.classed("g-hover", function(p) {
return p === d;
});
if (!activeTopic) d3.selectAll(".g-mention p").classed("g-hover", function(p) {
return p.topic === d;
});
}
// When hovering the label, highlight the associated node and vice versa.
// When no topic is active, also cross-highlight with any mentions in excerpts.
function mouseout(d) {
node.classed("g-hover", false);
if (!activeTopic) d3.selectAll(".g-mention p").classed("g-hover", false);
}
})();
</script>
</body>
</html>