sharno/viz.html

## viz.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text{
	font-size:12px;
}
.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;
}
.header{
	text-anchor:middle;
	font-size:16px;
}
line{
	stroke:grey;
}
</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 data=[
["Mother Disc." ,"Family Sat.", 10, 10],
["Mother Disc." ,"School Sat.", 10, 10],
["Mother Disc." ,"Self Sat.", 10, 10],
["Mother Disc." ,"PSC", 10, 10],
["Father Disc." ,"Family Sat.", 10, 10],
["Father Disc." ,"Friend Sat.", 10, 10],
["Father Disc." ,"School Sat.", 10, 10],
["Father Disc." ,"Self Sat.", 10, 10],
["Father Disc." ,"Trait Anxiety", 10, 10],
["Father Disc." ,"PSC", 10, 10],
["Friend Disc." ,"Family Sat.", 10, 10],
["Friend Disc." ,"Friend Sat.", 10, 10],
["Friend Disc." ,"School Sat.", 10, 10],
["Friend Disc." ,"Self Sat.", 10, 10],
["Mother Secrecy" ,"Family Sat.", 10, 10],
["Mother Secrecy" ,"PSC", 10, 10],
["Father Secrecy" ,"Family Sat.", 10, 10],
["Father Secrecy" ,"Friend Sat.", 10, 10],
["Father Secrecy" ,"School Sat.", 10, 10],
["Father Secrecy" ,"Trait Anxiety", 10, 10],
["Friend Secrecy" ,"Friend Sat.", 10, 10],
["Friend Secrecy" ,"School Sat.", 10, 10],
["Friend Secrecy" ,"Trait Anxiety", 10, 10],
["Friend Secrecy" ,"PSC", 10, 10],
["Age" ,"Family Sat.", 10, 10],
["Age" ,"School Sat.", 10, 10],
["Age" ,"Self Sat.", 10, 10],
["Sex" ,"Family Sat.", 10, 10],
["Sex" ,"Self Sat.", 10, 10],
["Sex" ,"Trait Anxiety", 10, 10],
["SES" ,"Family Sat.", 10, 10],
["SES" ,"School Sat.", 10, 10],
["SES" ,"Self Sat.", 10, 10]
];
var color ={"Mother Disc.":"#3366CC", "Father Disc.":"#DC3912",  "Friend Disc.":"#FF9900", "Mother Secrecy":"#109618", "Father Secrecy":"#990099", "Friend Secrecy":"#0099C6", "Age":"#AA99C6", "Sex":"#00FFC6", "SES":"#2211C6"};
var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 800);

svg.append("text").attr("x",250).attr("y",70)
	.attr("class","header").text("Sales Attempt");

svg.append("text").attr("x",750).attr("y",70)
	.attr("class","header").text("Sales");

var g =[svg.append("g").attr("transform","translate(150,100)")
		,svg.append("g").attr("transform","translate(650,100)")];

var bp=[ viz.bP()
		.data(data)
		.min(12)
		.pad(1)
		.height(600)
		.width(200)
		.barSize(35)
		.fill(d=>color[d.primary])
	,viz.bP()
		.data(data)
		.value(d=>d[3])
		.min(12)
		.pad(1)
		.height(600)
		.width(200)
		.barSize(35)
		.fill(d=>color[d.primary])
];

[0,1].forEach(function(i){
	g[i].call(bp[i])

	g[i].append("text").attr("x",-50).attr("y",-8).style("text-anchor","middle").text("Channel");
	g[i].append("text").attr("x", 250).attr("y",-8).style("text-anchor","middle").text("State");

	g[i].append("line").attr("x1",-100).attr("x2",0);
	g[i].append("line").attr("x1",200).attr("x2",300);

	g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",-100).attr("x2",0);
	g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",200).attr("x2",300);

	g[i].selectAll(".mainBars")
		.on("mouseover",mouseover)
		.on("mouseout",mouseout);

	g[i].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[i].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"));
});

