block by milroc 5553051

Full Screen

This is the slides for the reusable visualizations talk I gave at Bay Area d3 User Group.

Things to note:

The files in this talk are not representative of the proper way to work with CSS or visualizing your data, for better examples, please click the links (or go here), it is merely a means to an end. If I get a chance I might clean it up but for now I’d prefer the content just be on the web.

Cheers,

Miles @milr0c

Squarelogo.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="1828.3402"
   height="1673.8041"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="Square_Logo_Portrait.svg">
  <defs
     id="defs4">
    <linearGradient
       x1="0"
       y1="0"
       x2="1"
       y2="0"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0,62.407227,62.407227,0,85.624512,40.025391)"
       spreadMethod="pad"
       id="linearGradient24">
      <stop
         style="stop-opacity:1;stop-color:#88898b"
         offset="0"
         id="stop26" />
      <stop
         style="stop-opacity:1;stop-color:#99999b"
         offset="1"
         id="stop28" />
    </linearGradient>
    <linearGradient
       x1="0"
       y1="0"
       x2="1"
       y2="0"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0,61.240234,61.240234,0,135.18604,23.905273)"
       spreadMethod="pad"
       id="linearGradient44">
      <stop
         style="stop-opacity:1;stop-color:#88898b"
         offset="0"
         id="stop46" />
      <stop
         style="stop-opacity:1;stop-color:#99999b"
         offset="1"
         id="stop48" />
    </linearGradient>
    <linearGradient
       x1="0"
       y1="0"
       x2="1"
       y2="0"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0,44.948242,44.948242,0,236.17676,40.197266)"
       spreadMethod="pad"
       id="linearGradient64">
      <stop
         style="stop-opacity:1;stop-color:#88898b"
         offset="0"
         id="stop66" />
      <stop
         style="stop-opacity:1;stop-color:#99999b"
         offset="1"
         id="stop68" />
    </linearGradient>
    <linearGradient
       x1="0"
       y1="0"
       x2="1"
       y2="0"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0,43.931641,43.931641,0,278.63965,41.213867)"
       spreadMethod="pad"
       id="linearGradient84">
      <stop
         style="stop-opacity:1;stop-color:#88898b"
         offset="0"
         id="stop86" />
      <stop
         style="stop-opacity:1;stop-color:#99999b"
         offset="1"
         id="stop88" />
    </linearGradient>
    <linearGradient
       x1="0"
       y1="0"
       x2="1"
       y2="0"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0,44.948242,44.948242,0,312.06738,40.197266)"
       spreadMethod="pad"
       id="linearGradient104">
      <stop
         style="stop-opacity:1;stop-color:#88898b"
         offset="0"
         id="stop106" />
      <stop
         style="stop-opacity:1;stop-color:#99999b"
         offset="1"
         id="stop108" />
    </linearGradient>
    <linearGradient
       x1="0"
       y1="0"
       x2="1"
       y2="0"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0,44.058594,44.058594,0,186.74951,40.134766)"
       spreadMethod="pad"
       id="linearGradient124">
      <stop
         style="stop-opacity:1;stop-color:#88898b"
         offset="0"
         id="stop126" />
      <stop
         style="stop-opacity:1;stop-color:#99999b"
         offset="1"
         id="stop128" />
    </linearGradient>
    <linearGradient
       x1="0"
       y1="0"
       x2="1"
       y2="0"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0,147.09229,147.09229,0,200.00391,122.93945)"
       spreadMethod="pad"
       id="linearGradient144">
      <stop
         style="stop-opacity:1;stop-color:#999b9d"
         offset="0"
         id="stop146" />
      <stop
         style="stop-opacity:1;stop-color:#aeafb1"
         offset="1"
         id="stop148" />
    </linearGradient>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.175"
     inkscape:cx="1648.8174"
     inkscape:cy="945.58394"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     showborder="false"
     inkscape:window-width="1024"
     inkscape:window-height="712"
     inkscape:window-x="-4"
     inkscape:window-y="-4"
     inkscape:window-maximized="1"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(579.88438,241.68271)">
    <g
       id="g3129"
       transform="matrix(6.8005707,0,0,-6.8005707,-1025.8318,1594.689)">
      <g
         id="g12">
        <g
           id="g14">
          <g
             id="g20">
            <g
               id="g22">
              <path
                 id="path30"
                 style="fill:url(#linearGradient24);stroke:none"
                 d="m 67.603,86.326 c 0,-4.493 1.301,-7.94 3.977,-10.526 l 0,0 c 2.507,-2.42 6.275,-4.148 11.862,-5.443 l 0,0 c 13.731,-3.181 16.553,-7.231 16.562,-12.331 l 0,0 c 0,-6.803 -6.435,-12.336 -14.346,-12.336 l 0,0 -0.047,0 c -4.111,0 -8.038,1.562 -10.773,4.288 l 0,0 c -2.319,2.308 -3.589,5.273 -3.589,8.348 l 0,0 -5.674,0 c 0,-4.591 1.873,-8.975 5.259,-12.358 l 0,0 c 3.793,-3.779 9.17,-5.942 14.771,-5.942 l 0,0 0.056,0 c 5.303,0 10.293,1.83 14.055,5.158 l 0,0 c 3.841,3.405 5.958,7.966 5.958,12.842 l 0,0 c -0.028,11.465 -10.605,15.455 -20.953,17.85 l 0,0 c -9.679,2.242 -11.457,5.277 -11.457,10.45 l 0,0 c 0,5.659 5.533,10.445 12.083,10.445 l 0,0 c 6.695,0 12.131,-4.657 12.131,-10.375 l 0,0 5.676,0 c 0,4.385 -1.902,8.472 -5.355,11.494 l 0,0 c -3.344,2.933 -7.763,4.543 -12.452,4.543 l 0,0 c -9.78,0 -17.744,-7.225 -17.744,-16.107"
                 inkscape:connector-curvature="0" />
            </g>
          </g>
        </g>
      </g>
      <g
         id="g32">
        <g
           id="g34">
          <g
             id="g40">
            <g
               id="g42">
              <path
                 id="path50"
                 style="fill:url(#linearGradient44);stroke:none"
                 d="m 112.514,62.749 c 0,-12.92 10.187,-22.551 23.026,-22.551 l 0,0 c 6.663,0 12.999,2.899 16.683,8.532 l 0,0 0.158,0 0,-24.825 5.477,0 0,60.147 -5.477,0 0,-7.52 -0.158,0 c -3.684,5.715 -10.02,8.613 -16.683,8.613 l 0,0 c -12.596,0 -23.026,-9.553 -23.026,-22.396 m 5.489,-0.239 c 0,10.106 7.356,17.702 17.537,17.702 l 0,0 c 9.719,0 17.152,-8.062 17.152,-17.618 l 0,0 c 0,-9.555 -7.433,-17.466 -17.152,-17.466 l 0,0 c -10.021,0 -17.537,7.362 -17.537,17.382"
                 inkscape:connector-curvature="0" />
            </g>
          </g>
        </g>
      </g>
      <g
         id="g52">
        <g
           id="g54">
          <g
             id="g60">
            <g
               id="g62">
              <path
                 id="path70"
                 style="fill:url(#linearGradient64);stroke:none"
                 d="m 213.505,62.749 c 0,-12.92 10.185,-22.551 23.026,-22.551 l 0,0 c 6.66,0 12.922,2.899 16.677,8.532 l 0,0 0.163,0 0,-7.516 5.478,0 0,42.838 -5.478,0 0,-7.52 -0.163,0 c -3.678,5.795 -9.943,8.613 -16.677,8.613 l 0,0 c -12.606,0 -23.026,-9.553 -23.026,-22.396 m 5.485,-0.239 c 0,10.106 7.363,17.702 17.541,17.702 l 0,0 c 9.713,0 17.143,-8.062 17.143,-17.618 l 0,0 c 0,-9.555 -7.43,-17.466 -17.143,-17.466 l 0,0 c -10.024,0 -17.541,7.362 -17.541,17.382"
                 inkscape:connector-curvature="0" />
            </g>
          </g>
        </g>
      </g>
      <g
         id="g72">
        <g
           id="g74">
          <g
             id="g80">
            <g
               id="g82">
              <path
                 id="path90"
                 style="fill:url(#linearGradient84);stroke:none"
                 d="m 275.422,77.864 -0.144,0 0,6.188 -5.487,0 0,-42.838 5.487,0 0,25.06 c 0,7.675 4.694,12.454 12.21,13.078 l 0,0 0,5.793 c -5.568,-0.39 -9.712,-1.794 -12.066,-7.281"
                 inkscape:connector-curvature="0" />
            </g>
          </g>
        </g>
      </g>
      <g
         id="g92">
        <g
           id="g94">
          <g
             id="g100">
            <g
               id="g102">
              <path
                 id="path110"
                 style="fill:url(#linearGradient104);stroke:none"
                 d="m 289.709,62.594 c 0,-12.292 9.943,-22.396 22.322,-22.396 l 0,0 c 9.476,0 17.929,6.103 21.059,15.034 l 0,0 -5.794,0 c -2.345,-6.345 -8.769,-10.104 -15.345,-10.104 l 0,0 c -8.385,0 -16.215,7.048 -16.608,15.508 l 0,0 38.998,0 c 0,0.548 0.085,1.018 0.085,1.564 l 0,0 c 0,12.376 -9.944,22.945 -22.475,22.945 l 0,0 c -12.299,0 -22.242,-10.333 -22.242,-22.551 m 22.322,17.618 c 8.614,0 15.341,-6.263 16.752,-14.642 l 0,0 -33.44,0 c 1.338,8.379 8.146,14.642 16.688,14.642"
                 inkscape:connector-curvature="0" />
            </g>
          </g>
        </g>
      </g>
      <g
         id="g112">
        <g
           id="g114">
          <g
             id="g120">
            <g
               id="g122">
              <path
                 id="path130"
                 style="fill:url(#linearGradient124);stroke:none"
                 d="m 200.081,84.193 0,-22.736 c 0,-5.034 -0.7,-9.285 -4.479,-12.906 l 0,0 c -2.679,-2.519 -5.509,-3.46 -9.128,-3.46 l 0,0 c -9.836,0 -13.065,6.529 -13.065,15.422 l 0,0 0,23.68 -5.504,0 0,-23.761 c 0,-4.799 0.709,-9.99 3.774,-13.843 l 0,0 c 3.544,-4.486 9.207,-6.454 14.795,-6.454 l 0,0 c 5.67,0 11.251,2.436 13.767,7.712 l 0,0 0.157,0 0,-6.686 5.195,0 0,43.032 -5.512,0 z"
                 inkscape:connector-curvature="0" />
            </g>
          </g>
        </g>
      </g>
      <g
         id="g132">
        <g
           id="g134">
          <g
             id="g140">
            <g
               id="g142">
              <path
                 id="path150"
                 style="fill:url(#linearGradient144);stroke:none"
                 d="m 150.976,270.032 c -13.486,0 -24.517,-11.033 -24.517,-24.516 l 0,0 0,-98.06 c 0,-13.487 11.031,-24.517 24.517,-24.517 l 0,0 98.056,0 c 13.486,0 24.517,11.03 24.517,24.517 l 0,0 0,98.06 c 0,13.483 -11.031,24.516 -24.517,24.516 l 0,0 -98.056,0 z m 2.228,-112.546 0,77.999 c 0,4.288 3.51,7.795 7.795,7.795 l 0,0 78.009,0 c 4.286,0 7.792,-3.507 7.792,-7.795 l 0,0 0,-77.999 c 0,-4.288 -3.506,-7.796 -7.792,-7.796 l 0,0 -78.009,0 c -4.285,0 -7.795,3.508 -7.795,7.796 m 31.198,59.054 c -2.454,0 -4.457,-2.006 -4.457,-4.458 l 0,0 0,-31.192 c 0,-2.453 2.003,-4.459 4.457,-4.459 l 0,0 31.2,0 c 2.452,0 4.459,2.006 4.459,4.459 l 0,0 0,31.192 c 0,2.452 -2.007,4.458 -4.459,4.458 l 0,0 -31.2,0 z"
                 inkscape:connector-curvature="0" />
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

