block by NPashaP 7222132b5e517d4bd4404ff3cfb1ebde

biPartite - orient

Full Screen

viz.bp().orient

This method is used to set the orientation of the graph. The value can be “vertical” or “horizontal”.

The graph on the left is using the default orientation which is vertical and the right graph is using the horizontal orientation.

For other options and examples, check VizJS

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.mainBars{
  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.3;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//vizjs.org/viz.v1.1.0.min.js"></script>
<script>
var width = 960, height=700;
var data=[
['A','X', 1, 5]
,['A','Y', 3,4]
,['B','X', 5,1]
,['B','Y', 8,10]
,['C','X', 2,13]
,['C','Y', 9,7]
];

function fill(d){
  var color = {A:"#3366CC", B:"#DC3912",  C:"#FF9900"};
  return color[d.primary];
}

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

var bp1=viz.bP().data(data).fill(fill);
svg.append("g").attr("transform","translate(50,50)").call(bp1);

var bp2=viz.bP().data(data).fill(fill).orient("horizontal");
svg.append("g").attr("transform","translate(500,50)").call(bp2);

// adjust the bl.ocks frame dimension.
d3.select(self.frameElement).style("height", height+"px").style("width", width+"px");      
</script>
</body>
</html>