brianrusso/index.html

## index.html
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="index.css">
</head>

<div style="width: 972px; margin: 0 auto; text-align: left;">
<div id="main" style="border: 1px solid #999; padding: 0; width: 970px;">
<div id="interactiveShell">
<div class="columnGroup firstColumnGroup">
<div class="ledeStory">
<div class="module insetHFullWidth">
<div class="storyHeader">
<h6 class="dateline">
</div><!--close .storyHeader -->
</div><!--close .storySummary -->
</div><!--end .module insetHFullWidth -->
<div id="interactiveFreeFormMain">
<meta name="viewport" content="width=990">

<div class="g-legend" style="position: absolute; width: 970px;">
<div title="nds mentions" class="word-count g-arrow g-nds"></div>
<div title="nss mentions" class="word-count g-arrow g-nss"></div>
</div>
<div class="g-legend" style="position:absolute;width:970px;">
<div class="g-nds g-arrow">More prevalent in <br>NDS</div>
<div class="g-nss g-arrow">More prevalent in <br>NSS</div>
<div class="g-overview"><span class="g-swatch g-nss"></span>NDS vs<span class="g-swatch g-nds"></span>NSS</div>
</div>
<div id="g-chart">

<div class="g-labels"></div>
<svg class="g-nodes" width="970" height="540">

</svg>
</div>
<p><div class="g-body">
<div class="g-mentions g-nds">
<h3 class="g-head g-hasnt-topic">
<span class="g-isnt-topic"><br>The NDS</span>
<span class="g-is-topic"><span style="padding-left: 0.76em;">The NDS</span> mentioned <a>&hellip;</a><br><span class="g-count"></span> times per 2500 words</span>
</h3>
<div class="g-divider"></div>
</div>
<div class="g-mentions g-nss">
<h3 class="g-head g-hasnt-topic">
<span class="g-isnt-topic"><br>The NSS</span>
<span class="g-is-topic">The NSS mentioned <a>&hellip;</a><br><span class="g-count"></span> times per 2500 words</span>
</h3>
<div class="g-divider"></div>
<div class="g-truncated">Due to a large number of mentions, only a sampling of excerpts are shown.</div>
</div>
<br clear="all"><br>
</div>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/761985/d3.v2.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/761985/data.js"></script>
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/761985/innocode.js"></script>


<!--<![endif]-->
<!--pipeline: ac823b240e99920e91945dbec49f35b268c09c38 -->    </div><!--close main free form -->
<div class="insetHFullWidth">
<div id="interactiveFooter" class="opposingFloatControl wrap">
<div class="metaData element1">
</div>

</div>
</div><!--close .metaData element1 -->
<div class="element2">
</div><!--close .element2 -->
</div><!--close #interactiveFooter -->
</div><!--close .insetHFullWidth -->
</div><!--close .ledeStory -->
</div><!--close .columnGroup -->

</div><!--close #interactiveShell -->
</div>
</div>
</body>
</html>

## pqzyea.markdown

      
    Raw
  

              pqzyea.markdown
            
          
    PQzyea

A Pen by Brian on CodePen.
License.

  
## style.css
#g-chart {
  overflow: hidden;
  position: relative;
  top:40px;
}

#g-form {
  font: 16px sans-serif;
  text-align: center;
}

#g-form input {
  border-right: none;
  border-radius: 3px 0 0 3px;
  border: solid 1px #ccc;
  font: inherit;
  padding: 4px 8px;
  width: 223px;
  vertical-align: middle;
}

#g-form button {
  background: #004276;
  border: none;
  border-radius: 0 3px 3px 0;
  color: #fff;
  font: inherit;
  font-weight: bold;
  padding: 5px 8px;
  position: relative;
  top: 1px;
  width: 30px;
}

.g-legend {
  color: #999;
  font: 14px/1.3em sans-serif;
  height: 30px;
  margin-top: 15px;
  position: relative;
  text-align: center;
}

.g-arrow {
  position: absolute;
  width: 150px;
}

.word-count {
  width: 130px;
  margin-top: -8px;
}

.word-count.g-nds {
  text-align: right;
}

.word-count.g-nss {
  text-align: left;
}

.g-arrow:before {
  position: absolute;
  font-size: 50px;
  font-style: normal;
  top: 15px;
}

.g-nds.g-arrow {
  left: 170px;
  padding-left: 40px;
}

.g-arrow.g-nds:before {
  content: "←";
  right: 100px;
}

.g-nss.g-arrow {
  right: 170px;
  padding-right: 40px;
}

.g-arrow.g-nss:before {
  content: "→";
  left: 100px;
}

.word-count.g-arrow:before {
  content: "";
  right: 0;
  left: 0;
}


.g-legend .g-pointer {
  width: 180px;
}

.g-overview {
  position: absolute;
  left: 360px;
  text-align: center;
  width: 250px;
  font-size:30px;
}

.g-legend .g-nds.g-pointer {
  position: absolute;
  left: 314px;
  text-align: right;
  padding-right: 20px;
}

.g-swatch {
  width: 15px;
  height: 15px;
  display: inline-block;
  position: relative;
  top: 1px;
  margin: 0 3px;
}

.g-nss.g-swatch {
  background-color: #0c54de;
}

.g-nds.g-swatch {
  background-color: #f1770c;
}

.g-notes {
  font: 11px/1.3em sans-serif;
  height: 100px;
  position: absolute;
  top: 430px;
}

.g-note {
  color: #999;
  position: absolute;
  width: 212px;
}

.g-note b {
  color: #333;
  text-transform: uppercase;
}

.g-note-arrow {
  fill: none;
  stroke: #aaa;
  stroke-dasharray: 2,2;
  stroke-width: 1.5px;
  -webkit-transition: stroke-opacity 250ms ease;
  -moz-transition: stroke-opacity 250ms ease;
  -ms-transition: stroke-opacity 250ms ease;
  -o-transition: stroke-opacity 250ms ease;
  transition: stroke-opacity 250ms ease;
}

.g-error {
  background: #ffa;
  border: solid 1px #ccc;
  font-size: 16px;
  line-height: 1.2em;
  margin: 10px;
  padding: 10px;
}

.g-node .g-nds {
  fill: #0c54de;
}

.g-node.g-hover .g-nds {
  fill: #0c54dea6; /* darker(.5) */
}

.g-nds {
    fill: #0c54de;
}
.g-node.g-selected .g-nds {
  stroke: #6081a3; /* c *= 2, darker(2) */
  stroke-width: 3px;
}

.g-node .g-nss {
  fill: #f1770c;
}

.g-node.g-hover .g-nss {
  fill: #f1770ca6; /* darker(.5) */
}

.g-node.g-selected .g-nss {
  stroke: #af5e61; /* c *= 2, darker(2) */
  stroke-width: 3px;
}

.g-node .g-split {
  stroke: #000;
  stroke-opacity: .18;
  shape-rendering: crispEdges;
}

a.g-label {
  color: inherit;
  cursor: pointer;
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 1em;
  position: absolute;
}

.g-label .g-value {
  font: 11px sans-serif;
  white-space: nowrap;
}

.g-overlay,
.g-node,
.g-label {
  -webkit-tap-highlight-color: transparent;
}

.g-overlay {
  fill: none;
  pointer-events: all;
}

.g-body {
  min-height: 700px;
}

.g-has-topic .g-isnt-topic,
.g-hasnt-topic .g-is-topic {
  display: none;
}

.g-body h3 {
  font-size: 18px;
  line-height: 1.4em;
  font-family: Georgia;
  font-weight: normal;
  margin-bottom: 0.9em;
}

.g-mentions {
  width: 445px;
}

.g-mentions h3 {
  text-align: center;
}

.g-mentions.g-nds h3 {
  margin-left: 140px;
}

.g-mentions.g-nss h3 {
  margin-right: 140px;
}

.g-divider,
.g-mention,
.g-truncated {
  border-top: solid 1px #ccc;
}

.g-mentions.g-nds {
  margin: 0 0 0 20px;
  float: left;
}

.g-mentions.g-nss {
  margin: 0 20px 0 0;
  float: right;
}

.g-head a {
  border-radius: 3px;
  padding: 3px 3px;
  white-space: nowrap;
}

.g-mention {
  clear: both;
  margin: -1px 0 1.5em 0;
}

.g-mention p {
  color: #444;
  font-family: Georgia;
  font-size: 1.3em;
  line-height: 1.40em;
}

.g-nds .g-mention p {
  margin: 1.5em 0 1.5em 160px;
}

.g-nss .g-mention p {
  margin: 1.5em 140px 1.5em 20px;
}

.g-mention a {
  border-radius: 3px;
  padding: 1px 3px;
  text-decoration: none;
}

.g-nds a {
  background-color: #0c54dea4;
  color: #4a5783;
}

.g-nss a {
  background-color: #f1770c;
  color: #734143;
}

.g-mention p:before,
.g-mention p:after {
  color: #ddd;
  font-family: sans-serif;
  font-size: 36px;
  position: absolute;
}

.g-mention p::before {
  content: "“";
  margin: 0.25em 0 0 -20px;
}

.g-mention p::after {
  content: "”";
  margin: 0.25em 0 0 0.1em;
}

.g-speaker {
  font: bold 13px sans-serif;
  margin: 1.5em 0 0.15em 0;
  text-transform: uppercase;
  width: 125px;
}

.g-speaker-title {
  clear: both;
  color: #aaa;
  font: 11px sans-serif;
  margin-bottom: 1em;
  width: 125px;
}

.g-nds .g-speaker,
.g-nds .g-speaker-title {
  float: left;
  text-align: left;
}

.g-nss .g-speaker,
.g-nss .g-speaker-title {
  float: right;
  text-align: right;
}

.g-truncated {
  border-top-style: dashed;
  color: #aaa;
  display: none;
  font: 11px sans-serif;
  padding-top: 1em;
  text-align: center;
}

/* Scoop Fixes */

.storySummary,
.storyHeader h1 {
  display: block;
  margin: 5px auto;
  padding: 0;
  text-align: center;
  width: 640px;
}

#interactiveFooter {
  border-top: 1px solid #ddd;
  margin-top: 10px;
  padding-top: 12px;
}

