D3 Examples - Where I Have Been

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel='stylesheet' type='text/css' href='' />
        <style>
            body {
                margin: 0; padding: 0; font-family: monospace;
                font-size:12px;
            }
            #head {
                position:fixed;
                background:#fff;
                padding:5px;
                font-weight:bold;
                top:10px;
                right:10px;
            }
            rect {
                stroke:#fff;
                stroke-width:1;
            }
        </style>
    </head>
    <body>
        <div id='head'>where <a href='https://macwright.org/'>i</a> have been 2011/08/10 &rarr; 2012/10/17</div>
        <div id='chart'></div>
        <script src="https://d3js.org/d3.v2.js"></script>
        <script>
var width = 20000,
    height = window.innerHeight,
    radius = Math.min(width, height) / 2,
    color = d3.scale.category20c();
​
var vis = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);
​
var partition = d3.layout.partition()
    .size([width, height])
    .sort(function(a, b) {
        return a.size - b.size;
    })
    .value(function(d) { return d.size });
​
d3.json("tree.json", function(json) {
  var gs = vis.data([json]).selectAll("g")
      .data(partition.nodes)
      .enter().append("g")
          .attr("transform", function(d) {
              return 'translate(' + [d.x, d.y] + ')';
          });
      gs.append('rect').attr("width", function(d) { return d.dx; })
          .attr("height", function(d) { return d.dy; })
          .style("fill", function(d) { return color((d.children ? d : d.parent).name); });
      gs.append('text').text(function(d) {
          return d.name;
      }).attr({
          dx: 10,
          dy: -15,
          transform: 'rotate(90, 0, 0)'
      });
});
</script>
    </body>
</html>
​
    