README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Built with blockbuilder.org

  

  

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
 		var letters = [" ", " ", " ", "I", "t", "e", "m", " ", "e", "x", "p", "l", "o", "r", "e", "r", " ", " "];
    var letters2 = [" ", "b", "y", " ", "M", "i", "h", "a", "e", "l", " ", "A", "n", "k", "e", "r", "s", "t"]
    var indexLetters = d3.range(19);

    var margin = {top: 20, right: 20, bottom: 30, left: 20},
        width = 360 - margin.left - margin.right,
        height = 120 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
      .domain(indexLetters).rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
      .domain([0, 100]).range([height, 0]);

    var colorScale1 = d3.scale.ordinal()
      .domain([0,3]).range([]);

    var colorScale = d3.scale.ordinal()
      .domain(indexLetters).range(["#a50026","#d73027","#f46d43","#fdae61", "#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"]);
    var svg = d3.select("body").append("svg")
        .attr("class", "ie")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var text1 = svg.selectAll("text")
        .data(indexLetters)
      .enter().append("text")
        .attr("class", "intro-text")
        .attr("x", function(d) { return x(d) + x.rangeBand()/2; })
        .attr("y", height - 40)
        .attr("dy", ".71em")
        .style("text-anchor", "middle")
        .text(function(d) { return letters[d];});

    svg.selectAll(".bar")
        .data(indexLetters)
      .enter().append("rect")
        .attr("class", "bar")
        .attr("x", function(d) { return x(d); })
        .attr("width", x.rangeBand())
        .attr("y", y(0))
        .attr("height", height - y(0))
        .style("fill", function(d) {return colorScale(d);})
      .transition()
        .duration(1000)
        .delay(function(d) {return d * 100;})
        .each(slide);

      function slide() {
        var bar = d3.select(this);
        var grey = true;
        (function repeat() {
          grey = !grey;
          bar.each(function(d) {
            text1.filter(function(dt) {return dt === d;})
              .text(function(d) { return (grey) ? letters2[d] : letters[d];})
            });

          bar = bar.transition()
              .attr("y", function(d) { return y(0); })
              .attr("height", function(d) {
                return height - y(0); })
            .transition()
              .attr("y", function(d) { return y(100); })
              .attr("height", function(d) { return height; })
              .style("fill", function(d) {
                return (grey) ? "grey" : colorScale(d)})
              .each("end", repeat);
        })();
      }
  </script>
</body>

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png