All examples By author By category About

mdcscry

Full window Github gist

Veggie 2014 Show Reel

I repurposed the seminal [D3 Show Reel] (/mbostock/1256572).
Also co-opted d3.legend.js // (C) 2012 ziggy.jonsson.nyc@gmail.com

I estimated weights until June then began weighing in oz. Date Range is Mar 16, 2014 through Dec 31, 2014. Prices were guaged using Farmer's market, Alfalfa's and King Soopers. It was difficult to determine which indices to use. Prices change over the summer. An example is heirloom tomatoes where we see $2.99-$5.99/pound depending on month and location. I chose the farmer's market prices in many cases. Suprisingly, they turned out to be the most economical and seemed valid markers. Prices for items not in stores are made-up.

Show Reel is a view my 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:
[VeggieBurst 2014](VeggieBurst 2014)
VeggieCirclePack 2014

<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">

svg {
  font-family: "Helvetica Neue", Helvetica;
  font-size:14px;
}

.line {
  fill: none;
  stroke: #FFF;
  stroke-width: 2px;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:.75,0,1;
  stroke-opacity:.5;
}

.legend rect {
  fill:white;
  stroke:black;
  opacity:0.8;}

</style>
<body style="background:#fff;">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3.legend.js"></script>
<script>

// Find the right method, call on correct element
function launchFullScreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {console.log("in launchFullScreen");
    element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);

} else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

var m = [50, 75, 50, 50],
    w = window.innerWidth - m[1] - m[3],
    h = window.innerHeight - m[0] - m[2];

var x,
    y,
    duration = 2000,
    delay = 3500;

var color = d3.scale.category20();
var colorb = d3.scale.category20();
var colorc = d3.scale.category20();

var svg = d3.select("body").append("svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var stocks,
    veggies;
//add DATE AND PRICE SCALES
//var xAxis = d3.svg.axis()
//    .scale(x)
//    .orient("bottom");

//var yAxis = d3.svg.axis()
//    .scale(y)
//    .orient("left");

// A line generator, for the dark stroke.
var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

// A line generator, for the dark stroke.
var axis = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(h);

// A area generator, for the dark stroke.
var area = d3.svg.area()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y1(function(d) { return y(d.price); });

d3.csv("veggie$.csv", function(data) {
  var parse = d3.time.format("%m/%d/%Y").parse;

// Nest stock values by veggie.
  veggies = d3.nest()
      .key(function(d) { return d.veggie; })
      .entries(stocks = data);

// Parse dates and numbers. We assume values are sorted by date.
  // Also compute the maximum price per veggie, needed for the y-domain.
  veggies.forEach(function(s) {
    s.values.forEach(function(d) { d.date = parse(d.date); d.price = +d.price; });
    s.maxPrice = d3.max(s.values, function(d) { return d.price; });
    s.sumPrice = d3.sum(s.values, function(d) { return d.price; });
  });

// Sort by maximum price, descending.
  veggies.sort(function(a, b) { return b.maxPrice - a.maxPrice; });

var g = svg.selectAll("g")
      .data(veggies)
    .enter().append("g")
      .attr("class", "veggie")
      .attr("data-legend",function(d) { return d.key});

//  svg.append("g")
//	  .attr("class", "x axis")
//	  .attr("transform", "translate(0," + height + ")")
//  .call(xAxis);

window.addEventListener("resize", function(){ console.log("resize registered");

svg.attr("width", window.outerWidth + m[1] + m[3])
	    .attr("height", window.innerHeight + m[0] + m[2]);
	w = window.outerWidth - m[1] - m[3],
    h = window.innerHeight - m[0] - m[2];
	console.log("h=" + h);
});
	launchFullScreen(svg);
  setTimeout(lines, duration);
});

function lines() {
  x = d3.time.scale().range([0, w - 60]);
  y = d3.scale.linear().range([h / 14 - 20, 0]);

// Compute the minimum and maximum date across veggies.
  x.domain([
    d3.min(veggies, function(d) { console.log(d.values[0].date); return d.values[0].date;}),
    d3.max(veggies, function(d) { console.log(d.values[d.values.length - 1].date); return d.values[d.values.length - 1].date; })
   ]);

var g = svg.selectAll(".veggie")
      .attr("transform", function(d, i) { return "translate(0," + (i * h / 14 + 10) + ")"; });

g.each(function(d) {
    var e = d3.select(this);

e.append("path")
        .attr("class", "line");

e.append("circle")
        .attr("r", 5)
        .style("fill", function(d) { return colorc(d.key); })
        .style("stroke", "#FFF")
        .style("stroke-width", "2px");

e.append("text")
        .attr("x", 8)
        .attr("dy", ".31em")
        .text(d.key)
        .style("fill", function(d) { return colorc(d.key); });
  });

function draw(k) {
    g.each(function(d) {
      var e = d3.select(this);
      y.domain([0, d.maxPrice]);

e.select("path")
          .attr("d", function(d) { return line(d.values.slice(0, k + 1)); })
		  .style("stroke", function(d) { return colorc(d.key); });
      e.selectAll("circle, text")
          .data(function(d) { return [d.values[k], d.values[k]]; })
          .attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.price) + ")"; });
    });
  }

var k = 1, n = veggies[0].values.length;
  d3.timer(function() {
    draw(k);
    if ((k += 2) >= n - 1) {
      draw(n - 1);
      setTimeout(horizons, 5000);
      return true;
    }
  });
}

function horizons() {
  svg.insert("defs", ".veggie")
    .append("clipPath")
      .attr("id", "clip")
    .append("rect")
      .attr("width", w)
      .attr("height", h / 14 - 20);

var color = d3.scale.ordinal()
      .range(["#00CC00", "#CC0066", "#6600CC" ]);

var g = svg.selectAll(".veggie")
      .attr("clip-path", "url(#clip)");

area
      .y0(h / 14 - 20);

g.select("circle").transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + (w - 60) + "," + (-h / 14) + ")"; })
      .remove();

g.select("text").transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + (w - 60) + "," + (h / 14 - 20) + ")"; })
      .attr("dy", "-.15em")
      .attr("x", -8);

g.each(function(d) {
    y.domain([0, d.maxPrice]);

d3.select(this).selectAll(".area")
        .data(d3.range(3))
      .enter().insert("path", ".line")
        .attr("class", "area")
        .attr("transform", function(d) { return "translate(0," + (d * (h / 14 - 20)) + ")"; })
        .attr("d", area(d.values))
        .style("fill", function(d, i) { return color(i); })
        .style("fill-opacity", 1e-6);

y.domain([0, d.maxPrice / 5]);

d3.select(this).selectAll(".line").transition()
        .duration(duration)
        .attr("d", line(d.values))
        .style("stroke-opacity", 1e-6);

d3.select(this).selectAll(".area").transition()
        .duration(duration)
        .style("fill-opacity", 1)
        .attr("d", area(d.values))
        .each("end", function() { d3.select(this).style("fill-opacity", null); });
  });

setTimeout(areas, duration + delay);
}

function areas() {
  var g = svg.selectAll(".veggie");

axis
      .y(h / 14 - 20);

g.select(".line")
      .attr("d", function(d) { return axis(d.values); });

g.each(function(d) {
    y.domain([0, d.maxPrice]);

d3.select(this).select(".line").transition()
        .duration(duration)
        .style("stroke-opacity", .5)
        .style("stroke", colorb(d.key))
        .each("end", function() { d3.select(this).style("stroke-opacity", null); });

d3.select(this).selectAll(".area")
        .filter(function(d, i) { return i; })
      .transition()
        .duration(duration)
        .style("fill-opacity", 1e-6)
        .attr("d", area(d.values))
        .remove();

d3.select(this).selectAll(".area")
        .filter(function(d, i) { return !i; })
      .transition()
        .duration(duration)
        .style("fill", colorb(d.key))
        .attr("d", area(d.values));
  });

svg.select("defs").transition()
      .duration(duration)
      .remove();

g.transition()
      .duration(duration)
      .each("end", function() { d3.select(this).attr("clip-path", null); });

setTimeout(stackedArea, duration + delay);
}

stack(veggies);

y
      .domain([0, d3.max(veggies[0].values.map(function(d) { return d.price + d.price0; }))])
      .range([h, 0]);

line
      .y(function(d) { return y(d.price0); });

area
      .y0(function(d) { return y(d.price0); })
      .y1(function(d) { return y(d.price0 + d.price); });

var t = svg.selectAll(".veggie").transition()
      .duration(duration)
      .attr("transform", "translate(0,0)")

.each("end", function() { d3.select(this).attr("transform", null); });

t.select("path.area")
      .attr("d", function(d) { return area(d.values); });

t.select("path.line")
      .style("stroke-opacity", function(d, i) { return i < 3 ? 1e-6 : 1; })
      .attr("d", function(d) { return line(d.values); });

t.select("text")
      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; })
	  .attr("display","none");

legend = svg.append("g")
    .attr("class","legend")
    .attr("transform","translate(50,30)")
    .style("font-size","10px")
    .call(d3.legend);
  setTimeout(overlappingArea, duration + delay);
}

stack(veggies);

line
      .y(function(d) { return y(d.price0); });

var t = svg.selectAll(".veggie").transition()
      .duration(duration);

t.select("path.area")
      .attr("d", function(d) { return area(d.values); });

t.select("path.line")
      .style("stroke-opacity", 1e-6)
      .attr("d", function(d) { return line(d.values); });

t.select("text")
      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; });

setTimeout(overlappingArea, duration + delay);
}

function overlappingArea() {
  var g = svg.selectAll(".veggie");

line
      .y(function(d) { return y(d.price0 + d.price); });

g.select(".line")
      .attr("d", function(d) { return line(d.values); });

y
      .domain([0, d3.max(veggies.map(function(d) { return d.maxPrice; }))])
      .range([h, 0]);

area
      .y0(h)
      .y1(function(d) { return y(d.price); });

line
      .y(function(d) { return y(d.price); });

var t = g.transition()
      .duration(duration);

t.select(".line")
      .style("stroke-opacity", 1)
      .attr("d", function(d) { return line(d.values); });

t.select(".area")
      .style("fill-opacity", .5)
      .attr("d", function(d) { return area(d.values); });

t.select("text")
      .attr("dy", ".31em")
      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price) + ")"; });

svg.append("line")
      .attr("class", "line")
      .attr("x1", 0)
      .attr("x2", w - 60)
      .attr("y1", h)
      .attr("y2", h)
      .style("stroke-opacity", 1e-6)
    .transition()
      .duration(duration)
      .style("stroke-opacity", 1);

setTimeout(groupedBar, duration + delay);
}

function groupedBar() {
  x = d3.scale.ordinal()
      .domain(veggies[0].values.map(function(d) { return d.date; }))
      .rangeBands([0, w - 20], .1);

var x1 = d3.scale.ordinal()
      .domain(veggies.map(function(d) { return d.key; }))
      .rangeBands([0, x.rangeBand()]);

var g = svg.selectAll(".veggie");

var t = g.transition()
      .duration(duration);

t.select(".line")
      .style("stroke-opacity", 1e-6)
      .remove();

t.select(".area")
      .style("fill-opacity", 1e-6)
      .remove();

g.each(function(p, j) {
    d3.select(this).selectAll("rect")
        .data(function(d) { return d.values; })
      .enter().append("rect")
        .attr("x", function(d) { return x(d.date) + x1(p.key); })
        .attr("y", function(d) { return y(d.price); })
        .attr("width", x1.rangeBand())
        .attr("height", function(d) { return h - y(d.price); })
        .style("fill", color(p.key))
        .style("fill-opacity", 1e-6)
      .transition()
        .duration(duration)
        .style("fill-opacity", 1);
  });

setTimeout(stackedBar, duration + delay);
}

function stackedBar() {
  x.rangeRoundBands([0, w - 60], .1);

var g = svg.selectAll(".veggie");

stack(veggies);

y
      .domain([0, d3.max(veggies[0].values.map(function(d) { return d.price + d.price0; }))])
      .range([h, 0]);

var t = g.transition()
      .duration(duration / 2);

t.select("text")
      .delay(veggies[0].values.length * 10)
      .attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price / 2 + d.price0) + ")"; });

t.selectAll("rect")
      .delay(function(d, i) { return i * 10; })
      .attr("y", function(d) { return y(d.price0 + d.price); })
      .attr("height", function(d) { return h - y(d.price); })
      .each("end", function() {
        d3.select(this)
            .style("stroke", "#fff")
            .style("stroke-opacity", 1e-6)
          .transition()
            .duration(duration / 2)
            .attr("x", function(d) { return x(d.date); })
            .attr("width", x.rangeBand())
            .style("stroke-opacity", 1);
      });

setTimeout(transposeBar, duration + veggies[0].values.length * 10 + delay);
}

function transposeBar() {
  x
      .domain(veggies.map(function(d) { return d.key; }))
      .rangeRoundBands([0, w], .2);

y
      .domain([0, d3.max(veggies.map(function(d) { return d3.sum(d.values.map(function(d) { return d.price; })); }))]);

var stack = d3.layout.stack()
      .x(function(d, i) { return i; })
      .y(function(d) { return d.price; })
      .out(function(d, y0, y) { d.price0 = y0; });

stack(d3.zip.apply(null, veggies.map(function(d) { return d.values; }))); // transpose!

var g = svg.selectAll(".veggie");

var t = g.transition()
      .duration(duration / 2);

t.selectAll("rect")
      .delay(function(d, i) { return i * 10; })
      .attr("y", function(d) { return y(d.price0 + d.price) - 1; })
      .attr("height", function(d) { return h - y(d.price) + 1; })
      .attr("x", function(d) { return x(d.veggie); })
      .attr("width", x.rangeBand())
      .style("stroke-opacity", 1e-6);

t.select("text")
      .attr("x", 0)
      .attr("transform", function(d) { return "translate(" + (x(d.key) + x.rangeBand() / 2) + "," + h + ")"; })
      .attr("dy", "1.31em")
      .attr("display","block")
      .each("end", function() { d3.select(this).attr("x", null).attr("text-anchor", "middle"); });

svg.select("line").transition()
      .duration(duration)
      .attr("x2", w);

setTimeout(donut,  duration / 2 + veggies[0].values.length * 10 + delay);
}

function donut() {
  var g = svg.selectAll(".veggie");

g.selectAll("rect").remove();

var pie = d3.layout.pie()
      .value(function(d) { return d.sumPrice; });

var arc = d3.svg.arc();

g.append("path")
      .style("fill", function(d) { return color(d.key); })
      .data(function() { return pie(veggies); })
    .transition()
      .duration(duration)
      .tween("arc", arcTween);

g.select("text").transition()
      .duration(duration)
      .attr("dy", ".31em")
      .style("fill", "#000" );

svg.select("line").transition()
      .duration(duration)
      .attr("y1", 2 * h)
      .attr("y2", 2 * h)
      .remove();

function arcTween(d) {
    var path = d3.select(this),
        text = d3.select(this.parentNode.appendChild(this.previousSibling)),
        x0 = x(d.data.key),
        y0 = h - y(d.data.sumPrice);

return function(t) {
      var r = h / 2 / Math.min(1, t + 1e-3),
          a = Math.cos(t * Math.PI / 2),
          xx = (-r + (a) * (x0 + x.rangeBand()) + (1 - a) * (w + h) / 2),
          yy = ((a) * h + (1 - a) * h / 2),
          f = {
            innerRadius: r - x.rangeBand() / (2 - a),
            outerRadius: r,
            startAngle: a * (Math.PI / 2 - y0 / r) + (1 - a) * d.startAngle,
            endAngle: a * (Math.PI / 2) + (1 - a) * d.endAngle
          };

path.attr("transform", "translate(" + xx + "," + yy + ")");
      path.attr("d", arc(f));
      text.attr("transform", "translate(" + arc.centroid(f) + ")translate(" + xx + "," + yy + ")rotate(" + ((f.startAngle + f.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
    };
  }

setTimeout(donutExplode, duration + delay);
}

function donutExplode() {
  var r0a = h / 2 - x.rangeBand() / 2,
      r1a = h / 2,
      r0b = 2 * h - x.rangeBand() / 2,
      r1b = 2 * h,
      arc = d3.svg.arc();

svg.selectAll(".veggie path")
      .each(transitionExplode);

function transitionExplode(d, i) {
    d.innerRadius = r0a;
    d.outerRadius = r1a;
    d3.select(this).transition()
        .duration(duration / 2)
        .tween("arc", tweenArc({
          innerRadius: r0b,
          outerRadius: r1b
        }));
  }

setTimeout(function() {
    svg.selectAll("*").remove();
    svg.selectAll("g").data(veggies).enter().append("g").attr("class", "veggie");
    lines();
  }, duration);
}

</script>

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

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