30:T4585,Original = async () => { var m = [20, 20, 30, 20], w = 960 - m[1] - m[3], h = 500 - m[0] - m[2]; var x, y, duration = 1500, delay = 500; var color = d3.scaleOrdinal().range(d3.schemeCategory10); var svg = d33 .select(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, symbols; // A line generator, for the dark stroke. var line = d3 .line() .curve(d3.curveBasis) .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.price); }); // A line generator, for the dark stroke. var axis = d33.svg .line() .interpolate("basis") .x(function(d) { return x(d.date); }) .y(h); // A area generator, for the dark stroke. var area = d33.svg .area() .interpolate("basis") .x(function(d) { return x(d.date); }) .y1(function(d) { return y(d.price); }); var parse = d33.time.format("%b %Y").parse; symbols = _.cloneDeep(Symbols); svg .selectAll("g") .data(symbols) .enter() .append("g") .attr("class", "symbol"); setTimeout(lines, duration); function lines() { x = d33.time.scale().range([0, w - 60]); y = d33.scale.linear().range([h / 4 - 20, 0]); // Compute the minimum and maximum date across symbols. x.domain([ d33.min(symbols, function(d) { return d.values[0].date; }), d33.max(symbols, function(d) { return d.values[d.values.length - 1].date; }) ]); var g = svg.selectAll(".symbol").attr("transform", function(d, i) { return "translate(0," + ((i * h) / 4 + 10) + ")"; }); g.each(function(d) { var e = d33.select(this); e.append("path").attr("class", "line"); e.append("circle") .attr("r", 5) .style("fill", function(d) { return color(d.key); }) .style("stroke", "#000") .style("stroke-width", "2px"); e.append("text") .attr("x", 12) .attr("dy", ".31em") .text(d.key); }); function draw(k) { g.each(function(d) { var e = d33.select(this); y.domain([0, d.maxPrice]); e.select("path").attr("d", function(d) { return line(d.values.slice(0, k + 1)); }); 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 = symbols[0].values.length; d33.timer(function() { draw(k); if ((k += 2) >= n - 1) { draw(n - 1); setTimeout(horizons, 500); return true; } }); } function horizons() { svg .insert("defs", ".symbol") .append("clipPath") .attr("id", "clip") .append("rect") .attr("width", w) .attr("height", h / 4 - 20); var color = d33.scale.ordinal().range(["#c6dbef", "#9ecae1", "#6baed6"]); var g = svg.selectAll(".symbol").attr("clip-path", "url(#clip)"); area.y0(h / 4 - 20); g.select("circle") .transition() .duration(duration) .attr("transform", function(d) { return "translate(" + (w - 60) + "," + -h / 4 + ")"; }) .remove(); g.select("text") .transition() .duration(duration) .attr("transform", function(d) { return "translate(" + (w - 60) + "," + (h / 4 - 20) + ")"; }) .attr("dy", "0em"); g.each(function(d) { y.domain([0, d.maxPrice]); d33 .select(this) .selectAll(".area") .data(d33.range(3)) .enter() .insert("path", ".line") .attr("class", "area") .attr("transform", function(d) { return "translate(0," + d * (h / 4 - 20) + ")"; }) .attr("d", area(d.values)) .style("fill", function(d, i) { return color(i); }) .style("fill-opacity", 1e-6); y.domain([0, d.maxPrice / 3]); d33 .select(this) .selectAll(".line") .transition() .duration(duration) .attr("d", line(d.values)) .style("stroke-opacity", 1e-6); d33 .select(this) .selectAll(".area") .transition() .duration(duration) .style("fill-opacity", 1) .attr("d", area(d.values)) .each("end", function() { d33.select(this).style("fill-opacity", null); }); }); setTimeout(areas, duration + delay); } function areas() { var g = svg.selectAll(".symbol"); axis.y(h / 4 - 21); g.select(".line").attr("d", function(d) { return axis(d.values); }); g.each(function(d) { y.domain([0, d.maxPrice]); d33 .select(this) .select(".line") .transition() .duration(duration) .style("stroke-opacity", 1) .each("end", function() { d33.select(this).style("stroke-opacity", null); }); d33 .select(this) .selectAll(".area") .filter(function(d, i) { return i; }) .transition() .duration(duration) .style("fill-opacity", 1e-6) .attr("d", area(d.values)) .remove(); d33 .select(this) .selectAll(".area") .filter(function(d, i) { return !i; }) .transition() .duration(duration) .style("fill", color(d.key)) .attr("d", area(d.values)); }); svg .select("defs") .transition() .duration(duration) .remove(); g.transition() .duration(duration) .each("end", function() { d33.select(this).attr("clip-path", null); }); setTimeout(stackedArea, duration + delay); } function stackedArea() { var stack = d33.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(symbols); y.domain([ 0, d33.max( symbols[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(".symbol") .transition() .duration(duration) .attr("transform", "translate(0,0)") .each("end", function() { d33.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) + ")"; }); setTimeout(streamgraph, duration + delay); } function streamgraph() { var stack = d33.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(symbols); line.y(function(d) { return y(d.price0); }); var t = svg .selectAll(".symbol") .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(".symbol"); line.y(function(d) { return y(d.price0 + d.price); }); g.select(".line").attr("d", function(d) { return line(d.values); }); y.domain([ 0, d33.max( symbols.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 = d33.scale .ordinal() .domain( symbols[0].values.map(function(d) { return d.date; }) ) .rangeBands([0, w - 60], .1); var x1 = d33.scale .ordinal() .domain( symbols.map(function(d) { return d.key; }) ) .rangeBands([0, x.rangeBand()]); var g = svg.selectAll(".symbol"); 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) { d33 .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 stact3=d3.stack(). var stack = d33.layout .stack() .x(function(d) { return d.date; }) .y(function(d) { return d.price; }) .values(function(d) { return d.values; }) .out(function(d, y0, y) { d.price0 = y0; }) .order("reverse"); var g = svg.selectAll(".symbol"); stack(symbols); y.domain([ 0, d33.max( symbols[0].values.map(function(d) { return d.price + d.price0; }) ) ]).range([h, 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) + ")"; }); 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() { d33 .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 + symbols[0].values.length * 10 + delay); } function transposeBar() { x.domain( symbols.map(function(d) { return d.key; }) ).rangeRoundBands([0, w], .2); y.domain([ 0, d33.max( symbols.map(function(d) { return d33.sum( d.values.map(function(d) { return d.price; }) ); }) ) ]); var stack = d33.layout .stack() .x(function(d, i) { return i; }) .y(function(d) { return d.price; }) .out(function(d, y0, y) { d.price0 = y0; }); stack( d33.zip.apply( null, symbols.map(function(d) { return d.values; }) ) ); // transpose! var g = svg.selectAll(".symbol"); 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.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("dy", "1.31em") .each("end", function() { d33 .select(this) .attr("x", null) .attr("text-anchor", "middle"); }); svg .select("line") .transition() .duration(duration) .attr("x2", w); setTimeout(donut, duration / 2 + symbols[0].values.length * 10 + delay); } function donut() { var g = svg.selectAll(".symbol"); g.selectAll("rect").remove(); var pie = d33.layout.pie().value(function(d) { return d.sumPrice; }); var arc = d33.svg.arc(); g.append("path") .style("fill", function(d) { return color(d.key); }) .data(function() { return pie(symbols); }) .transition() .duration(duration) .tween("arc", arcTween); g.select("text") .transition() .duration(duration) .attr("dy", ".31em"); svg .select("line") .transition() .duration(duration) .attr("y1", 2 * h) .attr("y2", 2 * h) .remove(); function arcTween(d) { var path = d33.select(this), text = d33.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 = d33.svg.arc(); svg.selectAll(".symbol path").each(transitionExplode); function transitionExplode(d, i) { d.innerRadius = r0a; d.outerRadius = r1a; d33 .select(this) .transition() .duration(duration / 2) .tween( "arc", tweenArc({ innerRadius: r0b, outerRadius: r1b }) ); } function tweenArc(b) { return function(a) { var path = d33.select(this), text = d33.select(this.nextSibling), i = d33.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(symbols) .enter() .append("g") .attr("class", "symbol"); lines(); }, duration); } return SVG; }31:T44ca,UpdatedES6 = { const m = [20, 20, 30, 20]; const w = 960 - m[1] - m[3]; const h = 500 - m[0] - m[2]; let x; let y; const duration = 1500; const delay = 500; const color = d33.scale.category10(); const SVG = d3 .create('svg') .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]); let svg = d33 .select(SVG.node()) .append("g") .attr("transform", `translate(${m[3]},${m[0]})`); let stocks; let symbols = Symbols; // A line generator, for the dark stroke. const line = d3 .line() .curve(d3.curveBasis) .x(({ date }) => { return x(date); }) .y(({ price }) => { return y(price); }); // A line generator, for the dark stroke. const axis = d3 .line() .curve(d3.curveBasis) .x(({ date }) => { return x(date); }) .y(h); // A area generator, for the dark stroke. const area = d3 .area() .curve(d3.curveBasis) .x(({ date }) => x(date)) .y1(({ price }) => y(price)); const parse = d33.time.format("%b %Y").parse; const g = svg .selectAll("g") .data(symbols) .enter() .append("g") .attr("class", "symbol"); setTimeout(lines, duration); function lines() { x = d3.scaleTime().range([0, w - 60]); y = d33.scale.linear().range([h / 4 - 20, 0]); // Compute the minimum and maximum date across symbols. x.domain([ d33.min(symbols, ({ values }) => { return values[0].date; }), d33.max(symbols, ({ values }) => { return values[values.length - 1].date; }) ]); const g = svg.selectAll(".symbol").attr("transform", (d, i) => { return `translate(0,${(i * h) / 4 + 10})`; }); g.each(function({ key }) { const e = d33.select(this); e.append("path").attr("class", "line"); e.append("circle") .attr("r", 5) .style("fill", ({ key }) => { return color(key); }) .style("stroke", "#000") .style("stroke-width", "2px"); e.append("text") .attr("x", 12) .attr("dy", ".31em") .text(key); }); function draw(k) { g.each(function({ maxPrice }) { const e = d3.select(this); y.domain([0, maxPrice]); e.select("path").attr("d", ({ values }) => { return line(values.slice(0, k + 1)); }); e.selectAll("circle, text") .data(({ values }) => { return [values[k], values[k]]; }) .attr("transform", ({ date, price }) => { return `translate(${x(date)},${y(price)})`; }); }); } let k = 1; const n = symbols[0].values.length; d33.timer(() => { draw(k); if ((k += 2) >= n - 1) { draw(n - 1); setTimeout(horizons, 500); return true; } }); } function horizons() { svg .insert("defs", ".symbol") .append("clipPath") .attr("id", "clip") .append("rect") .attr("width", w) .attr("height", h / 4 - 20); const color = d33.scale.ordinal().range(["#c6dbef", "#9ecae1", "#6baed6"]); const g = svg.selectAll(".symbol").attr("clip-path", "url(#clip)"); area.y0(h / 4 - 20); g.select("circle") .transition() .duration(duration) .attr("transform", d => { return `translate(${w - 60},${-h / 4})`; }) .remove(); g.select("text") .transition() .duration(duration) .attr("transform", d => { return `translate(${w - 60},${h / 4 - 20})`; }) .attr("dy", "0em"); g.each(function({ maxPrice, values }) { y.domain([0, maxPrice]); d33 .select(this) .selectAll(".area") .data(d33.range(3)) .enter() .insert("path", ".line") .attr("class", "area") .attr("transform", d => { return `translate(0,${d * (h / 4 - 20)})`; }) .attr("d", area(values)) .style("fill", (d, i) => { return color(i); }) .style("fill-opacity", 1e-6); y.domain([0, maxPrice / 3]); d33 .select(this) .selectAll(".line") .transition() .duration(duration) .attr("d", line(values)) .style("stroke-opacity", 1e-6); d33 .select(this) .selectAll(".area") .transition() .duration(duration) .style("fill-opacity", 1) .attr("d", area(values)) .each("end", function() { d33.select(this).style("fill-opacity", null); }); }); setTimeout(areas, duration + delay); } function areas() { const g = d33.selectAll(".symbol"); axis.y(h / 4 - 21); g.select(".line").attr("d", ({ values }) => { return axis(values); }); g.each(function({ maxPrice, values, key }) { y.domain([0, maxPrice]); d33 .select(this) .select(".line") .transition() .duration(duration) .style("stroke-opacity", 1) .each("end", function() { d3.select(this).style("stroke-opacity", null); }); d33 .select(this) .selectAll(".area") .filter((d, i) => { return i; }) .transition() .duration(duration) .style("fill-opacity", 1e-6) .attr("d", area(values)) .remove(); d33 .select(this) .selectAll(".area") .filter((d, i) => { return !i; }) .transition() .duration(duration) .style("fill", color(key)) .attr("d", area(values)); }); svg .select("defs") .transition() .duration(duration) .remove(); g.transition() .duration(duration) .each("end", function() { d33.select(this).attr("clip-path", null); }); setTimeout(stackedArea, duration + delay); } function stackedArea() { const stack = d33.layout .stack() .values(({ values }) => { return values; }) .x(({ date }) => { return date; }) .y(({ price }) => { return price; }) .out((d, y0, y) => { d.price0 = y0; }) .order("reverse"); stack(symbols); y.domain([ 0, d33.max( symbols[0].values.map(({ price, price0 }) => { return price + price0; }) ) ]).range([h, 0]); line.y(({ price0 }) => { return y(price0); }); area .y0(({ price0 }) => { return y(price0); }) .y1(({ price0, price }) => { return y(price0 + price); }); const t = svg .selectAll(".symbol") .transition() .duration(duration) .attr("transform", "translate(0,0)") .each("end", function() { d3.select(this).attr("transform", null); }); t.select("path.area").attr("d", ({ values }) => { return area(values); }); t.select("path.line") .style("stroke-opacity", (d, i) => { return i < 3 ? 1e-6 : 1; }) .attr("d", ({ values }) => { return line(values); }); t.select("text").attr("transform", d => { d = d.values[d.values.length - 1]; return `translate(${w - 60},${y(d.price / 2 + d.price0)})`; }); setTimeout(streamgraph, duration + delay); } function streamgraph() { const stack = d33.layout .stack() .values(({ values }) => { return values; }) .x(({ date }) => { return date; }) .y(({ price }) => { return price; }) .out((d, y0, y) => { d.price0 = y0; }) .order("reverse") .offset("wiggle"); stack(symbols); line.y(({ price0 }) => { return y(price0); }); const t = svg .selectAll(".symbol") .transition() .duration(duration); t.select("path.area").attr("d", ({ values }) => { return area(values); }); t.select("path.line") .style("stroke-opacity", 1e-6) .attr("d", ({ values }) => { return line(values); }); t.select("text").attr("transform", d => { d = d.values[d.values.length - 1]; return `translate(${w - 60},${y(d.price / 2 + d.price0)})`; }); setTimeout(overlappingArea, duration + delay); } function overlappingArea() { const g = svg.selectAll(".symbol"); line.y(({ price0, price }) => { return y(price0 + price); }); g.select(".line").attr("d", ({ values }) => { return line(values); }); y.domain([ 0, d33.max( symbols.map(({ maxPrice }) => { return maxPrice; }) ) ]).range([h, 0]); area.y0(h).y1(({ price }) => { return y(price); }); line.y(({ price }) => { return y(price); }); const t = g.transition().duration(duration); t.select(".line") .style("stroke-opacity", 1) .attr("d", ({ values }) => { return line(values); }); t.select(".area") .style("fill-opacity", 0.5) .attr("d", ({ values }) => { return area(values); }); t.select("text") .attr("dy", ".31em") .attr("transform", 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 = d33.scale .ordinal() .domain( symbols[0].values.map(({ date }) => { return date; }) ) .rangeBands([0, w - 60], 0.1); const x1 = d33.scale .ordinal() .domain( symbols.map(({ key }) => { return key; }) ) .rangeBands([0, x.rangeBand()]); const g = svg.selectAll(".symbol"); const 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({ key }, j) { d33 .select(this) .selectAll("rect") .data(({ values }) => { return values; }) .enter() .append("rect") .attr("x", ({ date }) => { return x(date) + x1(key); }) .attr("y", ({ price }) => { return y(price); }) .attr("width", x1.rangeBand()) .attr("height", ({ price }) => { return h - y(price); }) .style("fill", color(key)) .style("fill-opacity", 1e-6) .transition() .duration(duration) .style("fill-opacity", 1); }); setTimeout(stackedBar, duration + delay); } function stackedBar() { x.rangeRoundBands([0, w - 60], 0.1); const stack = d33.layout .stack() .values(({ values }) => { return values; }) .x(({ date }) => { return date; }) .y(({ price }) => { return price; }) .out((d, y0, y) => { d.price0 = y0; }) .order("reverse"); const g = svg.selectAll(".symbol"); stack(symbols); y.domain([ 0, d33.max( symbols[0].values.map(({ price, price0 }) => { return price + price0; }) ) ]).range([h, 0]); const t = g.transition().duration(duration / 2); t.select("text") .delay(symbols[0].values.length * 10) .attr("transform", d => { d = d.values[d.values.length - 1]; return `translate(${w - 60},${y(d.price / 2 + d.price0)})`; }); t.selectAll("rect") .delay((d, i) => { return i * 10; }) .attr("y", ({ price0, price }) => { return y(price0 + price); }) .attr("height", ({ price }) => { return h - y(price); }) .each("end", function() { d33 .select(this) .style("stroke", "#fff") .style("stroke-opacity", 1e-6) .transition() .duration(duration / 2) .attr("x", ({ date }) => { return x(date); }) .attr("width", x.rangeBand()) .style("stroke-opacity", 1); }); setTimeout(transposeBar, duration + symbols[0].values.length * 10 + delay); } function transposeBar() { x.domain( symbols.map(({ key }) => { return key; }) ).rangeRoundBands([0, w], 0.2); y.domain([ 0, d33.max( symbols.map(({ values }) => { return d33.sum( values.map(({ price }) => { return price; }) ); }) ) ]); const stack = d33.layout .stack() .x((d, i) => { return i; }) .y(({ price }) => { return price; }) .out((d, y0, y) => { d.price0 = y0; }); stack( d33.zip.apply( null, symbols.map(({ values }) => { return values; }) ) ); // transpose! const g = svg.selectAll(".symbol"); const t = g.transition().duration(duration / 2); t.selectAll("rect") .delay((d, i) => { return i * 10; }) .attr("y", ({ price0, price }) => { return y(price0 + price) - 1; }) .attr("height", ({ price }) => { return h - y(price) + 1; }) .attr("x", ({ symbol }) => { return x(symbol); }) .attr("width", x.rangeBand()) .style("stroke-opacity", 1e-6); t.select("text") .attr("x", 0) .attr("transform", ({ key }) => { return `translate(${x(key) + x.rangeBand() / 2},${h})`; }) .attr("dy", "1.31em") .each("end", function() { d33 .select(this) .attr("x", null) .attr("text-anchor", "middle"); }); svg .select("line") .transition() .duration(duration) .attr("x2", w); setTimeout(donut, duration / 2 + symbols[0].values.length * 10 + delay); } function donut() { const g = svg.selectAll(".symbol"); g.selectAll("rect").remove(); const pie = d33.layout.pie().value(({ sumPrice }) => { return sumPrice; }); const arc = d33.svg.arc(); g.append("path") .style("fill", ({ key }) => { return color(key); }) .data(() => { return pie(symbols); }) .transition() .duration(duration) .tween("arc", arcTween); g.select("text") .transition() .duration(duration) .attr("dy", ".31em"); svg .select("line") .transition() .duration(duration) .attr("y1", 2 * h) .attr("y2", 2 * h) .remove(); function arcTween({ data, startAngle, endAngle }) { const path = d33.select(this); const text = d33.select( this.parentNode.appendChild(this.previousSibling) ); const x0 = x(data.key); const y0 = h - y(data.sumPrice); return t => { const r = h / 2 / Math.min(1, t + 1e-3); const a = Math.cos((t * Math.PI) / 2); const xx = -r + a * (x0 + x.rangeBand()) + ((1 - a) * (w + h)) / 2; const yy = a * h + ((1 - a) * h) / 2; const f = { innerRadius: r - x.rangeBand() / (2 - a), outerRadius: r, startAngle: a * (Math.PI / 2 - y0 / r) + (1 - a) * startAngle, endAngle: a * (Math.PI / 2) + (1 - a) * 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() { const r0a = h / 2 - x.rangeBand() / 2; const r1a = h / 2; const r0b = 2 * h - x.rangeBand() / 2; const r1b = 2 * h; const arc = d33.svg.arc(); svg.selectAll(".symbol path").each(transitionExplode); function transitionExplode(d, i) { d.innerRadius = r0a; d.outerRadius = r1a; d33 .select(this) .transition() .duration(duration / 2) .tween( "arc", tweenArc({ innerRadius: r0b, outerRadius: r1b }) ); } function tweenArc(b) { return function(a) { const path = d33.select(this); const text = d33.select(this.nextSibling); const i = d33.interpolate(a, b); for (const key in b) a[key] = b[key]; // update data return t => { const 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(() => { svg.selectAll("*").remove(); svg .selectAll("g") .data(symbols) .enter() .append("g") .attr("class", "symbol"); lines(); }, duration); } return SVG.node(); }32:[{"id":"71aba779ee60d193bfc77f4c2a6ea0211c087b0dc457ce5fb257ef58fb59009f9740b196ad2842cc4bec664b9e3c85528d4cc2a2dbc11e64e2be86706d77ec75","href":"https://static.observableusercontent.com/files/71aba779ee60d193bfc77f4c2a6ea0211c087b0dc457ce5fb257ef58fb59009f9740b196ad2842cc4bec664b9e3c85528d4cc2a2dbc11e64e2be86706d77ec75","name":"fetchData.csv","type":"text/csv","lastModified":1574834235881.629,"size":23218}] 2e:{"title":"Show Reel (Original)","cells":[{"id":0,"value":"md`# Show Reel (Original)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"html`\n

D3 Show Reel from Mike Bostock on Vimeo.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"SVG=html``;\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`### Updated ES6 syntax`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`### Utility`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"parse = d33.time.format(\"%b %Y\").parse","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`## DATA`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"fetchData = d3\n .csvParse(await FileAttachment('fetchData.csv').text(), d3.autoType)\n .map(x => {\n delete x.price0;\n\n return x;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"Symbols = d3\n .groups(fetchData, d => d.symbol)\n .map(([s, d]) => {\n let maxPrice = d3.max(d, d => d.price);\n let sumPrice = d3.sum(d, d => d.price);\n return { key: s, values: d, maxPrice, sumPrice };\n })\n .sort((a, b) => d3.descending(a.maxPrice, b.maxPrice))","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"_=require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d33 = require('d3@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3', 'd3-array')","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}