D3 Horizontal Bar Chart

In the horizontal bar, when creating rectangle band for each domain input, the x value for all rectangle is zero. As all the rectangle starting at same x that is zero with varying value in the y-axis.

When compare rectangle value between horizontal and vertical we can see in code below

Note: While applying attribute value for width and y-axis, we have to wrap these value with scale value of x and y.

Important function to note

    1. Scale value for x and y
      var x = d3.scaleLinear().rangeRound([0, width]);
      var y = d3.scaleBand().rangeRound([height, 0]).padding(0.2);
    2. Axix value for x and y
      svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
      
      svg.append("g")
      .call(d3.axisLeft(y));

Add the following code in horizontal-bar.html

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.bar { fill: steelblue; }

</style>
<body>
	
<!-- load the d3.js library -->    	
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
    //set up svg using margin conventions - we'll need plenty of room on the left for labels

var margin = {
    top: 15,
    right: 25,
    bottom: 30,
    left: 80
};

var width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scaleLinear().rangeRound([0, width]);
var y = d3.scaleBand().rangeRound([height, 0]).padding(0.2);
    
    //Append the svg to body  
   
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 + ")");
 
//Get or load the data 
d3.csv('sales.csv', function(err, data){
        if(err) throw err;

        //parse the data 

        data.forEach(function(d){
            d.sale = +d.sale;
        });
        
        x.domain([0, d3.max(data, function(d) { return d.sales; })]);
        y.domain(data.map(function(d) { return d.name; }));
        
        //Create or append rectangel for graph

      svg.selectAll(".bar")
          .data(data)
        .enter()
          .append("rect")
          .attr("class", "bar")
          .attr("x", 0)
          .attr("width", function(d) { return x(d.sales);})
          .attr("y", function(d) { return y(d.name); })
          .attr("height", y.bandwidth());

        
        // Add the x Axis

         svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

         svg.append("g")
            .call(d3.axisLeft(y));
    });
        
    </script>
</body>
</html>

 

Add the following code in sales.csv

name,sales
Sharma,33
Raj,12
Ajay,41
Arjun,16
Shihab,59
Royan,38
Max,21
Tenzin,25
Kumar,30
Lisa,47
Tom,5
Jerry,20
John,13
Tamo,29