3. scaleBand barChart

Built with blockbuilder.org

forked from EmbraceLife's block: 4. barChart3.b.v3

<!DOCTYPE html>
<meta charset="utf-8">

/* text-anchor: start/middle/end; */
  
.chart text {
  fill: cyan;
  font: 10px sans-serif;
  text-anchor: middle;
}
</style>

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>

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