Thursday, January 1, 2015

D3: Simple javascript class wrapper for Association Graph

This is a simple javascript class wrapper (in both css and js) for the Association Graph Visualization at http://wimbledon.prcweb.co.uk/davidgoliath.html, The interface separates json data, html element, and the actual HeroGraphPlot class. It is modified so that it will be easier for a web developer to easily add a association graph chart 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):

https://dl.dropboxusercontent.com/u/113201788/d3/assoc-graph.zip

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

<html>
<head>

<link href="lib/herograph.css" rel="stylesheet"></link>

<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/underscore-min.js" type="text/javascript"></script>
<script src="lib/herograph.js" type="text/javascript"></script>

<script>
$(function(){
 plotBiPartite();
});
function plotBiPartite()
{
 d3.json("herograph.json", function(graphData) {
  var plot = new HeroGraphPlot("chart", "info", graphData);
 });
}
</script>
<style>
body{
padding-top: 10px;
}
</style>
</head>
<body>
    <svg id="chart" class="herograph">
    <defs>
       <marker id="Triangle"
         refX="0" refY="3" 
         markerUnits="strokeWidth"
         markerWidth="6" markerHeight="6"
         orient="auto">
         <path d="M 0 0 L 6 3 L 0 6 z" />
       </marker>
     </defs>
   </svg>

   <div id="info" class="herographinfo"></div>
</body>
</html>


No comments:

Post a Comment