Timeseries bar chart

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

CSS

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.title {
  font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

JavaScript

var data = [{"date":"2013-01","value":"53"},{"date":"2013-02","value":"165"},{"date":"2013-03","value":"269"},{"date":"2013-04","value":"344"},{"date":"2013-05","value":"376"},{"date":"2013-06","value":"410"},{"date":"2013-07","value":"421"},{"date":"2013-08","value":"405"},{"date":"2013-09","value":"376"},{"date":"2013-10","value":"359"},{"date":"2013-11","value":"392"},{"date":"2013-12","value":"433"},{"date":"2014-01","value":"455"},{"date":"2014-02","value":"478"}];

// Parse the date / time
var	parseDate = d3.time.format("%Y-%m").parse;

// Set default width and height, calculate ratio
var default_width = 960;
var default_height = 500;
var default_ratio = default_width / default_height;

// Current (non-responsive) width and height are calcuated from the default, minus the margins
var margin = {top: 80, right: 50, bottom: 80, left: 50},
    width = default_width - margin.left - margin.right,
    height = default_height - margin.top - margin.bottom;

// parse data just once
data.forEach(function(d) {
  d.date = parseDate(d.date);
  d.value = +d.value;
});
    
// Determine current size, which determines vars
function set_vars() {
  //alert('setting vars')
  current_width = window.innerWidth;
  current_height = window.innerHeight;

  current_ratio = current_width / current_height;

  // Check if height is limiting factor
  if ( current_ratio > default_ratio ){
    h = current_height;
    w = h * default_ratio;
  // Else width is limiting
  } else {
    w = current_width;
    h = w / default_ratio;
  }

  // Set new width and height based on graph dimensions
  width = w - margin.left - margin.right;
  height = h - margin.top - margin.bottom;

}

function drawGraphic() {

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%Y-%m"));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

var...