title: D3 JS Bar Graph with scaleTime
body: <p>I am trying to draw a bar graph using d3.js with <code>d3.scaleTime()</code> scale.
  I tried searching but didn't get any better sample in <code>d3 v4</code>. So decided to build one but I think there's some problem with the <code>domain</code> I am specifying for <code>monthScale</code> which is giving some strange plotting for bars. Any kind of help would be appreciated.
  Also I am trying to group x-Axis by months at this point(it can be dynamic depending on size of data; group by weeks/days/years).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var temperatures = [{
      temp: 80,
      onDate: '2016-01-01T16:00:49Z'
    },
    {
      temp: 38,
      onDate: '2016-02-01T16:00:49Z'
    },
    {
      temp: 47,
      onDate: '2016-05-01T16:00:49Z'
    },
    {
      temp: 59,
      onDate: '2017-01-01T16:00:49Z'
    },
  ];
  
  var months = temperatures.map(function(t) {
    return new Date(t.onDate);
  });
  var maxDate = Math.max(...months);
  var minDate = Math.min(...months);
  
  var margin = {
    top: 5,
    right: 5,
    bottom: 50,
    left: 50
  };
  
  var fullWidth = 700;
  var fullHeight = 200;
  
  var width = fullWidth - margin.left - margin.right;
  var height = fullHeight - margin.bottom - margin.top;
  
  var svg = d3.select('.chart')
    .append('svg')
    .attr('width', fullWidth)
    .attr('height', fullHeight)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
  
  // Vertical bars
  var monthScale = d3.scaleTime()
    .domain([minDate, maxDate])
    .rangeRound([0, width]);
  
  var tempScale = d3.scaleLinear()
    .domain([0, d3.max(temperatures, function(d) {
      return d.temp;
    })])
    .range([height, 0])
    .nice();
  
  var barHolder = svg.append('g')
    .classed('bar-holder', true);
  
  var bars = barHolder.selectAll('rect.bar')
    .data(temperatures)
    .enter()
    .append('rect')
    .classed('bar', true)
    .attr('x', function(d, i) {
      ndt = new Date(d.onDate)
      return monthScale(ndt.getTime());
    })
    .attr('width', width / months.length)
    .attr('y', function(d) {
      return tempScale(d.temp);
    })
    .attr('height', function(d) {
      return height - tempScale(d.temp);
    });
  // Vertical bars end
  
  // scales
  var xAxis = d3.axisBottom(monthScale)
    .scale(monthScale)
    .ticks(d3.timeWeeks(minDate, maxDate).length)
    .tickSizeOuter(1);
  var yAxis = d3.axisLeft(tempScale)
    .tickSizeOuter(1);
  
  svg.append('g')
    .classed('x axis', true)
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis);
  
  var yAxisElement = svg.append('g')
    .classed('y axis', true)
    .call(yAxis);
  yAxisElement.append('text')
    .attr('transform', 'rotate(-90) translate(-' + height / 2 + ', 0)')
    .style('text-ancher', 'middle')
    .attr('dy', '-2.5em')
    .text('Farenheit');</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.chart {
    background-color: white;
  }
  
  .chart rect {
    stroke: white;
    fill: steelblue;
  }
  
  .axis {
    shape-rendering: crispEdges;
  }
  
  .x.axis line {
    stroke: black;
  }
  
  .y.axis line {
    stroke: black;
  }
  
  .axis text {
    font-size: 12px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-lg-12 chart"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>