[src=html4strict]<html>
<head>
<title>Commit Visualizer</title>
<script type="text/javascript" src="js/jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/tagcloud.js"></script>
<script type="text/javascript">
jQuery().ready(function(){
renderVisualization('filename','branch1');
});
</script>
<script type="text/javascript">
function renderVisualization(dataType,branch){
$("#tagcloud").remove();
$('#viz').before('<div id="tagcloud" style="position: relative; width: 700px; height: 700px;"><div id="loading"><h2>Loading Visualization....</h2></div></div>');
$.getJSON("json/"+dataType+"-"+branch,
function(data) {
var tagcloud = new TagCloud(document.getElementById('tagcloud'),'random',[{r:30,g:144,b:255},{r:28,g:134,b:238},{r:24,g:116,b:205}]);
tagcloud.setClickHandler(function(name,size){
alert(name+"\n Frequency: "+size);
});
for(key in data){
tagcloud.addNode(new Node(key,data[key]));
}
tagcloud.draw();
});
}
function readValuesAndVisualize(){
var branch = $('#branchList :selected').text();
var selection = $('input[name=typeSelection]:checked').val();
renderVisualization(selection,branch)
}
</script>
</head>
<body>
<div id="framecontent">
<div class="innertube">
<p>
Branch:
<select id="branchList" onchange="readValuesAndVisualize()">
<option>branch1</option>
<option>branch2</option>
<option>branch3</option>
</select>
</p>
<p><input type="radio" name="typeSelection" value="filename" checked="checked" onclick="readValuesAndVisualize()">By Filename </input></p>
<p><input type="radio" name="typeSelection" value="package" onclick="readValuesAndVisualize()">By Package</input></p>
<p><input type="radio" name="typeSelection" value="user" onclick="readValuesAndVisualize()">By Developer</input></p>
</div>
</div>
<div id="maincontent">
<h2>Commit Visualizer</h2>
<p>A visualization of commits to an svn repository over the period of a few days. The numbers are inspired by real data, and the names of the data were randomly generated. Visualizations can be rendered based
on the source files, the packages the code belongs to, or the developers who commited the code. The larger the circle, the more a file or package has been changed, or the more changes an individual developer has made.</p>
<div id = "viz"></div>
</body>
</html>
[/src]