#main .storyHeader h1 {
  font-size: 26px;
  margin: 25px auto 4px auto;
}
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="index.css">
	</head>

	<div style="width: 972px; margin: 0 auto; text-align: left;">
	<div id="main" style="border: 1px solid #999; padding: 0; width: 970px;">
	<div id="interactiveShell">
	<div class="columnGroup firstColumnGroup">
	<div class="ledeStory">
	<div class="module insetHFullWidth">
	<div class="storyHeader">
	<h6 class="dateline">
	</div><!--close .storyHeader -->
	</div><!--close .storySummary -->
	</div><!--end .module insetHFullWidth -->
	<div id="interactiveFreeFormMain">
	<meta name="viewport" content="width=990">

	<div class="g-legend" style="position: absolute; width: 970px;">
	<div title="nds mentions" class="word-count g-arrow g-nds"></div>
	<div title="nss mentions" class="word-count g-arrow g-nss"></div>
	</div>
	<div class="g-legend" style="position:absolute;width:970px;">
	<div class="g-nds g-arrow">More prevalent in <br>NDS</div>
	<div class="g-nss g-arrow">More prevalent in <br>NSS</div>
	<div class="g-overview"><span class="g-swatch g-nss"></span>NDS vs<span class="g-swatch g-nds"></span>NSS</div>
	</div>
	<div id="g-chart">

	<div class="g-labels"></div>
	<svg class="g-nodes" width="970" height="540">

	</svg>
	</div>
	<p><div class="g-body">
	<div class="g-mentions g-nds">
	<h3 class="g-head g-hasnt-topic">
	<span class="g-isnt-topic"><br>The NDS</span>
	<span class="g-is-topic"><span style="padding-left: 0.76em;">The NDS</span> mentioned <a>…</a><br><span class="g-count"></span> times per 2500 words</span>
	</h3>
	<div class="g-divider"></div>
	</div>
	<div class="g-mentions g-nss">
	<h3 class="g-head g-hasnt-topic">
	<span class="g-isnt-topic"><br>The NSS</span>
	<span class="g-is-topic">The NSS mentioned <a>…</a><br><span class="g-count"></span> times per 2500 words</span>
	</h3>
	<div class="g-divider"></div>
	<div class="g-truncated">Due to a large number of mentions, only a sampling of excerpts are shown.</div>
	</div>
	<br clear="all"><br>
	</div>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/761985/d3.v2.min.js"></script>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/761985/data.js"></script>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/761985/innocode.js"></script>


	<!--<![endif]-->
	<!--pipeline: ac823b240e99920e91945dbec49f35b268c09c38 --> </div><!--close main free form -->
	<div class="insetHFullWidth">
	<div id="interactiveFooter" class="opposingFloatControl wrap">
	<div class="metaData element1">
	</div>

	</div>
	</div><!--close .metaData element1 -->
	<div class="element2">
	</div><!--close .element2 -->
	</div><!--close #interactiveFooter -->
	</div><!--close .insetHFullWidth -->
	</div><!--close .ledeStory -->
	</div><!--close .columnGroup -->

	</div><!--close #interactiveShell -->
	</div>
	</div>
	</body>
	</html>
	#g-chart {
	overflow: hidden;
	position: relative;
	top:40px;
	}

	#g-form {
	font: 16px sans-serif;
	text-align: center;
	}

	#g-form input {
	border-right: none;
	border-radius: 3px 0 0 3px;
	border: solid 1px #ccc;
	font: inherit;
	padding: 4px 8px;
	width: 223px;
	vertical-align: middle;
	}

	#g-form button {
	background: #004276;
	border: none;
	border-radius: 0 3px 3px 0;
	color: #fff;
	font: inherit;
	font-weight: bold;
	padding: 5px 8px;
	position: relative;
	top: 1px;
	width: 30px;
	}

	.g-legend {
	color: #999;
	font: 14px/1.3em sans-serif;
	height: 30px;
	margin-top: 15px;
	position: relative;
	text-align: center;
	}

	.g-arrow {
	position: absolute;
	width: 150px;
	}

	.word-count {
	width: 130px;
	margin-top: -8px;
	}

	.word-count.g-nds {
	text-align: right;
	}

	.word-count.g-nss {
	text-align: left;
	}

	.g-arrow:before {
	position: absolute;
	font-size: 50px;
	font-style: normal;
	top: 15px;
	}

	.g-nds.g-arrow {
	left: 170px;
	padding-left: 40px;
	}

	.g-arrow.g-nds:before {
	content: "←";
	right: 100px;
	}

	.g-nss.g-arrow {
	right: 170px;
	padding-right: 40px;
	}

	.g-arrow.g-nss:before {
	content: "→";
	left: 100px;
	}

	.word-count.g-arrow:before {
	content: "";
	right: 0;
	left: 0;
	}


	.g-legend .g-pointer {
	width: 180px;
	}

	.g-overview {
	position: absolute;
	left: 360px;
	text-align: center;
	width: 250px;
	font-size:30px;
	}

	.g-legend .g-nds.g-pointer {
	position: absolute;
	left: 314px;
	text-align: right;
	padding-right: 20px;
	}

	.g-swatch {
	width: 15px;
	height: 15px;
	display: inline-block;
	position: relative;
	top: 1px;
	margin: 0 3px;
	}

	.g-nss.g-swatch {
	background-color: #0c54de;
	}

	.g-nds.g-swatch {
	background-color: #f1770c;
	}

	.g-notes {
	font: 11px/1.3em sans-serif;
	height: 100px;
	position: absolute;
	top: 430px;
	}

	.g-note {
	color: #999;
	position: absolute;
	width: 212px;
	}

	.g-note b {
	color: #333;
	text-transform: uppercase;
	}

	.g-note-arrow {
	fill: none;
	stroke: #aaa;
	stroke-dasharray: 2,2;
	stroke-width: 1.5px;
	-webkit-transition: stroke-opacity 250ms ease;
	-moz-transition: stroke-opacity 250ms ease;
	-ms-transition: stroke-opacity 250ms ease;
	-o-transition: stroke-opacity 250ms ease;
	transition: stroke-opacity 250ms ease;
	}

	.g-error {
	background: #ffa;
	border: solid 1px #ccc;
	font-size: 16px;
	line-height: 1.2em;
	margin: 10px;
	padding: 10px;
	}

	.g-node .g-nds {
	fill: #0c54de;
	}

	.g-node.g-hover .g-nds {
	fill: #0c54dea6; /* darker(.5) */
	}

	.g-nds {
	fill: #0c54de;
	}
	.g-node.g-selected .g-nds {
	stroke: #6081a3; /* c = 2, darker(2) /
	stroke-width: 3px;
	}

	.g-node .g-nss {
	fill: #f1770c;
	}

	.g-node.g-hover .g-nss {
	fill: #f1770ca6; /* darker(.5) */
	}

	.g-node.g-selected .g-nss {
	stroke: #af5e61; /* c = 2, darker(2) /
	stroke-width: 3px;
	}

	.g-node .g-split {
	stroke: #000;
	stroke-opacity: .18;
	shape-rendering: crispEdges;
	}

	a.g-label {
	color: inherit;
	cursor: pointer;
	display: block;
	text-align: center;
	text-decoration: none;
	line-height: 1em;
	position: absolute;
	}

	.g-label .g-value {
	font: 11px sans-serif;
	white-space: nowrap;
	}

	.g-overlay,
	.g-node,
	.g-label {
	-webkit-tap-highlight-color: transparent;
	}

	.g-overlay {
	fill: none;
	pointer-events: all;
	}

	.g-body {
	min-height: 700px;
	}

	.g-has-topic .g-isnt-topic,
	.g-hasnt-topic .g-is-topic {
	display: none;
	}

	.g-body h3 {
	font-size: 18px;
	line-height: 1.4em;
	font-family: Georgia;
	font-weight: normal;
	margin-bottom: 0.9em;
	}

	.g-mentions {
	width: 445px;
	}

	.g-mentions h3 {
	text-align: center;
	}

	.g-mentions.g-nds h3 {
	margin-left: 140px;
	}

	.g-mentions.g-nss h3 {
	margin-right: 140px;
	}

	.g-divider,
	.g-mention,
	.g-truncated {
	border-top: solid 1px #ccc;
	}

	.g-mentions.g-nds {
	margin: 0 0 0 20px;
	float: left;
	}

	.g-mentions.g-nss {
	margin: 0 20px 0 0;
	float: right;
	}

	.g-head a {
	border-radius: 3px;
	padding: 3px 3px;
	white-space: nowrap;
	}

	.g-mention {
	clear: both;
	margin: -1px 0 1.5em 0;
	}

	.g-mention p {
	color: #444;
	font-family: Georgia;
	font-size: 1.3em;
	line-height: 1.40em;
	}

	.g-nds .g-mention p {
	margin: 1.5em 0 1.5em 160px;
	}

	.g-nss .g-mention p {
	margin: 1.5em 140px 1.5em 20px;
	}

	.g-mention a {
	border-radius: 3px;
	padding: 1px 3px;
	text-decoration: none;
	}

	.g-nds a {
	background-color: #0c54dea4;
	color: #4a5783;
	}

	.g-nss a {
	background-color: #f1770c;
	color: #734143;
	}

	.g-mention p:before,
	.g-mention p:after {
	color: #ddd;
	font-family: sans-serif;
	font-size: 36px;
	position: absolute;
	}

	.g-mention p::before {
	content: "“";
	margin: 0.25em 0 0 -20px;
	}

	.g-mention p::after {
	content: "”";
	margin: 0.25em 0 0 0.1em;
	}

	.g-speaker {
	font: bold 13px sans-serif;
	margin: 1.5em 0 0.15em 0;
	text-transform: uppercase;
	width: 125px;
	}

	.g-speaker-title {
	clear: both;
	color: #aaa;
	font: 11px sans-serif;
	margin-bottom: 1em;
	width: 125px;
	}

	.g-nds .g-speaker,
	.g-nds .g-speaker-title {
	float: left;
	text-align: left;
	}

	.g-nss .g-speaker,
	.g-nss .g-speaker-title {
	float: right;
	text-align: right;
	}

	.g-truncated {
	border-top-style: dashed;
	color: #aaa;
	display: none;
	font: 11px sans-serif;
	padding-top: 1em;
	text-align: center;
	}

	/* Scoop Fixes */

	.storySummary,
	.storyHeader h1 {
	display: block;
	margin: 5px auto;
	padding: 0;
	text-align: center;
	width: 640px;
	}

	#interactiveFooter {
	border-top: 1px solid #ddd;
	margin-top: 10px;
	padding-top: 12px;
	}

	#main .storyHeader h1 {
	font-size: 26px;
	margin: 25px auto 4px auto;
	}