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

Scale value for x and yvar x = d3.scaleLinear().rangeRound([0, width]); var y = d3.scaleBand().rangeRound([height, 0]).padding(0.2);
Axix value for x and ysvg.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

D3 Horizontal Bar Chart

One thought on “D3 Horizontal Bar Chart”

Rahul says:
February 23, 2018 at 8:09 am
Hi,
Thanks for posting the link. Really helped understanding what is going on.. One question, Is there a way to make the bar height fixed for vertical bar chart? Useing the bandwidth makes the bar height vary which looks really ugly when data set is small

D3 Horizontal Bar Chart

One thought on “D3 Horizontal Bar Chart”

Leave a Reply Cancel reply