Skip to content

Instantly share code, notes, and snippets.

@denjn5

denjn5/.block

Last active June 15, 2022 08:44
Show Gist options
  • Save denjn5/973474e72ce17cfe20f8898f95eb03f7 to your computer and use it in GitHub Desktop.
Save denjn5/973474e72ce17cfe20f8898f95eb03f7 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Sunburst (d3 v4; CSV; 54 Lines)
Raw
.block
license: gpl-3.0
height: 200
border: no
Raw
README.md

This is the simplest sunburst 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/973474e72ce17cfe20f8898f95eb03f7

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 Sunburst (d3 v4; CSV; 54 Lines)</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<style>
path {
stroke: white;
fill: #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.partition().size([2 * Math.PI, Math.min(vWidth, vHeight) / 2]);
// Layout + Data
var vRoot = d3.hierarchy(vData).sum(function (d) { return d.data.size; });
var vNodes = vRoot.descendants();
vLayout(vRoot);
var vArc = d3.arc()
.startAngle(function (d) { return d.x0; })
.endAngle(function (d) { return d.x1; })
.innerRadius(function (d) { return d.y0; })
.outerRadius(function (d) { return d.y1; });
// Draw on screen
g.selectAll('path').data(vNodes).enter().append('path').attr("d", vArc);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment