Thursday, January 1, 2015

D3: Simple wrapper class for BiPartite Visualization

This is a simple javascript class wrapper (in both css and js) for the BiPartite Visualization at http://bl.ocks.org/NPashaP/9796212, The interface separates json data, html element, and the actual biPartitePlot class. It is modified so that it will be easier for a web developer to easily add a bipartite graph into their application.

Below is the link to the source code (remember to put in in the web folder of a web server such as xamp so that the html page will be able to download the json in the same folder):


Below is the html which includes the javascript that download a json data and then display as a BiPartite chart:

<html>
<head>


<script src="lib/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="lib/d3.min.js" type="text/javascript"></script>
<script src="lib/packages.js" type="text/javascript"></script>
<script src="lib/biPartite.js" type="text/javascript"></script>
<script src="lib/biPartite-plot.js" type="text/javascript"></script>

<script>
$(function(){
 plotBiPartite();
});
function plotBiPartite()
{
 d3.json("sales_data.json", function(sales_data) {
  var plot = new biPartitePlot("chtBiPartite");
  var data = [ 
  {data: plot.partData(sales_data,2), id:'SalesAttempts', header:["Channel","State", "Sales Attempts"]},
  {data: plot.partData(sales_data,3), id:'Sales', header:["Channel","State", "Sales"]}
  ];
  plot.draw(data);
 });
}
</script>
<style>
body{
padding-top: 10px;
}
</style>
</head>
<body>
<div id="chtBiPartite" class="bipartite" ></div>
</body>
</html>

No comments:

Post a Comment