Reputation: 502

Horizontal Bar chart Bar labels in D3

I'm trying to show bar labels for a horizontal bar chart but they don't show up on the edge of the bar and instead show up on the top of the bar. I think there is a problem with the "//horizontal bar labels" part of my code. The code is below and I also included pictures of chart I made and the chart I want it to look like:

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Housing Tenure of DC Residents</title>

 <style type="text/css">

  .axis text{
  font-family: Arial;
  font-size: 13px;
  color: #333333;
  text-anchor: end;
   }

  .axis path {
  fill:none;
  stroke:#333333 ;
  stroke-width: 1.5px;
  shape-rendering: crispEdges
 font-family: Arial;
  }


    .bar{
    stroke: none;
    fill: #037FAA;

   }
     .axis .label{
    font-family:  Arial;
    font-size:13px;
    color: #333333;
    text-anchor: middle;

    }
     .textlabel{
    font-family:  Arial;
    font-size:13px;
    color: #333333;
    text-anchor: left;
   }

  }

   </style>
    </head>
   <body>

   <script type="text/javascript" src="d3/d3.js"></script>
   <script>

    var outerWidth = 475;
    var outerHeight = 350;
    var margin = { left: 75, top: 20, right: 0, bottom: 60 };
    var padding = 100;



  var barPadding = 0.2;
  var barPaddingOuter = 0.1;
  var xColumn = "Percentage";
  var yColumn = "LabelD3";

  var xAxisLabelOffset = 75;


  var innerWidth  = outerWidth  - margin.left - margin.right;
  var innerHeight = outerHeight - margin.top  - margin.bottom;


  var svg = d3.select("body").append("svg")
    .attr("width",  outerWidth)
    .attr("height", outerHeight)
    .attr("viewBox", "0 0 " + outerWidth + " " + outerHeight); 


  var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


  var xAxisG = g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + innerHeight + ")")



  var yAxisG = g.append("g")
    .attr("class", "y axis");


  var xScale = d3.scale.linear()
  .range([0, innerWidth - margin.right - margin.left], .1);


  var yScale = d3.scale.ordinal()
  .rangeRoundBands([innerHeight , 0], barPadding, barPaddingOuter);


  var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
    .ticks(7)
    .tickFormat(function(d) {return d + "%"});


  var yAxis = d3.svg.axis().scale(yScale).orient("left")
    .outerTickSize(0);


    function render(data){
    xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
    yScale.domain(       data.map( function (d){ return d[yColumn]; }));
    xAxisG.call(xAxis);
    yAxisG.call(yAxis);


    var bars = g.selectAll("rect").data(data);
    bars.enter().append("rect")
      .attr("height", yScale.rangeBand());
    bars
      .attr("x", 0)
      .attr("class", "bar")
      .attr("y",     function (d){ return yScale(d[yColumn]); })
      .attr("width", function (d){ return xScale(d[xColumn]); });


  // horizontal bar labels
   svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .selectAll(".textlabel")
   .data(data)
   .enter()
   .append("text")
 .attr("class", "textlabel")
 .style("font-family", "Arial")
.attr("x", function(d){ return xScale(d["Percentage"]) + (xScale.range()/2);  })
 .attr("y", function(d){ return yScale(d["LabelD3"]) - 3; })
.text(function(d){ return (d["Percentage"] + "%"); }); 


 // X-axis labels
svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("color", "#333333")
.attr("transform", "translate("+ (outerWidth/2) + "," +(outerHeight-(padding/4)) + ")")
.text("% of Households")
.style("font-family", "Arial"); 

 //title for the chart 

svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("color", "#333333")
.attr("transform", "translate("+ (outerWidth/3.78) + "," +(outerHeight/30) + ")")
.text("Housing Tenure of DC Residents")
.style("font-family", "Arial");

 //source

svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "13px")
.style("color", "#333333")
.attr("transform", "translate("+ (outerWidth/3.2) + "," +(outerHeight/1) + ")")
.text("Source: US Census ACS 5-year 2010-2014")
.style("font-family", "Arial")


 svg.append("text")
.attr("text-anchor", "left")
.style("font-size", "10x")
.style("color", "#333333")
.attr("transform", "translate("+ (outerWidth/28) + "," +(outerHeight/12) + ")")
.text("2014")
.style("font-family", "Arial")



    bars.exit().remove();
  }
  function type(d){
    d.population = +d.population;
    return d;
  }
  d3.csv("Housing.csv", type, render);
   </script>
  </body>
 </html>

Percentage,LabelD3
41.6,Own home
58.6,Rent home

Upvotes: 1

Answers (1)

Cyril Cherian

Reputation: 32327

Instead of doing this for the horizontal bar labels

.attr("x", function(d){ return xScale(d["Percentage"]) + (xScale.range()/2);  })

do this

.attr("x", function(d){ return xScale(parseFloat(d["Percentage"])) ;  })
 .attr("y", function(d){ return yScale(d["LabelD3"]) + yScale.rangeBand()/2; })

working code here

Upvotes: 1

Horizontal Bar chart Bar labels in D3

Answers (1)

Related Questions