jebeck · August 29, 2015 14:23
diff --git a/index.html b/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>
  
diff --git a/thumbnail.png b/thumbnail.png
	<!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>