Text on horizontal bar chart - d3

<!DOCTYPE html>
<html>
<head>

<title>Text on horizontal bar chart - d3</title>

<style>

.shared, .bar, .label {
  font-size: 8pt;
  font-weight: bold;
  font-family: Arial, sans-serif;
}
.malebar {
  fill: steelblue;
}

#vis {
    margin-left: 350px;
}

</style>

</head>
<body>
<input id="generate" value="Randomise data" type="button"></input>
<div id="vis">
</div>

var data = [
  {"sharedLabel": "Category 1", "barData1": 43041, "barData2": 40852},
  {"sharedLabel": "Category 2", "barData1": 38867, "barData2": 36296},
  {"sharedLabel": "Category 3", "barData1": 41748, "barData2": 40757},
  {"sharedLabel": "Category 4", "barData1": 24831, "barData2": 23624},
  {"sharedLabel": "Category 5", "barData1": 15764, "barData2": 15299},
  {"sharedLabel": "Category 6", "barData1": 17006, "barData2": 16071},
  {"sharedLabel": "Category 7", "barData1": 24309, "barData2": 23235},
  {"sharedLabel": "Category 8", "barData1": 46756, "barData2": 46065},
  {"sharedLabel": "Category 9", "barData1": 41923, "barData2": 41704},
  {"sharedLabel": "Category 10", "barData1": 42565, "barData2": 42159},
  {"sharedLabel": "Category 11", "barData1": 44316, "barData2": 45468},
  {"sharedLabel": "Category 12", "barData1": 42975, "barData2": 44223},
  {"sharedLabel": "Category 13", "barData1": 36755, "barData2": 39452},
  {"sharedLabel": "Category 14", "barData1": 31578, "barData2": 34063},
  {"sharedLabel": "Category 15", "barData1": 10328, "barData2": 11799},
  {"sharedLabel": "Category 16", "barData1": 13917, "barData2": 14949},
  {"sharedLabel": "Category 17", "barData1": 7920, "barData2": 8589},
  {"sharedLabel": "Category 18", "barData1": 9003, "barData2": 10397},
  {"sharedLabel": "Category 19", "barData1": 14322, "barData2": 16832},
  {"sharedLabel": "Category 20", "barData1": 12369, "barData2": 15836},
  {"sharedLabel": "Category 21", "barData1": 8710, "barData2": 12377},
  {"sharedLabel": "Category 22", "barData1": 5853, "barData2": 12213}
];

/* edit these settings freely */  
var w = 600,
    h = 400,
    topMargin = 15,
    labelSpace = 40,
    innerMargin = w/2+labelSpace,
    outerMargin = 15,
    gap = 2,
    dataRange = d3.max(data.map(function(d) { return Math.max(d.barData1, d.barData2) }));
    leftLabel = "Left label",
    rightLabel = "Right label";

/* edit with care */
var chartWidth = w - innerMargin - outerMargin,
    barWidth = h / data.length,
    yScale = d3.scale.linear().domain([0, data.length]).range([0, h-topMargin]),
    total = d3.scale.linear().domain([0, dataRange]).range([0, chartWidth - labelSpace]),
    commas = d3.format(",.0f");

//console.log(data.length);

/* main panel */
var vis = d3.select("#vis").append("svg")
    .attr("width", w)
    .attr("height", h);

var bar = vis.selectAll("g.bar")
    .data(data)
  .enter().append("g")
    .attr("class", "bar")
    .attr("transform", function(d, i) {
      return "translate(0," + (yScale(i) + topMargin) + ")";
    });

bar.append("text")
    .attr("class", "below")
    .attr("x", 12)
    .attr("dy", "1.2em")
    .attr("text-anchor", "left")
    .text(function(d) { return d.sharedLabel; })
    .style("fill", "#000000");

bar.append("rect")
    .attr("class", "malebar")
    .attr("height", barWidth-gap)
    .attr("x", 10);

bar.append("svg")
    .attr({
        height: barWidth-gap
    })
    .append("text")
    .attr("class", "up")
    .attr("x", 12)
    .attr("dy", "1.2em")
    .attr("text-anchor", "left")
    .text(function(d) { return d.sharedLabel; })
    .style("fill", "#ffffff");

d3.select("#generate").on("click", function() {
  for (var i=0; i<data.length; i++) {
    data[i].barData1 = Math.random() * dataRange;
    data[i].barData2 = Math.random() * dataRange;
  }
  refresh(data);
});

refresh(data);

function refresh(data) {
    
  var bars = d3.selectAll("g.bar")
      .data(data);
    
  bars.selectAll("rect.malebar")
    .transition()
      .attr("width", function(d) { return total(d.barData1); });
    
   bars.selectAll("svg")
      .attr("width", function(d) { return total(d.barData1) + 10; });

}

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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