Broken Tinfold Reingold

by Colin White

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<div id='sleep-schema'>
</div>

CSS

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

JavaScript

var diameter = 500,
  color = d3.scale.category20c();

var d1 = {
  "time_completed": 1420199657,
  "xid": "-dqAeAEjGxCDcjqrxHsraER3yWqew4xS",
  "title": "for 8h 46m",
  "time_created": 1420167382,
  "time_updated": 1420200033,
  "details": {
    "body": 0,
    "sound": 12598,
    "tz": "America/Chicago",
    "awakenings": 0,
    "light": 18970,
    "mind": 0,
    "asleep_time": 1420168079,
    "awake_time": 1420199400,
    "awake": 707,
    "rem": 0,
    "duration": 32275,
    "smart_alarm_fire": 1420199640,
    "quality": 100,
    "sunset": 0,
    "sunrise": 0
  },
  "date": 20150102,
  "shared": true,
  "snapshot_image": "/nudge/image/e/1420200033/-dqAeAEjGxCDcjqrxHsraER3yWqew4xS/MSh0lOvjHDY.png",
  "sub_type": 0
};

var tree = d3.layout.tree()
  .size([360, diameter / 2 - 120])
  .separation(function(a, b) {
    return (a.parent == b.parent ? 1 : 2) / a.depth;
  });

var diagonal = d3.svg.diagonal.radial()
  .projection(function(d) {
    return [d.y, d.x / 180 * Math.PI];
  });

var svg = d3.select("#sleep-schema").append("svg")
  .attr("width", diameter)
  .attr("height", diameter - 150)
  .append("g")
  .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

var nodes = tree.nodes(d1),
  links = tree.links(nodes);

console.log(d1);
console.log(nodes);

var link = svg.selectAll(".link")
  .data(links)
  .enter().append("path")
  .attr("class", "link")
  .attr("d", diagonal);

var node = svg.selectAll(".node")
  .data(nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
  })

node.append("circle")
  .attr("r", 4.5);