Old school D3 from simpler times

All examples By author By category About

NPashaP

Full window Github gist

biPartite - barSize

viz.bP().barSize

This method is used to set the size of the bar which is width (height) of the bars in the parts for vertical (horizontal) orientation.

The example on the left has the default barSize=35 and the exmple on the right has barSize=10.

For other options and examples, check VizJS

<!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="https://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]
];

var color = {A:"#3366CC", B:"#DC3912",  C:"#FF9900"};

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

var bp1=viz.bP().data(data).fill(d=>color[d.primary]);
svg.append("g").attr("transform","translate(50,50)").call(bp1);

var bp2=viz.bP().data(data)
           .fill(d=>color[d.primary])
		   .barSize(10);

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>

xxxxxxxxxx
 
<!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="https://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]
];
​
var color = {A:"#3366CC", B:"#DC3912",  C:"#FF9900"};
​
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
​
var bp1=viz.bP().data(data).fill(d=>color[d.primary]);
svg.append("g").attr("transform","translate(50,50)").call(bp1);
​
var bp2=viz.bP().data(data)
           .fill(d=>color[d.primary])
           .barSize(10);
​
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>
​
    

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