cloudvisio
Version:
Visual Representation of cloud data
93 lines (75 loc) • 1.5 kB
HTML
<html>
<head>
<title>Gist example - Cloudvisio</title>
<meta charset="utf8">
<!-- Dependencies -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Cloudvisio lib -->
<script type="text/javascript" src="../build/cloudvisio-min.js"></script>
<!-- Example code -->
<script type="text/javascript">
// variables
var vis;
$(function(){
vis = new Cloudvisio({
layout: "force"
});
requestUser();
});
function requestUser(){
var user = prompt("Please enter your Github username","tracend");
if (user!=null && user!=""){
getData( user );
}
}
function getData( user ){
$.getJSON("https://api.github.com/users/"+ user +"/gists?callback=?", function(response){
if( response.meta.status == 200 ){
renderGraph( response.data );
}
});
}
function renderGraph( data ){
vis
.data( data )
.axis("description")
.select("public")
.group([true, false])
.axis("comments");
//vis.gt(0, "comments");
vis.render();
}
</script>
<!-- Example styling -->
<style type="text/css">
#vis {
width: 100%;
height: 100%;
}
header {
position: absolute;
padding: 12px;
}
</style>
</head>
<body>
<header>
<h2>Gists</h2>
<p>Grouping a user's public gists sized based on number of comments</p>
<pre>
vis = new Cloudvisio({
layout: "force"
});
vis
.data( data )
.axis("description");
.select("public");
.group([true, false]);
.axis("comments");
vis.render();
</pre>
</header>
<div id="vis"><!-- --></div>
</body>
</html>