mdcscry · August 29, 2015 14:12
diff --git a/README.md b/README.md
diff --git a/d3.legend.js b/d3.legend.js
 // d3.legend.js
 // (C) 2012 ziggy.jonsson.nyc@gmail.com
 // MIT licence

 (function() {
 d3.legend = function(g) {
  g.each(function() {
    var g= d3.select(this),
        items = {},
        svg = d3.select(g.property("nearestViewportElement")),
        legendPadding = g.attr("data-style-padding") || 5,
        lb = g.selectAll(".legend-box").data([true]),
        li = g.selectAll(".legend-items").data([true])

    lb.enter().append("rect").classed("legend-box",true)
    li.enter().append("g").classed("legend-items",true)

    svg.selectAll("[data-legend]").each(function() {
        var self = d3.select(this)
        items[self.attr("data-legend")] = {
          pos : self.attr("data-legend-pos") || this.getBBox().y,
          color : self.attr("data-legend-color") != undefined ? self.attr("data-legend-color") : self.style("fill") != 'none' ? self.style("fill") : self.style("stroke")
        }
      })

    items = d3.entries(items).sort(function(a,b) { return a.value.pos-b.value.pos})


    li.selectAll("text")
        .data(items,function(d) { return d.key})
        .call(function(d) { d.enter().append("text")})
        .call(function(d) { d.exit().remove()})
        .attr("y",function(d,i) { return i+"em"})
        .attr("x","1.5em")
        .attr("fill","black")
        .text(function(d) { ;return d.key})

    li.selectAll("circle")
        .data(items,function(d) { return d.key})
        .call(function(d) { d.enter().append("circle")})
        .call(function(d) { d.exit().remove()})
        .attr("cy",function(d,i) { return i-0.25+"em"})
        .attr("cx",0)
        .attr("r","0.4em")
        .style("fill",function(d) { return color(d.key);});

    // Reposition and resize the box
    var lbbox = li[0][0].getBBox()
    lb.attr("x",(lbbox.x-legendPadding))
        .attr("y",(lbbox.y-legendPadding))
        .attr("height",(lbbox.height+2*legendPadding))
        .attr("width",(lbbox.width+2*legendPadding))
        .attr("rx",20)
        .attr("ry",20)
  })
  console.log("holycow");
  return g
 }
 })()
diff --git a/index.html b/index.html
 <!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="http://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);
 }

 function stackedArea() {
  var stack = d3.layout.stack()
      .values(function(d) { return d.values; })
      .x(function(d) { return d.date; })
      .y(function(d) { return d.price; })
      .out(function(d, y0, y) { d.price0 = y0; })
      .order("reverse");

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

 function streamgraph() {
  var stack = d3.layout.stack()
      .values(function(d) { return d.values; })
      .x(function(d) { return d.date; })
      .y(function(d) { return d.price; })
      .out(function(d, y0, y) { d.price0 = y0; })
      .order("reverse")
      .offset("wiggle");

  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 stack = d3.layout.stack()
      .values(function(d) { return d.values; })
      .x(function(d) { return d.date; })
      .y(function(d) { return d.price; })
      .out(function(d, y0, y) { d.price0 = y0; })
      .order("reverse");

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

  function tweenArc(b) {
    return function(a) {
      var path = d3.select(this),
          text = d3.select(this.nextSibling),
          i = d3.interpolate(a, b);
      for (var key in b) a[key] = b[key]; // update data
      return function(t) {
        var a = i(t);
        path.attr("d", arc(a));
        text.attr("transform", "translate(" + arc.centroid(a) + ")translate(" + w / 2 + "," + h / 2 +")rotate(" + ((a.startAngle + a.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
      };
    }
  }

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

 </script>
diff --git a/veggie$.csv b/veggie$.csv
	// d3.legend.js
	// (C) 2012 ziggy.jonsson.nyc@gmail.com
	// MIT licence

	(function() {
	d3.legend = function(g) {
	g.each(function() {
	var g= d3.select(this),
	items = {},
	svg = d3.select(g.property("nearestViewportElement")),
	legendPadding = g.attr("data-style-padding") \|\| 5,
	lb = g.selectAll(".legend-box").data([true]),
	li = g.selectAll(".legend-items").data([true])

	lb.enter().append("rect").classed("legend-box",true)
	li.enter().append("g").classed("legend-items",true)

	svg.selectAll("[data-legend]").each(function() {
	var self = d3.select(this)
	items[self.attr("data-legend")] = {
	pos : self.attr("data-legend-pos") \|\| this.getBBox().y,
	color : self.attr("data-legend-color") != undefined ? self.attr("data-legend-color") : self.style("fill") != 'none' ? self.style("fill") : self.style("stroke")
	}
	})

	items = d3.entries(items).sort(function(a,b) { return a.value.pos-b.value.pos})


	li.selectAll("text")
	.data(items,function(d) { return d.key})
	.call(function(d) { d.enter().append("text")})
	.call(function(d) { d.exit().remove()})
	.attr("y",function(d,i) { return i+"em"})
	.attr("x","1.5em")
	.attr("fill","black")
	.text(function(d) { ;return d.key})

	li.selectAll("circle")
	.data(items,function(d) { return d.key})
	.call(function(d) { d.enter().append("circle")})
	.call(function(d) { d.exit().remove()})
	.attr("cy",function(d,i) { return i-0.25+"em"})
	.attr("cx",0)
	.attr("r","0.4em")
	.style("fill",function(d) { return color(d.key);});

	// Reposition and resize the box
	var lbbox = li[0][0].getBBox()
	lb.attr("x",(lbbox.x-legendPadding))
	.attr("y",(lbbox.y-legendPadding))
	.attr("height",(lbbox.height+2*legendPadding))
	.attr("width",(lbbox.width+2*legendPadding))
	.attr("rx",20)
	.attr("ry",20)
	})
	console.log("holycow");
	return g
	}
	})()
	<!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="http://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);
	}

	function stackedArea() {
	var stack = d3.layout.stack()
	.values(function(d) { return d.values; })
	.x(function(d) { return d.date; })
	.y(function(d) { return d.price; })
	.out(function(d, y0, y) { d.price0 = y0; })
	.order("reverse");

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

	function streamgraph() {
	var stack = d3.layout.stack()
	.values(function(d) { return d.values; })
	.x(function(d) { return d.date; })
	.y(function(d) { return d.price; })
	.out(function(d, y0, y) { d.price0 = y0; })
	.order("reverse")
	.offset("wiggle");

	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 stack = d3.layout.stack()
	.values(function(d) { return d.values; })
	.x(function(d) { return d.date; })
	.y(function(d) { return d.price; })
	.out(function(d, y0, y) { d.price0 = y0; })
	.order("reverse");

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

	function tweenArc(b) {
	return function(a) {
	var path = d3.select(this),
	text = d3.select(this.nextSibling),
	i = d3.interpolate(a, b);
	for (var key in b) a[key] = b[key]; // update data
	return function(t) {
	var a = i(t);
	path.attr("d", arc(a));
	text.attr("transform", "translate(" + arc.centroid(a) + ")translate(" + w / 2 + "," + h / 2 +")rotate(" + ((a.startAngle + a.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
	};
	}
	}

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

	</script>