D3 Examples - 3. scaleBand barChart

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
​
<svg class="chart"></svg>
​
<style>
.chart rect {
  fill: steelblue;
}
​
/* text-anchor: start/middle/end; */
  
.chart text {
  fill: cyan;
  font: 10px sans-serif;
  text-anchor: middle;
}
</style>
​
​
<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
​
​
​
​
​
​
​
<script>
​
  
var width = 960,
    height = 500;
 
var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", height);
​
    
var yScale = d3.scaleLinear()
    .range([height, 0]);
​
​
// ---- map ordinal data with px on x-axis -------------------
//   1. assign xScale a scaleBand func
//   2. set px-range
//   3. set inner and outer padding input value
//   4. step = bandwidth+paddingInner width
//   5. round all the output values 
var xScale = d3.scaleBand().range([0, width]).padding(0.2).round(true); 
​
console.log("default domain-range: ", xScale.domain());
console.log("custom range-range: ", xScale.range()); 
console.log("custom innerPadding: ", xScale.paddingInner());
console.log("custom outerPadding: ", xScale.paddingOuter()); 
console.log("Check step = bandwidth+paddingInner: ", xScale.step());  
console.log("Check bandWidth: ", xScale.bandwidth());  
​
  
  
function type(d) {
  d.value = Math.round(+d.value*1000)/1000; // coerce to number
  return d;
}  
  
/* ---- step 5. load data file into script ---------------------------------------
1. method 1: d3.tsv("data.tsv", type, function(error, data){
                                    ...
                                    ...
                                    ...         
                    });
​
2. method 2: d3.tsv("data.tsv")
                  .row(type)
                  .get(function(error, data){});
​
--------------------------------------------------------------------  */
​
d3.tsv("data.tsv", type, function(error, data) {
​
  
  
  
// set ordinal data's range: array of all data elements
  xScale.domain(data.map(function(d) { return d.name; }));
​
  
  yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
​
  
  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d) { return "translate(" + xScale(d.name) + ",0)"; });
​
​
  
  bar.append("rect")
      .attr("y", function(d) { return yScale(d.value); }) 
      .attr("height", function(d) { return height - yScale(d.value); }) 
​
      .attr("width", xScale.bandwidth()); 
​
  
  
  bar.append("text")
//   each text's x coord inherit from each g's transform-translate, after translate, each rect's topLeft corner its origin as (0, 0)
      .attr("x", xScale.bandwidth() / 2)
      .attr("y", function(d) { return yScale(d.value) - 10; })
      .attr("dy", "0.5em")// it seems change y position
      .text(function(d) { return d.value; });
});
​
​
​
</script>
​
    