block by milroc 8981451

Full Screen

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>
  @import url(sunburst.css);
  @import url(stack.css);
  @import url(font-awesome.min.css);
  @import url(style.css);
    </style>
    <script src="highlight.min.js"></script>
    <script src="d3.v3.min.js"></script>
    <script src="jq.js"></script>
    <script src="charts.js"></script>
    <script src="blur.js"></script>
  </head>
  <body>

    <div id="slides">
        <!-- <svg>
           <filter id="blur">
               <feGaussianBlur stdDeviation="2"/>
           </filter>
        </svg> -->
      <section style="padding:0px;">
        <div style="position:relative;height:100%">
          <div id="examples" style="filter: url('#blur');-webkit-filter: blur(20px);">
            <div id="examples-deep"></div>
          </div>
          <div id="clicker" class="blurry" style="position:absolute;top:20px;left:20px;font-weight:500;">
            <p class="blah big blue" style="background-color:rgba(255,255,255,.2);border-radius:7px;padding:15px;display:inline-block">Pushing The Community Forward</p>
            <p class="blah blue medium" style="background-color:rgba(255,255,255,.2);border-radius:7px;padding:15px;display:inline-block;margin-bottom:0px">Data Visualization Group in the Bay Area</p>
            <p class="blah blue medium" style="background-color:rgba(255,255,255,.2);border-radius:7px;padding:15px;display:inline-block">d3.bayarea()</p>
          </div>
        </div>
      </section>

      <!-- TALKS -->
      <section>
        <p class="big blue">Combining Narrative, Model, and Information Visualization</p>
        <p class="grey medium">Elijah Meeks</p>
        <p class="mediumish"><i class="icon-twitter twitter"></i> @Elijah_Meeks </p>
      </section>

      <section>
        <p class="big blue">Whatever Happened to “Augmenting Human Intellect”?</p>
        <p class="grey medium">Scott Murray</p>
        <p class="mediumish"><i class="icon-twitter twitter"></i> @alignedleft </p>
      </section>

      <!-- SPONSORS -->
      <section style="background:white">
        <img src="stripe.svg">
      </section>

      <section style="background:hsla(208, 51%, 50%, 1)">
        <img src="bluenose.svg" style="margin-top:200px" width="100%">
      </section>

      <!-- CONFERENCE ANNOUNCEMENT -->
      <section style="padding:0px;">
        <iframe src="//visfest.com/d3unconf/"></iframe>
      </section>
    </div>

    <script src="stack.v0.min.js"></script>
<script src="d3.v3.min.js"></script>
<script src="d3.hexbin.min.js"></script>

<script>
  /* https://github.com/davidbau/seedrandom Copyright 2013 David Bau. */
  (function(a,b,c,d,e,f){function k(a){var b,c=a.length,e=this,f=0,g=e.i=e.j=0,h=e.S=[];for(c||(a=[c++]);d>f;)h[f]=f++;for(f=0;d>f;f++)h[f]=h[g=j&g+a[f%c]+(b=h[f])],h[g]=b;(e.g=function(a){for(var b,c=0,f=e.i,g=e.j,h=e.S;a--;)b=h[f=j&f+1],c=c*d+h[j&(h[f]=h[g=j&g+b])+(h[g]=b)];return e.i=f,e.j=g,c})(d)}function l(a,b){var e,c=[],d=(typeof a)[0];if(b&&"o"==d)for(e in a)try{c.push(l(a[e],b-1))}catch(f){}return c.length?c:"s"==d?a:a+"\0"}function m(a,b){for(var d,c=a+"",e=0;c.length>e;)b[j&e]=j&(d^=19*b[j&e])+c.charCodeAt(e++);return o(b)}function n(c){try{return a.crypto.getRandomValues(c=new Uint8Array(d)),o(c)}catch(e){return[+new Date,a,a.navigator.plugins,a.screen,o(b)]}}function o(a){return String.fromCharCode.apply(0,a)}var g=c.pow(d,e),h=c.pow(2,f),i=2*h,j=d-1;c.seedrandom=function(a,f){var j=[],p=m(l(f?[a,o(b)]:0 in arguments?a:n(),3),j),q=new k(j);return m(o(q.S),b),c.random=function(){for(var a=q.g(e),b=g,c=0;h>a;)a=(a+c)*d,b*=d,c=q.g(1);for(;a>=i;)a/=2,b/=2,c>>>=1;return(a+c)/b},p},m(c.random(),b)})(this,[],Math,256,6,52);

  var data = [
    {title: "Reingold–Tilford Tree (Radial)", url: "//bl.ocks.org/mbostock/4063550"},
    {title: "Factorisation Diagrams", url: "//www.jasondavies.com/factorisation-diagrams/"},
    {title: "Phylogenetic Tree of Life", url: "//www.jasondavies.com/tree-of-life/"},
    {title: "Geographic Clipping", url: "//www.jasondavies.com/maps/clip/"},
    {title: "Les Misérables Co-occurrence Matrix", url: "//bost.ocks.org/mike/miserables/"},
    {title: "L*a*b* and HCL color spaces", url: "//bl.ocks.org/mbostock/3014589"},
    {title: "Treemap", url: "//bl.ocks.org/mbostock/4063582"},
    {title: "Map Projection Transitions", url: "//www.jasondavies.com/maps/transition/"},
    {title: "Across U.S. Companies, Tax Rates Vary Greatly", url: "//www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html"},
    {title: "Rotating Voronoi", url: "//bl.ocks.org/mbostock/4636377"},
    {title: "Zoomable Geography", url: "//bl.ocks.org/mbostock/2374239"},
    {title: "Fisheye Distortion", url: "//bost.ocks.org/mike/fisheye/"},
    {title: "Geodesic Rainbow", url: "//bl.ocks.org/mbostock/3057239"},
    {title: "Hierarchical Bar Chart", url: "//bl.ocks.org/mbostock/1283663"},
    {title: "Exoplanets", url: "//bl.ocks.org/mbostock/3007180"},
    {title: "Crossfilter", url: "//square.github.io/crossfilter/"},
    {title: "Alaska’s villages on the frontline of climate change", url: "//www.guardian.co.uk/environment/interactive/2013/may/14/alaska-villages-frontline-global-warming"},
    {title: "The federal health-care exchange’s abysmal success rate", url: "//www.washingtonpost.com/wp-srv/special/politics/state-vs-federal-exchanges/"},
    {title: "Counties Blue and Red, Moving Right and Left", url: "//www.nytimes.com/interactive/2012/11/11/sunday-review/counties-moving.html"},
    {title: "At the National Conventions, the Words They Used", url: "//www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html"},
    {title: "Reprojected Raster Tiles", url: "//www.jasondavies.com/maps/raster/"},
    {title: "Hive Plots", url: "//bost.ocks.org/mike/hive/"},
    {title: "Donut Transitions", url: "//bl.ocks.org/mbostock/4341417"},
    {title: "Non-Contiguous Cartogram", url: "//bl.ocks.org/mbostock/4055908"},
    {title: "Spermatozoa", url: "//bl.ocks.org/mbostock/1136236"},
    {title: "Zoomable Circle Packing", url: "//bl.ocks.org/mbostock/7607535"},
    {title: "Transform Transitions", url: "//bl.ocks.org/mbostock/1345853"},
    {title: "Scatterplot Matrix", url: "//bl.ocks.org/mbostock/3213173"},
    {title: "Janet L. Yellen, on the Economy’s Twists and Turns", url: "//www.nytimes.com/interactive/2013/10/09/us/yellen-fed-chart.html"},
    {title: "Front Row to Fashion Week", url: "//www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/"},
    {title: "Interrupted Sinu-Mollweide", url: "//bl.ocks.org/mbostock/4481520"},
    {title: "Streamgraph", url: "//bl.ocks.org/mbostock/4060954"},
    {title: "Force-Directed Graph", url: "//bl.ocks.org/mbostock/4062045"},
    {title: "Zoomable Icicle", url: "//bl.ocks.org/mbostock/1005873"},
    {title: "Collision Detection", url: "//bl.ocks.org/mbostock/3231298"},
    {title: "Waterman Butterfly", url: "//bl.ocks.org/mbostock/4458497"},
    {title: "Airocean World", url: "//www.jasondavies.com/maps/airocean/"},
    {title: "Countries by Area", url: "//www.jasondavies.com/maps/countries-by-area/"},
    {title: "Bilevel Partition", url: "//bl.ocks.org/mbostock/5944371"},
    {title: "Map Zooming", url: "//bl.ocks.org/mbostock/6242308"},
    {title: "Fisher–Yates Shuffle", url: "//bost.ocks.org/mike/shuffle/"},
    {title: "Sphere Spirals", url: "//www.jasondavies.com/maps/sphere-spirals/"},
    {title: "World Tour", url: "//bl.ocks.org/mbostock/4183330"},
    {title: "Zoomable Treemaps", url: "//bost.ocks.org/mike/treemap/"},
    {title: "Clipped Map Tiles", url: "//bl.ocks.org/mbostock/4150951"},
    {title: "Cubism.js", url: "//square.github.io/cubism/"},
    {title: "Voronoi Labels", url: "//bl.ocks.org/mbostock/6909318"},
    {title: "Bivariate Hexbin Map", url: "//bl.ocks.org/mbostock/4330486"},
    {title: "OMG Particles!", url: "//bl.ocks.org/mbostock/1062544"},
    {title: "Calendar View", url: "//bl.ocks.org/mbostock/4063318"},
    {title: "The Wealth & Health of Nations", url: "//bost.ocks.org/mike/nations/"},
    {title: "Collapsible Tree", url: "//bl.ocks.org/mbostock/4339083"},
    {title: "Hexagonal Binning", url: "//bl.ocks.org/mbostock/4248145"},
    {title: "Over the Decades, How States Have Shifted", url: "//www.nytimes.com/interactive/2012/10/15/us/politics/swing-history.html"},
    {title: "China Still Dominates, but Some Manufacturers Look Elsewhere", url: "//www.nytimes.com/interactive/2013/04/08/business/global/asia-map.html"},
    {title: "Strikeouts on the Rise", url: "//www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?ref=baseball"},
    {title: "Epicyclic Gearing", url: "//bl.ocks.org/mbostock/1353700"},
    {title: "Voronoi Tessellation", url: "//bl.ocks.org/mbostock/4060366"},
    {title: "The state of our union is … dumber", url: "//www.guardian.co.uk/world/interactive/2013/feb/12/state-of-the-union-reading-level"},
    {title: "Chord Diagram", url: "//bl.ocks.org/mbostock/1046712"},
    {title: "Floating Landmasses", url: "//bl.ocks.org/mbostock/6738360"},
    {title: "How the Tax Burden Has Changed", url: "//www.nytimes.com/interactive/2012/11/30/us/tax-burden.html"},
    {title: "Prime Number Patterns", url: "//www.jasondavies.com/primos/"},
    {title: "Koalas to the Max", url: "//www.koalastothemax.com/"},
    {title: "Constellations of Directors and Their Stars", url: "//www.nytimes.com/newsgraphics/2013/09/07/director-star-chart/"},
    {title: "Drought and Deluge in the Lower 48", url: "//www.nytimes.com/interactive/2012/08/11/sunday-review/drought-history.html"},
    {title: "Animated Bézier Curves", url: "//www.jasondavies.com/animated-bezier/"},
    {title: "Histogram", url: "//bl.ocks.org/mbostock/3048450"},
    {title: "Stacked-to-Grouped Bars", url: "//bl.ocks.org/mbostock/3943967"},
    {title: "Force-Directed States of America", url: "//bl.ocks.org/mbostock/1073373"},
    {title: "Faux-3D Arcs", url: "//bl.ocks.org/dwtkns/4973620"},
    {title: "512 Paths to the White House", url: "//www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html"},
    {title: "Polar Clock", url: "//bl.ocks.org/mbostock/1096355"},
    {title: "Population Pyramid", url: "//bl.ocks.org/mbostock/4062085"},
    {title: "The America’s Cup Finale: Oracle’s Path to Victory", url: "//www.nytimes.com/interactive/2013/09/25/sports/americas-cup-course.html"},
    {title: "Rainbow Worm", url: "//bl.ocks.org/mbostock/4165404"},
    {title: "Four Ways to Slice Obama’s 2013 Budget Proposal", url: "//www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html"},
    {title: "Quadtree", url: "//bl.ocks.org/mbostock/4343214"},
    {title: "Bubble Chart", url: "//bl.ocks.org/mbostock/4063269"},
    {title: "Women as Academic Authors, 1665-2010", url: "//chronicle.com/article/Woman-as-Academic-Authors/135192/"},
    {title: "Choropleth", url: "//bl.ocks.org/mbostock/4060606"},
    {title: "Gilbert’s Two-World Perspective", url: "//www.jasondavies.com/maps/gilbert/"},
    {title: "For Eli Manning, 150 Games and Counting", url: "//www.nytimes.com/newsgraphics/2013/09/28/eli-manning-milestone/"},
    {title: "Word Tree", url: "//www.jasondavies.com/wordtree/"},
    {title: "Mobile Patent Suits", url: "//bl.ocks.org/mbostock/1153292"},
    {title: "Mitchell’s Best-Candidate", url: "//bl.ocks.org/mbostock/1893974"},
    {title: "Sankey Diagrams", url: "//bost.ocks.org/mike/sankey/"},
    {title: "van Wijk Smooth Zooming", url: "//bl.ocks.org/mbostock/3828981"},
    {title: "Bryce Harper: A swing of beauty", url: "//www.washingtonpost.com/wp-srv/special/sports/bryce-harper-swing-of-beauty/"},
    {title: "Dissecting a Trailer: The Parts of the Film That Make the Cut", url: "//www.nytimes.com/interactive/2013/02/19/movies/awardsseason/oscar-trailers.html"},
    {title: "Violence and guns in best-selling video games", url: "//www.guardian.co.uk/world/interactive/2013/apr/30/violence-guns-best-selling-video-games"},
    {title: "Hierarchical Edge Bundling", url: "//bl.ocks.org/mbostock/1044242"},
    {title: "Geographic Bounding Boxes", url: "//www.jasondavies.com/maps/bounds/"},
    {title: "Live Results: Massachusetts Senate Special Election", url: "//elections.huffingtonpost.com/2013/massachusetts-senate-results"},
    {title: "Zoomable Map Tiles", url: "//bl.ocks.org/mbostock/4132797"},
    {title: "D3 Show Reel", url: "//bl.ocks.org/mbostock/1256572"},
    {title: "Building Hamiltonian Graphs from LCF Notation", url: "//christophermanning.org/projects/building-cubic-hamiltonian-graphs-from-lcf-notation/"},
    {title: "Sequences sunburst", url: "//bl.ocks.org/kerryrodden/7090426"},
    {title: "Azimuth and Distance from London", url: "//www.jasondavies.com/maps/azimuth-distance/"},
    {title: "Parallel Sets", url: "//www.jasondavies.com/parallel-sets/"}
  ];

  data.forEach(function(d, i) {
    d.i = i % 10;
    d.j = i / 10 | 0;
  });

  Math.seedrandom(+d3.time.hour(new Date));

  d3.shuffle(data);

  var height = 2000,
      imageWidth = 132,
      imageHeight = 152,
      radius = 75,
      depth = 4;

  var currentFocus = [innerWidth / 2, height / 2],
      desiredFocus,
      idle = true;

  var style = document.body.style,
      transform = ("webkitTransform" in style ? "-webkit-"
          : "MozTransform" in style ? "-moz-"
          : "msTransform" in style ? "-ms-"
          : "OTransform" in style ? "-o-"
          : "") + "transform";

  var hexbin = d3.hexbin()
      .radius(radius);

  if (!("ontouchstart" in document)) d3.select("#examples")
      .on("mousemove", mousemoved);

  var deep = d3.select("#examples-deep");

  var canvas = deep.append("canvas")
      .attr("height", height);

  var context = canvas.node().getContext("2d");

  var svg = deep.append("svg")
      .attr("height", height);

  var mesh = svg.append("path")
      .attr("class", "example-mesh");

  var anchor = svg.append("g")
        .attr("class", "example-anchor")
      .selectAll("a");

  var graphic = deep.selectAll("svg,canvas");

  var image = new Image;
  image.src = "//d3js.org/ex.jpg?3f2d00ffdba6ced9c50f02ed42f12f6156368bd2";
  image.onload = resized;

  d3.select(window)
      .on("resize", resized)
      .each(resized);

  function drawImage(d) {
    context.save();
    context.beginPath();
    context.moveTo(0, -radius);

    for (var i = 1; i < 6; ++i) {
      var angle = i * Math.PI / 3,
          x = Math.sin(angle) * radius,
          y = -Math.cos(angle) * radius;
      context.lineTo(x, y);
    }

    context.clip();
    context.drawImage(image,
        imageWidth * d.i, imageHeight * d.j,
        imageWidth, imageHeight,
        -imageWidth / 2, -imageHeight / 2,
        imageWidth, imageHeight);
    context.restore();
  }

  function resized() {
    var deepWidth = innerWidth * (depth + 1) / depth,
        deepHeight = height * (depth + 1) / depth,
        centers = hexbin.size([deepWidth, deepHeight]).centers();

    desiredFocus = [innerWidth / 2, height / 2];
    moved();

    graphic
        .style("left", Math.round((innerWidth - deepWidth) / 2) + "px")
        .style("top", Math.round((height - deepHeight) / 2) + "px")
        .attr("width", deepWidth)
        .attr("height", deepHeight);

    centers.forEach(function(center, i) {
      center.j = Math.round(center[1] / (radius * 1.5));
      center.i = Math.round((center[0] - (center.j & 1) * radius * Math.sin(Math.PI / 3)) / (radius * 2 * Math.sin(Math.PI / 3)));
      context.save();
      context.translate(Math.round(center[0]), Math.round(center[1]));
      drawImage(center.example = data[(center.i % 10) + ((center.j + (center.i / 10 & 1) * 5) % 10) * 10]);
      context.restore();
    });

    mesh.attr("d", hexbin.mesh);

    anchor = anchor.data(centers, function(d) { return d.i + "," + d.j; });

    anchor.exit().remove();

    anchor.enter().append("a")
        .attr("xlink:href", function(d) { return d.example.url; })
        .attr("xlink:title", function(d) { return d.example.title; })
      .append("path")
        .attr("d", hexbin.hexagon());

    anchor
        .attr("transform", function(d) { return "translate(" + d + ")"; });
  }

  function mousemoved() {
    var m = d3.mouse(this);

    desiredFocus = [
      Math.round((m[0] - innerWidth / 2) / depth) * depth + innerWidth / 2,
      Math.round((m[1] - height / 2) / depth) * depth + height / 2
    ];

    moved();
  }

  function moved() {
    if (idle) d3.timer(function() {
      if (idle = Math.abs(desiredFocus[0] - currentFocus[0]) < .5 && Math.abs(desiredFocus[1] - currentFocus[1]) < .5) currentFocus = desiredFocus;
      else currentFocus[0] += (desiredFocus[0] - currentFocus[0]) * .14, currentFocus[1] += (desiredFocus[1] - currentFocus[1]) * .14;
      deep.style(transform, "translate(" + (innerWidth / 2 - currentFocus[0]) / depth + "px," + (height / 2 - currentFocus[1]) / depth + "px)");
      return idle;
    });
  }
var blah = false;
d3.select("#clicker").on('click', function() {
  console.log('clicking');
  if (!blah) {
    blah = true;
    d3.select("#examples").transition().duration(1000).style('-webkit-filter', 'blur(0px)');
    d3.selectAll(".blah").transition().duration(1000).style('background', 'rgba(255,255,255,1)');
  } else {
    blah = false;
    d3.select("#examples").transition().duration(1000).style('-webkit-filter', 'blur(20px)');
    d3.selectAll(".blah").transition().duration(1000).style('background', 'rgba(255,255,255,.2)');
  }

});

function styleTween(transition, name, value) {
  transition.styleTween(name, function() {
    return d3.interpolate(this.style[name], value);
  });
}
</script>

  </body>
</html>

bluenose-logo.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="150px" height="30px" viewBox="0 0 150 30" enable-background="new 0 0 150 30" xml:space="preserve">
<g>
	<path fill="#FFFFFF" d="M28.888,9.202h5.947c1.458,0,2.485,0.365,3.165,1.044c0.464,0.464,0.746,1.077,0.746,1.872v0.033
		c0,1.342-0.762,2.137-1.789,2.584c1.407,0.465,2.302,1.26,2.302,2.833v0.034c0,1.988-1.624,3.196-4.39,3.196h-5.98V9.202z
		 M34.04,13.824c0.978,0,1.524-0.332,1.524-1.011V12.78c0-0.63-0.497-0.994-1.458-0.994h-2.087v2.038H34.04z M34.504,18.214
		c0.978,0,1.541-0.381,1.541-1.06v-0.033c0-0.63-0.497-1.044-1.574-1.044h-2.452v2.137H34.504z"/>
	<path fill="#FFFFFF" d="M40.733,9.202h3.214v8.78h5.616v2.816h-8.83V9.202z"/>
	<path fill="#FFFFFF" d="M50.458,15.713V9.202h3.264v6.445c0,1.673,0.844,2.469,2.136,2.469s2.138-0.763,2.138-2.387V9.202h3.263
		v6.428c0,3.743-2.137,5.384-5.434,5.384C52.528,21.014,50.458,19.34,50.458,15.713z"/>
	<path fill="#FFFFFF" d="M63.164,9.202h9.327v2.733h-6.146v1.757h5.565v2.534h-5.565v1.84h6.229v2.732h-9.41V9.202z"/>
	<path fill="#FFFFFF" d="M74.215,9.202h2.998l4.771,6.129V9.202h3.18v11.596h-2.816l-4.953-6.362v6.362h-3.18V9.202z"/>
	<path fill="#FFFFFF" d="M86.821,15.033V15c0-3.33,2.685-6.03,6.263-6.03s6.229,2.667,6.229,5.997V15c0,3.33-2.684,6.03-6.262,6.03
		S86.821,18.363,86.821,15.033z M96.033,15.033V15c0-1.674-1.21-3.131-2.982-3.131c-1.756,0-2.934,1.425-2.934,3.098V15
		c0,1.674,1.211,3.131,2.967,3.131C94.855,18.131,96.033,16.706,96.033,15.033z"/>
	<path fill="#FFFFFF" d="M100.023,19.076l1.789-2.139c1.143,0.912,2.418,1.393,3.76,1.393c0.861,0,1.325-0.299,1.325-0.795v-0.033
		c0-0.48-0.38-0.746-1.954-1.111c-2.469-0.562-4.374-1.258-4.374-3.644v-0.033c0-2.153,1.706-3.71,4.489-3.71
		c1.973,0,3.513,0.53,4.771,1.541l-1.606,2.27c-1.061-0.746-2.22-1.144-3.247-1.144c-0.779,0-1.16,0.332-1.16,0.745v0.033
		c0,0.53,0.398,0.763,2.004,1.128c2.668,0.579,4.324,1.441,4.324,3.61v0.033c0,2.37-1.871,3.776-4.688,3.776
		C103.402,20.996,101.447,20.352,100.023,19.076z"/>
	<path fill="#FFFFFF" d="M111.703,9.202h9.326v2.733h-6.146v1.757h5.566v2.534h-5.566v1.84h6.229v2.732h-9.408V9.202z"/>
</g>
<g>
	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.9585" y1="12.5879" x2="18.6074" y2="12.5879">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#94BBDE"/>
	</linearGradient>
	<path fill="url(#SVGID_1_)" d="M18.607,22.588H5.958c0,0,1.846-7.507,0-20C5.958,2.588,15.443,14.277,18.607,22.588z"/>
</g>
<g>
	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="11.7222" y1="12.3369" x2="20.9868" y2="12.3369">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#94BBDE"/>
	</linearGradient>
	<path fill="url(#SVGID_2_)" d="M20.987,20.98h-9.265c0,0,1.61-6.251,0-17.287C11.722,3.693,17.837,12.336,20.987,20.98z"/>
</g>
<g>
	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="16.144" y1="12.9395" x2="23.3979" y2="12.9395">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#94BBDE"/>
	</linearGradient>
	<path fill="url(#SVGID_3_)" d="M23.398,18.97h-7.254c0,0,1.309-4.441,0-12.06C16.144,6.91,21.348,14.402,23.398,18.97z"/>
</g>
</svg>

bluenose.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 300 53.5" enable-background="new 0 0 300 53.5" xml:space="preserve">
<g>
	<path fill="#FFFFFF" d="M59.6,18.8H75c3.8,0,6.5,0.9,8.2,2.7c1.2,1.2,1.9,2.8,1.9,4.9v0.1c0,3.5-2,5.6-4.6,6.7c3.7,1.2,6,3.3,6,7.4
		v0.1c0,5.2-4.2,8.3-11.4,8.3H59.6L59.6,18.8L59.6,18.8z M72.9,30.8c2.5,0,4-0.9,4-2.6v-0.1c0-1.6-1.3-2.6-3.8-2.6h-5.4v5.3
		C67.7,30.8,72.9,30.8,72.9,30.8z M74.1,42.2c2.5,0,4-1,4-2.8v-0.1c0-1.6-1.3-2.7-4.1-2.7h-6.4v5.6H74.1z"/>
	<path fill="#FFFFFF" d="M90.3,18.8h8.3v22.8h14.6v7.3H90.3V18.8z"/>
	<path fill="#FFFFFF" d="M115.6,35.7V18.8h8.5v16.7c0,4.3,2.2,6.4,5.5,6.4c3.4,0,5.6-2,5.6-6.2v-17h8.5v16.7c0,9.7-5.6,14-14.1,14
		C121,49.5,115.6,45.1,115.6,35.7z"/>
	<path fill="#FFFFFF" d="M148.6,18.8h24.2v7.1h-16v4.6h14.5V37h-14.5v4.8H173v7.1h-24.4C148.6,48.9,148.6,18.8,148.6,18.8z"/>
	<path fill="#FFFFFF" d="M177.3,18.8h7.8l12.4,15.9V18.8h8.3v30.1h-7.3l-12.9-16.5v16.5h-8.3C177.3,48.9,177.3,18.8,177.3,18.8z"/>
	<path fill="#FFFFFF" d="M210,33.9L210,33.9c0-8.7,7-15.7,16.3-15.7s16.2,6.9,16.2,15.6v0.1c0,8.6-7,15.7-16.3,15.7
		S210,42.6,210,33.9z M234,33.9L234,33.9c0-4.4-3.1-8.2-7.7-8.2c-4.6,0-7.6,3.7-7.6,8v0.1c0,4.3,3.1,8.1,7.7,8.1
		C230.9,42,234,38.3,234,33.9z"/>
	<path fill="#FFFFFF" d="M244.3,44.4l4.6-5.6c3,2.4,6.3,3.6,9.8,3.6c2.2,0,3.4-0.8,3.4-2.1v-0.1c0-1.2-1-1.9-5.1-2.9
		c-6.4-1.5-11.4-3.3-11.4-9.5v-0.1c0-5.6,4.4-9.6,11.7-9.6c5.1,0,9.1,1.4,12.4,4l-4.2,5.9c-2.8-1.9-5.8-3-8.4-3c-2,0-3,0.9-3,1.9
		v0.1c0,1.4,1,2,5.2,2.9c6.9,1.5,11.2,3.7,11.2,9.4v0.1c0,6.2-4.9,9.8-12.2,9.8C253.1,49.4,248,47.7,244.3,44.4z"/>
	<path fill="#FFFFFF" d="M274.7,18.8h24.2v7.1h-16v4.6h14.5V37h-14.5v4.8h16.2v7.1h-24.4L274.7,18.8L274.7,18.8z"/>
</g>
<g>
	
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="3.973500e-07" y1="34.0979" x2="32.8534" y2="34.0979" gradientTransform="matrix(1 0 0 -1 0 61.6667)">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#95BBDD"/>
	</linearGradient>
	<path fill="url(#SVGID_1_)" d="M32.9,53.5H0c0,0,4.8-19.5,0-51.9C0,1.6,24.6,32,32.9,53.5z"/>
</g>
<g>
	
		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="14.9709" y1="34.7512" x2="39.035" y2="34.7512" gradientTransform="matrix(1 0 0 -1 0 61.6667)">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#95BBDD"/>
	</linearGradient>
	<path fill="url(#SVGID_2_)" d="M39,49.4H15c0,0,4.2-16.2,0-44.9C15,4.5,30.9,26.9,39,49.4z"/>
</g>
<g>
	
		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="26.4562" y1="33.1837" x2="45.2971" y2="33.1837" gradientTransform="matrix(1 0 0 -1 0 61.6667)">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#95BBDD"/>
	</linearGradient>
	<path fill="url(#SVGID_3_)" d="M45.3,44.1H26.5c0,0,3.4-11.5,0-31.3C26.5,12.8,40,32.3,45.3,44.1z"/>
</g>
</svg>

blur.js

/* 
 * Blur.js
 * Copyright Jacob Kelley
 * MIT License
 */

(function ($) {
	$.fn.blurjs = function (options) {
		var canvas = document.createElement('canvas');
		var isCached = false;
		var selector = ($(this).selector).replace(/[^a-zA-Z0-9]/g, "");
		if(!canvas.getContext) {
			return;
		}
		options = $.extend({
			source: 'body',
			radius: 5,
			overlay: '',
			offset: {
				x: 0,
				y: 0
			},
			optClass: '',
			cache: false,
			cacheKeyPrefix: 'blurjs-',
			draggable: false,
			debug: false
		}, options);
		// Stackblur, courtesy of Mario Klingemann: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
		var mul_table = [512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292, 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259];
		var shg_table = [9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24];

		function stackBlurCanvasRGB(a, b, c, d, f, g) {
			if(isNaN(g) || g < 1) return;
			g |= 0;
			var h = a.getContext("2d");
			var j;
			try {
				try {
					j = h.getImageData(b, c, d, f)
				} catch(e) {
					try {
						netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
						j = h.getImageData(b, c, d, f)
					} catch(e) {
						alert("Cannot access local image");
						throw new Error("unable to access local image data: " + e);
					}
				}
			} catch(e) {
				alert("Cannot access image");
				throw new Error("unable to access image data: " + e);
			}
			var k = j.data;
			var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, r_out_sum, g_out_sum, b_out_sum, r_in_sum, g_in_sum, b_in_sum, pr, pg, pb, rbs;
			var l = g + g + 1;
			var m = d << 2;
			var n = d - 1;
			var o = f - 1;
			var q = g + 1;
			var r = q * (q + 1) / 2;
			var s = new BlurStack();
			var t = s;
			for(i = 1; i < l; i++) {
				t = t.next = new BlurStack();
				if(i == q) var u = t
			}
			t.next = s;
			var v = null;
			var w = null;
			yw = yi = 0;
			var z = mul_table[g];
			var A = shg_table[g];
			for(y = 0; y < f; y++) {
				r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0;
				r_out_sum = q * (pr = k[yi]);
				g_out_sum = q * (pg = k[yi + 1]);
				b_out_sum = q * (pb = k[yi + 2]);
				r_sum += r * pr;
				g_sum += r * pg;
				b_sum += r * pb;
				t = s;
				for(i = 0; i < q; i++) {
					t.r = pr;
					t.g = pg;
					t.b = pb;
					t = t.next
				}
				for(i = 1; i < q; i++) {
					p = yi + ((n < i ? n : i) << 2);
					r_sum += (t.r = (pr = k[p])) * (rbs = q - i);
					g_sum += (t.g = (pg = k[p + 1])) * rbs;
					b_sum += (t.b = (pb = k[p + 2])) * rbs;
					r_in_sum += pr;
					g_in_sum += pg;
					b_in_sum += pb;
					t = t.next
				}
				v = s;
				w = u;
				for(x = 0; x < d; x++) {
					k[yi] = (r_sum * z) >> A;
					k[yi + 1] = (g_sum * z) >> A;
					k[yi + 2] = (b_sum * z) >> A;
					r_sum -= r_out_sum;
					g_sum -= g_out_sum;
					b_sum -= b_out_sum;
					r_out_sum -= v.r;
					g_out_sum -= v.g;
					b_out_sum -= v.b;
					p = (yw + ((p = x + g + 1) < n ? p : n)) << 2;
					r_in_sum += (v.r = k[p]);
					g_in_sum += (v.g = k[p + 1]);
					b_in_sum += (v.b = k[p + 2]);
					r_sum += r_in_sum;
					g_sum += g_in_sum;
					b_sum += b_in_sum;
					v = v.next;
					r_out_sum += (pr = w.r);
					g_out_sum += (pg = w.g);
					b_out_sum += (pb = w.b);
					r_in_sum -= pr;
					g_in_sum -= pg;
					b_in_sum -= pb;
					w = w.next;
					yi += 4
				}
				yw += d
			}
			for(x = 0; x < d; x++) {
				g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0;
				yi = x << 2;
				r_out_sum = q * (pr = k[yi]);
				g_out_sum = q * (pg = k[yi + 1]);
				b_out_sum = q * (pb = k[yi + 2]);
				r_sum += r * pr;
				g_sum += r * pg;
				b_sum += r * pb;
				t = s;
				for(i = 0; i < q; i++) {
					t.r = pr;
					t.g = pg;
					t.b = pb;
					t = t.next
				}
				yp = d;
				for(i = 1; i <= g; i++) {
					yi = (yp + x) << 2;
					r_sum += (t.r = (pr = k[yi])) * (rbs = q - i);
					g_sum += (t.g = (pg = k[yi + 1])) * rbs;
					b_sum += (t.b = (pb = k[yi + 2])) * rbs;
					r_in_sum += pr;
					g_in_sum += pg;
					b_in_sum += pb;
					t = t.next;
					if(i < o) {
						yp += d
					}
				}
				yi = x;
				v = s;
				w = u;
				for(y = 0; y < f; y++) {
					p = yi << 2;
					k[p] = (r_sum * z) >> A;
					k[p + 1] = (g_sum * z) >> A;
					k[p + 2] = (b_sum * z) >> A;
					r_sum -= r_out_sum;
					g_sum -= g_out_sum;
					b_sum -= b_out_sum;
					r_out_sum -= v.r;
					g_out_sum -= v.g;
					b_out_sum -= v.b;
					p = (x + (((p = y + q) < o ? p : o) * d)) << 2;
					r_sum += (r_in_sum += (v.r = k[p]));
					g_sum += (g_in_sum += (v.g = k[p + 1]));
					b_sum += (b_in_sum += (v.b = k[p + 2]));
					v = v.next;
					r_out_sum += (pr = w.r);
					g_out_sum += (pg = w.g);
					b_out_sum += (pb = w.b);
					r_in_sum -= pr;
					g_in_sum -= pg;
					b_in_sum -= pb;
					w = w.next;
					yi += d
				}
			}
			h.putImageData(j, b, c)
		}

		function BlurStack() {
			this.r = 0;
			this.g = 0;
			this.b = 0;
			this.a = 0;
			this.next = null
		}
		return this.each(function () {
			var $glue = $(this);
			var $source = $(options.source);
			var formattedSource = ($source.css('backgroundImage')).replace(/"/g, "").replace(/url\(|\)$/ig, "");
			ctx = canvas.getContext('2d');
			tempImg = new Image();
			tempImg.onload = function () {
				if(!isCached) {
					canvas.style.display = "none";
					canvas.width = tempImg.width;
					canvas.height = tempImg.height;
					ctx.drawImage(tempImg, 0, 0);
					stackBlurCanvasRGB(canvas, 0, 0, canvas.width, canvas.height, options.radius);
					if(options.overlay != false) {
						ctx.beginPath();
						ctx.rect(0, 0, tempImg.width, tempImg.width);
						ctx.fillStyle = options.overlay;
						ctx.fill();
					}
					var blurredData = canvas.toDataURL();
					if(options.cache) {
						try {
							if(options.debug) {
								console.log('Cache Set');
							}
							localStorage.setItem(options.cacheKeyPrefix + selector + '-' + formattedSource + '-data-image', blurredData);
						} catch(e) {
							console.log(e);
						}
					}
				} else {
					var blurredData = tempImg.src;
				}
				var attachment = $source.css('backgroundAttachment');
				var position = (attachment == 'fixed') ? '' : '-' + (($glue.offset().left) - ($source.offset().left) - (options.offset.x)) + 'px -' + (($glue.offset().top) - ($source.offset().top) - (options.offset.y)) + 'px';
				$glue.css({
					'background-image': 'url("' + blurredData + '")',
					'background-repeat': $source.css('backgroundRepeat'),
					'background-position': position,
					'background-attachment': attachment
				});
				if(options.optClass != false) {
					$glue.addClass(options.optClass);
				}
				if(options.draggable) {
					$glue.css({
						'background-attachment': 'fixed',
						'background-position': '0 0'
					});
					$glue.draggable();
				}
			};
			Storage.prototype.cacheChecksum = function (opts) {
				var newData = '';
				for(var key in opts) {
					var obj = opts[key];
					if(obj.toString() == '[object Object]') {
						newData += ((obj.x).toString() + (obj.y).toString() + ",").replace(/[^a-zA-Z0-9]/g, "");
					} else {
						newData += (obj + ",").replace(/[^a-zA-Z0-9]/g, "");
					}
				}
				var originalData = this.getItem(options.cacheKeyPrefix + selector + '-' + formattedSource + '-options-cache');
				if(originalData != newData) {
					this.removeItem(options.cacheKeyPrefix + selector + '-' + formattedSource + '-options-cache');
					this.setItem(options.cacheKeyPrefix + selector + '-' + formattedSource + '-options-cache', newData);
					if(options.debug) {
						console.log('Settings Changed, Cache Emptied');
					}
				}
			};
			var cachedData = null;
			if(options.cache) {
				localStorage.cacheChecksum(options);
				cachedData = localStorage.getItem(options.cacheKeyPrefix + selector + '-' + formattedSource + '-data-image');
			}
			if(cachedData != null) {
				if(options.debug) {
					console.log('Cache Used');
				}
				isCached = true;
				tempImg.src = (cachedData);
			} else {
				if(options.debug) {
					console.log('Source Used');
				}
				tempImg.src = formattedSource;
			}
		});
	};
})(jQuery);

bootstrap.css

/*!
 * Bootstrap v3.0.0
 *
 * Copyright 2013 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.
 */

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden] {
  display: none;
}
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
mark {
  background: #ff0;
  color: #000;
}
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
pre {
  white-space: pre-wrap;
}
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
button,
input {
  line-height: normal;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button,
input,
select[multiple],
textarea {
  background-image: none;
}
a {
  color: #428bca;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}
a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
img {
  vertical-align: middle;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-rounded {
  border-radius: 6px;
}
.img-thumbnail {
  padding: 4px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.img-circle {
  border-radius: 50%;
}
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eeeeee;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.nav:before,
.nav:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.nav:after {
  clear: both;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}
.nav > li.disabled > a {
  color: #999999;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #999999;
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eeeeee;
  border-color: #428bca;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav > li > a > img {
  max-width: none;
}
.nav-tabs {
  border-bottom: 1px solid #dddddd;
}
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.428571429;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555555;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-bottom-color: transparent;
  cursor: default;
}
.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.nav-tabs.nav-justified > li {
  float: none;
}
.nav-tabs.nav-justified > li > a {
  text-align: center;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
}
.nav-tabs.nav-justified > li > a {
  border-bottom: 1px solid #dddddd;
  margin-right: 0;
}
.nav-tabs.nav-justified > .active > a {
  border-bottom-color: #ffffff;
}
.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 5px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: #428bca;
}
.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}
.nav-justified {
  width: 100%;
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  text-align: center;
}
@media (min-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
}
.nav-tabs-justified {
  border-bottom: 0;
}
.nav-tabs-justified > li > a {
  border-bottom: 1px solid #dddddd;
  margin-right: 0;
}
.nav-tabs-justified > .active > a {
  border-bottom-color: #ffffff;
}
.tabbable:before,
.tabbable:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.tabbable:after {
  clear: both;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}
.tab-content > .active,
.pill-content > .active {
  display: block;
}
.nav .caret {
  border-top-color: #428bca;
  border-bottom-color: #428bca;
}
.nav a:hover .caret {
  border-top-color: #2a6496;
  border-bottom-color: #2a6496;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

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

crossfilter.min.js

!function(r){function n(r){return r}function t(r,n){for(var t=0,e=n.length,u=Array(e);e>t;++t)u[t]=r[n[t]];return u}function e(r){function n(n,t,e,u){for(;u>e;){var f=e+u>>>1;r(n[f])<t?e=f+1:u=f}return e}function t(n,t,e,u){for(;u>e;){var f=e+u>>>1;t<r(n[f])?u=f:e=f+1}return e}return t.right=t,t.left=n,t}function u(r){function n(r,n,t){for(var u=t-n,f=(u>>>1)+1;--f>0;)e(r,f,u,n);return r}function t(r,n,t){for(var u,f=t-n;--f>0;)u=r[n],r[n]=r[n+f],r[n+f]=u,e(r,1,f,n);return r}function e(n,t,e,u){for(var f,o=n[--u+t],i=r(o);(f=t<<1)<=e&&(e>f&&r(n[u+f])>r(n[u+f+1])&&f++,!(i<=r(n[u+f])));)n[u+t]=n[u+f],t=f;n[u+t]=o}return n.sort=t,n}function f(r){function n(n,e,u,f){var o,i,a,c,l=Array(f=Math.min(u-e,f));for(i=0;f>i;++i)l[i]=n[e++];if(t(l,0,f),u>e){o=r(l[0]);do(a=r(c=n[e])>o)&&(l[0]=c,o=r(t(l,0,f)[0]));while(++e<u)}return l}var t=u(r);return n}function o(r){function n(n,t,e){for(var u=t+1;e>u;++u){for(var f=u,o=n[u],i=r(o);f>t&&r(n[f-1])>i;--f)n[f]=n[f-1];n[f]=o}return n}return n}function i(r){function n(r,n,u){return(U>u-n?e:t)(r,n,u)}function t(t,e,u){var f,o=0|(u-e)/6,i=e+o,a=u-1-o,c=e+u-1>>1,l=c-o,v=c+o,s=t[i],h=r(s),p=t[l],d=r(p),g=t[c],y=r(g),m=t[v],b=r(m),x=t[a],A=r(x);h>d&&(f=s,s=p,p=f,f=h,h=d,d=f),b>A&&(f=m,m=x,x=f,f=b,b=A,A=f),h>y&&(f=s,s=g,g=f,f=h,h=y,y=f),d>y&&(f=p,p=g,g=f,f=d,d=y,y=f),h>b&&(f=s,s=m,m=f,f=h,h=b,b=f),y>b&&(f=g,g=m,m=f,f=y,y=b,b=f),d>A&&(f=p,p=x,x=f,f=d,d=A,A=f),d>y&&(f=p,p=g,g=f,f=d,d=y,y=f),b>A&&(f=m,m=x,x=f,f=b,b=A,A=f);var k=p,O=d,E=m,w=b;t[i]=s,t[l]=t[e],t[c]=g,t[v]=t[u-1],t[a]=x;var M=e+1,U=u-2,z=w>=O&&O>=w;if(z)for(var N=M;U>=N;++N){var C=t[N],S=r(C);if(O>S)N!==M&&(t[N]=t[M],t[M]=C),++M;else if(S>O)for(;;){var q=r(t[U]);{if(!(q>O)){if(O>q){t[N]=t[M],t[M++]=t[U],t[U--]=C;break}t[N]=t[U],t[U--]=C;break}U--}}}else for(var N=M;U>=N;N++){var C=t[N],S=r(C);if(O>S)N!==M&&(t[N]=t[M],t[M]=C),++M;else if(S>w)for(;;){var q=r(t[U]);{if(!(q>w)){O>q?(t[N]=t[M],t[M++]=t[U],t[U--]=C):(t[N]=t[U],t[U--]=C);break}if(U--,N>U)break}}}if(t[e]=t[M-1],t[M-1]=k,t[u-1]=t[U+1],t[U+1]=E,n(t,e,M-1),n(t,U+2,u),z)return t;if(i>M&&U>a){for(var F,q;(F=r(t[M]))<=O&&F>=O;)++M;for(;(q=r(t[U]))<=w&&q>=w;)--U;for(var N=M;U>=N;N++){var C=t[N],S=r(C);if(O>=S&&S>=O)N!==M&&(t[N]=t[M],t[M]=C),M++;else if(w>=S&&S>=w)for(;;){var q=r(t[U]);{if(!(w>=q&&q>=w)){O>q?(t[N]=t[M],t[M++]=t[U],t[U--]=C):(t[N]=t[U],t[U--]=C);break}if(U--,N>U)break}}}}return n(t,M,U+1)}var e=o(r);return n}function a(r){return Array(r)}function c(r,n){return function(t){var e=t.length;return[r.left(t,n,0,e),r.right(t,n,0,e)]}}function l(r,n){var t=n[0],e=n[1];return function(n){var u=n.length;return[r.left(n,t,0,u),r.left(n,e,0,u)]}}function v(r){return[0,r.length]}function s(){return null}function h(){return 0}function p(r){return r+1}function d(r){return r-1}function g(r){return function(n,t){return n+ +r(t)}}function y(r){return function(n,t){return n-r(t)}}function m(){function r(r){var n=w,t=r.length;return t&&(E=E.concat(r),N=S(N,w+=t),F.forEach(function(e){e(r,n,t)})),O}function e(){for(var r=b(w,w),n=[],t=0,e=0;w>t;++t)N[t]?r[t]=e++:n.push(t);C.forEach(function(r){r(0,[],n)}),R.forEach(function(n){n(r)});for(var u,t=0,e=0;w>t;++t)(u=N[t])&&(t!==e&&(N[e]=u,E[e]=E[t]),++e);for(E.length=e;w>e;)N[--w]=0}function o(r){function e(n,e,u){T=n.map(r),V=$(x(u),0,u),T=t(T,V);var f,o=_(T),i=o[0],a=o[1];if(W)for(f=0;u>f;++f)W(T[f],f)||(N[V[f]+e]|=Y);else{for(f=0;i>f;++f)N[V[f]+e]|=Y;for(f=a;u>f;++f)N[V[f]+e]|=Y}if(!e)return P=T,Q=V,tn=i,en=a,void 0;var c=P,l=Q,v=0,s=0;for(P=Array(w),Q=b(w,w),f=0;e>v&&u>s;++f)c[v]<T[s]?(P[f]=c[v],Q[f]=l[v++]):(P[f]=T[s],Q[f]=V[s++]+e);for(;e>v;++v,++f)P[f]=c[v],Q[f]=l[v];for(;u>s;++s,++f)P[f]=T[s],Q[f]=V[s]+e;o=_(P),tn=o[0],en=o[1]}function o(r,n,t){rn.forEach(function(r){r(T,V,n,t)}),T=V=null}function a(r){for(var n,t=0,e=0;w>t;++t)N[n=Q[t]]&&(t!==e&&(P[e]=P[t]),Q[e]=r[n],++e);for(P.length=e;w>e;)Q[e++]=0;var u=_(P);tn=u[0],en=u[1]}function m(r){var n=r[0],t=r[1];if(W)return W=null,G(function(r,e){return e>=n&&t>e}),tn=n,en=t,X;var e,u,f,o=[],i=[];if(tn>n)for(e=n,u=Math.min(tn,t);u>e;++e)N[f=Q[e]]^=Y,o.push(f);else if(n>tn)for(e=tn,u=Math.min(n,en);u>e;++e)N[f=Q[e]]^=Y,i.push(f);if(t>en)for(e=Math.max(n,en),u=t;u>e;++e)N[f=Q[e]]^=Y,o.push(f);else if(en>t)for(e=Math.max(tn,t),u=en;u>e;++e)N[f=Q[e]]^=Y,i.push(f);return tn=n,en=t,C.forEach(function(r){r(Y,o,i)}),X}function O(r){return null==r?B():Array.isArray(r)?j(r):"function"==typeof r?D(r):z(r)}function z(r){return m((_=c(k,r))(P))}function j(r){return m((_=l(k,r))(P))}function B(){return m((_=v)(P))}function D(r){return _=v,G(W=r),tn=0,en=w,X}function G(r){var n,t,e,u=[],f=[];for(n=0;w>n;++n)!(N[t=Q[n]]&Y)^(e=r(P[n],n))&&(e?(N[t]&=Z,u.push(t)):(N[t]|=Y,f.push(t)));C.forEach(function(r){r(Y,u,f)})}function H(r){for(var n,t=[],e=en;--e>=tn&&r>0;)N[n=Q[e]]||(t.push(E[n]),--r);return t}function I(r){for(var n,t=[],e=tn;en>e&&r>0;)N[n=Q[e]]||(t.push(E[n]),--r),e++;return t}function J(r){function t(n,t,e,u){function f(){++T===L&&(m=q(m,K<<=1),B=q(B,K),L=A(K))}var l,v,h,p,d,g,y=j,m=b(T,L),x=H,k=J,O=T,M=0,U=0;for(X&&(x=k=s),j=Array(T),T=0,B=O>1?S(B,w):b(w,L),O&&(h=(v=y[0]).key);u>U&&!((p=r(n[U]))>=p);)++U;for(;u>U;){for(v&&p>=h?(d=v,g=h,m[M]=T,(v=y[++M])&&(h=v.key)):(d={key:p,value:k()},g=p),j[T]=d;!(p>g||(B[l=t[U]+e]=T,N[l]&Z||(d.value=x(d.value,E[l])),++U>=u));)p=r(n[U]);f()}for(;O>M;)j[m[M]=T]=y[M++],f();if(T>M)for(M=0;e>M;++M)B[M]=m[B[M]];l=C.indexOf(V),T>1?(V=o,W=a):(1===T?(V=i,W=c):(V=s,W=s),B=null),C[l]=V}function e(){if(T>1){for(var r=T,n=j,t=b(r,r),e=0,u=0;w>e;++e)N[e]&&(t[B[u]=B[e]]=1,++u);for(j=[],T=0,e=0;r>e;++e)t[e]&&(t[e]=T++,j.push(n[e]));if(T>1)for(var e=0;u>e;++e)B[e]=t[B[e]];else B=null;C[C.indexOf(V)]=T>1?(W=a,V=o):1===T?(W=c,V=i):W=V=s}else if(1===T){for(var e=0;w>e;++e)if(N[e])return;j=[],T=0,C[C.indexOf(V)]=V=W=s}}function o(r,n,t){if(r!==Y&&!X){var e,u,f,o;for(e=0,f=n.length;f>e;++e)N[u=n[e]]&Z||(o=j[B[u]],o.value=H(o.value,E[u]));for(e=0,f=t.length;f>e;++e)(N[u=t[e]]&Z)===r&&(o=j[B[u]],o.value=I(o.value,E[u]))}}function i(r,n,t){if(r!==Y&&!X){var e,u,f,o=j[0];for(e=0,f=n.length;f>e;++e)N[u=n[e]]&Z||(o.value=H(o.value,E[u]));for(e=0,f=t.length;f>e;++e)(N[u=t[e]]&Z)===r&&(o.value=I(o.value,E[u]))}}function a(){var r,n;for(r=0;T>r;++r)j[r].value=J();for(r=0;w>r;++r)N[r]&Z||(n=j[B[r]],n.value=H(n.value,E[r]))}function c(){var r,n=j[0];for(n.value=J(),r=0;w>r;++r)N[r]&Z||(n.value=H(n.value,E[r]))}function l(){return X&&(W(),X=!1),j}function v(r){var n=D(l(),0,j.length,r);return G.sort(n,0,n.length)}function m(r,n,t){return H=r,I=n,J=t,X=!0,F}function x(){return m(p,d,h)}function k(r){return m(g(r),y(r),h)}function O(r){function n(n){return r(n.value)}return D=f(n),G=u(n),F}function M(){return O(n)}function U(){return T}function z(){var r=C.indexOf(V);return r>=0&&C.splice(r,1),r=rn.indexOf(t),r>=0&&rn.splice(r,1),r=R.indexOf(e),r>=0&&R.splice(r,1),F}var F={top:v,all:l,reduce:m,reduceCount:x,reduceSum:k,order:O,orderNatural:M,size:U,dispose:z,remove:z};nn.push(F);var j,B,D,G,H,I,J,K=8,L=A(K),T=0,V=s,W=s,X=!0;return arguments.length<1&&(r=n),C.push(V),rn.push(t),R.push(e),t(P,Q,0,w),x().orderNatural()}function K(){var r=J(s),n=r.all;return delete r.all,delete r.top,delete r.order,delete r.orderNatural,delete r.size,r.value=function(){return n()[0].value},r}function L(){nn.forEach(function(r){r.dispose()});var r=F.indexOf(e);for(r>=0&&F.splice(r,1),r=F.indexOf(o),r>=0&&F.splice(r,1),r=R.indexOf(a),r>=0&&R.splice(r,1),r=0;w>r;++r)N[r]&=Z;return M&=Z,X}var P,Q,T,V,W,X={filter:O,filterExact:z,filterRange:j,filterFunction:D,filterAll:B,top:H,bottom:I,group:J,groupAll:K,dispose:L,remove:L},Y=~M&-~M,Z=~Y,$=i(function(r){return T[r]}),_=v,rn=[],nn=[],tn=0,en=0;return F.unshift(e),F.push(o),R.push(a),M|=Y,(U>=32?!Y:M&(1<<U)-1)&&(N=q(N,U<<=1)),e(E,0,w),o(E,0,w),X}function a(){function r(r,n){var t;if(!m)for(t=n;w>t;++t)N[t]||(a=c(a,E[t]))}function n(r,n,t){var e,u,f;if(!m){for(e=0,f=n.length;f>e;++e)N[u=n[e]]||(a=c(a,E[u]));for(e=0,f=t.length;f>e;++e)N[u=t[e]]===r&&(a=l(a,E[u]))}}function t(){var r;for(a=v(),r=0;w>r;++r)N[r]||(a=c(a,E[r]))}function e(r,n,t){return c=r,l=n,v=t,m=!0,s}function u(){return e(p,d,h)}function f(r){return e(g(r),y(r),h)}function o(){return m&&(t(),m=!1),a}function i(){var t=C.indexOf(n);return t>=0&&C.splice(t),t=F.indexOf(r),t>=0&&F.splice(t),s}var a,c,l,v,s={reduce:e,reduceCount:u,reduceSum:f,value:o,dispose:i,remove:i},m=!0;return C.push(n),F.push(r),r(E,0,w),u()}function m(){return w}var O={add:r,remove:e,dimension:o,groupAll:a,size:m},E=[],w=0,M=0,U=8,N=z(0),C=[],F=[],R=[];return arguments.length?r(arguments[0]):O}function b(r,n){return(257>n?z:65537>n?N:C)(r)}function x(r){for(var n=b(r,r),t=-1;++t<r;)n[t]=t;return n}function A(r){return 8===r?256:16===r?65536:4294967296}m.version="1.3.5",m.permute=t;var k=m.bisect=e(n);k.by=e;var O=m.heap=u(n);O.by=u;var E=m.heapselect=f(n);E.by=f;var w=m.insertionsort=o(n);w.by=o;var M=m.quicksort=i(n);M.by=i;var U=32,z=a,N=a,C=a,S=n,q=n;"undefined"!=typeof Uint8Array&&(z=function(r){return new Uint8Array(r)},N=function(r){return new Uint16Array(r)},C=function(r){return new Uint32Array(r)},S=function(r,n){if(r.length>=n)return r;var t=new r.constructor(n);return t.set(r),t},q=function(r,n){var t;switch(n){case 16:t=N(r.length);break;case 32:t=C(r.length);break;default:throw Error("invalid array width!")}return t.set(r),t}),r.crossfilter=m}(this);

d3.hexbin.min.js

!function(){d3.hexbin=function(){function u(n){var r={};return n.forEach(function(n,t){var a=s.call(u,n,t)/o,e=Math.round(a),c=h.call(u,n,t)/i-(1&e?.5:0),f=Math.round(c),l=a-e;if(3*Math.abs(l)>1){var v=c-f,g=f+(f>c?-1:1)/2,m=e+(e>a?-1:1),M=c-g,d=a-m;v*v+l*l>M*M+d*d&&(f=g+(1&e?1:-1)/2,e=m)}var j=f+"-"+e,p=r[j];p?p.push(n):(p=r[j]=[n],p.i=f,p.j=e,p.x=(f+(1&e?.5:0))*i,p.y=e*o)}),d3.values(r)}function a(r){var t=0,u=0;return n.map(function(n){var a=Math.sin(n)*r,e=-Math.cos(n)*r,i=a-t,o=e-u;return t=a,u=e,[i,o]})}var e,i,o,c=1,f=1,h=r,s=t;return u.x=function(n){return arguments.length?(h=n,u):h},u.y=function(n){return arguments.length?(s=n,u):s},u.hexagon=function(n){return arguments.length<1&&(n=e),"m"+a(n).join("l")+"z"},u.centers=function(){for(var n=[],r=0,t=!1,u=0;f+e>r;r+=o,t=!t,++u)for(var a=t?i/2:0,h=0;c+i/2>a;a+=i,++h){var s=[a,r];s.i=h,s.j=u,n.push(s)}return n},u.mesh=function(){var n=a(e).slice(0,4).join("l");return u.centers().map(function(r){return"M"+r+"m"+n}).join("")},u.size=function(n){return arguments.length?(c=+n[0],f=+n[1],u):[c,f]},u.radius=function(n){return arguments.length?(e=+n,i=2*e*Math.sin(Math.PI/3),o=1.5*e,u):e},u.radius(1)};var n=d3.range(0,2*Math.PI,Math.PI/3),r=function(n){return n[0]},t=function(n){return n[1]}}();

d3js.html

<html><head><meta charset="utf-8">
<meta name="viewport" content="width=1040">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

<meta name="keywords" content="d3,d3.js,visualization,dom,javascript">
<meta itemprop="description" name="description" content="D3 is a JavaScript library for visualizing data with HTML, SVG and CSS.">
<link rel="image_src" href="//d3js.org/preview.png">

<meta property="og:type" content="article">
<meta property="og:title" content="D3.js - Data-Driven Documents">
<meta property="og:description" content="D3 is a JavaScript library for visualizing data with HTML, SVG and CSS.">
<meta property="og:url" content="//d3js.org/">
<meta property="og:image" content="//d3js.org/preview.png">

<meta name="twitter:card" value="summary_large_image">
<meta name="twitter:site" value="@mbostock">
<meta name="twitter:creator" content="@mbostock">
<meta name="twitter:title" content="D3.js - Data-Driven Documents">
<meta name="twitter:description" content="D3 is a JavaScript library for visualizing data with HTML, SVG and CSS.">
<meta name="twitter:url" content="//d3js.org/">
<meta name="twitter:image" content="//d3js.org/preview.png">
<meta name="twitter:image:width" content="560">
<meta name="twitter:image:height" content="295">

<meta name="author" content="Mike Bostock">

<link rel="canonical" href="//d3js.org/">
<title>D3.js - Data-Driven Documents</title>
<style>
#examples {
  background: #ddd;
  height: 2000px;
  margin-bottom: 2em;
  overflow: hidden;
  padding: 0;
  position: relative;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}

#examples:after,
#examples:before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  background: red;
  height: 16px;
  z-index: 2;
}

