Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/.block

Created September 17, 2019 05:47
Show Gist options
  • Save GerardoFurtado/0a66d5638ce3d14be349f043de5053b4 to your computer and use it in GitHub Desktop.
Save GerardoFurtado/0a66d5638ce3d14be349f043de5053b4 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
data.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 2 should actually have 3 columns, instead of 2 in line 1.
id,parentId,size
cars,
owned,cars
traded,cars
learned,cars
pilot,owned,40
325ci,owned,40
accord,owned,20
chevette,traded,10
odyssey,learned,20
maxima,learned,10
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.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 margins = {top:20, bottom:300, left:30, right:100};
var height = 600;
var width = 900;
var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);
var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");
var csvData = d3.csv('data.csv');
csvData.then(function(rawData) {
var data = rawData.map(function(d) {
return {id:d.id, parentId:d.parentId, size:+d.size}
});
var vData = d3.stratify()(data);
var vLayout = d3.pack().size([width, height]);
var vRoot = d3.hierarchy(vData).sum(function (d) { return d.data.size; });
var vNodes = vRoot.descendants();
vLayout(vRoot);
var vSlices = graphGroup.selectAll('circle').data(vNodes).enter().append('circle');
vSlices.attr('cx', function (d) { return d.x; })
.attr('cy', function (d) { return d.y; })
.attr('r', function (d) { return d.r; })
.style("opacity", 0.2);
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment