function(data) {
  var margin     = { top: 50, right: 20, bottom: 30, left: 40 },
      width      = 400,
      height     = 400,
      svgWidth   = width + margin.right + margin.left,
      svgHeight  = height + margin.top + margin.bottom;

  var svg = d3.select("body").append("svg")
             .attr('viewBox', "0 -10 " +svgWidth+ " " +svgHeight+ "")
             .attr("width", svgWidth)
             .attr("height", svgHeight)
             .style("font-family", "Arial")
             .style("font-size", "14px")
             .style("fill", "none")
             .style("background-color", "#ffffff")
            .append('g')
              .attr('transform', 'translate(' +margin.left+ ',' +margin.top+ ')')
              .style("fill", "none");

  // Axis Scales
  var x = d3.scale
          .ordinal()
          .domain(data.map(function(d) { return d.name; }))
          .rangeRoundBands([0, width], 0.2);

  var y = d3.scale
          .linear()
          .domain([0, d3.max(data, function(d) { return d.value; })])
          .range([height, 0])
          .nice();

  // Axes
  var xAxis = d3.svg
              .axis()
              .scale(x)
              .orient('bottom')
              .ticks(data.length);

  var yAxis = d3.svg
              .axis()
              .scale(y)
              .orient('left')
              .tickSize(width);

  svg.selectAll('.bar')
      .data(data)
    .enter().append('rect')
      .attr('class',    'bar')
      .attr('y',        function(d) { return y(d.value); })
      .attr('x',        function(d) { return x(d.name); })
      .attr('width',    x.rangeBand())
      .attr('height',   function(d) { return height - y(d.value); })
      .style('fill',    '#428bca')
      .style('opacity',  '0.3');

  svg.selectAll('label')
      .style('fill-opacity', '0.3')

  var xAxisElement = svg.append('g')
                     .attr('class',      'x axis')
                     .attr('transform',  "translate(0," +height+ ")")
                     .call(xAxis);

  var yAxisElement = svg.append('g')
                     .attr('class', 'y axis')
                     .attr("transform", "translate(" +width+ ",0)")
                     .call(yAxis);

  xAxisElement.selectAll('line')
    .style('fill', 'none')
    .style('stroke', 'black')
    .style('stroke-width', '1px')
    .style('stroke-opacity', 0.1)
    .style('shape-rendering', 'geometricPrecision');

  xAxisElement.selectAll('text')
    .style('fill', '#333333');

  yAxisElement.selectAll('line')
    .style('fill', 'none')
    .style('stroke', 'black')
    .style('stroke-width', '1px')
    .style('stroke-opacity', 0.1)
    .style('shape-rendering', 'geometricPrecision');

  yAxisElement.selectAll('text')
    .style('fill', '#333333');
}