index.html

## index.html
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js"></script>
    <style type="text/css">
      body {
        margin: 0;
      }
      #main {
        background: #FFFFFF;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      path {
        fill: none;
      }
      .tick text {
        font-family: sans-serif;
        fill: gray;
      }
      .thisIsABar rect:hover {
        fill: #00BEED;
      }
    </style>
    <title>The Tiniest Bar Chart</title>
  </head>
  <body>
    <div id="main"></div>
    <script type="text/javascript">
      // some variables
      var w = 600, h = 300;
      var margin = {top: 20, bottom: 50, left: 50, right: 10};
      var textShift = 8;

      // create an SVG
      // D3's returns the SVG as a selection (i.e., a shortcut to d3.select('svg'))
      var svg = d3.select('#main').append('svg')
        .attr({
          width: w + margin.left + margin.right,
          height: h + margin.top + margin.bottom
        });

      // add a background rectangle to give us a visible canvas to work with
      svg.append('rect')
        .attr({
          id: 'theCanvas',
          width: w + margin.left + margin.right,
          height: h + margin.top + margin.bottom,
          x: 0,
          y: 0,
          fill: 'white'
        });

      // now add a group with a translation per the margin convention
      svg = svg.append('g')
        .attr({
          id: 'withinTheMargins',
          transform: 'translate(' + margin.left + ',' + margin.top + ')'
        });

      // show where the margins are with another rect
      svg.append('rect')
        .attr({
          id: 'theMargins',
          width: w,
          height: h,
          x: 0,
          y: 0,
          fill: 'none',
          stroke: 'gray'
        });

      var data = [{
        framework: 'Ember',
        value: 2
      }, {
        framework: 'Backbone',
        value: 4
      }, {
        framework: 'Angular',
        value: 6
      }, {
        framework: 'React',
        value: 8
      }, {
        framework: 'Pure JavaScript',
        value: 10
      }];

      var xScale = d3.scale.ordinal()
        .domain(_.pluck(data, 'framework'))
        .rangeBands([0, w], 0.1, 0.2);

      var yScale = d3.scale.linear()
        .domain([0, d3.max(_.pluck(data, 'value')) *1.2])
        .range([h, 0]);

      // create a group of each datum and save the enter selection
      var bars = svg.selectAll('g.thisIsABar')
        .data(data)
        .enter();

      // add the groups
      var datumGroups = bars.append('g')
        .attr({
          id: function(d) { return d.framework; },
          'class': 'thisIsABar'
        })
        .on('mouseover', function(d) {
          d3.select(this).transition()
            .ease('bounce')
            .attr({
              transform: 'translate(0,-10)'
            });
        })
        .on('mouseout', function(d) {
          d3.select(this).transition()
            .attr({
              transform: 'translate(0,0)'
            });
        });

      datumGroups.each(function(d) {
        var thisBar = d3.select(this);

        // draw bars
        thisBar.append('rect')
          .attr({
            x: function(d) { return xScale(d.framework); },
            y: function(d) { return yScale(d.value); },
            width: xScale.rangeBand(),
            height: function(d) { return h - yScale(d.value); },
            fill: '#20479D',
            'class': 'bar'
          });

        // annotate each bar with its value
        thisBar.append('text')
          .attr({
            x: function(d) { return xScale(d.framework) + textShift; },
            y: function(d) { return yScale(d.value) + textShift * 2.5; },
            'font-family': 'sans-serif',
            'font-weight': 'bold',
            fill: 'white'
          })
          .text(function(d) { return d.value; });
      });

      // x-axis
      var xAxis = d3.svg.axis().scale(xScale).orient('bottom');

      svg.append('g')
        .attr({
          id: 'xAxis',
          transform: 'translate(0,' + h + ')'
        })
        .call(xAxis);

      // y-axis
      var yAxis = d3.svg.axis().scale(yScale).ticks(6).orient('left');

      svg.append('g')
        .attr({
          id: 'yAxis'
        })
        .call(yAxis);

    </script>
  </body>
</html>


## thumbnail.png

      
          Raw
        
        
              thumbnail.png