1. horizontal barChart

<!DOCTYPE html>

<style>
  
.chart rect {
  fill: steelblue;
}
  
.chart text {
  fill: white;   
  font: 10px sans-serif;
  text-anchor: end;
}

</style>

//---- step 3: select svg and set width ---------------
// 1. set variables "width" and "barHeight"
var width = 420,
    barHeight = 20;
  
// 2. select SVG by className  
var chart = d3.select(".chart")
// 		2.1 set width attr
    .attr("width", width);
// check: Elements view

//---- step 4: map data with px on x-axis ----------
// 1. assign "xScale" a scaleLinear func  
var xScale = d3.scaleLinear()
// 2. set px-range (data-range as default)
    .range([0, width]);
// 3. Console view: check data-range, px-range, map(0.5) to px
console.log(" data-range: ", xScale.domain(), "\n px-range: ", xScale.range(), "\n test map data(0.5) to px: ", xScale(0.5));

// ---- step 5.0 create row function ---------------
//   1. for each d object 
function type(d) {
//   2. assign numeric value back to d.value
  d.value = +d.value; 
  return d;
}

// ---- step 5: load tsv data  --------------
//   1. load tsv file
//   2. row(func) to process each row of data
//   3. get(func) let us do things with data 
  
d3.tsv("data.tsv").row(type).get(function(error, data){

// 	 4. Console view: 
   
console.log(" processed data: ", data);
console.log(" length of data: ", data.length);
console.log(" column names of data: ", data.columns);
console.log(" check data.name: ", data.map(function(d){return d.name;}));
console.log(" check data.value:  ", data.map(function(d){return d.value;}));

// ---- step 6: set data range for xScale func -----------------
//   1. set data-range for xScale func
//   2. calc max among all rows of data.value 
  xScale.domain([0, d3.max(data, function(d) { return d.value; })]);
  
// ---- step 7: set height for SVG -----------------
//   1. select SVG using svg variable
//   2. calc SVG height using barHeight and data.length
  chart.attr("height", barHeight * data.length);
  
// ---- step 8: upon SVG, bind data with g placeholders ---------
//   0. upon SVG
//   1. select all existing g placeholders
   var bar = chart.selectAll("g")
//    							2. bind with data 
 							     .data(data)
//    					 3. select all entering NodeList elements 	
						     .enter()
//    						4. create a g placeholder upon each NodeList elements 
   								.append("g") 
//    						 5. transform-translate each g at diff position by data row index
                   .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; }); 
//   6. assign all g placeholders to var "bar"
 
// Elements View: see all g placeholders
  
  
  
// ---- step 9: upon each g, create a rect  ------------
//   1. create a rect upon each g placeholder
var rects = bar.append("rect") 
//   2. set rect's width using each row's data.value
      .attr("width", function(d) { return xScale(d.value); })
//   3. set rect's height with 1px space
			.attr("height", barHeight - 1);

// Elements View: see all rects 
  
   
// ---- step 10: upon each g, create a text 
//   0. upon each and all g, inherit g's x,y coord
//   1. create a text 
var texts =  bar.append("text") 
// 	 2. set text x coord using each row's value - 3
      .attr("x", function(d) { return xScale(d.value) - 3; })
// 	 3. set text y coord 
			.attr("y", barHeight / 2)
// 	 4. trial and error "dy"
      .attr("dy", ".35em")
//   5. set label content 
      .text(function(d) { return d.value; });
  
  // Elements View: see all rects 
})

</script>

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