biPartite - Horizontal Example

For More examples check VizJS

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.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;
}
</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 data=[['Afghanistan','Long',405, 0],
['Afghanistan','Short',52,0],
['Armenia','Long',165,0],
['Armenia','Short',42,0],
['Azerbaijan','Long',273,0],
['Azerbaijan','Short',29,0],
['Bahrain','Long',607,0],
['Bahrain','Short',13,0],
['Bangladesh','Long',2478,0],
['Bangladesh','Short',88,0]
['Indonesia','Long',10178,0],
['Indonesia','Short',3611,0],
	  ['Armenia1','Long',165,0],
['Armenia1','Short',42,0],
['Azerbaijan1','Long',273,0],
['Azerbaijan1','Short',29,0],
['Bahrain1','Long',607,0],
['Bahrain1','Short',13,0],
['Bangladesh1','Long',2478,0],
['Bangladesh1','Short',88,0]
['Indonesia1','Long',10178,0],
['Indonesia1','Short',3611,0],
	  ['Armenia2','Long',165,0],
['Armenia2','Short',42,0],
['Azerbaijan2','Long',273,0],
['Azerbaijan2','Short',29,0],
['Bahrain2','Long',607,0],
['Bahrain2','Short',13,0],
['Bangladesh2','Long',2478,0],
['Bangladesh2','Short',88,0]
['Indonesia2','Long',10178,0],
['Indonesia2','Short',3611,0],
];
var color = d3.scaleOrdinal(d3.schemeCategory20);

var bp=viz.bP()
		.data(data)
		.min(12)
		.pad(1)
		.height(600)
		.width(900)
		.orient("horizontal")
		.barSize(35)
		.fill(d=>color(d.primary));
			
var g = d3.select("body")
		.append("svg").attr("width", 960).attr("height", 800)
		.append("g").attr("transform","translate(30,30)")
		.call(bp);
	
g.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.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"));

// adjust height of frameElement in bl.ocks.org
d3.select(self.frameElement).style("height", "660px");
</script>
</body>
</html>

Modified http://vizjs.org/viz.v1.1.0.min.js to a secure url

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

https://vizjs.org/viz.v1.1.0.min.js