Skip to content

Instantly share code, notes, and snippets.

@denjn5

denjn5/.block

Last active February 16, 2018 17:36
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 denjn5/6d5ddd4226506d644bb20062fc60b53f to your computer and use it in GitHub Desktop.
Save denjn5/6d5ddd4226506d644bb20062fc60b53f to your computer and use it in GitHub Desktop.
Download ZIP
Simple Circle Pack (d3 v4; CSV; 50 Lines)
Raw
.block
license: gpl-3.0
height: 200
border: no
Raw
README.md

This is the simplest circle pack diagram I could create. Let me know if you think I can make it tighter.

Build notes:

  • It pulls data from a csv file. It uses d3.stratify() to reform links into a hierarchy. (NOTE: I ran into a challenge with d.size when moving from json to csv. While size is a feature of my data, I had to now access it from d.data.size.)
  • To differentiate between local variables and framework objects, I prefix variables with lowercase 'v'.

From https://bl.ocks.org/denjn5/6d5ddd4226506d644bb20062fc60b53f

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>
<meta charset="utf-8">
<head>
<title>Simple Circle Pack (d3 v4; CSV; 50 Lines)</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style>
circle {
stroke: white;
fill: #05668D;
opacity: 0.3;
stroke-width: 2px;
}
</style>
<svg>
<g></g>
</svg>
<script>
var vWidth = 300;
var vHeight = 200;
// Prepare our physical space
var g = d3.select('svg').attr('width', vWidth).attr('height', vHeight).select('g');
// Get the data from our CSV file
d3.csv('data.csv', function(error, vCsvData) {
if (error) throw error;
vData = d3.stratify()(vCsvData);
drawViz(vData);
});
function drawViz(vData) {
// Declare d3 layout
var vLayout = d3.pack().size([vWidth, vHeight]);
// Layout + Data
var vRoot = d3.hierarchy(vData).sum(function (d) { return d.data.size; });
var vNodes = vRoot.descendants();
vLayout(vRoot);
var vSlices = g.selectAll('circle').data(vNodes).enter().append('circle');
// Draw on screen
vSlices.attr('cx', function (d) { return d.x; })
.attr('cy', function (d) { return d.y; })
.attr('r', function (d) { return d.r; });
}
</script>
@j-funk
Copy link

j-funk commented Feb 16, 2018

Thanks for this it was very helpful. I did find one minor problem, on line 40 you don't need the call to d3.hierarchy, since vData is already a hierarchy due to the stratify call earlier. This will allow you to remove the reference to data in the sum function. Thanks again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment