BiPartite

hello world

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
	width:1200px;
	margin:100px auto;
}
svg text{
	font-size:12px;
}
rect{
	shape-rendering:crispEdges;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="biPartite.js"></script>
<script>
var sales_data=[
['Lite','CA',16,0],
['Small','CA',1278,4],
['Medium','CA',27,0],
['Plus','CA',58,0],
['Grand','CA',1551,15],
['Elite','CA',141,0],
['Lite','AZ',5453,35],
['Small','AZ',683,1],
['Medium','AZ',862,0],
['Grand','AZ',6228,30],
['Lite','AL',15001,449],
['Small','AL',527,3],
['Medium','AL',836,0],
['Plus','AL',28648,1419],
['Grand','AL',3,0],
['Lite','CO',13,0],
['Small','CO',396,0],
['Medium','CO',362,0],
['Plus','CO',78,10],
['Grand','CO',2473,32],
['Elite','CO',2063,64],
['Medium','DE',203,0],
['Grand','DE',686,2],
['Elite','DE',826,0],
['Lite','KS',1738,110],
['Small','KS',12925,13],
['Medium','KS',15413,0],
['Small','GA',2166,2],
['Medium','GA',86,0],
['Plus','GA',348,3],
['Grand','GA',4244,18],
['Elite','GA',1536,1],
['Small','IA',351,0],
['Grand','IA',405,1],
['Small','IL',914,1],
['Medium','IL',127,0],
['Grand','IL',1470,7],
['Elite','IL',516,1],
['Lite','IN',43,0],
['Small','IN',667,1],
['Medium','IN',172,0],
['Plus','IN',149,1],
['Grand','IN',1380,5],
['Elite','IN',791,23],
['Small','FL',1,0],
['Grand','FL',1,0],
['Small','MD',1070,1],
['Grand','MD',1171,2],
['Elite','MD',33,0],
['Plus','TX',1,0],
['Small','MS',407,0],
['Medium','MS',3,0],
['Grand','MS',457,2],
['Elite','MS',20,0],
['Small','NC',557,0],
['Medium','NC',167,0],
['Plus','NC',95,1],
['Grand','NC',1090,5],
['Elite','NC',676,6],
['Lite','NM',1195,99],
['Small','NM',350,3],
['Medium','NM',212,0],
['Grand','NM',1509,8],
['Lite','NV',3899,389],
['Small','NV',147,0],
['Medium','NV',455,0],
['Plus','NV',1,1],
['Grand','NV',4100,16],
['Lite','OH',12,0],
['Small','OH',634,2],
['Medium','OH',749,0],
['Plus','OH',119,1],
['Grand','OH',3705,19],
['Elite','OH',3456,25],
['Small','PA',828,2],
['Medium','PA',288,0],
['Plus','PA',141,0],
['Grand','PA',2625,7],
['Elite','PA',1920,10],
['Small','SC',1146,2],
['Medium','SC',212,0],
['Plus','SC',223,4],
['Grand','SC',1803,6],
['Elite','SC',761,8],
['Small','TN',527,0],
['Medium','TN',90,0],
['Grand','TN',930,4],
['Elite','TN',395,1],
['Lite','ME',7232,58],
['Small','ME',1272,0],
['Medium','ME',1896,0],
['Plus','ME',1,0],
['Grand','ME',10782,33],
['Elite','ME',1911,3],
['Small','VA',495,0],
['Medium','VA',32,0],
['Plus','VA',7,0],
['Grand','VA',1557,12],
['Elite','VA',24,0],
['Small','WA',460,1],
['Plus','WA',88,3],
['Grand','WA',956,3],
['Small','WV',232,0],
['Medium','WV',71,0],
['Grand','WV',575,2],
['Elite','WV',368,3]
];

var width = 1100, height = 610, margin ={b:0, t:40, l:170, r:50};

var svg = d3.select("body")
	.append("svg").attr('width',width).attr('height',(height+margin.b+margin.t))
	.append("g").attr("transform","translate("+ margin.l+","+margin.t+")");

var data = [ 
	{data:bP.partData(sales_data,2), id:'SalesAttempts', header:["Channel","State", "Sales Attempts"]},
	{data:bP.partData(sales_data,3), id:'Sales', header:["Channel","State", "Sales"]}
];

bP.draw(data, svg);

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js