#examples:before {
  bottom: -16px;
  box-shadow: 0px -8px 16px rgba(0,0,0,.3);
}

#examples:after {
  top: -16px;
  box-shadow: 0px 8px 16px rgba(0,0,0,.3);
}

#examples-deep {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#examples svg,
#examples canvas {
  position: absolute;
}

.example-mesh {
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
}

.example-anchor path {
  fill: none;
  pointer-events: all;
}

.example-anchor path:hover {
  stroke: #000;
  stroke-width: 2px;
}
</style>


<div id="examples">
  <div id="examples-deep" ></div>
</div>

<script src="d3.v3.min.js"></script>
<script src="d3.hexbin.min.js"></script>
<script>

/* https://github.com/davidbau/seedrandom Copyright 2013 David Bau. */
(function(a,b,c,d,e,f){function k(a){var b,c=a.length,e=this,f=0,g=e.i=e.j=0,h=e.S=[];for(c||(a=[c++]);d>f;)h[f]=f++;for(f=0;d>f;f++)h[f]=h[g=j&g+a[f%c]+(b=h[f])],h[g]=b;(e.g=function(a){for(var b,c=0,f=e.i,g=e.j,h=e.S;a--;)b=h[f=j&f+1],c=c*d+h[j&(h[f]=h[g=j&g+b])+(h[g]=b)];return e.i=f,e.j=g,c})(d)}function l(a,b){var e,c=[],d=(typeof a)[0];if(b&&"o"==d)for(e in a)try{c.push(l(a[e],b-1))}catch(f){}return c.length?c:"s"==d?a:a+"\0"}function m(a,b){for(var d,c=a+"",e=0;c.length>e;)b[j&e]=j&(d^=19*b[j&e])+c.charCodeAt(e++);return o(b)}function n(c){try{return a.crypto.getRandomValues(c=new Uint8Array(d)),o(c)}catch(e){return[+new Date,a,a.navigator.plugins,a.screen,o(b)]}}function o(a){return String.fromCharCode.apply(0,a)}var g=c.pow(d,e),h=c.pow(2,f),i=2*h,j=d-1;c.seedrandom=function(a,f){var j=[],p=m(l(f?[a,o(b)]:0 in arguments?a:n(),3),j),q=new k(j);return m(o(q.S),b),c.random=function(){for(var a=q.g(e),b=g,c=0;h>a;)a=(a+c)*d,b*=d,c=q.g(1);for(;a>=i;)a/=2,b/=2,c>>>=1;return(a+c)/b},p},m(c.random(),b)})(this,[],Math,256,6,52);

