Bar Charts on date axis

response to stack overflow question: http://stackoverflow.com/questions/10565952/d3-js-how-to-change-x-position-of-rect-on-time-scale-axis/10569264#10569264

by jsl6906

HTML

<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<div id="chart"></div>

CSS

.axis text {
  font: 10px sans-serif;
}
  
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

JavaScript

var margin = {top: 10, right: 10, bottom: 30, left: 30},
    width = 400 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;
var data = [
    {"DateParts":[2012,0,1],"value":1 },
    {"DateParts":[2012,0,5],"value":4 },
    {"DateParts":[2012,0,6],"value":10},
    {"DateParts":[2012,0,10],"value":22}
  ];
var DateValues = [];
var Values = [];
for (var i=0; i<data.length; i++) {
    data[i].dateVal = new Date(data[i].DateParts[0],data[i].DateParts[1],data[i].DateParts[2]);
    DateValues[i] = new Date(data[i].DateParts[0],data[i].DateParts[1],data[i].DateParts[2]);
    Values.push(data[i].value);
}
console.log(data);
var minDate = d3.min(DateValues),
    maxDate = d3.max(DateValues),
    minValue = d3.min(Values),
    maxValue = d3.max(Values),
    barwidth = 20;
minDate.setDate(minDate.getDate()-1);
maxDate.setDate(maxDate.getDate()+1);

var x = d3.time.scale()
    .domain([minDate, maxDate])
    .range([0, width]);

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

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

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

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr("class","bar")
    .attr("x", function(d) {return x(d.dateVal)-barwidth/2;})
    .attr("y", function(d) {return y(d.value);})
    .attr("height", function(d) {return height-y(d.value);})
    .attr("width", barwidth);

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

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);