bar chart without groups

<!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;
      }
    </style>
    <title>A Tiny Bar Chart without Groups</title>
  </head>
  <body>
    <div id="main"></div>
    <script type="text/javascript">
      // some variables
      var w = 600, h = 300;
      var margin = {top: 10, 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({
          width: w + margin.left + margin.right,
          height: h + margin.top + margin.bottom,
          x: 0,
          y: 0,
          fill: 'white'
        });

// show where the margins are with another rect
      svg.append('rect')
        .attr({
          width: w,
          height: h,
          x: margin.left,
          y: margin.top,
          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([margin.left, margin.left + w], 0.1, 0.2);

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

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

// annotate each bar with its value
      svg.selectAll('text')
        .data(data)
        .enter()
        .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; });

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js