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, 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:


<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>

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"]}
padding-top: 10px;
<div id="chtBiPartite" class="bipartite" ></div>

No comments:

Post a Comment