var data = [
  {title: "Reingold–Tilford Tree (Radial)", url: "//bl.ocks.org/mbostock/4063550"},
  {title: "Factorisation Diagrams", url: "//www.jasondavies.com/factorisation-diagrams/"},
  {title: "Phylogenetic Tree of Life", url: "//www.jasondavies.com/tree-of-life/"},
  {title: "Geographic Clipping", url: "//www.jasondavies.com/maps/clip/"},
  {title: "Les Misérables Co-occurrence Matrix", url: "//bost.ocks.org/mike/miserables/"},
  {title: "L*a*b* and HCL color spaces", url: "//bl.ocks.org/mbostock/3014589"},
  {title: "Treemap", url: "//bl.ocks.org/mbostock/4063582"},
  {title: "Map Projection Transitions", url: "//www.jasondavies.com/maps/transition/"},
  {title: "Across U.S. Companies, Tax Rates Vary Greatly", url: "//www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html"},
  {title: "Rotating Voronoi", url: "//bl.ocks.org/mbostock/4636377"},
  {title: "Zoomable Geography", url: "//bl.ocks.org/mbostock/2374239"},
  {title: "Fisheye Distortion", url: "//bost.ocks.org/mike/fisheye/"},
  {title: "Geodesic Rainbow", url: "//bl.ocks.org/mbostock/3057239"},
  {title: "Hierarchical Bar Chart", url: "//bl.ocks.org/mbostock/1283663"},
  {title: "Exoplanets", url: "//bl.ocks.org/mbostock/3007180"},
  {title: "Crossfilter", url: "//square.github.io/crossfilter/"},
  {title: "Alaska’s villages on the frontline of climate change", url: "//www.guardian.co.uk/environment/interactive/2013/may/14/alaska-villages-frontline-global-warming"},
  {title: "The federal health-care exchange’s abysmal success rate", url: "//www.washingtonpost.com/wp-srv/special/politics/state-vs-federal-exchanges/"},
  {title: "Counties Blue and Red, Moving Right and Left", url: "//www.nytimes.com/interactive/2012/11/11/sunday-review/counties-moving.html"},
  {title: "At the National Conventions, the Words They Used", url: "//www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html"},
  {title: "Reprojected Raster Tiles", url: "//www.jasondavies.com/maps/raster/"},
  {title: "Hive Plots", url: "//bost.ocks.org/mike/hive/"},
  {title: "Donut Transitions", url: "//bl.ocks.org/mbostock/4341417"},
  {title: "Non-Contiguous Cartogram", url: "//bl.ocks.org/mbostock/4055908"},
  {title: "Spermatozoa", url: "//bl.ocks.org/mbostock/1136236"},
  {title: "Zoomable Circle Packing", url: "//bl.ocks.org/mbostock/7607535"},
  {title: "Transform Transitions", url: "//bl.ocks.org/mbostock/1345853"},
  {title: "Scatterplot Matrix", url: "//bl.ocks.org/mbostock/3213173"},
  {title: "Janet L. Yellen, on the Economy’s Twists and Turns", url: "//www.nytimes.com/interactive/2013/10/09/us/yellen-fed-chart.html"},
  {title: "Front Row to Fashion Week", url: "//www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/"},
  {title: "Interrupted Sinu-Mollweide", url: "//bl.ocks.org/mbostock/4481520"},
  {title: "Streamgraph", url: "//bl.ocks.org/mbostock/4060954"},
  {title: "Force-Directed Graph", url: "//bl.ocks.org/mbostock/4062045"},
  {title: "Zoomable Icicle", url: "//bl.ocks.org/mbostock/1005873"},
  {title: "Collision Detection", url: "//bl.ocks.org/mbostock/3231298"},
  {title: "Waterman Butterfly", url: "//bl.ocks.org/mbostock/4458497"},
  {title: "Airocean World", url: "//www.jasondavies.com/maps/airocean/"},
  {title: "Countries by Area", url: "//www.jasondavies.com/maps/countries-by-area/"},
  {title: "Bilevel Partition", url: "//bl.ocks.org/mbostock/5944371"},
  {title: "Map Zooming", url: "//bl.ocks.org/mbostock/6242308"},
  {title: "Fisher–Yates Shuffle", url: "//bost.ocks.org/mike/shuffle/"},
  {title: "Sphere Spirals", url: "//www.jasondavies.com/maps/sphere-spirals/"},
  {title: "World Tour", url: "//bl.ocks.org/mbostock/4183330"},
  {title: "Zoomable Treemaps", url: "//bost.ocks.org/mike/treemap/"},
  {title: "Clipped Map Tiles", url: "//bl.ocks.org/mbostock/4150951"},
  {title: "Cubism.js", url: "//square.github.io/cubism/"},
  {title: "Voronoi Labels", url: "//bl.ocks.org/mbostock/6909318"},
  {title: "Bivariate Hexbin Map", url: "//bl.ocks.org/mbostock/4330486"},
  {title: "OMG Particles!", url: "//bl.ocks.org/mbostock/1062544"},
  {title: "Calendar View", url: "//bl.ocks.org/mbostock/4063318"},
  {title: "The Wealth & Health of Nations", url: "//bost.ocks.org/mike/nations/"},
  {title: "Collapsible Tree", url: "//bl.ocks.org/mbostock/4339083"},
  {title: "Hexagonal Binning", url: "//bl.ocks.org/mbostock/4248145"},
  {title: "Over the Decades, How States Have Shifted", url: "//www.nytimes.com/interactive/2012/10/15/us/politics/swing-history.html"},
  {title: "China Still Dominates, but Some Manufacturers Look Elsewhere", url: "//www.nytimes.com/interactive/2013/04/08/business/global/asia-map.html"},
  {title: "Strikeouts on the Rise", url: "//www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?ref=baseball"},
  {title: "Epicyclic Gearing", url: "//bl.ocks.org/mbostock/1353700"},
  {title: "Voronoi Tessellation", url: "//bl.ocks.org/mbostock/4060366"},
  {title: "The state of our union is … dumber", url: "//www.guardian.co.uk/world/interactive/2013/feb/12/state-of-the-union-reading-level"},
  {title: "Chord Diagram", url: "//bl.ocks.org/mbostock/1046712"},
  {title: "Floating Landmasses", url: "//bl.ocks.org/mbostock/6738360"},
  {title: "How the Tax Burden Has Changed", url: "//www.nytimes.com/interactive/2012/11/30/us/tax-burden.html"},
  {title: "Prime Number Patterns", url: "//www.jasondavies.com/primos/"},
  {title: "Koalas to the Max", url: "//www.koalastothemax.com/"},
  {title: "Constellations of Directors and Their Stars", url: "//www.nytimes.com/newsgraphics/2013/09/07/director-star-chart/"},
  {title: "Drought and Deluge in the Lower 48", url: "//www.nytimes.com/interactive/2012/08/11/sunday-review/drought-history.html"},
  {title: "Animated Bézier Curves", url: "//www.jasondavies.com/animated-bezier/"},
  {title: "Histogram", url: "//bl.ocks.org/mbostock/3048450"},
  {title: "Stacked-to-Grouped Bars", url: "//bl.ocks.org/mbostock/3943967"},
  {title: "Force-Directed States of America", url: "//bl.ocks.org/mbostock/1073373"},
  {title: "Faux-3D Arcs", url: "//bl.ocks.org/dwtkns/4973620"},
  {title: "512 Paths to the White House", url: "//www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html"},
  {title: "Polar Clock", url: "//bl.ocks.org/mbostock/1096355"},
  {title: "Population Pyramid", url: "//bl.ocks.org/mbostock/4062085"},
  {title: "The America’s Cup Finale: Oracle’s Path to Victory", url: "//www.nytimes.com/interactive/2013/09/25/sports/americas-cup-course.html"},
  {title: "Rainbow Worm", url: "//bl.ocks.org/mbostock/4165404"},
  {title: "Four Ways to Slice Obama’s 2013 Budget Proposal", url: "//www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html"},
  {title: "Quadtree", url: "//bl.ocks.org/mbostock/4343214"},
  {title: "Bubble Chart", url: "//bl.ocks.org/mbostock/4063269"},
  {title: "Women as Academic Authors, 1665-2010", url: "//chronicle.com/article/Woman-as-Academic-Authors/135192/"},
  {title: "Choropleth", url: "//bl.ocks.org/mbostock/4060606"},
  {title: "Gilbert’s Two-World Perspective", url: "//www.jasondavies.com/maps/gilbert/"},
  {title: "For Eli Manning, 150 Games and Counting", url: "//www.nytimes.com/newsgraphics/2013/09/28/eli-manning-milestone/"},
  {title: "Word Tree", url: "//www.jasondavies.com/wordtree/"},
  {title: "Mobile Patent Suits", url: "//bl.ocks.org/mbostock/1153292"},
  {title: "Mitchell’s Best-Candidate", url: "//bl.ocks.org/mbostock/1893974"},
  {title: "Sankey Diagrams", url: "//bost.ocks.org/mike/sankey/"},
  {title: "van Wijk Smooth Zooming", url: "//bl.ocks.org/mbostock/3828981"},
  {title: "Bryce Harper: A swing of beauty", url: "//www.washingtonpost.com/wp-srv/special/sports/bryce-harper-swing-of-beauty/"},
  {title: "Dissecting a Trailer: The Parts of the Film That Make the Cut", url: "//www.nytimes.com/interactive/2013/02/19/movies/awardsseason/oscar-trailers.html"},
  {title: "Violence and guns in best-selling video games", url: "//www.guardian.co.uk/world/interactive/2013/apr/30/violence-guns-best-selling-video-games"},
  {title: "Hierarchical Edge Bundling", url: "//bl.ocks.org/mbostock/1044242"},
  {title: "Geographic Bounding Boxes", url: "//www.jasondavies.com/maps/bounds/"},
  {title: "Live Results: Massachusetts Senate Special Election", url: "//elections.huffingtonpost.com/2013/massachusetts-senate-results"},
  {title: "Zoomable Map Tiles", url: "//bl.ocks.org/mbostock/4132797"},
  {title: "D3 Show Reel", url: "//bl.ocks.org/mbostock/1256572"},
  {title: "Building Hamiltonian Graphs from LCF Notation", url: "//christophermanning.org/projects/building-cubic-hamiltonian-graphs-from-lcf-notation/"},
  {title: "Sequences sunburst", url: "//bl.ocks.org/kerryrodden/7090426"},
  {title: "Azimuth and Distance from London", url: "//www.jasondavies.com/maps/azimuth-distance/"},
  {title: "Parallel Sets", url: "//www.jasondavies.com/parallel-sets/"}
];

data.forEach(function(d, i) {
  d.i = i % 10;
  d.j = i / 10 | 0;
});

Math.seedrandom(+d3.time.hour(new Date));

d3.shuffle(data);

var height = 2000,
    imageWidth = 132,
    imageHeight = 152,
    radius = 75,
    depth = 4;

var currentFocus = [innerWidth / 2, height / 2],
    desiredFocus,
    idle = true;

var style = document.body.style,
    transform = ("webkitTransform" in style ? "-webkit-"
        : "MozTransform" in style ? "-moz-"
        : "msTransform" in style ? "-ms-"
        : "OTransform" in style ? "-o-"
        : "") + "transform";

var hexbin = d3.hexbin()
    .radius(radius);

if (!("ontouchstart" in document)) d3.select("#examples")
    .on("mousemove", mousemoved);

var deep = d3.select("#examples-deep");

var canvas = deep.append("canvas")
    .attr("height", height);

var context = canvas.node().getContext("2d");

var svg = deep.append("svg")
    .attr("height", height);

var mesh = svg.append("path")
    .attr("class", "example-mesh");

var anchor = svg.append("g")
      .attr("class", "example-anchor")
    .selectAll("a");

var graphic = deep.selectAll("svg,canvas");

var image = new Image;
image.src = "//d3js.org/ex.jpg?3f2d00ffdba6ced9c50f02ed42f12f6156368bd2";
image.onload = resized;

d3.select(window)
    .on("resize", resized)
    .each(resized);

function drawImage(d) {
  context.save();
  context.beginPath();
  context.moveTo(0, -radius);

  for (var i = 1; i < 6; ++i) {
    var angle = i * Math.PI / 3,
        x = Math.sin(angle) * radius,
        y = -Math.cos(angle) * radius;
    context.lineTo(x, y);
  }

  context.clip();
  context.drawImage(image,
      imageWidth * d.i, imageHeight * d.j,
      imageWidth, imageHeight,
      -imageWidth / 2, -imageHeight / 2,
      imageWidth, imageHeight);
  context.restore();
}

function resized() {
  var deepWidth = innerWidth * (depth + 1) / depth,
      deepHeight = height * (depth + 1) / depth,
      centers = hexbin.size([deepWidth, deepHeight]).centers();

  desiredFocus = [innerWidth / 2, height / 2];
  moved();

  graphic
      .style("left", Math.round((innerWidth - deepWidth) / 2) + "px")
      .style("top", Math.round((height - deepHeight) / 2) + "px")
      .attr("width", deepWidth)
      .attr("height", deepHeight);

  centers.forEach(function(center, i) {
    center.j = Math.round(center[1] / (radius * 1.5));
    center.i = Math.round((center[0] - (center.j & 1) * radius * Math.sin(Math.PI / 3)) / (radius * 2 * Math.sin(Math.PI / 3)));
    context.save();
    context.translate(Math.round(center[0]), Math.round(center[1]));
    drawImage(center.example = data[(center.i % 10) + ((center.j + (center.i / 10 & 1) * 5) % 10) * 10]);
    context.restore();
  });

  mesh.attr("d", hexbin.mesh);

  anchor = anchor.data(centers, function(d) { return d.i + "," + d.j; });

  anchor.exit().remove();

  anchor.enter().append("a")
      .attr("xlink:href", function(d) { return d.example.url; })
      .attr("xlink:title", function(d) { return d.example.title; })
    .append("path")
      .attr("d", hexbin.hexagon());

  anchor
      .attr("transform", function(d) { return "translate(" + d + ")"; });
}

function mousemoved() {
  var m = d3.mouse(this);

  desiredFocus = [
    Math.round((m[0] - innerWidth / 2) / depth) * depth + innerWidth / 2,
    Math.round((m[1] - height / 2) / depth) * depth + height / 2
  ];

  moved();
}

function moved() {
  if (idle) d3.timer(function() {
    if (idle = Math.abs(desiredFocus[0] - currentFocus[0]) < .5 && Math.abs(desiredFocus[1] - currentFocus[1]) < .5) currentFocus = desiredFocus;
    else currentFocus[0] += (desiredFocus[0] - currentFocus[0]) * .14, currentFocus[1] += (desiredFocus[1] - currentFocus[1]) * .14;
    deep.style(transform, "translate(" + (innerWidth / 2 - currentFocus[0]) / depth + "px," + (height / 2 - currentFocus[1]) / depth + "px)");
    return idle;
  });
}

</script>

<script>

d3.select("#download").attr("href", "https://github.com/mbostock/d3/releases/download/v" + d3.version + "/d3.v3.zip");
d3.select("#version").text(" (" + d3.version + ")");

</script>

</body></html>

dc.css

div.dc-chart {
    float: left;
}

.dc-chart rect.bar {
    stroke: none;
    cursor: pointer;
}

.dc-chart rect.bar:hover {
    fill-opacity: .5;
}

.dc-chart rect.stack1 {
    stroke: none;
    fill: red;
}

.dc-chart rect.stack2 {
    stroke: none;
    fill: green;
}

.dc-chart rect.deselected {
    stroke: none;
    fill: #ccc;
}

.dc-chart .pie-slice {
    fill: white;
    font-size: 12px;
    cursor: pointer;
}

.dc-chart .pie-slice :hover {
    fill-opacity: .8;
}

.dc-chart .selected path {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}

.dc-chart .deselected path {
    stroke: none;
    fill-opacity: .5;
    fill: #ccc;
}

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

.dc-chart .axis text {
    font: 10px sans-serif;
}

.dc-chart .grid-line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}

.dc-chart .grid-line line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}

.dc-chart .brush rect.background {
    z-index: -999;
}

.dc-chart .brush rect.extent {
    fill: steelblue;
    fill-opacity: .125;
}

.dc-chart .brush .resize path {
    fill: #eee;
    stroke: #666;
}

.dc-chart path.line {
    fill: none;
    stroke-width: 1.5px;
}

.dc-chart circle.dot {
    stroke: none;
}

.dc-chart g.dc-tooltip path {
    fill: none;
    stroke: grey;
    stroke-opacity: .8;
}

.dc-chart path.area {
    fill-opacity: .3;
    stroke: none;
}

.dc-chart .node {
    font-size: 0.7em;
    cursor: pointer;
}

.dc-chart .node :hover {
    fill-opacity: .8;
}

.dc-chart .selected circle {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}

.dc-chart .deselected circle {
    stroke: none;
    fill-opacity: .5;
    fill: #ccc;
}

.dc-chart .bubble {
    stroke: none;
    fill-opacity: 0.6;
}

.dc-data-count {
    float: right;
    margin-top: 15px;
    margin-right: 15px;
}

.dc-data-count .filter-count {
    color: #3182bd;
    font-weight: bold;
}

.dc-data-count .total-count {
    color: #3182bd;
    font-weight: bold;
}

.dc-data-table {
}

.dc-chart g.state {
    cursor: pointer;
}

.dc-chart g.state :hover {
    fill-opacity: .8;
}

.dc-chart g.state path {
    stroke: white;
}

.dc-chart g.selected path {
}

.dc-chart g.deselected path {
    fill: grey;
}

.dc-chart g.selected text {
}

.dc-chart g.deselected text {
    display: none;
}

.dc-chart g.county path {
    stroke: white;
    fill: none;
}

.dc-chart g.debug rect {
    fill: blue;
    fill-opacity: .2;
}

.dc-chart g.row rect {
    fill-opacity: 0.8;
    cursor: pointer;
}

.dc-chart g.row rect:hover {
    fill-opacity: 0.6;
}

.dc-chart g.row text {
    fill: white;
    font-size: 12px;
    cursor: pointer;
}

.dc-legend {
    font-size: 11px;
}

.dc-legend-item {
    cursor: pointer;
}

.dc-chart g.axis text {
    /* Makes it so the user can't accidentally click and select text that is meant as a label only */
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10 */
    -o-user-select: none;
    user-select: none;
    pointer-events: none;
}

.dc-chart path.highlight {
    stroke-width: 3;
    fill-opacity: 1;
    stroke-opacity: 1;
}

.dc-chart .highlight {
    fill-opacity: 1;
    stroke-opacity: 1;
}

.dc-chart .fadeout {
    fill-opacity: 0.2;
    stroke-opacity: 0.2;
}

.dc-chart path.dc-mbolmbol {
    fill-opacity: 0.5;
    stroke-opacity: 0.5;
}

.dc-hard .number-display {
    float: none;
}

.dc-chart .box {
  font: 10px sans-serif;
}

.dc-chart .box line,
.dc-chart .box rect,
.dc-chart .box circle {
  fill: #fff;
  stroke: #000;
  stroke-width: 1.5px;
}

.dc-chart .box .center {
  stroke-dasharray: 3,3;
}

.dc-chart .box .outlier {
  fill: none;
  stroke: #ccc;
}

.dc-chart .symbol{
    stroke: none;
}

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

raleway_thin-webfont.woff

wOFF>L`�FFTMlZp�6GDEF�/8� OS/2�M`�dAcmapҜE�_cvt (�_fpgm@�e�/�gasp�glyf3�S,2qp�head8�26��VRhhea9 $	hmtx94�$��,8loca:�/Fmaxp;�  ��name<�d9 post<�:�oE�4prep>@@^˻yx�c```d���6��'-ٴ��Of�x���
 Ü
��Ž��@,?,�vނ�H;��e�6�1��w�x�c`b^�������u�1�<�f�Ȑ�Ā��`��ʢb �𛅍����xR��A$Ǣκ$��^3x�c```f�`F8�1��,������Pǰ�a1�R��k�(p)�(H*�*()�)�+�+�QTz�������Ep�


2h*���������������[d>Hy�� �A��_������uQ������	H0�+z������������_@PHXDTL\BRJZFVN^AQIYEUM]CSK[GWO��������������������������������? 0(8$4,<"2*:&6.>!�W&�0�����H*6euI`������
�ld`hi%d:/�M��L'��))%+.'7x�]Q�N[A�
��� 9�����6H �.��vc9Bڍ\�b\�P Q��kh(S�M��$>�O���5��4;;�sΙ3Kʑ�wi��sH�n�f�~'��E����FF��#-63z�}���f4�N@y�[�CF�N���2?��>��<��f��Zg!=��|3ni�5�Yw�A_�:\
��T���T����\m�63�wp!"?�hj��@ӟ:�z>�b	r�l�
&��?�Dpa2]�T-3�vp��,:ؤJs��U����	��-�2KC���*1B�$�BN9w�?)P>��1o��θa��q�50�����fS�[�0~G��/ƒ>��6F�؎X
`��QU���s/����3%`y��_'�;6/em�c����6��e�ݪ\�E��wU5T��C/g��O��ᠱ���}�@�
�
���ލ���Zu�U��o5����x��|{|�u����هV�o=�c�H˰^-��J,O�	�ՇJ(!�l�	%Tя%*�S�ɃG!DU�C��J&Dql0��`B>X��!���8�C(��;��]I���������ٙs�=�<���!�L1�g�H���%	j�)��lJiKT��J�r(W,'M�qMF��>÷Y�����n������%4.`��DrT$	S6��Lʤ܊�)��.j�D#��'�Sv�uY����
B��p�JRC �
�3
���S��9���}�B�Z���FU��U)_�#e�t�OY�V]�
48]%�@�ڔ�	���Jꭟ�P�eV4�j�Y�Y��MS�,�|s�1�hzͰf��ѣYn���z�
G �+���[�\�u����z]a7섴ޒ�.���ǶA��5v
����
�YY�Ϩ�}�����5x^��L��t�=%�/
G��+*GUU�4��?��
��@4
"~�PL���b,���h j��ξB��+��J<����ш}���ڡ��U}c���t��N��m���nO����A�
i��	dk,ɐn���șՆ%�W�D:]��{���D΅2SbXqh�s�8����D_�T�.I��j��ZK�t�l�@�b�UK9���i�(Wrv���U��
�1��oҬ5��K�ĒD��<��Z��/uh�?�i*
G|
�3ͣ[A�����W-��^���F��4��
t��in≚���Gk��4�1���ռ�O,��t��P�������������윿�O.�<�����gr�S�þO��R�xh�e���M� �|����-i�Wn/�|l��-ӫ�0}��\��a8��DH��C��\-�Ԫ�v��� �W��V֊%	k,�:�n�|��U��ɔI_6մ�&���G2�ʚU�u�[�Yc`�
v]i��M���Zn���Tw�	j9]��r6��V��dQ����{A$�ё�5�*kj+��Xc�}~��x*��T�	���onI��J�H#4PM�tK��!V�P<���Vv��l���se�����c��u����ۄ�z~���8�yb���j������[����l�8��``mO��u��ֺe��/<A@N�_��#D)��@In4�i��ő�I��S�G�B�Lw����PgY-�ۢY��n)�jV
���n�f�����B�I	��e�ƞ�*/�>s�a��qӌ����~r������\������0g�pm�$N��/��l-���r��`�Q���"�9T��X ���������
{�pk��z�Ǎ��n�q�U��8����Yv��$L��[�d��	�j��(���P[�X�c1���gM9kN̚��9��˳fY6qMU֬��&<�ϒ{�ryŨ���Ը�	E)R6>;i�{�3��_������x�~-�(H��I�G�,�a�h�"�6
����_)�?/�/m���ŅX�h&�����j!ҊJ%t���E3��N;�m��@L�5����B/wS��C���|�l�}[�����h�?Z�h븵J۬�z`��Ծust��
�NK.Z�a���{;���M�r�4����vř�c?�y�~���s������O
����mʸ����K�۴	��.9A�0��"C6�VJ�ܧ�T���#�]����$p�蝓�M>M�Av}	\��6�Щb�|$��)D����V����n�m}t��W���?P��V�=b�����lo�!�%����_����S�����G��#-�L��o����������~��h��U�ޘ���ƪ��o��=냕�ju���v�Ϻ��g4I+�&�������I	�'�t/uIj�Tj����U"�s|�a%H	*>B��뿪���K4�{X2�f
�م�����/4���ox�E��Y��zA��n~���k
�6p�h���f�p�C3U~�[�t/^���*c���UӅ7�T�j:�r�'Ȫ���I���$�Qk���FG�om�<�o�l�kk���������xrm�Z�c�S�va�T�g.1	X`â��4�Q���V�ܥ��ʓ2]/�B�r�t����@c�d֝8�j&nQ�+���|*��i�}Q��԰O�����0��y�|�t/i&�7eT�l��\
���������>�ϑ�
Rz*mA�t(���*�e��UJ����uG�*e��%D���T�;u�_�,~p���'�D���׋�%�%�/Dƌa��;:ټC����y7b���w~q��}0N�����)9=%j~�t�C'���@�����T�h�l���P4D�}>~����N�������`�$C:N<��L#9Z<
6�B/������j
�z|J����,hϰ���S@#�3a�Gi
��4L^Е�rZ~j�k��o�9g�^W�>z����ǯs�@�=g_�ڠ�%Itٍ���#ߤK�/!"@䗥��S��i�䷥!��Q괔�yi�9<x��y�8p�j��ࡀQb㖞B[��zidڷ�J:��&�����մx���.]��3@�:�]RO^!��HKh	����f6e�_�������ycZ�y�HT|��~�!T�,9l�����p��RK�l��փ[���q��a#ۦp���FXKw��dsЎ�����R]�q��{������=O3`e�H��zimt3}-
S��mm��̬��QJ��S(��^l]�ա�>�����4�lKL�	誙lz}UY��D�=�����l��	�K�M)n^T�x[r���(�J5Q�1fƗw�|���rMQ��/=�n̟a4U&T}���������$�f��ِ�$�+ń ��*��c��@oU̡����j)t]sZ���#��	f�$������n�Y�5�\8R�|�H��	r!pc���8�i((���
���6u���Km7�zuW������O]���o��m�;Vm�{W����}'t������D���u[/w��<���O�7��=�O�l�H	�ȴ�b����$n�UQ|�L��ʷ7e��l:yt�H��l���ES%�UM��J�य़~�
ؤF�F�H�`�KpY��5|�����FU_����wgL<?���Oѯ��clLNK*�]C�z)��r��Fq)�80��ѩ�Q����}33l��^����Woz��aby@R���RA�R���8 T��=�H�$�����֟o�o\���M{�\��M�^�00e:�/�u]Y���3}o~j����Ov�Y�j�K��n�ՠ�ʇHI�
$W�3�����"�ȸj"���`�H4�WP�����,�4tN�J�.v���@=J�˗�T�C��<M��渱(�� ��_�)��
�2�B�t�:�o-��4�(��#��F1$F�4C�����S[Kw�2ѐ8��tž���T����<��#��싚 HB
�u�W=k�Nز�*T�ƾ�ލ;�9���;,���S��=��/D�M�m}���J��g�7�e�d�Oz
���	�WK@^()t�pP���/�A�aP%TA�AaPE	U%�q�����آ�HJ8+m�o͕7�Ŗ�=�WFF�����h�B�F��Xߘ��FcR0��'���r�R����[�Yca��b@��d|c��S��+��ԏ��nW�c|V)�43�_��him��f��Ɂ�P2҈��$�Ykb����oPmO7��[��ǾnF��_�i�g?�ۿ�y��M���qk��kt��3���Vw=���O���[��y��='O��9uFHn�~j��}�QW,��IsaΡ�����3G�PP��X3ٴ��o�0�7�&�(�%Lb-�+��N��� ~��cQ>�5�d1�dZ∢�}���h!�(��j1tQ��j
яڑ��t��t*d��:G��j����ԋ�{w�*Q�����SCY����}���=KK�+��ׄ��h�c���0�ɾi�%�4~�Y�T��3ԥڃ���@rڥ���<.p��䂿�N`S�؄�C������_	��9wt/��Ǚ#*�����F��%)S`��Ow:'�x��>���L��z*1����z��R��"��5��k<Β`,��)d5a*Ւap��ds�,�O���(a�M��Fa��Λ8��/DN���T��@��iI�
��	]����lTF�8#i�IC�8o�u�R ��Nڣ��$���𖰃�7Q����.�9��X�E�s�s�-�g����>a>=���u������Nj}�c��	���Wx��~y�~�q@_��8��-*��Q�F�*���O_���BwW����yI�:}-i�l�k����R�3$׀���0���hx��Җc�M�:W.
R�S[u��
��53�V�i:��nD��l��-4���p�`;���]:g�T��E�.wї{�1C3jt��bNܺ�b���81
~��+U�X3�t�<�F��� �d�x���w��6;}��_71Q����E�R鹝%�t��'s'Wj��iKg<��e��갳&\�Wff'����#���g:j�}Vѥ3d2�C���SV��;��=���kv�
�Weʪ劋��_2�e[
eL��)�5�&r޲įWȿ�pեQ�'�����S|��JZ��v\�D�Y��g�G�X�`��f�W:I��>ixQ�W�������l8�EA�)�O0�'�j�o1jA%�j$ZK|�M�F�X-���S�N4d�:Cێ\��wV�=07+m����۾{s���_)߷�f��:kE&b��/ۿ��'it��P����Aj}iѺE'	_��� ={�.9b\Z�a���ܺq��T�ɇ�k�G�''/���/�|��i/�O�g�ys���#�W��R����++_Zȡȳv�"}�M��C)D�}�J�Pj,E�=š�p�����gӐ�4ti�IXfn*��?6��߱f���)i0an���Y	��|S�]��C�U.�*n�׽N</����0[1���11*��:���ky�kׄ��.�f5Ch���ԍXD���o
��Q|����E��/ʄ�۲4"����E7�Y|�*k	��*����Q$��^��r"J���:w������K_��������6�ۅ��x�[�=�O�:��q���鍛N�?ܰ騀:rɝk�� �@�)��A�*^�7I&�
��D��@)
8�NB(��[#^�-�%��Vҭ{�Oڻ������C�x��K�����z��}�C���}�}�^xp�k�9�i7�
����0簳�aR�g����Sd(�|N�3��yT���t7=Cg���6��=�>E�����/��������>{�N�i+L�5�T�Cj:�d�;���'�l�����p��n'nEg�*�Q�������6���C>�����yz���N��lz�g����Os��iC��'�����K�\�gB|RM֐\%Z��q�(�C���	�#k�R��oL_��\Y�^����h�y��S�JԔ�dbQ�˳�B4\V<�'G>�Kb!
´�	Ӷ����$�]o?E7���1y���/0y:�I'���7l� S�<	<���rj�rC�d�Ÿ*�$LLSH�n��
OU�
�l������`�| ?Gȁ�8�O=����ƈ���A��nO���[m�����
�6@��^�^B0e:��a����D�5���ɴ�3pˠW�5D��۲/�%K�h�®Շ��Ν�����.�kv�8�v&��uon1�|��T�sʛ!٠�{Eθ0��F���s0Pt�%�}�B�KL�Q�'�����I�p
t��:�ꧯL����{V[��Qc+.�ܒ^Q᪚Z�sؿ��Q�IcN����������>��m����f~�ૢb?gO�ľ͇����sC��X�D6{D����� ��01ou�C�R*�^�� CJ��IF��*��).;L3y9CNT\�`���(���^Kt�Dि�2o�LL��M�MK���^Qu2����+X�an8)�"i_W��%tE�|G4�!��WZ�o��R��~��թL�,"9�O�ؚBq�]�|�W��P7'���WŒ|��F3�ԋ���q�S�Aq�Pߞj�#cR��\�&���&/�������w����Nr�6��Nd��@�n�8:�d�p�a��s�/7�Z��Y�ZXI��
P��:�����o�*]N=T�w��e��Z$N��I�%��=KR�����<}̄����‹���6��Vࡋ����~P�N7�#N$?04[�l��d!�V���RiL:Ţ�l��}�����\؟?)d�^8���90No?e���^�߾��#I��Y'�a���L�A*b�
P��0��W�1�2+�9����G���+c�D�0���O���Y7��W-s���z�t�¸���x>�����A;G��ӪI
��/��#��!kZP|��:"1p�q���7"-�;��FG�[l�駩�����S�=��[ww����.њ��&�-d���vC�>w�܍���+�o%����ۃн����S_���̦y�4���
�d)J�#k�}wɈ&9�29y���&{{����e�m���LD�y{O��@JWݹ~�!�$�I��݉\;R�+�'�Î4�dC��UX�"��~�阪�i�$RQw��(�w���:د�W�]$�E�Ybu��" ��h��I-����%V��z	-��>�gў=���ζ��Z���
��sG��=��݋>�/��c��VNݻn���
m�^�������7��O�ڵbٓ�t�S,���L�x4�@@�6��869YA�/��S�� �22���ԙ?�˛t�V�)�v碌Xb���4�,K�_=����b8_
��,c�!4���H[]�(n�k�xa��c�s������g?�9/&�ȇV=�9gn���Y�G�/=�塶ǟ?�mS+�vpc�B:x��at�(A$6���0�x�E]71�R\7�'(4�����*� �B�A�I {?����&�OK���I������d>!*�b]@r>��fE:Y�����ߗN����p�u��5k��(�а�p��_�Gp�4�@є�M6ݍfI#itNva�/�`^ng:N�zE�H�]S���%o qW�2�,Á��fN��� ��Th�T��|Ws�P3ܼoN�u
Ũ�#m����S�-�|�]�‡@0*)n�I��OBL������7�� ]����{���U���!�?0x	J���c��4���y��r�Éc��w0`\�X"�ȧ1^����r��ɼ�>I!�A�[fk��a��
���O]+�\}���j�U�7TaN���u#��f'8%l�q����Dž�J�^�]��f��oNz���ۣ��H�f�f�vd�&��9�'L4��?o&���p8_�7���6��s��7Y����Ϻ�iN�\F��!/gW�g�>�
c�O��
1AS��������)V���R�S�˖9�v�����X"���9]>0�'�ܔ?%�r����o�?�Q�R	<�,��MG��[
��t������d(t!
�y���6�~J���A�vc��s���WAOg�+s��r�!F0J`��x$q�K+���˖�U�跂\�#��W�o)�q���
Y�����B}Éuw�7`6I��`�
� ��S�V2aV1-	$��#�
�-_
6G+v~�;?9�e˶o������Ya������p]ư��ӥ�C�59lɎ��\���_�r���#���S�>2���OS�4����tg��bw�
>'*������O�lZňx��w#jϣ'0�=b��y>.�$9#��|��0�RA����Ί�D���!��8���#
��xA�D�qZ�86"��MQy�se�w�sU� ��j���ɍBJ��Ʌp}d�;.p}����%	>rIf�k`�jx��O��z��e���hD�����<�Q��<է�_)��J^	�����E�<.[-B��p�6B�t2��X]C+»-�-�)b�;��؞��c�/;�/�'��XÜ�;w��:6\�T�}���ѦOۻ_�n}�/ߧ�B*�d��g����������=w�J��RJF��*�)X�k0���HF�c��� �%hiSb~�@��å���n������Y ��4	)���|���c�ѣ��x���ܙ����?N5�>������T��}��ޖ��'��NR����k!��-��l���E\���X���r\��/TW��9��Zdl�L��T�L����[4���ߔ����A{���M��������-*Y�y�������B|����HIY��&� ]�ÁV$'�a�oɣ@r��9Ջ��b�W�7�Y?��օY�4T5D|����S�Sh���!FG�t�{�4*�0��u@�N�G۞}\Hط;����i����`b�u�f��g�_��\�a�A�$��ci.�8�1��7w�� }jȏ��:,���9��$*�Ռ�n��,O�b�#
��{k��K*�7p�F�A�K�϶��)�~]��o�禗>�i��/����t��a����y.�I�.зX�Uΰ��慂�4V�9
�A9�,S��?WV΀ɰCR�-G�A�^
��=������4r4��B垿�;�q��i�h����~:�>���}�|>Z�)�����'��7���Ye�J���ɣ$W���F�!��L�R~��J �RCX��c\d0�gUb�$k}}��[V�M��V�WTc��y�R�!	k�b��BɑoX�@��}��VѲ�7�u��c��l���-��M�3�Z��I1j\�r�&���k���g�5����U��
�&�M�}ǧL«�y�#�1�����.F�}Z�
�0p�=3'��bA���ԖӘO��V�u��������ݷ���|vS�]�7��賯��/�z�݅uG�J��D�%�z�XL��ҥ��W�lg'����V�/��8�l��7�WZ��#J� ��y6�+"�M*��"b�-,�Sb
�"���r�}�ҭ�Ӻ}�<�e�����5��'x��z	�����Hl9�nDV��}��4��}*�#RSC�l㏏rwr(�c����_|����$l�it�����g�u�l�mЁ&{�}A��/<a/�w
��[v�ׇ�\�W��gŘ�����a�X
n)>>#���7[��,g:���S�!}z���TՀ��5�K��:���$)�Tu	&�Ty��X�B��"O����n� �<M��Ъ�ٱ��E�(�1I���e-c���Q&�<;܀�e�3;,��p�MW�!P-qx�Rt�y�J�+��������߯��Pkǂ�#��E_߽맺��ew��f&/|�3�Q�m{��5�`~����K_as|5��ʋ>�Y2��XIG͊�"'�_97]X�x���w��g��;��3NJ�cu��ףO���y��T]�e?�@�}���q��_�ۇ��9����9��0WYmЇ+��piQE������D
7�l%P��>E��)k���j���<�w��s]��'�	y��	�&7;�ϼj�@����3t�apH죌�n{��h�H��y��#4&F�b��Џ��1ĕi8�~8V
��tr~V �)r�	�Gѝ*�����H��x}�9��8��Ҭ�on9~S��x�Ӿdϖ�_\����#;����&�6�'t��v���������#�)}�P�c�؇�#�����4�i9gi1�i�#�5��D��)Zvh‘L�����a��k���!M��4M�6~pp���S�ȶ��c�_Zu�~[����[�_���y1�<���S�K�&�!�]�Mϓ
��8qk�O���0(jG�<L���`}�K���6�u��$���������2��$9�����>w��/���&�C�kGC��c�
�q���q7_"8!S�$r!o���*TT

�%A�tC(�Q@L���=���t�ڵ��;۾w�Ư��O�x����1sv��o�ܽ~����Ж]K6�������k�UWϙ��i՘���\&˻a�}���?�^���,�u��ߵ�"<��"�[�ѥb�8���������
𧀏w�47;cYXJ,6f?"�:]co���N3�Ry�™�R>��T�*2��I�Gʍ�V$�c�nG�t�-/H�7��y5 '`��Zg�;T�x�`�``��.ǻQܭWܻ~a��RU,>���yg%��Ж߿䋝3~�S�L0}f�7�6o�'"��nVxo��.�~|SA$��
�6;9I��}I��^�ū��1��J��{t$��Pݞё��؏^^�ǰ���r��ֈ�`�@��h�?6��?p`B*T�H�%�X��A�o�����w.?��p����r���������K�L8���NJN���|��\��]���Lکz{�dc$̦O�_������p�P�ؘ-[������x��N<�$�"$Kӈ�b5G�>���a��+�޸{�}1���������gc��Z�v��ŞG{Z������C���ߢoٚ�1~�@�~����o&�ڝ�b��J�c�{=0$�%�e�l������b!��tcb�ɪ@�h��/n ���]耻�u�\@�ѻ��C�eҭ-��$=K�I�7{kV�
{���ڭ���s�P�+n�~����m��9��.&/�m�bT��:�4|Ν#T�x�
�V'_ϭ�7��]���o%��VS��\��n ℸ#���Q%�:LD���9�Z�t�-���E:�kn�HC1��a�DB�P�.�kNL��xD	aՊN���*]�<�������E�LV�G�׾NN+Ā�>kPA����u��G9�=w��K��j�7�Ĭ_Y
+����$V��f>]�X���J������;Z�ο\�+�Y��j�/�@��
ְ9Ec��:k���	�Y��V>��C�'����5a�������$��Q�����:?�}2��S�ra� ���h(q��\�D(_%�pS=%����`YڈW�hM��f�ĦcY}F�.8����~�&q� �m�3MNA	������1[�ij�Nʀ{+���V��t.<�9	!'w3qR����E��J�p��,"��X�$"~�s�,������Y������e�_�G|J+-��N+��W�(�}:�������v��t����z�	נ�@�_����cv�}V�������E�M>D&�F��`��V�Ai!�o��p�l4Xr2�'LȔ�$�Zg�Y
��D\5*���d<�3���x�|�&�$>���V/eNh��lU��<,ci���*�G_�[v/�a�̶
n���UY
�U����]K��\L(,����$W)��Q�K�8S=aĹbI�x��
c�����p)��c E
- �|f,k�\��d�_C�6R������� �ƊZ[��a�s/�nm�/8諾�cxʽ%gw��1��-����Dv�����U�gf'v��]�Y�8՝��<�z�\��jh�N��������<��Ѵb�}���O�9�«G�1}Tݫ'��qM���[�[�+}G~���/%0�.�:�P;.1�=SӅ��#2x�s�r����N��+��G��(�����Z�w����S��	Q4�ܲ�A
� ��V$9��c�*�ff�P�!�o�
��A%15؜�=Ϟ�J��_���t�O�=��&ݎ�szf�β?kdan8H��'�<��Q�B�n_Kҁ(r.r���Ha-�p�ž�W^xRy��L*��D��+�ē��RoT�K����༖��������PG�K�P!�R@���᳴�^����I��$M�����}�^MU���d���
5!�$�a���){ǂ�DD�_��m_������B��|�u��j����]��]��5�ȨX�&�:�� ��ot}�֪�k�N*�����t�\c���Z>��Q��Ok>~��if�$.Z<�Ɨ��D�}ҥ���k��?��G���o#����z�,��^��?_/_)\�){�q� �4��^:������EY�ī:�7���l1Bu�T�����T�"��Ox]��K����C�D�����9���V�S��Q���+	غ0|%�UuH:<$$Kxg�ҥ^7<����^:���
���0�!"��W�����X.��b0QU��𽫣��CGh���H��%|H.�ѻYp7;��-�Dg2~T���ńP)Oi��w��/�ep6��A!m�w1̸�p
�����ɻ���#zEx���|�>����F�@|���U|uE�%1`Wh����϶����^_��ic��77}�#H*2�Lђ����o���[�X�^X�R2�r���ѿ���;�?޷�k� 3��O��(��E�O���Y�a��t��`'
bL�\�tO�9�V�:���*
����l���xR���k5��%�uD������|
J-�gC�+��УQ��
��(��\�8=4xJP����1	��_�K�C�ǓB��H��u��v�����	�M��|�
]v�ˊ��r8$����ry�P]X|k���z��^�B�4<��k���	��b���Ɠfp|�{
�q��x��ՏJV+�����M��r�U����\�>��^���״�}��J��ԇ��1ѷ�x^��30��O�N�[t=����O+��-�^�Wҝvk`���%d����������A.oA<5
�H�������J0W2|���l++�#�����\>���~jtDc��R���YE�k����fn^0�#
����	z]�
����yÜhT*��|Ǿ�y�F������uiЭ��q�ь����n����KC��a�)s��Fץs�1H�w{���J��X����x1�Y;��E���Aajc�P�x��ݙ�O��m���gK���XM���񙵳�oذy3b���_���O�L�͐\���]߹�X���W�8�-/%�r𭀖E���s]��i"ɁBMM"e0G�����'
�!+����xd�RX2A�I)scU
XZi\
�3���.7������t.q�%thK�`s���}O
)�U��-(�Q�e��孁���ǜZR���HK���M��FA�0�=�{���|��[���E�Ѐ��!���t�nIdWn��ް��M�r?���:����J�x�c`d```dp<aq�6���+�<��dӁ����3�`kr9�@�4d
�x�c`d``c�����������9"�"(���+x�5��KTQ�?��s��HyPa����1D��D��P1��H�Fk(�p3��.DG��-B"$�1�j-����J$��4u����9���=�^��bL?˦E]N��2�����S29�f��f�1�k�<	N�eh\s�-^�)��-��r�@��mʶ��-�7����%�����~��[$����m�U7dR1Jõ�q����G�
4%O��t_y�/1+O���γ'gܗu�=5��P�5y�w�H	M�X=�I�z�9b~�+�Td�X��].�s��!)�����7�T��߯�w��8�a_�u�1eYU�"�а'���ZWS����9����ԹS���䉕�l�j�����"7@��s���Q�K���A�ﴫ����rQ�h�H��'�������{U��h|���O2�B�$���HJ���7�C������q�x�c`��F�L-�XDX\X�X�X#X�Xװ^`cbb���~�C���S�Ӌ�W
���"�v�]<<�xsx/���%��������?�����@��)A��
BIB'���w�p�<��!&"� V �@�8����	��s��5�?�l�2��H�H�I��I�9"k$�${INI�F��
�%
�#�)~S������Ae��:�ء*�����j�j��2�kjzjMj[�>��z��'
��[�4�iN�ERR�O>x�]��A�?��Q+SKl�*�� ����DV��c9;36���=ߞ9w�jl)Q(ׁ���
�y.*�\��\�� p�2pU�3��o&�HTF�f,�ru�S�E�9{�yȉ��Y��2&K-�;7q�3tU=��&�����ޔ�M0.�:;��~�Ζ���MM�e�ìgƅ�^���&F�gi���3Bx�m��NBa��w�"���b�]�9{{��%Qԍ&�@c���&�Y/OA��_2y2��|����i��Cvf,X�a�AN
qQ�Ŕ��G)e�㧂JTQM
��QO�4�L���N�t�M����c$D��0�Ì0��L%�$S�I0���1��,��
�$Yc�
6�b�v�c�9☔����̳X�*6��C
�)��"q�G���7���>��U��R��L��/R){��BӢ�r*��i�RWʠ2�+#�~�rPͫ����L_�e�OOR7�����NX���W=�|���2��&��|qT������K�PX��Y�F+X!�YK�RX!��Y�+\X� E�+D� E�+DY�+

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() {
  var stack = {},
      event = d3.dispatch("activate", "deactivate"),
      section = d3.selectAll("section"),
      self = d3.select(window),
      body = document.body,
      root = document.documentElement,
      timeout,
      duration = 250,
      ease = "cubic-in-out",
      screenY,
      size,
      yActual,
      yFloor,
      yTarget,
      yActive = -1,
      yMax,
      yOffset,
      n = section[0].length;
  // Invert the z-index so the earliest slides are on top.
  section.classed("stack", true).style("z-index", function(d, i) { return n - i; });

  // Detect the slide height (by showing an active slide).
  section.classed("active", true);
  size = section.node().getBoundingClientRect().height;
  section.classed("active", false);

  // Sets the stack position.
  stack.position = function(y1) {
    var y0 = body.scrollTop / size;
 
    if (arguments.length < 1) return y0;

    // clamp and round
    if (y1 >= n) y1 = n - 1;
    else if (y1 < 0) y1 = Math.max(0, n + y1);
    y1 = Math.floor(y1);

    if (y0 - y1) {
      self.on("scroll.stack", null);
      leap(y1);
      d3.select(body).transition()
          .duration(duration)
          .ease(ease)
          .tween("scrollTop", tween(yTarget = y1))
          .each("end", function() { yTarget = null; self.on("scroll.stack", scroll); });
    }

    location.replace("#" + y1);

    return stack;
  };

  // Don't do anything fancy for iOS.
  if (section.style("display") == "block") return;

  self
      .on("keydown.stack", keydown)
      .on("resize.stack", resize)
      .on("scroll.stack", scroll)
      .on("mousemove.stack", snap)
      .on("hashchange.stack", hashchange);

  resize();
  hashchange();
  scroll();

  // if scrolling up, jump to edge of previous slide
  function leap(yNew) {
    if ((yActual < n - 1) && (yActual == yFloor) && (yNew < yActual)) {
      yActual -= .5 - yOffset / size / 2;
      scrollTo(0, yActual * size);
      reactivate();
      return true;
    }
  }

  function reactivate() {
    var yNewActive = Math.floor(yActual) + (yActual % 1 ? .5 : 0);
    if (yNewActive !== yActive) {
      var yNewActives = {};
      yNewActives[Math.floor(yNewActive)] = 1;
      yNewActives[Math.ceil(yNewActive)] = 1;
      if (yActive >= 0) {
        var yOldActives = {};
        yOldActives[Math.floor(yActive)] = 1;
        yOldActives[Math.ceil(yActive)] = 1;
        for (var i in yOldActives) {
          if (i in yNewActives) delete yNewActives[i];
          else event.deactivate.call(section[0][+i], +i);
        }
      }
      for (var i in yNewActives) {
        event.activate.call(section[0][+i], +i);
      }
      yActive = yNewActive;
    }
  }

  function resize() {
    yOffset = (window.innerHeight - size) / 2;
    yMax = 1 + yOffset / size;

    d3.select(body)
        .style("margin-top", yOffset + "px")
        .style("margin-bottom", yOffset + "px")
        .style("height", (n - .5) * size + yOffset + "px");
  }

  function hashchange() {
    var hash = +location.hash.slice(1);
    if (!isNaN(hash) && hash !== yFloor) stack.position(hash);
  }

  function keydown() {
    var delta;
    switch (d3.event.keyCode) {
      case 39: // right arrow
      if (d3.event.metaKey) return;
      case 40: // down arrow
      case 34: // page down
      delta = d3.event.metaKey ? Infinity : 1; break;
      case 37: // left arrow
      if (d3.event.metaKey) return;
      case 38: // up arrow
      case 33: // page up
      delta = d3.event.metaKey ? -Infinity : -1; break;
      case 32: // space
      delta = d3.event.shiftKey ? -1 : 1;
      break;
      default: return;
    }
    if (timeout) timeout = clearTimeout(timeout);
    if (yTarget == null) yTarget = (delta > 0 ? Math.floor : Math.ceil)(yActual == yFloor ? yFloor : yActual + (.5 - yOffset / size / 2));
    stack.position(yTarget = Math.max(0, Math.min(n - 1, yTarget + delta)));
    d3.event.preventDefault();
  }

  function scroll() {
    // Detect whether to scroll with documentElement or body.
    if (body !== root && root.scrollTop) body = root;

    var yNew = Math.max(0, body.scrollTop / size);
    if (yNew >= n - 1.51 + yOffset / size) yNew = n - 1;

    // if scrolling up, jump to edge of previous slide
    if (leap(yNew)) return;

    var yNewFloor = Math.max(0, Math.floor(yActual = yNew)),
        yError = Math.min(yMax, (yActual % 1) * 2);

    if (yFloor != yNewFloor) {
      location.replace("#" + yNewFloor);
      yFloor = yNewFloor;
    }

    section
        .classed("active", false);

    d3.select(section[0][yFloor])
        .style("-webkit-transform", yError ? "translate3d(0," + (-yError * size) + "px,0)" : null)
        .style("-o-transform", yError ? "translate(0," + (-yError * size) + "px)" : null)
        .style("-moz-transform", yError ? "translate(0," + (-yError * size) + "px)" : null)
        .style("transform", yError ? "translate(0," + (-yError * size) + "px)" : null)
        .classed("active", yError != yMax);

    d3.select(section[0][yFloor + 1])
        .style("-webkit-transform", yError ? "translate3d(0,0,0)" : null)
        .style("-o-transform", yError ? "translate(0,0)" : null)
        .style("-moz-transform", yError ? "translate(0,0)" : null)
        .style("transform", yError ? "translate(0,0)" : null)
        .classed("active", yError > 0);

    reactivate();
  }

  function snap() {
    var y = d3.event.clientY;
    if (y === screenY) return; // ignore move on scroll
    screenY = y;

    if (yTarget != null) return; // don't snap if already snapping

    var y0 = stack.position(),
        y1 = Math.max(0, Math.round(y0 + .25));

    // if we're before the first slide, or after the last slide, do nothing
    if (y0 <= 0 || y0 >= n - 1.51 + yOffset / size) return;

    // if the previous slide is not visible, immediate jump
    if (y1 > y0 && y1 - y0 < .5 - yOffset / size) scrollTo(0, y1 * size);

    // else transition
    else if (y1 !== y0) stack.position(y1);
  }

  function tween(y) {
    return function() {
      var i = d3.interpolateNumber(this.scrollTop, y * size);
      return function(t) { scrollTo(0, i(t)); scroll(); };
    };
  }

  stack.duration = function(_) {
    if (!arguments.length) return duration;
    duration = _;
    return stack;
  };

  stack.ease = function(_) {
    if (!arguments.length) return ease;
    ease = _;
    return stack;
  };

  d3.rebind(stack, event, "on");

  return stack;
})();

stripe.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 450 220" enable-background="new 0 0 450 220" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="225.4907" y1="28.6772" x2="225.4907" y2="192.1543">
	<stop  offset="0" style="stop-color:#1A1A1A"/>
	<stop  offset="1" style="stop-color:#000000"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M389.7,88.7c-8,0-7.2,9.9-7.5,20.5h13.4C395.6,97.3,395.6,88.7,389.7,88.7z M382.2,126.4
	c0,9.6,4.7,11.4,12.6,11.4c9.1,0,21.3-2.7,26-3.5v23.1c-3.7,1.3-14.9,4.5-26,4.5c-20,0-44.3-3.2-44.3-45.8
	c0-37.6,19.1-46.4,39.2-46.4c20.6,0,35.5,10.6,35.5,46.1v10.6H382.2z M303.5,93.2c-1.8,0-5.5,1.5-7.5,2.7v42.9
	c1.5,0.5,4.2,0.8,5.4,0.8c5.5,0,8.9-4.7,8.9-24.3C310.3,95.4,308.7,93.2,303.5,93.2z M307.2,162c-4,0-8.2-1.2-11.2-1.8v32h-31.9
	V71.4H290l4.7,5.5c4.9-4.4,11.7-7.2,18.9-7.2c13.1,0,28.5,3.7,28.5,45.6C342.1,161.3,319,162,307.2,162z M234.8,60.5
	c-8.9,0-15.8-7.2-15.8-15.9c0-8.7,6.9-15.9,15.8-15.9c8.9,0,15.8,7.2,15.8,15.9C250.6,53.3,243.7,60.5,234.8,60.5z M218.9,160.3
	V71.4h31.9v88.9H218.9z M199.6,96.4c-5,0-8.9,2-10.6,3v60.9h-31.9V71.4h25.3l4.7,8.6c1.8-5.5,6.9-10.2,14.3-10.2c5,0,8.4,1,9.9,1.8
	v26.5C208.1,97.3,203.9,96.4,199.6,96.4z M139,137.8c2,0,9.1-1,11.4-1.3v22.6c-4.9,1.2-15.6,2.8-22.6,2.8c-9.1,0-26-1-26-25.7V91.7
	H90.1V71.4h11.7l4-20.1l27.8-6.7v26.8h16.8l-4.2,20.3h-12.6v38.9C133.7,136.7,135.5,137.8,139,137.8z M56.7,97.1
	c0,3.5,2.3,4.7,7.9,7.2l3.4,1.5c7.9,3.5,18.8,9.2,18.8,26c0,26.8-20,30.2-34.2,30.2c-9.2,0-18.9-2.2-25.5-4.2v-23
	c5.7,1.5,15.6,3.9,20,3.9c4.9,0,8.6-0.7,8.6-5c0-3.4-2.3-4.9-7.5-7.2l-4-1.8c-7.5-3.5-18.3-9.6-18.3-25.8c0-23.8,18.6-29,34.2-29
	c11.7,0,19.4,2.7,23.5,4.2v22.3c-4.7-1.5-14.3-3.5-20-3.5C59.6,92.7,56.7,93.7,56.7,97.1z"/>
</svg>

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

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

body {
  font-family: "Raleway";
}
.stack {
  color: #0388A6;
  background: #F1F2EB;
  /*background: "backgroundimg.svg"*/
  box-shadow: 0px 4px 8px rgba(0,0,0,.5);
  display: none;
  font-size: 24px;
  height: 900px;
  line-height: 1.5em;
  margin-bottom: 40px;
  padding: 40px;
  width: 1280px;
  margin:0px;
  -webkit-transform: translate3d(0,0,0);
}

.grey {
  color: #80BF41;
}

.blue {
  color: #F25252;
}

#examples {
  background: #ddd;
  height: 100%;
  margin-bottom: 2em;
  overflow: hidden;
  padding: 0;
  position: relative;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
}

#examples:after,
#examples:before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  background: red;
  height: 16px;
  z-index: 2;
}

#examples:before {
  bottom: -16px;
  box-shadow: 0px -8px 16px rgba(0,0,0,.3);
}

