|
<!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> |