score:2

Accepted answer

You just need to add both bars:

g.selectAll(".bar1")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar1")
      .attr("x", 0)
      .attr("y", function(d) { return y(d.letter) + 10; })
      .attr("width", function(d) { return x(d.col1); })
      .attr("height", y.bandwidth() - 20);

 g.selectAll(".bar2")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar2")
      .attr("x", 0)
      .attr("y", function(d) { return y(d.letter); })
      .attr("width", function(d) { return x(d.col2); })
      .attr("height", y.bandwidth());

And the relevant CSS:

.bar1 {
    fill: steelblue;
    opacity: 0.5;
  }

  .bar2 {
    fill: gray;
    opacity: 0.5;
  }

Updated plunker.


More Query from same tag