#examples:after {
  top: -16px;
  box-shadow: 0px 8px 16px rgba(0,0,0,.3);
}

#examples-deep {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#examples svg,
#examples canvas {
  position: absolute;
}

.example-mesh {
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
}

.example-anchor path {
  fill: none;
  pointer-events: all;
}

.example-anchor path:hover {
  stroke: #000;
  stroke-width: 2px;
}
.bluenose {
  color: steelblue;
}

#tabview {
  background-image: url('tabview.png');
  background-size: cover;
}

#airbnb-0 {
  background-image: url('airbnb-0.png');
  background-size: cover;
}

.airbnb-1 {
  background-image: url('airbnb-1.png') !important;
  background-size: cover;
}

#wdv-img0 {
  background-image: url('links-e.png');
  background-size: cover;
}

/*#wdv-img1 LINKED*/
/*#wdv-img2 LINKED*/
#wdv-img3 {
  background-image: url('drawhappyall.png');
  background-size: cover;
}

#wdv-img4 {
  background-image: url('newspaper.png');
  background-size: cover;
}

#wdv-img9 {
  background-image: url('hieroglyphs.jpg');
  background-size: cover;
}

#wdv-img6 {
  background-image: url('Caslon-schriftmusterblatt.jpeg');
  background-size: cover;
}

#square-register {
  background-size: cover;
  background-image: url('square-register.png');
}

#smalltalk-0 {
  background-image: url('http://www.parc.com/content/news/media-library/historical_smalltalk_gui_6.14x7.22_parc.jpg');
  /*background-size: cover;*/
  background-repeat: no-repeat;
  background-position: center;
}

#smalltalk-1 {
  background-image: url('http://facweb.cs.depaul.edu/sgrais/images/SpacialMontage/altost2.jpg');
  /*background-size: cover;*/
  background-repeat: no-repeat;
  background-position: center;
}

li {
  padding-bottom: 30px;
}

.stretchthetext {
  letter-spacing: .05em;
}

.bluenose-logo {
  width: 225px;
  margin-left: -10px;
}

.noBackground {
  background-color:#fff;
}

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



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

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

.big {
  font-size: 76px;
  line-height: 76px;
  margin-bottom: 0px;
}

iframe {
  width:100%;
  height:95%;
  margin:0px;
  padding:0px;
  border:none;
}

.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: 36px;
  line-height: 36px;
}

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

pre code {
  padding: 0px;
  margin: 0px;
  background-color: #3E4651;
  font-size: 28px;
  line-height: 28px;
}

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

.grey 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 {
  color: #F16233;
}

.weird {
  color: #788499;
}

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


.iframe-frames {
  padding: 0px;
  padding-bottom: 30px;
}



sunburst.css

/*

Sunburst-like style (c) Vasily Polovnyov <vast@whiteants.net>

*/

pre code {
  display: block; padding: 0.5em;
  background: #000; color: #f8f8f8;
}

pre .comment,
pre .template_comment,
pre .javadoc {
  color: #aeaeae;
  font-style: italic;
}

pre .keyword,
pre .ruby .function .keyword,
pre .request,
pre .status,
pre .nginx .title {
  color: #E28964;
}

pre .function .keyword,
pre .sub .keyword,
pre .method,
pre .list .title {
  color: #99CF50;
}

pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .tex .command {
  color: #65B042;
}

pre .subst {
  color: #DAEFA3;
}

pre .regexp {
  color: #E9C062;
}

pre .title,
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .shebang,
pre .prompt {
  color: #89BDFF;
}

pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc {
  text-decoration: underline;
}

pre .symbol,
pre .ruby .symbol .string,
pre .number {
  color: #3387CC;
}

pre .params,
pre .variable,
pre .clojure .attribute {
  color: #3E87E3;
}

pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .tex .special {
  color: #CDA869;
}

pre .css .class {
  color: #9B703F;
}

pre .rules .keyword {
  color: #C5AF75;
}

pre .rules .value {
  color: #CF6A4C;
}

pre .css .id {
  color: #8B98AB;
}

pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}

pre .preprocessor {
  color: #8996A8;
}

pre .hexcolor,
pre .css .value .number {
  color: #DD7B3B;
}

pre .css .function {
  color: #DAD085;
}

pre .diff .header,
pre .chunk,
pre .tex .formula {
  background-color: #0E2231;
  color: #F8F8F8;
  font-style: italic;
}

pre .diff .change {
  background-color: #4A410D;
  color: #F8F8F8;
}

pre .addition {
  background-color: #253B22;
  color: #F8F8F8;
}

pre .deletion {
  background-color: #420E09;
  color: #F8F8F8;
}

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