bootstrap.css

/*!
 * Bootstrap v2.3.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.row {
  margin-left: -20px;
  *zoom: 1;
}
.row:before,
.row:after {
  display: table;
  content: "";
  line-height: 0;
}
.row:after {
  clear: both;
}
[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}
.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
.span10 {
  width: 780px;
}
.span9 {
  width: 700px;
}
.span8 {
  width: 620px;
}
.span7 {
  width: 540px;
}
.span6 {
  width: 460px;
}
.span5 {
  width: 380px;
}
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}
.offset12 {
  margin-left: 980px;
}
.offset11 {
  margin-left: 900px;
}
.offset10 {
  margin-left: 820px;
}
.offset9 {
  margin-left: 740px;
}
.offset8 {
  margin-left: 660px;
}
.offset7 {
  margin-left: 580px;
}
.offset6 {
  margin-left: 500px;
}
.offset5 {
  margin-left: 420px;
}
.offset4 {
  margin-left: 340px;
}
.offset3 {
  margin-left: 260px;
}
.offset2 {
  margin-left: 180px;
}
.offset1 {
  margin-left: 100px;
}
.row-fluid {
  width: 100%;
  *zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
  display: table;
  content: "";
  line-height: 0;
}
.row-fluid:after {
  clear: both;
}
.row-fluid [class*="span"] {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  margin-left: 2.127659574468085%;
  *margin-left: 2.074468085106383%;
}
.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}
.row-fluid .controls-row [class*="span"] + [class*="span"] {
  margin-left: 2.127659574468085%;
}
.row-fluid .span12 {
  width: 100%;
  *width: 99.94680851063829%;
}
.row-fluid .span11 {
  width: 91.48936170212765%;
  *width: 91.43617021276594%;
}
.row-fluid .span10 {
  width: 82.97872340425532%;
  *width: 82.92553191489361%;
}
.row-fluid .span9 {
  width: 74.46808510638297%;
  *width: 74.41489361702126%;
}
.row-fluid .span8 {
  width: 65.95744680851064%;
  *width: 65.90425531914893%;
}
.row-fluid .span7 {
  width: 57.44680851063829%;
  *width: 57.39361702127659%;
}
.row-fluid .span6 {
  width: 48.93617021276595%;
  *width: 48.88297872340425%;
}
.row-fluid .span5 {
  width: 40.42553191489362%;
  *width: 40.37234042553192%;
}
.row-fluid .span4 {
  width: 31.914893617021278%;
  *width: 31.861702127659576%;
}
.row-fluid .span3 {
  width: 23.404255319148934%;
  *width: 23.351063829787233%;
}
.row-fluid .span2 {
  width: 14.893617021276595%;
  *width: 14.840425531914894%;
}
.row-fluid .span1 {
  width: 6.382978723404255%;
  *width: 6.329787234042553%;
}
.row-fluid .offset12 {
  margin-left: 104.25531914893617%;
  *margin-left: 104.14893617021275%;
}
.row-fluid .offset12:first-child {
  margin-left: 102.12765957446808%;
  *margin-left: 102.02127659574467%;
}
.row-fluid .offset11 {
  margin-left: 95.74468085106382%;
  *margin-left: 95.6382978723404%;
}
.row-fluid .offset11:first-child {
  margin-left: 93.61702127659574%;
  *margin-left: 93.51063829787232%;
}
.row-fluid .offset10 {
  margin-left: 87.23404255319149%;
  *margin-left: 87.12765957446807%;
}
.row-fluid .offset10:first-child {
  margin-left: 85.1063829787234%;
  *margin-left: 84.99999999999999%;
}
.row-fluid .offset9 {
  margin-left: 78.72340425531914%;
  *margin-left: 78.61702127659572%;
}
.row-fluid .offset9:first-child {
  margin-left: 76.59574468085106%;
  *margin-left: 76.48936170212764%;
}
.row-fluid .offset8 {
  margin-left: 70.2127659574468%;
  *margin-left: 70.10638297872339%;
}
.row-fluid .offset8:first-child {
  margin-left: 68.08510638297872%;
  *margin-left: 67.9787234042553%;
}
.row-fluid .offset7 {
  margin-left: 61.70212765957446%;
  *margin-left: 61.59574468085106%;
}
.row-fluid .offset7:first-child {
  margin-left: 59.574468085106375%;
  *margin-left: 59.46808510638297%;
}
.row-fluid .offset6 {
  margin-left: 53.191489361702125%;
  *margin-left: 53.085106382978715%;
}
.row-fluid .offset6:first-child {
  margin-left: 51.063829787234035%;
  *margin-left: 50.95744680851063%;
}
.row-fluid .offset5 {
  margin-left: 44.68085106382979%;
  *margin-left: 44.57446808510638%;
}
.row-fluid .offset5:first-child {
  margin-left: 42.5531914893617%;
  *margin-left: 42.4468085106383%;
}
.row-fluid .offset4 {
  margin-left: 36.170212765957444%;
  *margin-left: 36.06382978723405%;
}
.row-fluid .offset4:first-child {
  margin-left: 34.04255319148936%;
  *margin-left: 33.93617021276596%;
}
.row-fluid .offset3 {
  margin-left: 27.659574468085104%;
  *margin-left: 27.5531914893617%;
}
.row-fluid .offset3:first-child {
  margin-left: 25.53191489361702%;
  *margin-left: 25.425531914893618%;
}
.row-fluid .offset2 {
  margin-left: 19.148936170212764%;
  *margin-left: 19.04255319148936%;
}
.row-fluid .offset2:first-child {
  margin-left: 17.02127659574468%;
  *margin-left: 16.914893617021278%;
}
.row-fluid .offset1 {
  margin-left: 10.638297872340425%;
  *margin-left: 10.53191489361702%;
}
.row-fluid .offset1:first-child {
  margin-left: 8.51063829787234%;
  *margin-left: 8.404255319148938%;
}
[class*="span"].hide,
.row-fluid [class*="span"].hide {
  display: none;
}
[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}
.btn-group {
  position: relative;
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
  font-size: 0;
  vertical-align: middle;
  white-space: nowrap;
  *margin-left: .3em;
}
.btn-group:first-child {
  *margin-left: 0;
}
.btn-group + .btn-group {
  margin-left: 5px;
}
.btn-toolbar {
  font-size: 0;
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn-toolbar > .btn + .btn,
.btn-toolbar > .btn-group + .btn,
.btn-toolbar > .btn + .btn-group {
  margin-left: 5px;
}
.btn-group > .btn {
  position: relative;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.btn-group > .btn + .btn {
  margin-left: -1px;
}
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
  font-size: 14px;
}
.btn-group > .btn-mini {
  font-size: 10.5px;
}
.btn-group > .btn-small {
  font-size: 11.9px;
}
.btn-group > .btn-large {
  font-size: 17.5px;
}
.btn-group > .btn:first-child {
  margin-left: 0;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-bottom-left-radius: 4px;
}
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  border-bottom-right-radius: 4px;
}
.btn-group > .btn.large:first-child {
  margin-left: 0;
  -webkit-border-top-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-left-radius: 6px;
}
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  border-bottom-right-radius: 6px;
}
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
  z-index: 2;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
  -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  *padding-top: 5px;
  *padding-bottom: 5px;
}
.btn-group > .btn-mini + .dropdown-toggle {
  padding-left: 5px;
  padding-right: 5px;
  *padding-top: 2px;
  *padding-bottom: 2px;
}
.btn-group > .btn-small + .dropdown-toggle {
  *padding-top: 5px;
  *padding-bottom: 4px;
}
.btn-group > .btn-large + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
  *padding-top: 7px;
  *padding-bottom: 7px;
}
.btn-group.open .dropdown-toggle {
  background-image: none;
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
}
.btn-group.open .btn.dropdown-toggle {
  background-color: #e6e6e6;
}
.btn-group.open .btn-primary.dropdown-toggle {
  background-color: #0044cc;
}
.btn-group.open .btn-warning.dropdown-toggle {
  background-color: #f89406;
}
.btn-group.open .btn-danger.dropdown-toggle {
  background-color: #bd362f;
}
.btn-group.open .btn-success.dropdown-toggle {
  background-color: #51a351;
}
.btn-group.open .btn-info.dropdown-toggle {
  background-color: #2f96b4;
}
.btn-group.open .btn-inverse.dropdown-toggle {
  background-color: #222222;
}
.btn .caret {
  margin-top: 8px;
  margin-left: 0;
}
.btn-large .caret {
  margin-top: 6px;
}
.btn-large .caret {
  border-left-width: 5px;
  border-right-width: 5px;
  border-top-width: 5px;
}
.btn-mini .caret,
.btn-small .caret {
  margin-top: 8px;
}
.dropup .btn-large .caret {
  border-bottom-width: 5px;
}
.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}
.btn-group-vertical {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
}
.btn-group-vertical > .btn {
  display: block;
  float: none;
  max-width: 100%;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.btn-group-vertical > .btn + .btn {
  margin-left: 0;
  margin-top: -1px;
}
.btn-group-vertical > .btn:first-child {
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}
.btn-group-vertical > .btn:last-child {
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}
.btn-group-vertical > .btn-large:first-child {
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}
.btn-group-vertical > .btn-large:last-child {
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
}
@media (max-width: 767px) {
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .navbar-fixed-top,
  .navbar-fixed-bottom,
  .navbar-static-top {
    margin-left: -20px;
    margin-right: -20px;
  }
  .container-fluid {
    padding: 0;
  }
  .dl-horizontal dt {
    float: none;
    clear: none;
    width: auto;
    text-align: left;
  }
  .dl-horizontal dd {
    margin-left: 0;
  }
  .container {
    width: auto;
  }
  .row-fluid {
    width: 100%;
  }
  .row,
  .thumbnails {
    margin-left: 0;
  }
  .thumbnails > li {
    float: none;
    margin-left: 0;
  }
  [class*="span"],
  .uneditable-input[class*="span"],
  .row-fluid [class*="span"] {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .span12,
  .row-fluid .span12 {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .row-fluid [class*="offset"]:first-child {
    margin-left: 0;
  }
  .input-large,
  .input-xlarge,
  .input-xxlarge,
  input[class*="span"],
  select[class*="span"],
  textarea[class*="span"],
  .uneditable-input {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .input-prepend input,
  .input-append input,
  .input-prepend input[class*="span"],
  .input-append input[class*="span"] {
    display: inline-block;
    width: auto;
  }
  .controls-row [class*="span"] + [class*="span"] {
    margin-left: 0;
  }
  .modal {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    width: auto;
    margin: 0;
  }
  .modal.fade {
    top: -100px;
  }
  .modal.fade.in {
    top: 20px;
  }
}
@media (max-width: 480px) {
  .nav-collapse {
    -webkit-transform: translate3d(0, 0, 0);
  }
  .page-header h1 small {
    display: block;
    line-height: 20px;
  }
  input[type="checkbox"],
  input[type="radio"] {
    border: 1px solid #ccc;
  }
  .form-horizontal .control-label {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left;
  }
  .form-horizontal .controls {
    margin-left: 0;
  }
  .form-horizontal .control-list {
    padding-top: 0;
  }
  .form-horizontal .form-actions {
    padding-left: 10px;
    padding-right: 10px;
  }
  .media .pull-left,
  .media .pull-right {
    float: none;
    display: block;
    margin-bottom: 10px;
  }
  .media-object {
    margin-right: 0;
    margin-left: 0;
  }
  .modal {
    top: 10px;
    left: 10px;
    right: 10px;
  }
  .modal-header .close {
    padding: 10px;
    margin: -10px;
  }
  .carousel-caption {
    position: static;
  }
}

boundary-logo.gif

GIF89a,c��=�@�	B�C�E�H�G�K�N�R�!V�%Y�+]�/`�4d�;f�:i�=k�Bm�Fq�Ku�Ox�Qw�T|�Y�]��b��e��k��o��o��s��y��{�������������ꂞ녡싥쏨햮�����������������������������������������������������������������������������!�,,c��	�FK�������������������7#�#$H���������������8"�%�����������������Ŏ��������7�����Ȼ���ڗ������������������#�������������N�䉟�L�*\o�BK	J�א�DI/jT�N�ō�%I�\Œ�2�\�����,���I��ɚ�f�ܩ/�'�,u�*jЕB�*�tgҥP#5��4�UF.Ry���M>�Ҭ���Q�d�F�:��8��pe=�2m\�lcڽ˳��z��;���p�=����tW%1B�r#I2Av�J��Ȏ�P&R���#J|}}֒�"AH_N�k3BƊ��a��߿m��1��&0H�<�
`�-i���#r�����JDb���@As4�����!8n\^�q��'��BC���E��	4���c9��[p��b��y2�OJc��Ib$�H ��@�#CH8�M(�,�E��0@@� "@E�C	*ى
9|��"A�� A8�T�&�p�6�Pa4�a��V
�<1b���d�\�C$Ct�	��䠢v���g�0��	8����$�@�0�Ԉ)0�'�	��&��
2��Q8h�7gI��	�`�"m��*rJHg#I����M����a�^� �K�0����A�aàe�;8|�"��:��ɞ)@@8��'"��J�����0�-��P	���詄$h��,(�.���$�~*����ijB�P�
7(蛋A��;	
���dPA�6���I�����ɬ�q��00A\Af��� A��$����_X0)q��!���,�L��6ҩ��:,�������,��Ý�"�H�
�7��,,72�`>`������7�ɉ��	ʤ�<���a����C�nD��-DBo�8�M�cB�]a�>)���U��1��IQD
!0��Hd��"�d��Ҳ0� p����%�$hˈ��(�5̈�1D�#>��f��]����B��̨A� ��#�YB����X((�H���D@��B��)Br��,����yo�V��8 D	P�Q��L$x��&ĸQ8N]I��@LjI�A�D��8BBB%�e-���s"���(у
�('8 "�𫴕C�P��,@�gU��
Q
��>t
��&NP-��q���'!$z >9 \��"�
%�D��K��	��� @׈�yB��`�>���/RB��R�>"�)4X� ��ĩ(��pܬf��UF1=�@�����Il������>2rËDB �A(�������
��l�ӄ��ub� v8�&bPK(��+\Q�d��|P$��&��=��hc��X7��ɔ�2gH�-�Ü�&X��A�C	X�4%$* ��X�(Xp�AL��|�:'���q�j!�c%v�)@��7
)���a0��n(�$h�j'pe(W��k�.y�~�V�B	 �A���8��00�2�RK�o8(=Q7M��ű(��8QA[L�Y1I
-6t/���MC�Mq@��(���&$DP�V��w�	��OJ0�$`�%X2K��IAD�U�o���I�1+�v8��T<P%R��XUV��:������&L[��U��1����fB�6�]IQTd�bl�IErߺB��
�+Xf"/�
:�F�� ��j�	�jb��)�1[�ZU$�e�\�6˺�-�@�������&��۞k}��#l��f5c�|����sEd{��Ģ�����.x�Q�I;F,W��
������y1!' ��"1�w_q����JQ>Y����@�E
,H�Q�u�5m����%l�I)~Ed9�C*�ܱ�l��:[�oY�X+Ƣ$dD�Ej���/�W4��&�� W�b�[uq���"�U$-�E��>�Y$���K��y�>¦E�E�w���4$����
���*d��1���.-_�d�D�/!ZedP߳�PdD)x�\q�%ᢃ�@@I�X�X`�9�.)⃈�P���u!x�aW�D��'�3D�2Uv�tE�
��;;{.r�M�ʪ���]B�F,�g}G�"��+�L3�-���7�$p�X�h]�j��UM���05�R�$)��΄�+h@�A���>E�WI ڝ�4!�M��B	�͛��(�U0}�f~�+h	�[�n�yl��mL�D�=t�<��.�9��w*�p���� ��؛e_2�!ű�%�VRh��+�(�Ea)#Gx�,�a�8mSNYA��uv�3h&����T�㤀蓏3%��.gX%��A t�,���c"�W�A��k��*�O�y>�BG�6�{S��}�)�7�HT�L��I(a52�2�c�WӸ��y�K~������c�K�-͢�u���y�.YI@J~E*�K�0W��c R�E
3�7�F\�0x�QEp�}���	o":��W!7
O�/���2�`�"Kp�����	J����#K\�2�7@��	:�Z�d��N�'ѕ6�}��F�`07�'L
S}�T_�^`��P|�D��\ RP4��AR�|�&(Y�+B�f	,"!@�d~�P��=@��R� ���n�P<e�'g5y�\!2�t	�'��BGP��p'�^�x��?p�F.+���E,�}�PD�o〄{�6��1�^��A���{��6�Ј��?�3���5�v��j<"��&`"��0C�7B��/~8E�h�� 9�xfSJ3�psp>ax�(Y�c+(	5�K�%}���o8/�X1֣k��E��P�@N!B@	F�-"`PFCQ���B!s�Έ#�4`�@��6�,G.��I�x����J�PN4D����c(�(6$lT�v�ψ#�p� D;A���E�'���o�i!E�6��,����J�=�7c�a�5h�������7�x�F @E���G@4���J�	�(
7�!j�:?b-��N	)@����)��z�<��"���`�ʱ����ב_�5BS%Vr/ٲ-U�<����!MҗI��=��c	 34s�	`%��(��0B#p�r4���#����y&��C����/���h�b/�y)��A�d�I���2�V�����.	�Y[K)$�)����4���+E�n���ɲ,���7�i0�t	Fpl�,�e٠�����3 ��" ��@D1�?1�T��P���"�E���� ����+#���4r�НMR0]Շg��!���(����@"��LK��/ ��r���hX�F��\J�:p�!9=^r-��6���@�[t10_l���+%Y'&�h:I�����&���5%��I!pX,@J��;p"&*P=��͡p!=�
����07�� 	YA�@���|��m�>J��y�P4pP	�	�r:�����CS:@Q-�Q�I�*����!0;j�
՚�`�A\Y��pFPEp�z	��h!�˱����|��	k��`�:�1�D!cB�8�*�<Ȓ�>����B�ִ�C{�q�"��L�E{�M��R[���k�Z�E��[���p�P�d�
J��e���@�j۶���c�r{g;�vkb��w��u�|���@�2���	X[��[	l����u۸��]�����[�������[]�˹�뷠۸�;��;��{� ;

charts.js

var charts = {};

charts.bar = function() {
  // basic data
  var margin = {top: 20, bottom: 20, left: 0, right: 0},
      width = 400,
      height = 400,
      // accessors
      xValue = function(d) { return d.x; },
      yValue = function(d) { return d.y; },
      // chart underpinnings
      brush = d3.svg.brush(),
      xAxis = d3.svg.axis().orient('bottom'),
      yAxis = d3.svg.axis().orient('left'),
      x = d3.scale.ordinal(),
      y = d3.scale.linear(),
      // chart enhancements
      elastic = {
        margin: true,
        x: true,
        y: true
      },
      convertData = true,
      duration = 500,
      formatNumber = d3.format(',d');

  function render(selection) {
    selection.each(function(data) {
      // setup the basics
      if (elastic.margin) margin.left = formatNumber(d3.max(data, function(d) { return d.y; })).length * 15;
      var w = width - margin.left - margin.right,
          h = height - margin.top - margin.bottom;

      // if needed convert the data
      if (convertData) {
        data = data.map(function(d, i) {
          return {
            x: xValue.call(data, d, i),
            y: yValue.call(data, d, i)
          };
        });
      }

      // set scales
      if (elastic.x) x.domain(data.map(function(d) { return d.x; }));
      if (elastic.y) y.domain([0, d3.max(data, function(d) { return d.y; })]);
      x.rangeRoundBands([0, w], .1);
      y.range([h, 0]);


      // reset axes and brush
      xAxis.scale(x);
      yAxis.scale(y);
      brush.x(x)
          .on('brushstart.chart', brushstart)
          .on('brush.chart', brushmove)
          .on('brushend.chart', brushend);
      brush.clear();

      var svg = selection.selectAll('svg').data([data]),
          chartEnter = svg.enter().append('svg')
                                  .append('g')
                                    .attr('width', w)
                                    .attr('height', h)
                                    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
                                    .classed('chart', true),
          chart = svg.select('.chart');

      chartEnter.append('g')
                .classed('x axis', true)
                .attr('transform', 'translate(' + 0 + ',' + h + ')');
      chartEnter.append('g')
                .classed('y axis', true)
      chartEnter.append('g').classed('barGroup', true);
      
      chart.selectAll('.brush').remove();
      chart.selectAll('.selected').classed('selected', false);
      
      chart.append('g')
                .classed('brush', true)
                .call(brush)
              .selectAll('rect')
                .attr('height', h);

      bars = chart.select('.barGroup').selectAll('.bar').data(data);

      bars.enter()
            .append('rect')
              .classed('bar', true)
              .attr('x', w) // start here for object constancy
              .attr('width', x.rangeBand())
              .attr('y', function(d, i) { return y(d.y); })
              .attr('height', function(d, i) { return h - y(d.y); });

      bars.transition()
            .duration(duration)
              .style('opacity', 1)      
              .attr('width', x.rangeBand())
              .attr('x', function(d, i) { return x(d.x); })
              .attr('y', function(d, i) { return y(d.y); })
              .attr('height', function(d, i) { return h - y(d.y); });

      bars.exit()
            .transition()
                .duration(duration)
                    .style('opacity', 0)
                    .remove();

      chart.select('.x.axis')
            .transition()
                .duration(duration)
                  .call(xAxis);
      chart.select('.y.axis')
            .transition()
                .duration(duration)
                  .call(yAxis);  

      function brushstart() {
        chart.classed("selecting", true);
      }

      function brushmove() {
        var extent = d3.event.target.extent();
        selection.selectAll('.bar').classed("selected", function(d) { return extent[0] <= x(d.x) && x(d.x) + x.rangeBand() <= extent[1]; });
      }

      function brushend() {
        chart.classed("selecting", !d3.event.target.empty());
      } 
    });
  }

  // basic data
  render.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return render;
  };
  render.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return render;
  };
  render.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return render;
  };

  // accessors
  render.xValue = function(_) {
    if (!arguments.length) return xValue;
    xValue = _;
    return render;
  };
  render.yValue = function(_) {
    if (!arguments.length) return yValue;
    yValue = _;
    return render;
  };

  // chart underpinnings
  render.brush = function(_) {
    if (!arguments.length) return brush;
    brush = _;
    return render;
  };
  render.xAxis = function(_) {
    if (!arguments.length) return xAxis;
    xAxis = _;
    return render;
  };
  render.yAxis = function(_) {
    if (!arguments.length) return yAxis;
    yAxis = _;
    return render;
  };
  render.x = function(_) {
    if (!arguments.length) return x;
    x = _;
    return render;
  };
  render.y = function(_) {
    if (!arguments.length) return y;
    y = _;
    return render;
  };
  
  // chart enhancements
  render.elastic = function(_) {
    if (!arguments.length) return elastic;
    elastic = _;
    return render;
  };
  render.convertData = function(_) {
    if (!arguments.length) return convertData;
    convertData = _;
    return render;
  };
  render.duration = function(_) {
    if (!arguments.length) return duration;
    duration = _;
    return render;
  };
  render.formatNumber = function(_) {
    if (!arguments.length) return formatNumber;
    formatNumber = _;
    return render;
  };

  return d3.rebind(render, brush, 'on');
};

charts.graph = function() {
  // overall size info
  var width = 800,
      height = 600,
      margin = {top: 0, bottom: 0, left: 0, right: 0},
      // scales
      colors = d3.scale.category20c(),
      r = d3.scale.sqrt(),
      x = d3.scale.ordinal(),
      y = d3.scale.ordinal(),
      // accessors
      // top level
      nodesValue = function(d) { return d.nodes; },
      linksValue = function(d) { return d.links; },
      // nodes
      rValue = function(d) { return d.radius; },
      xConstraintValue = function(d) { return d.xConstraint; },
      yConstraintValue = function(d) { return d.yConstraint; },
      colorValue = function(d) { return d.color; },
      nameValue = function(d) { return d.name; },
      typeValue = function(d) { return d.type; },
      // links
      sourceValue = function(d) { return d.source; },
      targetValue = function(d) { return d.target; },
      distanceValue = function(d) { return d.value; },
      linkTypeValue = function(d) { return d.type; }
      // chart underpinnings
      force = d3.layout.force(),
      // chart enhancements
      outline = 0, // outline of nodes
      padding = {
        collision: 5,
        y: .5,
        x: .5,
      }, // padding between collisions
      constraints = {
        x: false,
        y: false,
        collisions: false,
        bounding: false,
      }, 
      elastic = {
        x: false,
        y: false
      }, 
      // data = {},
      duration = 500;

  function render(selection) {
    selection.each(function(data) {
      var w = width - margin.left - margin.right,
          h = height - margin.top - margin.bottom;



      var domain;
      if (elastic.x) {
        domain = d3.set(force.nodes().map(function(d, i) { return d.xConst; })).values();
        x.domain(domain);
      }
      x.rangeRoundBands([0, w], padding.x);
      if (elastic.y) {
        domain = d3.set(force.nodes().map(function(d, i) { return d.yConst; })).values();
        y.domain(domain);      
      }
      y.rangeRoundBands([0, h], padding.y);
      
      force
        .size([w, h]);
      force.start();

      var svg = d3.select(this).selectAll('svg').data([data]),
          svgEnter = svg.enter().append('svg');
      svgEnter.append('g')
                .classed('nodes', true);
      svgEnter.append('g')
                .classed('links', true);
      svgEnter.append('defs');
      svg.attr('width', w)
          .attr('height', h);


      // change this to allow for marker position relative to size
      svg.select('defs').selectAll("marker")
        .data(d3.set(force.links().map(function(d, i) { return d.type; })).values())
          .enter()
            .append("svg:marker")
              .attr("id", function(d) { return d; })
              .attr("viewBox", "0 -5 10 10")
              .attr("refX", 5)
              .attr("refY", 0)
              .attr("markerWidth", 4)
              .attr("markerHeight", 4)
              .attr("orient", "auto")
              .append("svg:path")
                .attr("d", "M0,-5L10,0L0,5");

      var link = d3.select('.links').selectAll('.link'),
          links = link.data(force.links());
      links.enter()
              .append("path")
                .attr('class', function(d) { return 'link ' + d.type; })
                .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

      var node = d3.select('.nodes').selectAll('.node'),
          nodes = node.data(force.nodes()),
          nodesEnter = nodes.enter()
              // .transition()
              //   .duration(duration)
                  .append('g')
                    .attr('class', function(d) { return 'node ' + d.type; })
      nodesEnter.append('circle')
              .attr('r', function(d) { return r(d.r); })
              .style('fill', function(d) { return colors(d.color) || 'steelblue'; })
              .style('stroke', function(d) { return d3.rgb(colors(d.color)).darker(outline) || 'orange'; });

      nodesEnter.append("text")
            .attr("dx", function(d) { return r(d.r); })
            .attr("dy", ".35em")
            .text(function(d) { return d.name });
      nodes.call(force.drag);
      nodes.exit()
            .transition()
              .duration(duration)
                .attr('r', 0)
                .style('opacity', 0)
                .remove();

      force.on("tick", function(e) {
        links.attr("d", function(d) {
          var currLink = linkPosition(d),
              dx = currLink.target.x - currLink.source.x,
              dy = currLink.target.y - currLink.source.y,
              dr = Math.sqrt(dx * dx + dy * dy);
          return "M" + currLink.source.x + "," + currLink.source.y + 
                  "A" + dr + "," + dr + 
                  " 0 0,1 " + currLink.target.x + "," + currLink.target.y;
        });

        var q,
            k = e.alpha * .1,
            i = -1,
            currentNode = force.nodes()[i],
            n = force.nodes().length;
        if (constraints.collisions) q = d3.geom.quadtree(force.nodes());
        while (++i < n) {
          currentNode = force.nodes()[i];
          // x & y constraints
          if (constraints.y) {
            if (currentNode.yConst === 'Frontend') console.log(y(currentNode.yConst))
            currentNode.y += (y(currentNode.yConst) - currentNode.y)*k;
          }
          if (constraints.x) currentNode.x += (x(currentNode.xConst) - currentNode.x) * k;
          // collision detection
          if (constraints.collisions) q.visit(collide(currentNode));
        }

        // bounding box
        if (constraints.bounding) {
          nodes.attr("transform", function(d) { 
            d.x = Math.max(d.r, Math.min(w - d.r, d.x));
            d.y = Math.max(d.r, Math.min(h - d.r, d.y));
            return "translate(" + d.x + "," + d.y + ")"; 
          });
        } else {
          nodes.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
        }

      }); 

      function linkPosition(d) {
        var tRadius = r(d.target.r),
            sRadius = r(d.source.r),
            a = Math.abs(d.target.x - d.source.x),
            b = Math.abs(d.target.y - d.source.y),
            c = Math.sqrt(a * a + b * b),
            tθ = Math.acos((a * a - (b * b + c * c))/(2*b*c)),
            sθ = Math.asin(Math.sin(tθ)*(b/a)),
            sdx = sRadius*Math.sin(tθ)/Math.sin(90),
            sdy = sRadius*Math.sin(sθ)/Math.sin(90),
            tdx = tRadius*Math.sin(sθ)/Math.sin(90),
            tdy = tRadius*Math.sin(tθ)/Math.sin(90);
        if (isNaN(sθ)) console.log('t:', tθ, 's:', Math.sin(tθ)*(b/a).toFixed(2));
        return {
          source: {
            x: (d.target.x > d.source.x)?(d.source.x + sdx):(d.source.x - sdx),
            y: (d.target.y > d.source.y)?(d.source.y + sdy):(d.source.y - sdy)
          },
          target: {
            x: (d.source.x > d.target.x)?(d.target.x + sdx):(d.target.x - sdx),
            y: (d.source.y > d.target.y)?(d.target.y + sdy):(d.target.y - sdy)
          }
        };
      }

      function collide(node) {
        var radius = r(node.r) + padding.collision,
            nx1 = node.x - radius,
            nx2 = node.x + radius,
            ny1 = node.y - radius,
            ny2 = node.y + radius;
       return function(quad, x1, y1, x2, y2) {
          if (quad.point && (quad.point !== node)) {
            var x = node.x - quad.point.x,
                y = node.y - quad.point.y,
                l = Math.sqrt(x * x + y * y),
                radius = r(node.r) + r(quad.point.r) + padding.collision;
            if (l < radius) {
              l = (l - radius) / l * .5;
              node.x -= x *= l;
              node.y -= y *= l;
              quad.point.x += x;
              quad.point.y += y;
            }
          }
          return x1 > nx2
              || x2 < nx1
              || y1 > ny2
              || y2 < ny1;
        }
      }
    });
  }

  // sizing info
  render.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return render;
  };
  render.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return render;
  };
  render.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return render;
  }

  // scales
  render.colors = function(_) {
    if (!arguments.length) return colors;
    colors = _;
    return render;
  };
  render.r = function(_) {
    if (!arguments.length) return r;
    r = _;
    return render;
  };
  render.x = function(_) {
    if (!arguments.length) return x;
    x = _;
    return render;
  };
  render.y = function(_) {
    if (!arguments.length) return y;
    y = _;
    return render;
  };

  // accessors
  render.colorValue = function(_) {
    if (!arguments.length) return colorValue;
    colorValue = d3.functor(_);
    return render;
  };
  render.rValue = function(_) {
    if (!arguments.length) return rValue;
    rValue = d3.functor(_);
    return render;
  };
  render.xConstraintValue = function(_) {
    if (!arguments.length) return xConstraintValue;
    xConstraintValue = d3.functor(_);
    return render;
  };
  render.yConstraintValue = function(_) {
    if (!arguments.length) return yConstraintValue;
    yConstraintValue = d3.functor(_);
    return render;
  };
  render.nameValue = function(_) {
    if (!arguments.length) return nameValue;
    nameValue = d3.functor(_);
    return render;
  };
  render.typeValue = function(_) {
    if (!arguments.length) return typeValue;
    typeValue = d3.functor(_);
    return render;
  };
  render.nodesValue = function(_) {
    if (!arguments.length) return nodesValue;
    nodesValue = d3.functor(_);
    return render;
  };
  render.linksValue = function(_) {
    if (!arguments.length) return linksValue;
    linksValue = d3.functor(_);
    return render;
  };
  render.sourceValue = function(_) {
    if (!arguments.length) return sourceValue;
    sourceValue = d3.functor(_);
    return render;
  };
  render.targetValue = function(_) {
    if (!arguments.length) return targetValue;
    targetValue = d3.functor(_);
    return render;
  };
  render.distanceValue = function(_) {
    if (!arguments.length) return distanceValue;
    distanceValue = d3.functor(_);
    return render;
  };

  //chart underpinnings
  render.force = function(_) {
    if (!arguments.length) return force;
    force = _;
    return render;
  };
  render.data = function(data) {
      var tData = {},
          nData = nodesValue(data),
          lData = linksValue(data);
      tData.nodes = nData.map(function(d, i) {
        return {
          r: r(rValue.call(nData, d, i)), //?
          xConst: xConstraintValue.call(nData, d, i),
          yConst: yConstraintValue.call(nData, d, i),
          color: colorValue.call(nData, d, i),
          name: nameValue.call(nData, d, i),
          type: typeValue.call(nData, d, i),
        };
      });
      tData.links = lData.map(function(d, i) {
        return {
          source: sourceValue.call(lData, d, i),
          target: targetValue.call(lData, d, i),
          value: distanceValue.call(lData, d, i),
          type: linkTypeValue.call(lData, d, i),
        };
      });
      data = tData;
      force
        .nodes(data.nodes)
        .links(data.links)
  };
  render.push = function(type, d) {
    if (type === 'node') {
      force.nodes().push({
        r: r(rValue(d)), //?
        xConst: xConstraintValue(d),
        yConst: yConstraintValue(d),
        color: colorValue(d),
        name: nameValue(d),
        type: typeValue(d),
      });
    } else if (type === 'link') {
      force.links().push({
        source: sourceValue(d),
        target: targetValue(d),
        value: distanceValue(d),
        type: linkTypeValue(d),
      });
    }
  }

  // chart enhancements
  render.outline = function(_) {
    if (!arguments.length) return outline;
    outline = _;
    return render;
  };
  render.duration = function(_) {
    if (!arguments.length) return duration;
    duration = _;
    return render;
  };
  render.constraints = function(_) {
    if (!arguments.length) return constraints;
    constraints = _;
    return render;
  };
  render.padding = function(_) {
    if (!arguments.length) return padding;
    padding = _;
    return render;
  };
  return render;
};

font-awesome.min.css

/*!
 *  Font Awesome 3.0.2
 *  the iconic font designed for use with Twitter Bootstrap
 *  -------------------------------------------------------
 *  The full suite of pictographic icons, examples, and documentation
 *  can be found at: http://fortawesome.github.com/Font-Awesome/
 *
 *  License
 *  -------------------------------------------------------
 *  - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
 *  - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
 *    http://opensource.org/licenses/mit-license.html
 *  - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
 *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
 *    "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"

 *  Contact
 *  -------------------------------------------------------
 *  Email: dave@davegandy.com
 *  Twitter: http://twitter.com/fortaweso_me
 *  Work: Lead Product Designer @ http://kyruus.com
 */
