D3 Examples - BiPartite

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
    width:1200px;
    margin:100px auto;
}
svg text{
    font-size:12px;
}
text.barvalue, text.barpercent{
  visibility:hidden;
  }
//g.header{
 // visibility:hidden;
 // }
  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=[
['Dynamic Ratings','CLNR',10],
['Dynamic Ratings','FALCON',20],
['Dynamic Ratings','LCH',20],
['Demand/Gen Response','ARC',10],
['Demand/Gen Response','C2C',10],
['Demand/Gen Response','CLASS',10],
['Demand/Gen Response','CLNR',10],
['Demand/Gen Response','FNLCF',10],
['Demand/Gen Response','LCL',10],
['Demand/Gen Response','NTVV',7],
['Demand/Gen Response','FPP',10],
['Demand/Gen Response','MEA',13],
['Demand/Gen Response','SAVE',13],
['Demand/Gen Response','BRISTOL',10],
['Demand/Gen Response','FALCON',10],
['Electrical Energy Storage','CLNR',10],
['Electrical Energy Storage','FALCON',5],
['Electrical Energy Storage','SNS',30],
['Electrical Energy Storage','BRISTOL',15],
['Electrical Energy Storage','NTVV',20],
['Network Management','C2C',7],
['Network Management','CLNR',7],
['Network Management','eta',12],
['Network Management','ARC',12],
['Network Management','FPP',12],
['Network Management','FUNLV',12],
['Network Management','MEA',12],
['Network Management','FALCON',12],
['Network Management','LCL',12],
['Network Management','LVT',12],
['Network Management','LCH',12],
['Voltage Management','CLASS',15],
['Voltage Management','eta',12],
['Voltage Management','CLNR',10],
['Voltage Management','FNLCF',15],
['Voltage Management','FPP',20],
['Voltage Management','FUNLV',15],
['Voltage Management','LCH',15],
['Voltage Management','NTVV',15]
];
​
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:["Technology Area","LCNF Project", "Technology Mapping"]},
];
​
bP.draw(data, svg);
​
var header = document.getElementsByClassName("header");
for (j=0;j<2;j++){
    var childheader = header[j].childNodes;
    for (i = 0; i < childheader.length; i++) {
        if (childheader[i].innerHTML=="Count") {
            childheader[i].style.visibility = 'hidden';
        }
        if (childheader[i].nodeName == "line") {
            childheader[i].style.visibility = 'hidden';
        }
    }
}
</script>
</body>
    