Bring showreel example up-to-date
This commit is contained in:
Kristofer Monisit
Родитель
003dd7dd76
Коммит
82af78cbd3
|
|
@ -22,22 +22,26 @@ svg {
|
|||
<body>
|
||||
<script type="text/javascript">
|
||||
|
||||
var m = [120, 60, 60, 60],
|
||||
w = 1280 - m[1] - m[3],
|
||||
h = 720 - m[0] - m[2];
|
||||
var margin = {top: 120, right: 60, bottom: 60, left: 60},
|
||||
width = 1280 - margin.right - margin.left,
|
||||
height = 720 - margin.top - margin.bottom;
|
||||
|
||||
var x = d3.time.scale().range([0, w - 60]),
|
||||
y = d3.scale.linear().range([h / 4 - 20, 0]),
|
||||
duration = 1500,
|
||||
var x = d3.time.scale()
|
||||
.range([0, width - 60]);
|
||||
|
||||
var y = d3.scale.linear()
|
||||
.range([height / 4 - 20, 0]);
|
||||
|
||||
var duration = 1500,
|
||||
delay = 500;
|
||||
|
||||
var color = d3.scale.category10();
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", w + m[1] + m[3])
|
||||
.attr("height", h + m[0] + m[2])
|
||||
.attr("width", width + margin.right + margin.left)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
var stocks,
|
||||
symbols;
|
||||
|
|
@ -52,13 +56,13 @@ var line = d3.svg.line()
|
|||
var axis = d3.svg.line()
|
||||
.interpolate("basis")
|
||||
.x(function(d) { return x(d.date); })
|
||||
.y(h);
|
||||
.y(height);
|
||||
|
||||
// A area generator, for the dark stroke.
|
||||
var area = d3.svg.area()
|
||||
.interpolate("basis")
|
||||
.x(function(d) { return x(d.date); })
|
||||
.y0(h / 4 - 20)
|
||||
.y0(height / 4 - 20)
|
||||
.y1(function(d) { return y(d.price); });
|
||||
|
||||
d3.csv("../data/stocks.csv", function(data) {
|
||||
|
|
@ -100,7 +104,7 @@ d3.csv("../data/stocks.csv", function(data) {
|
|||
function lines() {
|
||||
|
||||
var g = svg.selectAll(".symbol")
|
||||
.attr("transform", function(d, i) { return "translate(0," + i * h / 4 + ")"; });
|
||||
.attr("transform", function(d, i) { return "translate(0," + i * height / 4 + ")"; });
|
||||
|
||||
g.each(function(d) {
|
||||
var e = d3.select(this);
|
||||
|
|
@ -150,8 +154,8 @@ function horizons() {
|
|||
.append("clipPath")
|
||||
.attr("id", "clip")
|
||||
.append("rect")
|
||||
.attr("width", w)
|
||||
.attr("height", h / 4 - 20);
|
||||
.attr("width", width)
|
||||
.attr("height", height / 4 - 20);
|
||||
|
||||
var color = d3.scale.ordinal()
|
||||
.range(["#c6dbef", "#9ecae1", "#6baed6"]);
|
||||
|
|
@ -161,12 +165,12 @@ function horizons() {
|
|||
|
||||
g.select("circle").transition()
|
||||
.duration(duration)
|
||||
.attr("transform", function(d) { return "translate(" + (w - 60) + "," + (-h / 4) + ")"; })
|
||||
.attr("transform", function(d) { return "translate(" + (width - 60) + "," + (-height / 4) + ")"; })
|
||||
.remove();
|
||||
|
||||
g.select("text").transition()
|
||||
.duration(duration)
|
||||
.attr("transform", function(d) { return "translate(" + (w - 60) + "," + (h / 4 - 20) + ")"; })
|
||||
.attr("transform", function(d) { return "translate(" + (width - 60) + "," + (height / 4 - 20) + ")"; })
|
||||
.attr("dy", "0em");
|
||||
|
||||
g.each(function(d) {
|
||||
|
|
@ -176,7 +180,7 @@ function horizons() {
|
|||
.data(d3.range(3))
|
||||
.enter().insert("path", ".line")
|
||||
.attr("class", "area")
|
||||
.attr("transform", function(d) { return "translate(0," + (d * (h / 4 - 20)) + ")"; })
|
||||
.attr("transform", function(d) { return "translate(0," + (d * (height / 4 - 20)) + ")"; })
|
||||
.attr("d", area(d.values))
|
||||
.style("fill", function(d, i) { return color(i); })
|
||||
.style("fill-opacity", 1e-6);
|
||||
|
|
@ -202,7 +206,7 @@ function areas() {
|
|||
var g = svg.selectAll(".symbol");
|
||||
|
||||
axis
|
||||
.y(h / 4 - 21);
|
||||
.y(height / 4 - 21);
|
||||
|
||||
g.select(".line")
|
||||
.attr("d", function(d) { return axis(d.values); });
|
||||
|
|
@ -254,7 +258,7 @@ function stackedArea() {
|
|||
|
||||
y
|
||||
.domain([0, d3.max(symbols[0].values.map(function(d) { return d.price + d.price0; }))])
|
||||
.range([h, 0]);
|
||||
.range([height, 0]);
|
||||
|
||||
line
|
||||
.y(function(d) { return y(d.price0); });
|
||||
|
|
@ -276,7 +280,7 @@ function stackedArea() {
|
|||
.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("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (width - 60) + "," + y(d.price / 2 + d.price0) + ")"; });
|
||||
|
||||
setTimeout(streamgraph, duration + delay);
|
||||
}
|
||||
|
|
@ -306,7 +310,7 @@ function streamgraph() {
|
|||
.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("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (width - 60) + "," + y(d.price / 2 + d.price0) + ")"; });
|
||||
|
||||
setTimeout(overlappingArea, duration + delay);
|
||||
}
|
||||
|
|
@ -322,10 +326,10 @@ function overlappingArea() {
|
|||
|
||||
y
|
||||
.domain([0, d3.max(symbols.map(function(d) { return d.maxPrice; }))])
|
||||
.range([h, 0]);
|
||||
.range([height, 0]);
|
||||
|
||||
area
|
||||
.y0(h)
|
||||
.y0(height)
|
||||
.y1(function(d) { return y(d.price); });
|
||||
|
||||
line
|
||||
|
|
@ -344,14 +348,14 @@ function overlappingArea() {
|
|||
|
||||
t.select("text")
|
||||
.attr("dy", ".31em")
|
||||
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (w - 60) + "," + y(d.price) + ")"; });
|
||||
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (width - 60) + "," + y(d.price) + ")"; });
|
||||
|
||||
svg.append("line")
|
||||
.attr("class", "line")
|
||||
.attr("x1", 0)
|
||||
.attr("x2", w - 60)
|
||||
.attr("y1", h)
|
||||
.attr("y2", h)
|
||||
.attr("x2", width - 60)
|
||||
.attr("y1", height)
|
||||
.attr("y2", height)
|
||||
.style("stroke-opacity", 1e-6)
|
||||
.transition()
|
||||
.duration(duration)
|
||||
|
|
@ -363,7 +367,7 @@ function overlappingArea() {
|
|||
function groupedBar() {
|
||||
x = d3.scale.ordinal()
|
||||
.domain(symbols[0].values.map(function(d) { return d.date; }))
|
||||
.rangeBands([0, w - 60], .1);
|
||||
.rangeBands([0, width - 60], .1);
|
||||
|
||||
var x1 = d3.scale.ordinal()
|
||||
.domain(symbols.map(function(d) { return d.key; }))
|
||||
|
|
@ -389,7 +393,7 @@ function groupedBar() {
|
|||
.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); })
|
||||
.attr("height", function(d) { return height - y(d.price); })
|
||||
.style("fill", color(p.key))
|
||||
.style("fill-opacity", 1e-6)
|
||||
.transition()
|
||||
|
|
@ -401,7 +405,7 @@ function groupedBar() {
|
|||
}
|
||||
|
||||
function stackedBar() {
|
||||
x.rangeRoundBands([0, w - 60], .1);
|
||||
x.rangeRoundBands([0, width - 60], .1);
|
||||
|
||||
var stack = d3.layout.stack()
|
||||
.values(function(d) { return d.values; })
|
||||
|
|
@ -416,19 +420,19 @@ function stackedBar() {
|
|||
|
||||
y
|
||||
.domain([0, d3.max(symbols[0].values.map(function(d) { return d.price + d.price0; }))])
|
||||
.range([h, 0]);
|
||||
.range([height, 0]);
|
||||
|
||||
var t = g.transition()
|
||||
.duration(duration / 2);
|
||||
|
||||
t.select("text")
|
||||
.delay(symbols[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) + ")"; });
|
||||
.attr("transform", function(d) { d = d.values[d.values.length - 1]; return "translate(" + (width - 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); })
|
||||
.attr("height", function(d) { return height - y(d.price); })
|
||||
.each("end", function() {
|
||||
d3.select(this)
|
||||
.style("stroke", "#fff")
|
||||
|
|
@ -446,7 +450,7 @@ function stackedBar() {
|
|||
function transposeBar() {
|
||||
x
|
||||
.domain(symbols.map(function(d) { return d.key; }))
|
||||
.rangeRoundBands([0, w], .2);
|
||||
.rangeRoundBands([0, width], .2);
|
||||
|
||||
y
|
||||
.domain([0, d3.max(symbols.map(function(d) { return d3.sum(d.values.map(function(d) { return d.price; })); }))]);
|
||||
|
|
@ -466,20 +470,20 @@ function transposeBar() {
|
|||
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("height", function(d) { return height - y(d.price) + 1; })
|
||||
.attr("x", function(d) { return x(d.symbol); })
|
||||
.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("transform", function(d) { return "translate(" + (x(d.key) + x.rangeBand() / 2) + "," + height + ")"; })
|
||||
.attr("dy", "1.31em")
|
||||
.each("end", function() { d3.select(this).attr("x", null).attr("text-anchor", "middle"); });
|
||||
|
||||
svg.select("line").transition()
|
||||
.duration(duration)
|
||||
.attr("x2", w);
|
||||
.attr("x2", width);
|
||||
|
||||
setTimeout(donut, duration / 2 + symbols[0].values.length * 10 + delay);
|
||||
}
|
||||
|
|
@ -507,21 +511,21 @@ function donut() {
|
|||
|
||||
svg.select("line").transition()
|
||||
.duration(duration)
|
||||
.attr("y1", 2 * h)
|
||||
.attr("y2", 2 * h)
|
||||
.attr("y1", 2 * height)
|
||||
.attr("y2", 2 * height)
|
||||
.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);
|
||||
y0 = height - y(d.data.sumPrice);
|
||||
|
||||
return function(t) {
|
||||
var r = h / 2 / Math.min(1, t + 1e-3),
|
||||
var r = height / 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),
|
||||
xx = (-r + (a) * (x0 + x.rangeBand()) + (1 - a) * (width + height) / 2),
|
||||
yy = ((a) * height + (1 - a) * height / 2),
|
||||
f = {
|
||||
innerRadius: r - x.rangeBand() / (2 - a),
|
||||
outerRadius: r,
|
||||
|
|
@ -540,8 +544,8 @@ function donut() {
|
|||
|
||||
/*
|
||||
function donutTransition() {
|
||||
var r0 = h / 2 - x.rangeBand() / 2,
|
||||
r1 = h / 2,
|
||||
var r0 = height / 2 - x.rangeBand() / 2,
|
||||
r1 = height / 2,
|
||||
pie1 = d3.layout.pie().value(function(d) { return d.sumPrice; })(symbols),
|
||||
pie2 = d3.layout.pie().value(function(d) { return d.maxPrice; })(symbols),
|
||||
arc = d3.svg.arc();
|
||||
|
|
@ -606,7 +610,7 @@ function donutTransition() {
|
|||
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 + ")");
|
||||
text.attr("transform", "translate(" + arc.centroid(a) + ")translate(" + width / 2 + "," + height / 2 +")rotate(" + ((a.startAngle + a.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -616,10 +620,10 @@ function donutTransition() {
|
|||
*/
|
||||
|
||||
function donutExplode() {
|
||||
var r0a = h / 2 - x.rangeBand() / 2,
|
||||
r1a = h / 2,
|
||||
r0b = 2 * h - x.rangeBand() / 2,
|
||||
r1b = 2 * h,
|
||||
var r0a = height / 2 - x.rangeBand() / 2,
|
||||
r1a = height / 2,
|
||||
r0b = 2 * height - x.rangeBand() / 2,
|
||||
r1b = 2 * height,
|
||||
arc = d3.svg.arc();
|
||||
|
||||
svg.selectAll(".symbol path")
|
||||
|
|
@ -645,7 +649,7 @@ function donutExplode() {
|
|||
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 + ")");
|
||||
text.attr("transform", "translate(" + arc.centroid(a) + ")translate(" + width / 2 + "," + height / 2 +")rotate(" + ((a.startAngle + a.endAngle) / 2 + 3 * Math.PI / 2) * 180 / Math.PI + ")");
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче