D3 Examples - bP Example - Double Vertical bP with labels

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text{
    font-size:12px;
}
.mainBars rect{
  shape-rendering: auto;
  fill-opacity: 0;
  stroke-width: 0.5px;
  stroke: rgb(0, 0, 0);
  stroke-opacity: 0;
}
.subBars{
    shape-rendering:crispEdges;
}
.edges{
    stroke:none;
    fill-opacity:0.5;
}
.header{
    text-anchor:middle;
    font-size:16px;
}
line{
    stroke:grey;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://vizjs.org/viz.v1.1.0.min.js"></script>
<script>
​
var color ={Elite:"#3366CC", Grand:"#DC3912",  Lite:"#FF9900", Medium:"#109618", Plus:"#990099", Small:"#0099C6"};
var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 800);
var barSize = 30;
  
svg.append("text").attr("x",250).attr("y",70)
  .attr("class","header").text("Sales Attempt");
​
svg.append("text").attr("x",750).attr("y",70)
  .attr("class","header").text("Sales");
​
var g =[svg.append("g").attr("transform","translate(150,100)")
    ,svg.append("g").attr("transform","translate(650,100)")];
​
var bp=[ viz.bP()
    .min(12)
    .pad(1)
    .height(600)
    .width(200)
    .barSize(barSize)
  ,viz.bP()
    .min(12)
    .pad(1)
    .height(600)
    .width(200)
    .barSize(barSize)
];
​
function update(data) {
  bp[0].data(data).fill(d=>color[d.primary]);
  bp[1].data(data).value(d=>d[3]).fill(d=>color[d.primary]);
  
  [0,1].forEach(function(i){
    g[i].call(bp[i])
​
    g[i].append("text").attr("x",-50).attr("y",-8).style("text-anchor","middle").text("Channel");
    g[i].append("text").attr("x", 250).attr("y",-8).style("text-anchor","middle").text("State");
​
    g[i].append("line").attr("x1",-100).attr("x2",0);
    g[i].append("line").attr("x1",200).attr("x2",300);
​
    g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",-100).attr("x2",0);
    g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",200).attr("x2",300);
​
    g[i].selectAll(".mainBars")
      .on("mouseover",mouseover)
      .on("mouseout",mouseout);
​
    g[i].selectAll(".mainBars").append("text").attr("class","label")
      .attr("x",d=>(d.part=="primary"? -30: 30))
      .attr("y",d=>+6)
      .text(d=>d.key)
      .attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
​
    g[i].selectAll(".mainBars").append("text").attr("class","perc")
      .attr("x",d=>(d.part=="primary"? -100: 80))
      .attr("y",d=>+6)
      .text(function(d){ return d3.format("0.0%")(d.percent)})
      .attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
  });  
}
  
d3.json("data.json", function(error, jsonData) {
  if (error) throw error;
    // load data
  update(jsonData);
});
​
  function mouseover(d){
    [0,1].forEach(function(i){
      bp[i].mouseover(d);
​
      g[i].selectAll(".mainBars").select(".perc")
      .text(function(d){ return d3.format("0.0%")(d.percent)});
    });
  }
  function mouseout(d){
    [0,1].forEach(function(i){
      bp[i].mouseout(d);
​
      g[i].selectAll(".mainBars").select(".perc")
      .text(function(d){ return d3.format("0.0%")(d.percent)});
    });
  }
  d3.select(self.frameElement).style("height", "800px");
</script>
</body>
</html>
    