D3 Examples - VeggieBurst 2014

VeggieBurst 2014

Sunburst of my seed grown 2014 garden. I'm a High Plains gardener in Boulder, Colorado. We get only 20 inches of rain per year. I have a fully irrigated 9 bed garden on the east side of my south facing house. This is garden number fourteen for me. My first in 2001 was in Lafayette, Colorado. I planted in Lafayette in 2011 and moved to Boulder. I harvested a late season container salad garden in 2011. Since 2011 I've been building out this new patch. Seed sewing and growing log found at PoppySeed. Garden-of-eatin has limited posting record of the gardens since 2004. I'm a reticent blogger at best, but a 2014 review is in progress.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Bean Burst</title>
<meta name="description" content="Bean Burst.">
<style>
​
path {
  stroke: #0af;
  stroke-width: 1.5;
  cursor: pointer;
}
​
text {
  font: .8em sans-serif;
  cursor: pointer;
    stroke: #222;
}
​
body {
  width: 100%;
  margin: 0 auto;
}
​
h1 {
  text-align: center;
  margin: 1em 0;
}
​
p#intro {
  text-align: center;
  margin: 1em 0;
}
</style>
<Div style="position:absolute;left:20;top:20;width:15%;color:black;font-size:1em;">
<b>VeggieBurst 2014</b><br><a href=https://www.jasondavies.com/coffee-wheel/>Jason Davies<br>D3 example</a>
</DIV>
<div id="vis" width="100%;"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = window.innerWidth/1.1,
    height = window.innerHeight/1.1,
    radius = height ,
    x = d3.scale.linear().range([0, 2 * Math.PI]),
    y = d3.scale.pow().exponent(1.3).domain([0, 1]).range([0, radius]),
    padding = 10,
    duration = 1000;
​
var div = d3.select("#vis");
​
var color = d3.scale.category20();
​
//div.select("img").remove();
​
var vis = div.append("svg")
    .attr("width", width + padding * 2)
    .attr("height", height*2 + padding * 2)
  .append("g")
    .attr("transform", "translate(" +
    [(radius)*1.05, (radius)] + ")");
​
div.append("p")
    .attr("id", "intro")
    .text("Click to zoom!");
​
var partition = d3.layout.partition()
    .sort(null)
    .value(function(d) { return 5.8 - d.depth; });
​
var arc = d3.svg.arc()
    .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
    .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
    .innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y); })
    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
​
window.addEventListener("resize", function(){ console.log("resize registered");
​
     vis.attr("width", window.innerWidth/1.1)
        .attr("height", window.innerHeight/1.1);
    w = window.innerWidth/1.1,
    h = window.innerHeight/1.1;
    console.log("h=" + h);
    launchFullScreen(vis);
});
​
d3.json("veggieflare_reduced.json", function(error, json) {
  var nodes = partition.nodes({children: json});
​
  var path = vis.selectAll("path").data(nodes);
  path.enter().append("path")
      .attr("id", function(d, i) { return "path-" + i; })
      .attr("d", arc)
      .attr("fill-rule", "evenodd")
      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
      .on("click", click);
​
  var text = vis.selectAll("text").data(nodes);
  var textEnter = text.enter().append("text")
      .style("fill-opacity", 1)
     // .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
      .style("fill", function(d) {
        return brightness(d3.rgb(colour(d))) < 125 ? "#eee" : "#000";
      })
      .attr("text-anchor", function(d) {
        return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
      })
      .attr("dy", ".2em")
      .attr("transform", function(d) {
        var multiline = (d.name || "").split(" ").length > 1,
            angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
            rotate = angle + (multiline ? -.0 : 0);
        return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
      })
      .on("click", click);
  textEnter.append("tspan")
      .attr("x", 0)
      .text(function(d) { return d.depth ? d.name.split(" ")[0] : ""; });
  textEnter.append("tspan")
      .attr("x", 0)
      .attr("dy", ".1em")
      .text(function(d) { return d.depth ? d.name.split(" ")[1] || "" : ""; });
​
  function click(d) {
    path.transition()
      .duration(duration)
      .attrTween("d", arcTween(d));
​
    // Somewhat of a hack as we rely on arcTween updating the scales.
    text.style("visibility", function(e) {
          return isParentOf(d, e) ? null : d3.select(this).style("visibility");
        })
      .transition()
        .duration(duration)
        .attrTween("text-anchor", function(d) {
          return function() {
            return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
          };
        })
        .attrTween("transform", function(d) {
          var multiline = (d.name || "").split("  ").length > 1;
          return function() {
            var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
                rotate = angle + (multiline ? -.5 : 0);
            return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
          };
        })
        .style("fill-opacity", function(e) { return isParentOf(d, e) ? 1 : 1e-6; })
        .each("end", function(e) {
          d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
        });
  }
});
​
function isParentOf(p, c) {
  if (p === c) return true;
  if (p.children) {
    return p.children.some(function(d) {
      return isParentOf(d, c);
    });
  }
  return false;
}
​
function colour(d) {
  if (d.children) {
    // There is a maximum of two children!
    var colours = d.children.map(colour),
        a = d3.hsl(colours[0]),
        b = d3.hsl(colours[1]);
    // L*a*b* might be better here...
    return d3.hsl((a.h + b.h) / 1.2, a.s * 1.8, a.l / 1.15);
  }
  return d.colour || "#fff";
}
​
// Interpolate the scales!
function arcTween(d) {
  var my = maxY(d),
      xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
      yd = d3.interpolate(y.domain(), [d.y, my]),
      yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
  return function(d) {
    return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
  };
}
​
function maxY(d) {
  return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy;
}
​
// https://www.w3.org/WAI/ER/WD-AERT/#color-contrast
function brightness(rgb) {
  return rgb.r * .299 + rgb.g * .587 + rgb.b * .114;
}
​
    launchFullScreen(vis);
​
</script>
    