[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;margin-top:0}.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none}a [class^="icon-"],a [class*=" icon-"]{display:inline-block}.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em}.btn [class^="icon-"],.nav [class^="icon-"],.btn [class*=" icon-"],.nav [class*=" icon-"]{display:inline}.btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large{line-height:.9em}.btn [class^="icon-"].icon-spin,.nav [class^="icon-"].icon-spin,.btn [class*=" icon-"].icon-spin,.nav [class*=" icon-"].icon-spin{display:inline-block}.nav-tabs [class^="icon-"],.nav-pills [class^="icon-"],.nav-tabs [class*=" icon-"],.nav-pills [class*=" icon-"],.nav-tabs [class^="icon-"].icon-large,.nav-pills [class^="icon-"].icon-large,.nav-tabs [class*=" icon-"].icon-large,.nav-pills [class*=" icon-"].icon-large{line-height:.9em}li [class^="icon-"],.nav li [class^="icon-"],li [class*=" icon-"],.nav li [class*=" icon-"]{display:inline-block;width:1.25em;text-align:center}li [class^="icon-"].icon-large,.nav li [class^="icon-"].icon-large,li [class*=" icon-"].icon-large,.nav li [class*=" icon-"].icon-large{width:1.5625em}ul.icons{list-style-type:none;text-indent:-0.75em}ul.icons li [class^="icon-"],ul.icons li [class*=" icon-"]{width:.75em}.icon-muted{color:#eee}.icon-border{border:solid 1px #eee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.icon-2x{font-size:2em}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.icon-3x{font-size:3em}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.icon-4x{font-size:4em}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.pull-right{float:right}.pull-left{float:left}[class^="icon-"].pull-left,[class*=" icon-"].pull-left{margin-right:.3em}[class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em}.btn [class^="icon-"].pull-left.icon-2x,.btn [class*=" icon-"].pull-left.icon-2x,.btn [class^="icon-"].pull-right.icon-2x,.btn [class*=" icon-"].pull-right.icon-2x{margin-top:.18em}.btn [class^="icon-"].icon-spin.icon-large,.btn [class*=" icon-"].icon-spin.icon-large{line-height:.8em}.btn.btn-small [class^="icon-"].pull-left.icon-2x,.btn.btn-small [class*=" icon-"].pull-left.icon-2x,.btn.btn-small [class^="icon-"].pull-right.icon-2x,.btn.btn-small [class*=" icon-"].pull-right.icon-2x{margin-top:.25em}.btn.btn-large [class^="icon-"],.btn.btn-large [class*=" icon-"]{margin-top:0}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x,.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-top:.05em}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x{margin-right:.2em}.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-left:.2em}.icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}@-moz-document url-prefix(){.icon-spin{height:.9em}.btn .icon-spin{height:auto}.icon-spin.icon-large{height:1.25em}.btn .icon-spin.icon-large{height:.75em}}.icon-glass:before{content:"\f000"}.icon-music:before{content:"\f001"}.icon-search:before{content:"\f002"}.icon-envelope:before{content:"\f003"}.icon-heart:before{content:"\f004"}.icon-star:before{content:"\f005"}.icon-star-empty:before{content:"\f006"}.icon-user:before{content:"\f007"}.icon-film:before{content:"\f008"}.icon-th-large:before{content:"\f009"}.icon-th:before{content:"\f00a"}.icon-th-list:before{content:"\f00b"}.icon-ok:before{content:"\f00c"}.icon-remove:before{content:"\f00d"}.icon-zoom-in:before{content:"\f00e"}.icon-zoom-out:before{content:"\f010"}.icon-off:before{content:"\f011"}.icon-signal:before{content:"\f012"}.icon-cog:before{content:"\f013"}.icon-trash:before{content:"\f014"}.icon-home:before{content:"\f015"}.icon-file:before{content:"\f016"}.icon-time:before{content:"\f017"}.icon-road:before{content:"\f018"}.icon-download-alt:before{content:"\f019"}.icon-download:before{content:"\f01a"}.icon-upload:before{content:"\f01b"}.icon-inbox:before{content:"\f01c"}.icon-play-circle:before{content:"\f01d"}.icon-repeat:before{content:"\f01e"}.icon-refresh:before{content:"\f021"}.icon-list-alt:before{content:"\f022"}.icon-lock:before{content:"\f023"}.icon-flag:before{content:"\f024"}.icon-headphones:before{content:"\f025"}.icon-volume-off:before{content:"\f026"}.icon-volume-down:before{content:"\f027"}.icon-volume-up:before{content:"\f028"}.icon-qrcode:before{content:"\f029"}.icon-barcode:before{content:"\f02a"}.icon-tag:before{content:"\f02b"}.icon-tags:before{content:"\f02c"}.icon-book:before{content:"\f02d"}.icon-bookmark:before{content:"\f02e"}.icon-print:before{content:"\f02f"}.icon-camera:before{content:"\f030"}.icon-font:before{content:"\f031"}.icon-bold:before{content:"\f032"}.icon-italic:before{content:"\f033"}.icon-text-height:before{content:"\f034"}.icon-text-width:before{content:"\f035"}.icon-align-left:before{content:"\f036"}.icon-align-center:before{content:"\f037"}.icon-align-right:before{content:"\f038"}.icon-align-justify:before{content:"\f039"}.icon-list:before{content:"\f03a"}.icon-indent-left:before{content:"\f03b"}.icon-indent-right:before{content:"\f03c"}.icon-facetime-video:before{content:"\f03d"}.icon-picture:before{content:"\f03e"}.icon-pencil:before{content:"\f040"}.icon-map-marker:before{content:"\f041"}.icon-adjust:before{content:"\f042"}.icon-tint:before{content:"\f043"}.icon-edit:before{content:"\f044"}.icon-share:before{content:"\f045"}.icon-check:before{content:"\f046"}.icon-move:before{content:"\f047"}.icon-step-backward:before{content:"\f048"}.icon-fast-backward:before{content:"\f049"}.icon-backward:before{content:"\f04a"}.icon-play:before{content:"\f04b"}.icon-pause:before{content:"\f04c"}.icon-stop:before{content:"\f04d"}.icon-forward:before{content:"\f04e"}.icon-fast-forward:before{content:"\f050"}.icon-step-forward:before{content:"\f051"}.icon-eject:before{content:"\f052"}.icon-chevron-left:before{content:"\f053"}.icon-chevron-right:before{content:"\f054"}.icon-plus-sign:before{content:"\f055"}.icon-minus-sign:before{content:"\f056"}.icon-remove-sign:before{content:"\f057"}.icon-ok-sign:before{content:"\f058"}.icon-question-sign:before{content:"\f059"}.icon-info-sign:before{content:"\f05a"}.icon-screenshot:before{content:"\f05b"}.icon-remove-circle:before{content:"\f05c"}.icon-ok-circle:before{content:"\f05d"}.icon-ban-circle:before{content:"\f05e"}.icon-arrow-left:before{content:"\f060"}.icon-arrow-right:before{content:"\f061"}.icon-arrow-up:before{content:"\f062"}.icon-arrow-down:before{content:"\f063"}.icon-share-alt:before{content:"\f064"}.icon-resize-full:before{content:"\f065"}.icon-resize-small:before{content:"\f066"}.icon-plus:before{content:"\f067"}.icon-minus:before{content:"\f068"}.icon-asterisk:before{content:"\f069"}.icon-exclamation-sign:before{content:"\f06a"}.icon-gift:before{content:"\f06b"}.icon-leaf:before{content:"\f06c"}.icon-fire:before{content:"\f06d"}.icon-eye-open:before{content:"\f06e"}.icon-eye-close:before{content:"\f070"}.icon-warning-sign:before{content:"\f071"}.icon-plane:before{content:"\f072"}.icon-calendar:before{content:"\f073"}.icon-random:before{content:"\f074"}.icon-comment:before{content:"\f075"}.icon-magnet:before{content:"\f076"}.icon-chevron-up:before{content:"\f077"}.icon-chevron-down:before{content:"\f078"}.icon-retweet:before{content:"\f079"}.icon-shopping-cart:before{content:"\f07a"}.icon-folder-close:before{content:"\f07b"}.icon-folder-open:before{content:"\f07c"}.icon-resize-vertical:before{content:"\f07d"}.icon-resize-horizontal:before{content:"\f07e"}.icon-bar-chart:before{content:"\f080"}.icon-twitter-sign:before{content:"\f081"}.icon-facebook-sign:before{content:"\f082"}.icon-camera-retro:before{content:"\f083"}.icon-key:before{content:"\f084"}.icon-cogs:before{content:"\f085"}.icon-comments:before{content:"\f086"}.icon-thumbs-up:before{content:"\f087"}.icon-thumbs-down:before{content:"\f088"}.icon-star-half:before{content:"\f089"}.icon-heart-empty:before{content:"\f08a"}.icon-signout:before{content:"\f08b"}.icon-linkedin-sign:before{content:"\f08c"}.icon-pushpin:before{content:"\f08d"}.icon-external-link:before{content:"\f08e"}.icon-signin:before{content:"\f090"}.icon-trophy:before{content:"\f091"}.icon-github-sign:before{content:"\f092"}.icon-upload-alt:before{content:"\f093"}.icon-lemon:before{content:"\f094"}.icon-phone:before{content:"\f095"}.icon-check-empty:before{content:"\f096"}.icon-bookmark-empty:before{content:"\f097"}.icon-phone-sign:before{content:"\f098"}.icon-twitter:before{content:"\f099"}.icon-facebook:before{content:"\f09a"}.icon-github:before{content:"\f09b"}.icon-unlock:before{content:"\f09c"}.icon-credit-card:before{content:"\f09d"}.icon-rss:before{content:"\f09e"}.icon-hdd:before{content:"\f0a0"}.icon-bullhorn:before{content:"\f0a1"}.icon-bell:before{content:"\f0a2"}.icon-certificate:before{content:"\f0a3"}.icon-hand-right:before{content:"\f0a4"}.icon-hand-left:before{content:"\f0a5"}.icon-hand-up:before{content:"\f0a6"}.icon-hand-down:before{content:"\f0a7"}.icon-circle-arrow-left:before{content:"\f0a8"}.icon-circle-arrow-right:before{content:"\f0a9"}.icon-circle-arrow-up:before{content:"\f0aa"}.icon-circle-arrow-down:before{content:"\f0ab"}.icon-globe:before{content:"\f0ac"}.icon-wrench:before{content:"\f0ad"}.icon-tasks:before{content:"\f0ae"}.icon-filter:before{content:"\f0b0"}.icon-briefcase:before{content:"\f0b1"}.icon-fullscreen:before{content:"\f0b2"}.icon-group:before{content:"\f0c0"}.icon-link:before{content:"\f0c1"}.icon-cloud:before{content:"\f0c2"}.icon-beaker:before{content:"\f0c3"}.icon-cut:before{content:"\f0c4"}.icon-copy:before{content:"\f0c5"}.icon-paper-clip:before{content:"\f0c6"}.icon-save:before{content:"\f0c7"}.icon-sign-blank:before{content:"\f0c8"}.icon-reorder:before{content:"\f0c9"}.icon-list-ul:before{content:"\f0ca"}.icon-list-ol:before{content:"\f0cb"}.icon-strikethrough:before{content:"\f0cc"}.icon-underline:before{content:"\f0cd"}.icon-table:before{content:"\f0ce"}.icon-magic:before{content:"\f0d0"}.icon-truck:before{content:"\f0d1"}.icon-pinterest:before{content:"\f0d2"}.icon-pinterest-sign:before{content:"\f0d3"}.icon-google-plus-sign:before{content:"\f0d4"}.icon-google-plus:before{content:"\f0d5"}.icon-money:before{content:"\f0d6"}.icon-caret-down:before{content:"\f0d7"}.icon-caret-up:before{content:"\f0d8"}.icon-caret-left:before{content:"\f0d9"}.icon-caret-right:before{content:"\f0da"}.icon-columns:before{content:"\f0db"}.icon-sort:before{content:"\f0dc"}.icon-sort-down:before{content:"\f0dd"}.icon-sort-up:before{content:"\f0de"}.icon-envelope-alt:before{content:"\f0e0"}.icon-linkedin:before{content:"\f0e1"}.icon-undo:before{content:"\f0e2"}.icon-legal:before{content:"\f0e3"}.icon-dashboard:before{content:"\f0e4"}.icon-comment-alt:before{content:"\f0e5"}.icon-comments-alt:before{content:"\f0e6"}.icon-bolt:before{content:"\f0e7"}.icon-sitemap:before{content:"\f0e8"}.icon-umbrella:before{content:"\f0e9"}.icon-paste:before{content:"\f0ea"}.icon-lightbulb:before{content:"\f0eb"}.icon-exchange:before{content:"\f0ec"}.icon-cloud-download:before{content:"\f0ed"}.icon-cloud-upload:before{content:"\f0ee"}.icon-user-md:before{content:"\f0f0"}.icon-stethoscope:before{content:"\f0f1"}.icon-suitcase:before{content:"\f0f2"}.icon-bell-alt:before{content:"\f0f3"}.icon-coffee:before{content:"\f0f4"}.icon-food:before{content:"\f0f5"}.icon-file-alt:before{content:"\f0f6"}.icon-building:before{content:"\f0f7"}.icon-hospital:before{content:"\f0f8"}.icon-ambulance:before{content:"\f0f9"}.icon-medkit:before{content:"\f0fa"}.icon-fighter-jet:before{content:"\f0fb"}.icon-beer:before{content:"\f0fc"}.icon-h-sign:before{content:"\f0fd"}.icon-plus-sign-alt:before{content:"\f0fe"}.icon-double-angle-left:before{content:"\f100"}.icon-double-angle-right:before{content:"\f101"}.icon-double-angle-up:before{content:"\f102"}.icon-double-angle-down:before{content:"\f103"}.icon-angle-left:before{content:"\f104"}.icon-angle-right:before{content:"\f105"}.icon-angle-up:before{content:"\f106"}.icon-angle-down:before{content:"\f107"}.icon-desktop:before{content:"\f108"}.icon-laptop:before{content:"\f109"}.icon-tablet:before{content:"\f10a"}.icon-mobile-phone:before{content:"\f10b"}.icon-circle-blank:before{content:"\f10c"}.icon-quote-left:before{content:"\f10d"}.icon-quote-right:before{content:"\f10e"}.icon-spinner:before{content:"\f110"}.icon-circle:before{content:"\f111"}.icon-reply:before{content:"\f112"}.icon-github-alt:before{content:"\f113"}.icon-folder-close-alt:before{content:"\f114"}.icon-folder-open-alt:before{content:"\f115"}

monokai.css

/*
Monokai style - ported by Luigi Maselli - http://grigio.org
*/

pre code {
  display: block; padding: 0.5em;
  background: #272822;
}

pre .tag,
pre .tag .title,
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
  color: #F92672;
}

