7. date-x-axis histogram

Source: City of Chicago.

This histogram shows the number of homicides in Chicago for each week in 2015.

forked from mbostock's block: Histogram II

forked from EmbraceLife's block: 7. date-x-axis histogram

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>

<style>  
.bar rect  {
  fill: steelblue;
}

.bar text {
  fill: #fff;
  font: 10px sans-serif;
}

</style>

<body>

/* ---- set time format   ------------------------
1. time format function: --
		code: d3.timeParse()
    
2. time input format in file: --  "%Y-%m-%d"
    
-----------------------------------------------------------------------------*/ 
  
var parseDate = d3.timeParse("%Y-%m-%d"),
    formatCount = d3.format(",.0f");

/* Set Margins & Orientation */
var margin = {top: 10, right: 30, bottom: 30, left: 30},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").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 + ")");

// ---- date data scale-map to px -------------------------
//   1. assign xScale a scaleTime func
var xScale = d3.scaleTime()
// 	 2. set input or date range
    .domain([new Date(2018, 0, 1), new Date(2019, 0, 1)])
// 	 3. set output or px range 
    .rangeRound([0, width]);

var yScale = d3.scaleLinear()
    .range([height, 0]);

var histogram = d3.histogram()

// histogram func only use date value from each row of dataset 
// .value() is like a row function to d3.histogram() 
// as .row() to d3.tsv()
    .value(function(d) { return d.date; })
    .domain(xScale.domain())
// group data by weeks
    .thresholds(xScale.ticks(d3.timeMonth));

svg.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale));
  
// apply date format func to date value of each row of data  
function type(d) {
  d.date = parseDate(d.date);
  return d;
}  
  
  
d3.csv("data.csv", type, function(error, data) {
  
  if (error) throw error;

// ---- apply data to histogram func -------------
// meaning: regroup all data into different bins 
  var bins = histogram(data);

yScale.domain([0, d3.max(bins, function(d) { return d.length; })]);

var bar = svg.selectAll(".bar")
      .data(bins)
	    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(" + xScale(d.x0) + "," + yScale(d.length) + ")"; });

var rects =  bar.append("rect")
      .attr("x", 1) 
      .attr("width", function(d) { return xScale(d.x1) - xScale(d.x0) - 1; })
      .attr("height", function(d) { return height - yScale(d.length); });

bar.append("text")
      .attr("dy", ".75em")// trial and error
      .attr("y", 6) // text backdown 6 px
      .attr("x", function(d) { return (xScale(d.x1) - xScale(d.x0)) / 2; }) 
      .attr("text-anchor", "middle")
      .text(function(d) { return formatCount(d.length); });
});

</script>

https://d3js.org/d3.v4.min.js