Thursday, January 1, 2015

D3: Simple javascript class wrapper for Matrix Diagram

This is a simple javascript class wrapper (in both css and js) for the Matrix Diagram Visualization at http://bost.ocks.org/mike/hive/, The interface separates json data, html element, and the actual MatrixPlot class. It is modified so that it will be easier for a web developer to easily add a bipartite 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/matrix.zip

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

<html>
<head>

<link href="lib/matrix-plot.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/packages.js" type="text/javascript"></script>
<script src="lib/matrix-plot.js" type="text/javascript"></script>

<script>
$(function(){
	plotMatrix();
});

function plotMatrix()
{
	d3.json("miserables.json", function(miserables) {
		var plot = new MatrixPlot("chtMatrix", 'order', miserables);
	});
}
</script>
<style>
body{
padding-top: 10px;
padding-left: 60px;
}
</style>
</head>
<body>
				<p>Order: <select id="order">
				  <option value="name">by Name</option>
				  <option value="count">by Frequency</option>
				  <option value="group">by Cluster</option>
				</select>
				</p>
				
				<br />
				
				<div id="chtMatrix" class="matrixplot" ></div>
</div>


</div>
</body>
</html>


No comments:

Post a Comment