Skip to content

Instantly share code, notes, and snippets.

@yanhann10

yanhann10/.block

Last active April 26, 2018 00:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yanhann10/d916b9162db9d1981eb7163be969480d to your computer and use it in GitHub Desktop.
Save yanhann10/d916b9162db9d1981eb7163be969480d to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
d3.csv("users.csv", function(error, csv_data) {
if (error) throw error;
data = csv_data;
var nest = d3.nest()
.key(function(d) { return d.region; })
.key(function(d) { return d.iso; })
.key(function(d) { return d.country; })
.rollup(function(d) { return d3.sum(d, function(d) { return parseFloat(d.amount); }); });
var root = d3.hierarchy({values: nest.entries(data)}, function(d) { return d.values; })
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value; });
function treemap(data) {
// Declare d3 layout
var Layout = d3.treemap().size([600,600]).paddingOuter(5);
var Root = d3.hierarchy(data).sum(function (d) { return d.data.size; });
var Nodes = Root.descendants();
Layout(Root);
var Slices = svg.selectAll('rect').data(Nodes).enter().append('rect');
// Draw on screen
Slices.attr('x', function (d) { return d.x0; })
.attr('y', function (d) { return d.y0; })
.attr('width', function (d) { return d.x1 - d.x0; })
.attr('height', function (d) { return d.y1 - d.y0; })
.attr('fill','white')
.attr('stroke','black');
}
treemap(root)
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment