NPashaP/.block

## .block
license: gpl-3.0

## readme.md

      
    Raw
  

              readme.md
            
          
    viz.bP().width, viz.bP().height

These methods can be used to set the width and height of the graph.
The example on the left is using the default width 400 and height 600. The example on the right has width=300 and height=500.
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="http://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])
		   .width(300)
		   .height(500);

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>
	<!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="http://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])
	.width(300)
	.height(500);

	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>