function mouseover(d){
	[0,1].forEach(function(i){
		bp[i].mouseover(d);

		g[i].selectAll(".mainBars").select(".perc")
		.text(function(d){ return d3.format("0.0%")(d.percent)});
	});
}
function mouseout(d){
	[0,1].forEach(function(i){
		bp[i].mouseout(d);

		g[i].selectAll(".mainBars").select(".perc")
		.text(function(d){ return d3.format("0.0%")(d.percent)});
	});
}
d3.select(self.frameElement).style("height", "800px");
</script>
</body>
</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	text{
	font-size:12px;
	}
	.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;
	}
	.header{
	text-anchor:middle;
	font-size:16px;
	}
	line{
	stroke:grey;
	}
	</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 data=[
	["Mother Disc." ,"Family Sat.", 10, 10],
	["Mother Disc." ,"School Sat.", 10, 10],
	["Mother Disc." ,"Self Sat.", 10, 10],
	["Mother Disc." ,"PSC", 10, 10],
	["Father Disc." ,"Family Sat.", 10, 10],
	["Father Disc." ,"Friend Sat.", 10, 10],
	["Father Disc." ,"School Sat.", 10, 10],
	["Father Disc." ,"Self Sat.", 10, 10],
	["Father Disc." ,"Trait Anxiety", 10, 10],
	["Father Disc." ,"PSC", 10, 10],
	["Friend Disc." ,"Family Sat.", 10, 10],
	["Friend Disc." ,"Friend Sat.", 10, 10],
	["Friend Disc." ,"School Sat.", 10, 10],
	["Friend Disc." ,"Self Sat.", 10, 10],
	["Mother Secrecy" ,"Family Sat.", 10, 10],
	["Mother Secrecy" ,"PSC", 10, 10],
	["Father Secrecy" ,"Family Sat.", 10, 10],
	["Father Secrecy" ,"Friend Sat.", 10, 10],
	["Father Secrecy" ,"School Sat.", 10, 10],
	["Father Secrecy" ,"Trait Anxiety", 10, 10],
	["Friend Secrecy" ,"Friend Sat.", 10, 10],
	["Friend Secrecy" ,"School Sat.", 10, 10],
	["Friend Secrecy" ,"Trait Anxiety", 10, 10],
	["Friend Secrecy" ,"PSC", 10, 10],
	["Age" ,"Family Sat.", 10, 10],
	["Age" ,"School Sat.", 10, 10],
	["Age" ,"Self Sat.", 10, 10],
	["Sex" ,"Family Sat.", 10, 10],
	["Sex" ,"Self Sat.", 10, 10],
	["Sex" ,"Trait Anxiety", 10, 10],
	["SES" ,"Family Sat.", 10, 10],
	["SES" ,"School Sat.", 10, 10],
	["SES" ,"Self Sat.", 10, 10]
	];
	var color ={"Mother Disc.":"#3366CC", "Father Disc.":"#DC3912", "Friend Disc.":"#FF9900", "Mother Secrecy":"#109618", "Father Secrecy":"#990099", "Friend Secrecy":"#0099C6", "Age":"#AA99C6", "Sex":"#00FFC6", "SES":"#2211C6"};
	var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 800);

	svg.append("text").attr("x",250).attr("y",70)
	.attr("class","header").text("Sales Attempt");

	svg.append("text").attr("x",750).attr("y",70)
	.attr("class","header").text("Sales");

	var g =[svg.append("g").attr("transform","translate(150,100)")
	,svg.append("g").attr("transform","translate(650,100)")];

	var bp=[ viz.bP()
	.data(data)
	.min(12)
	.pad(1)
	.height(600)
	.width(200)
	.barSize(35)
	.fill(d=>color[d.primary])
	,viz.bP()
	.data(data)
	.value(d=>d[3])
	.min(12)
	.pad(1)
	.height(600)
	.width(200)
	.barSize(35)
	.fill(d=>color[d.primary])
	];

	[0,1].forEach(function(i){
	g[i].call(bp[i])

	g[i].append("text").attr("x",-50).attr("y",-8).style("text-anchor","middle").text("Channel");
	g[i].append("text").attr("x", 250).attr("y",-8).style("text-anchor","middle").text("State");

	g[i].append("line").attr("x1",-100).attr("x2",0);
	g[i].append("line").attr("x1",200).attr("x2",300);

	g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",-100).attr("x2",0);
	g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",200).attr("x2",300);

	g[i].selectAll(".mainBars")
	.on("mouseover",mouseover)
	.on("mouseout",mouseout);

	g[i].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[i].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"));
	});

	function mouseover(d){
	[0,1].forEach(function(i){
	bp[i].mouseover(d);

	g[i].selectAll(".mainBars").select(".perc")
	.text(function(d){ return d3.format("0.0%")(d.percent)});
	});
	}
	function mouseout(d){
	[0,1].forEach(function(i){
	bp[i].mouseout(d);

	g[i].selectAll(".mainBars").select(".perc")
	.text(function(d){ return d3.format("0.0%")(d.percent)});
	});
	}
	d3.select(self.frameElement).style("height", "800px");
	</script>
	</body>
	</html>