Backend MV*

http://bl.ocks.org/milroc/5553051

by Nivaldo

HTML

<section>
    <p class="big caption">Backend MV*</p>
</section>
<section style="padding:0;">
    <div id="backend-vis">
        <div class="leftMiddle">BACKEND</div>
        <div id="legend">
            <div style="color:#7E9A99;">CONTROLLER</div>
            <div style="color:#9F5EAB;">MODEL</div>
            <div style="color:#95BD56;">VIEW</div>
            <div style="color:#A35540;">BROWSER</div>
        </div>
        <div class="leftish">FRONTEND</div>
    </div>
    <div class="grey small left">SHIFT + CLICK to step through interactions</div>
</section>

CSS

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

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

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

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

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

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

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

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

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

}


section.companies .small {
  display: none;
}

.centerimg
{
  left:35%;
}

.middleimg {
  top: 40%;
}

.topimg {
  top: 0%;
}

.bottomimg {
  bottom: 40%;
}


.absolute {
  position: absolute;
}

.rightimg {
right:0%;
}

.leftimg {
left: 0%;
}

.grey {
  color: #6AA93F;
}

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

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

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

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

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

JavaScript

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',...