NPashaP/.block

## .block
license: gpl-3.0

## readme.md

      
    Raw
  

              readme.md
            
          
    viz.bP().keyPrimary, viz.bP().keySecondary, viz.bP().value

These methods are used to set the accessor functions for the primary and secondary keys and values for the graph. The primary key determines the groups appearing on the left for vertical orientation and top for horizontal orientation. The secondary is the other part.
The value column is used to compute the size of bars.
The left example has the default keyPrimary, keySecondary, and value accessors which are d=>d[0], d=>d[1] and d=>d[2] respectively.
The right example is using d=>d[1] (column with X,Y in data) for primary part, d=>d[0] (column with A,B, C in data)
for secondary part, and d=>d[3] for value.
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.secondary])
           .keyPrimary(d=>d[1])
           .keySecondary(d=>d[0])
           .value(d=>d[3]);

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.secondary])
	.keyPrimary(d=>d[1])
	.keySecondary(d=>d[0])
	.value(d=>d[3]);

	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>