D3 bar by date

by Jim G

HTML

<div id="graph"></div>

CSS

#graph {
    font-size: 13px;
}

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

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

// Chart dimensions
var main_margin = {top: 20, right: 80, bottom: 100, left: 40},
    mini_margin = {top: 585, right: 80, bottom: 20, left: 40},
    main_width  = 1300 - main_margin.left - main_margin.right,
    main_height = 650 - main_margin.top - main_margin.bottom,
    mini_height = 650 - mini_margin.top - mini_margin.bottom;;

// Define some offsets
var axis_offset        = 275,
    legend_offset      = 195,
    legend_text_offset = {height: 518, width: 195},
    legend_rect_offset = {height: 525, width: 235},
    legend_interval    = 40;

// The label for the Y axis
var yLabel = "Duration";

// The date format
var dateFormat = d3.time.format("%b %d"); 

// Define main svg element in #graph
var svg = d3.select("#graph").append("svg")
    .attr("width", main_width + main_margin.left + main_margin.right)
    .attr("height", main_height + main_margin.top + main_margin.bottom);

// Add the clip path
/*svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", main_width - axis_offset)
    .attr("height", main_height);*/

var main = svg.append("g")
    .attr("transform", "translate(" + main_margin.left + "," + main_margin.top + ")");

var mini = svg.append("g")
    .attr("transform", "translate(" + mini_margin.left + "," + mini_margin.top + ")");

var colors = d3.scale.ordinal().range(["#5D5CD6","#FF7236","#5FD664","#D64041","#C53AD6"]);
var parseDate = d3.time.format("%Y-%m-%d");

var main_y  = d3.scale.linear().range([main_height, 0] );
var mini_y  = d3.scale.linear().range([mini_height, 0] );

var main_z = d3.scale.ordinal();
var mini_z = d3.scale.ordinal();

var main_yAxis = d3.svg.axis()
    .scale(main_y)
    .orient("left");

var len = 0;

data = getData();

data.result.forEach(function(d) {
    d.portfolio = d._id.portfolio
    d.date = new Date(d._id.year, d._id.month-1, d._id.day);
    len++;
});

var nestByDate = d3.nest()
                .key(function(d) { return d.date; })
               ...