Skip to content

Instantly share code, notes, and snippets.

@denjn5

denjn5/.block

Last active February 19, 2018 12:37
Show Gist options
  • Save denjn5/306b0d38dc0d46be3d83468f369776f4 to your computer and use it in GitHub Desktop.
Save denjn5/306b0d38dc0d46be3d83468f369776f4 to your computer and use it in GitHub Desktop.
Download ZIP
Time-of-Day Sunburst
Raw
.block
license: gpl-3.0
height: 600
border: no
Raw
README.md

Based on the simplest sunburst, but illustrates a time-of-day data pattern. The data.csv file includes:

  • 1 head line: 'time,'
  • 24 hourly lines: '12,time' (hour, hierarchical ref to the head line)
  • 96 quarter-hourly lines: ':00,23,15' (quarter-hour, hierarchical ref to the hour, node size)

(In the .csv, it's tempting to put spaces between lines. Don't do it! It'll keep your d3 from rendering.)

If you're on gist.github.com, you can see me in action at https://bl.ocks.org/denjn5/306b0d38dc0d46be3d83468f369776f4.

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
time,
1,time
2,time
3,time
4,time
5,time
6,time
7,time
8,time
9,time
10,time
11,time
12,time
13,time
14,time
15,time
16,time
17,time
18,time
19,time
20,time
21,time
22,time
23,time
24,time
:00,1,15
:15,1,15
:30,1,15
:45,1,15
:00,2,15
:15,2,15
:30,2,15
:45,2,15
:00,3,15
:15,3,15
:30,3,15
:45,3,15
:00,4,15
:15,4,15
:30,4,15
:45,4,15
:00,5,15
:15,5,15
:30,5,15
:45,5,15
:00,6,15
:15,6,15
:30,6,15
:45,6,15
:00,7,15
:15,7,15
:30,7,15
:45,7,15
:00,8,15
:15,8,15
:30,8,15
:45,8,15
:00,9,15
:15,9,15
:30,9,15
:45,9,15
:00,10,15
:15,10,15
:30,10,15
:45,10,15
:00,11,15
:15,11,15
:30,11,15
:45,11,15
:00,12,15
:15,12,15
:30,12,15
:45,12,15
:00,13,15
:15,13,15
:30,13,15
:45,13,15
:00,14,15
:15,14,15
:30,14,15
:45,14,15
:00,15,15
:15,15,15
:30,15,15
:45,15,15
:00,16,15
:15,16,15
:30,16,15
:45,16,15
:00,17,15
:15,17,15
:30,17,15
:45,17,15
:00,18,15
:15,18,15
:30,18,15
:45,18,15
:00,19,15
:15,19,15
:30,19,15
:45,19,15
:00,20,15
:15,20,15
:30,20,15
:45,20,15
:00,21,15
:15,21,15
:30,21,15
:45,21,15
:00,22,15
:15,22,15
:30,22,15
:45,22,15
:00,23,15
:15,23,15
:30,23,15
:45,23,15
:00,24,15
:15,24,15
:30,24,15
:45,24,15
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Time-of-Day Sunburst</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 = 600;
var vHeight = 600;
// 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).style("fill", "black");
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment