cloudvisio
Version:
Visual Representation of cloud data
79 lines (67 loc) • 1.19 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({
layout: "pie"
})
.axis({
label: "country",
value: "population"
});
//
d3.json("data/population.json", function( data ){
//
vis.parse( data );
//
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>Country population</h2>
<p>In this example we are using <a href="data/population.json">normalized data</a>.</p>
<pre>
vis = new Cloudvisio({
layout: "pie"
})
.axis({
label: "country",
value: "population"
});
d3.json("data/population.json", function( data ){
vis.parse( data );
vis.render();
});
</pre>
</header>
<div id="vis"><!-- --></div>
</body>
</html>