pre code {
  color: #DDD;
}

pre code .constant {
  color: #66D9EF;
}

pre .class .title {
  color: white;
}

pre .attribute,
pre .symbol,
pre .symbol .string,
pre .value,
pre .regexp {
  color: #BF79DB;
}

pre .tag .value,
pre .string,
pre .subst,
pre .title,
pre .haskell .type,
pre .preprocessor,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .prompt {
  color: #A6E22E;
}

pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .tex .formula {
  color: #75715E;
}

pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .special,
pre .request,
pre .status {
  font-weight: bold;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

stack.css

body {
  background: #929292;
  font-family: "Helvetica Neue";
  margin: auto;
  width: 1280px;
}

a {
  color: #B4483A;
}

a:not(:hover) {
  text-decoration: none;
}

.stack {
  background: #222 url(cartographer.png);
  color: #fff;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  display: none;
  font-size: 48px;
  height: 800px;
  padding: 160px 80px;
  width: 1280px;
  -webkit-transform: translate3d(0,0,0);
}

.active {
  box-shadow: 0px 4px 8px rgba(0,0,0,.5);
  display: block;
  position: fixed;
}

@media
screen and (max-device-width: 1024px) {
  body {
    width: 1200px;
  }

  .stack {
    margin: 40px 0;
  }

  .stack {
    display: block;
  }
}

stack.v0.min.js

var stack=function(){function t(t){return w-1>u&&u==d&&u>t?(p.deactivate.call(y[0][d],d),p.activate.call(y[0][--d],d),u-=.5-v/i/2,scrollTo(0,u*i),!0):void 0}function e(){v=(window.innerHeight-i)/2,f=1+v/i,d3.select(g).style("margin-top",v+"px").style("margin-bottom",v+"px").style("height",(w-.5)*i+v+"px")}function n(){var t=+location.hash.slice(1);isNaN(t)||t===d||h.position(t)}function a(){var t;switch(d3.event.keyCode){case 39:if(d3.event.metaKey)return;case 40:case 34:t=d3.event.metaKey?1/0:1;break;case 37:if(d3.event.metaKey)return;case 38:case 33:t=d3.event.metaKey?-1/0:-1;break;case 32:t=d3.event.shiftKey?-1:1;break;default:return}r&&(r=clearTimeout(r)),null==m&&(m=(t>0?Math.floor:Math.ceil)(u==d?d:u+(.5-v/i/2))),h.position(m=Math.max(0,Math.min(w-1,m+t))),d3.event.preventDefault()}function l(){g!==x&&x.scrollTop&&(g=x);var e=Math.max(0,g.scrollTop/i);if(e>=w-1.51+v/i&&(e=w-1),!t(e)){var n=Math.max(0,Math.floor(u=e)),a=Math.min(f,2*(u%1));d!=n&&(null!=d&&p.deactivate.call(y[0][d],d),p.activate.call(y[0][n],n),location.replace("#"+n),d=n),y.classed("active",!1),d3.select(y[0][d]).style("-webkit-transform",a?"translate3d(0,"+-a*i+"px,0)":null).style("-o-transform",a?"translate(0,"+-a*i+"px)":null).style("-moz-transform",a?"translate(0,"+-a*i+"px)":null).style("transform",a?"translate(0,"+-a*i+"px)":null).classed("active",a!=f),d3.select(y[0][d+1]).style("-webkit-transform",a?"translate3d(0,0,0)":null).style("-o-transform",a?"translate(0,0)":null).style("-moz-transform",a?"translate(0,0)":null).style("transform",a?"translate(0,0)":null).classed("active",a>0)}}function o(){var t=d3.event.clientY;if(t!==c&&(c=t,null==m)){var e=h.position(),n=Math.max(0,Math.round(e+.25));0>=e||e>=w-1.51+v/i||(n>e&&.5-v/i>n-e?scrollTo(0,n*i):n!==e&&h.position(n))}}function s(t){return function(){var e=d3.interpolateNumber(this.scrollTop,t*i);return function(t){scrollTo(0,e(t)),l()}}}var r,c,i,u,d,m,f,v,h={},p=d3.dispatch("activate","deactivate"),y=d3.selectAll("section"),k=d3.select(window),g=document.body,x=document.documentElement,M=250,b="cubic-in-out",w=y[0].length;return y.classed("stack",!0).style("z-index",function(t,e){return w-e}),y.classed("active",!0),i=y.node().getBoundingClientRect().height,y.classed("active",!1),h.position=function(e){var n=g.scrollTop/i;return arguments.length<1?n:(e>=w?e=w-1:0>e&&(e=Math.max(0,w+e)),e=Math.floor(e),n-e&&(k.on("scroll.stack",null),t(e),d3.select(g).transition().duration(M).ease(b).tween("scrollTop",s(m=e)).each("end",function(){m=null,k.on("scroll.stack",l)})),location.replace("#"+e),h)},y.style("display")!="block"?(k.on("keydown.stack",a).on("resize.stack",e).on("scroll.stack",l).on("mousemove.stack",o).on("hashchange.stack",n),e(),l(),n(),h.duration=function(t){return arguments.length?(M=t,h):M},h.ease=function(t){return arguments.length?(b=t,h):b},d3.rebind(h,p,"on"),h):void 0}();

style.css

@font-face {
    font-family: 'Fontawesome';
    src: url('fontawesome-webfont.eot');
    src: url('fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontawesome-webfont.ttf') format('truetype'),
         url('fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

b {
  color: #CA5132;
  font-style: none;
}

section.companies {
  background-color: #FFF;
  color: #333;
}

#legend {
  position: absolute;
  top: 70%;
  padding-right: 10px;
  margin-bottom: 20px;
  margin-left: 20px;
}

#slideLegend {
  position: absolute;
  top: 50%;
  right: 0%;
  padding-right: 10px;
  margin-bottom: 20px;
  margin-left: 20px;
}

.leftMiddle {
  position: absolute;
  bottom: 63%;
  left: 0;
  padding-right: 10px;
  margin-bottom: 20px;
  margin-left: 20px;
}

.leftish {
  position: absolute;
  top: 45%;
  left: 0;
  padding-right: 10px;
  margin-bottom: 20px;
  margin-left: 20px;
}

#backend-vis {
  background-image: linear-gradient(bottom, #272822 55%, #515151 45%);
background-image: -o-linear-gradient(bottom, #272822 55%, #515151 45%);
background-image: -moz-linear-gradient(bottom, #272822 55%, #515151 45%);
background-image: -webkit-linear-gradient(bottom, #272822 55%, #515151 45%);
background-image: -ms-linear-gradient(bottom, #272822 55%, #515151 45%);
}

#square {
  padding: 0px;
    padding-top: 50px;

}


section.companies .small {
  display: none;
}

.centerimg
{
  left:35%;
}

.middleimg {
  top: 40%;
}

.topimg {
  top: 0%;
}

.bottomimg {
  bottom: 40%;
}


.absolute {
  position: absolute;
}

.rightimg {
right:0%;
}

.leftimg {
left: 0%;
}

.grey {
  color: #6AA93F;
}

.focus {
  display: inline;
  border-width: 20px red;
}

.tiny code {
  font-size: 10px;
  line-height: 10px;
}

.big {
  font-size: 96px;
  line-height: 96px;
}

.caption {
  /*text-align: center;*/
  text-shadow: 0px 2px 6px rgba(0,0,0,.5);
}

.left {
  position: absolute;
  bottom: 0;
  left: 0;
  padding-left: 10px;
  margin-bottom: 20px;
  margin-left: 20px;
}

.right {
  position: absolute;
  bottom: 0;
  right: 0;
  padding-right: 10px;
  margin-bottom: 20px;
  margin-left: 20px;
}

.middle {
  position: absolute;
  top: 25%;
  left: 25%;  
}


.medium {
  font-size: 48px;
  line-height: 48px;
}

.small {
  font-size: 20px;
  line-height: 20px;
}



/*BAR CHART*/
.row {
  padding: 5px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #f0f0f0;
  shape-rendering: crispEdges;
}

.axis text {
  fill: #f0f0f0;
}

.brush .extent {
  stroke: #f0f0f0;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

.bar {
  fill: #5EB4E3;
}
.bar.selected {
  fill: #78C656;
}

/*Data Model Calls*/
.link {
  fill: none;
  opacity: 1;
  stroke-width:5;
}

.exampleOne {
  stroke: #5DE3BD;
  stroke-dasharray:5,5;
}

.exampleTwo {
  stroke: #69EC86;
}

marker#exampleOne {
  fill: #C14D3B;
}

marker#exampleTwo {
  fill: #A47B33;
}

.node text {
  pointer-events: none;
  font: 30px helvetica;
  fill: #EEE;
}

.stack {
  background: #272822;
  box-shadow: 0px 4px 8px rgba(0,0,0,.5);
  display: none;
  font-size: 24px;
  height: 750px;
  line-height: 1.5em;
  margin-bottom: 40px;
  padding: 40px;
  width: 1280px;
  margin:0px;
  -webkit-transform: translate3d(0,0,0);
}

.active {
  display: block;
  position: fixed;
}

.code { 
  font-size: 16px;
  padding-top: 0px;
  margin-top: 0px;
}

.code pre {
  padding-top: 100px;
}

.large {
  font-size: 120px;
  line-height: 120px;
}

.medium {
  font-size: 60px;
  line-height: 60px;
}

.mediumish {
  font-size:36px;
  line-height:36px;
} 

path.area {
  fill: steelblue;
}

.axis text {
  font: 10px sans-serif;
  fill: #FFF;
  stroke: none;
}

.low-opacity {
  opacity: .5;
}

.axis path {
  fill: none;
  stroke: #FFF;
  shape-rendering: crispEdges;
}

.axis line {
  display: none;
}

pre {
  margin: 0px;
  padding: 0px;
}
sup { vertical-align: top; position: relative; top: -0.3em; 
font-size: 40px;}
code {
  margin: 0px;
  padding: 0px;
}

@media
screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-device-width: 768px) and (max-device-width: 1024px),
screen and (max-device-width: 480px) {
  /*body {
    margin: 40px auto 40px auto;
  }

  .stack {
    display: block;
  }*/
}

a i {
  color: rgb(251, 251, 251);
}

a:hover, a:not(:hover) {
  text-decoration: none;
  padding: 10px;
}

.icon-facebook {
  color: rgb(59, 89, 152);
}

.twitter {
  color: #4099FF;
}

.icon-twitter {
  color: #4099FF;
}

.icon-linkedin {
  color: #4875B4;
}

.icon-pinterest {
  color: #cb2027;
}
.icon-phone {
  color: #5aa32c;
}

code {
  padding: 0px;
  margin: 0px;
}