4. x-y-axis barChart

Built with blockbuilder.org

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

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

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

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

/*  within class "axis", all texts  */
.axis text {
  font: 10px sans-serif;
}

/*  within class "axis", all paths and lines  */
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

/*  within class "x.axis", all paths */
.x.axis path {
  display: none;
}

</style>

// define "margin" object
var margin = {top: 20, right: 30, bottom: 30, left: 40},
// define inner canvas "width" and "height"
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// SVG is set to be full canvas 
var chart = d3.select(".chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
// g is inner canvas
  .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
// only set transform-translate, not width and height
  
// outcome: chart now is inner canvas g
  
  
 
var yScale = d3.scaleLinear()
    .range([height, 0]);
  
    
var xScale = d3.scaleBand().rangeRound([0, width]).padding(.1).round(true);

// ---- create x-axis function with xScale
var xAxis = d3.axisBottom(xScale);
// console.log(xAxis); // just a function

var yAxis = d3.axisLeft(yScale);

function type(d) {
  d.value = Math.round(+d.value*1000)/1000; 
  return d;
}

d3.tsv("data.tsv", type, function(error, data) {
  
  
  xScale.domain(data.map(function(d) { return d.name; }));
  
  yScale.domain([0, d3.max(data, function(d) { return d.value; })]);

// ---- draw x-axis -------------------
//   1. upon inner canvas g 
//   2. create a g placeholder
//   3. add className "x axis"
//   4. transform-translate to bottom
//   5. call to draw x-axis
var xaxis = chart.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 
// length or height of x-axis is depend on xAxis -> xScale
// xScale.range is set within inner canvas width

</script>

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