cloudvisio
Version:
Visual Representation of cloud data
82 lines (67 loc) • 1.41 kB
HTML
<html>
<head>
<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(){
// insert code here...
vis = new Cloudvisio();
// source: http://api.worldbank.org/countries?format=json&per_page=300&json
d3.json("data/income.json", function( data ){
//
vis
.data( data[1] )
.set({ layout: "force" })
.axis("radius", 5)
.axis("name")
.select("incomeLevel")
.group(["High", "Middle", "Low"]);
vis.render();
});
});
</script>
<!-- Example styling -->
<style type="text/css">
body, html {
margin: 0;
padding: 0;
}
header {
position: absolute;
padding: 12px;
}
#vis {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<header>
<h2>Per capita income</h2>
<h3>countries split in high/medium/low groups</h3>
<p>Data from <a href="http://data.worldbank.org/developers">worldbank.org</a></p>
<pre>
vis = new Cloudvisio();
d3.json("data/income.json", function( data ){
vis
.data( data[1] )
.set({ layout: "force" })
.axis("radius", 5)
.axis("name")
.select("incomeLevel")
.group(["High", "Middle", "Low"]);
vis.render();
});
</pre>
</header>
<div id="vis"><!-- --></div>
</body>
</html>