Skip to content

Instantly share code, notes, and snippets.

@denjn5

denjn5/.block

Last active September 27, 2017 10:49
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/4cc1a43f41efdc0ae6b7a1bf6a7d5e4e to your computer and use it in GitHub Desktop.
Save denjn5/4cc1a43f41efdc0ae6b7a1bf6a7d5e4e to your computer and use it in GitHub Desktop.
Download ZIP
Simple Radial Tree (d3 v4; CSV; 63 Lines)
Raw
.block
license: gpl-3.0
height: 200
border: no
Raw
README.md

This is the simplest radial tree 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'.

Radial Tree notes: The size method in d3.cluster().size([2 * Math.PI, Math.min(vWidth, vHeight)/2 - 10]); is both important and odd.

  • radius setting Math.min(vWidth, vHeight)/2 - 10]);: We choose smaller of height and width, then we divide in half to find (and set) the diagram's radius. We pull out a bit extra to ensure we have margin (so that the circles don't get clipped). I chose to subtract 10 since my cirle radius is 10 (which really translates to 10 / 2 * 2 since I'm only in danger of cutting off 1/2 my circle, but it could happen on both sides).
  • The first element of size sets the bredth of the diagram. While https://github.com/d3/d3-hierarchy#cluster_size mentions 360, my diagrams ended up wonky if I didn't raise this number to something much larger (maybe due to my low number of end nodes?).

From https://bl.ocks.org/denjn5/4cc1a43f41efdc0ae6b7a1bf6a7d5e4e

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 Radial Tree (d3 v4; CSV; 63 Lines)</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style>
circle {
stroke: #05668D;
fill: white;
opacity: 0.6;
stroke-width: 2px;
}
path {
fill: none;
stroke: #05668D;
opacity: 0.6;
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').attr('transform', 'translate(' + vWidth/2 + ',' + vHeight/2 + ')');
// 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.cluster().size([2 * Math.PI, Math.min(vWidth, vHeight)/2 - 10]); // margin!
// Layout + Data
var vRoot = d3.hierarchy(vData);
var vNodes = vRoot.descendants();
var vLinks = vLayout(vRoot).links();
// Draw on screen
g.selectAll('path').data(vLinks).enter().append('path')
.attr('d', d3.linkRadial()
.angle(function (d) { return d.x; })
.radius(function (d) { return d.y; }));
g.selectAll('circle').data(vNodes).enter().append('circle')
.attr('r', 10)
.attr("transform", function (d) { return "translate(" + d3.pointRadial(d.x, d.y) + ")"; });
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment