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.

Other viz include:
Veggie 2014 Show Reel
VeggieCirclePack 2014

<!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; });

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);

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js