30:Taf9,Lines= { // Lines = { d3.select(Original) .selectAll('*') .remove(); let _yScale = yScale.copy(); let line = d3 .line() .curve(d3.curveBasis) .x(({ date }) => xScale(date)) .y(({ price }) => _yScale(price)); let symbolGroup = d3 .select(Original) .selectAll(".symbol") .data(Symbols, d => d.key) .join("g") .attr("class", "symbol"); let backgrounds = symbolGroup .append('rect') .attr('x', 0) .attr('y', 0) .attr('height', unitScale.bandwidth()) .attr('width', xScale.range()[1]) .attr('fill', d => color(d.key)) .attr('opacity', 0.3); const g = symbolGroup .attr("transform", (d, i) => `translate(${0},${unitScale(d.key)})`) .each(function({ key, values }) { d3.select(this) .append("path") .attr('class', 'symbol-line') .attr("stroke", "black"); d3.select(this) .append("circle") .attr("r", radius) .style("fill", ({ key }) => color(key)) .style("stroke", "#000") .style("stroke-width", "2px"); // .attr('cx', xScale(values[0].date)) // .attr('cy', _yScale(values[0].price)); d3.select(this) .append("text") .attr("x", radius + 2) .attr("dy", radius) .attr('font-size', fontSize) .attr('font-family', 'serif') .text(key); }); function draw(k) { symbolGroup.each(function({ maxPrice }) { const e = d3.select(this); _yScale.domain([0, maxPrice]); line.y(({ price }) => _yScale(price)); e.select("path").attr("d", ({ values }) => { return line(values.slice(0, k + 1)); }); e.selectAll("circle, text") .data(({ values }) => [values[k], values[k]]) .attr( "transform", ({ date, price }) => `translate(${xScale(date)},${_yScale(price)})` ); if (k === dataLength - 2) { e.select('text') .transition() .ease(d3.easeCubicIn) .duration(1000) // .attr('text-anchor', 'end') .attrTween('transform', function() { return d3.interpolateTransformSvg( d3.select(this).attr('transform'), `translate(${xScale.range()[1] + spacer / 2 + radius},${0}) rotate(90) scale(2)` // `${d3 // .select(this) // .attr('transform')} rotate(90) translate(-20,-15) scale(2)` ); }); } }); } // const n = Symbols[0].values.length; let k = Math.floor(dataLength * startingPoint); // const unitLength = width / n; while (k < dataLength) { draw(k); if ((k += 1) >= dataLength) { draw(k - 1); return; } await Promises.delay(30); } if (true) { } }31:T41e,{ //all lines share the same yscale range. That's why MSFT is so flat. The yScale uses AAPL's maxPrice let view = html``; yield view; }32:T52e,SVG = { let view = get_base_svg('view'); yield view; ///////////////////////DRAW IT/////////////////////////////// let symbolGroups = d3 .select(view) .selectAll('.symbol') .data(Symbols, d => d.key) .join('g') .attr('class', d => 'symbol') .attr('transform', (d, i) => `translate(${0},${unitScale(d.key)})`) .each(function(d, i) { let g = d3.select(this); g.selectAll('rect') .data([Symbols[i]]) .join('rect') .attr('x', pad) .attr('y', 0) .attr('height', unitScale.bandwidth()) .attr('width', WIDTH - 2 * pad) .attr('fill', d => color(d.key)) .attr('opacity', 0.3); g.selectAll('path') .data([Circle_Path_Points[i]]) .join('path') .attr('d', d => d.line) .attr('stroke', 'black') .attr('stroke-width', 1) .attr('fill', 'none') .attr('class', 'symbol-line'); g.selectAll('circle') .data([Circle_Path_Points[i]]) .join('circle') .attr('cx', d => { // mutable temp = d; return d.points[0][0]; }) .attr('cy', d => d.points[0][1]) .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', d => color(d.key)) .attr('r', 5); }); yield view; }33:T747,Apple = { //Object {key: "AAPL", values: Array(123), maxPrice: 223.02, sumPrice: 7961.850000000001} let data = [Symbols[0]]; let chart_width = WIDTH; let svgRef = get_base_svg('view'); let svg = d3 .select(svgRef) .attr('height', height / 4) .attr('width', WIDTH) .attr('viewBox', [0, 0, WIDTH + spacer, height / 4]); yield svgRef; // let svg = d3 // .create('svg') // .attr('height', unitScale.bandwidth()) // .attr('width', chart_width) // .attr('viewBox', [0, 0, chart_width, unitScale.bandwidth()]) // .style('border', "black double 3px"); let symbolGroup = svg .selectAll('.symbol') .data(data, d => d.key) .join('g') .attr('class', 'symbol') .attr('class', 'symbol-line'); let lineLength = null; let apple_path = symbolGroup .append('path') .attr('d', d => line(d.values)) .attr('stroke', 'black') .attr('stroke-dashoffset', function() { lineLength = this.getTotalLength(); return lineLength; }) .attr('stroke-dasharray', function() { return [lineLength, lineLength]; }); let apple_circle_node = symbolGroup .append('circle') .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', 'red') .attr('r', 5); yield svg.node(); while (invalidation) { yield svg.node(); let t = d3 .transition() .duration(10000) .ease(d3.easeBounceInOut); await Promise.all([ apple_circle_node .transition(t) .attrTween("transform", function() { return Move_On_Path( d3 .select(this.parentNode) .select('path') .node() ); }) .end(), apple_path .transition(t) .attrTween('stroke-dashoffset', Lay_down_path(apple_path.node())) .end() ]); } }34:T93f,AllSymbols2 = { //Object {key: "AAPL", values: Array(123), maxPrice: 223.02, sumPrice: 7961.850000000001} let data = Symbols; let chart_width = WIDTH; let svgRef = get_base_svg('view'); let svg = d3.select(svgRef); yield svg.node(); let symbolGroup = svg .selectAll('.symbol') .data(data, d => d.key) .join('g') .attr('class', 'symbol'); let backgrounds = symbolGroup .append('rect') .attr('x', pad) .attr('y', 0) .attr('height', unitScale.bandwidth()) .attr('width', WIDTH - 2 * pad) .attr('fill', d => color(d.key)) .attr('opacity', 0.3); symbolGroup.attr( 'transform', (d, i) => `translate(${pad},${unitScale(d.key)})` ); // .attr('opacity', 1); let lineLength = null; let apple_path = symbolGroup .append('path') .attr('d', d => line(d.values)) .attr('stroke', 'black') .attr('class', 'symbol-line'); let rects = symbolGroup .append('rect') .attr('x', pad) .attr('y', 0) .attr('height', unitScale.bandwidth()) .attr('width', WIDTH - 2 * pad) .attr('fill', d => '#fff'); // .attr('stroke-dashoffset', function() { // return this.getTotalLength(); // }) // .attr('stroke-dasharray', function() { // let length = this.getTotalLength(); // return [length, length]; // }); let circle_node = symbolGroup .append('circle') .attr('stroke', 'black') .attr('stroke-width', 2) .attr('fill', d => color(d.key)) .attr('r', 5); // .attr('cx', d => xScale(d.values[0].date)) // .attr('cy', d => yScale(d.values[0].price)); yield svg.node(); while (invalidation) { yield svg.node(); let t = d3 .transition() .duration(10000) .ease(d3.easeLinear); await Promise.all([ circle_node .transition(t) .attrTween("transform", function() { return Move_On_Path( d3 .select(this.parentNode) .select('path') .node() ); }) .end(), rects.transition(t).attrTween('transform', function() { let path = d3 .select(this.parentNode) .select('path') .node(); return t => { let p = path.getPointAtLength(t * path.getTotalLength()); return "translate(" + (p.x - pad) + ",0)"; }; }) ]); } }35:[] 2e:{"title":"Slow Reel - Lines","cells":[{"id":0,"value":"md`# Slow Reel - Lines\n\nmaking show-reel slowly`","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"md`## Approach: Original`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"viewof startingPoint = DOM.range(0, .99)","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"Original = {\n Button;\n let view = get_base_svg();\n\n yield view;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1491,"value":"Flag_Names = {\n let button = html``;\n yield button;\n\n d3.select(button).on('click', function() {\n d3.select(Original)\n .selectAll('text')\n // .attr('text-anchor', 'start')\n .transition()\n .ease(d3.easeBounceOut)\n .duration(1000)\n .attrTween('transform', function(d, i) {\n return d3.interpolateTransformSvg(\n d3.select(this).attr('transform'),\n `translate(${WIDTH - spacer / 2 + radius},${fontSize / 2})`\n );\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"Drop_Names = {\n let button = html``;\n yield button;\n\n d3.select(button).on('click', function() {\n d3.select(Original)\n .selectAll('text')\n // .attr('text-anchor', 'start')\n .transition()\n .ease(d3.easeBounceOut)\n .duration(1000)\n .attrTween('transform', function(d, i) {\n return d3.interpolateTransformSvg(\n d3.select(this).attr('transform'),\n `translate(${WIDTH - spacer / 2},${unitScale.bandwidth() -\n fontSize / 2 -\n radius * 2})`\n );\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"Balls_Drop = {\n let button = html``;\n yield button;\n\n d3.select(button).on('click', function() {\n d3.select(Original)\n .selectAll('circle')\n .transition()\n .ease(d3.easeBounceOut)\n .duration(1000)\n .attrTween('transform', function() {\n return d3.interpolateTransformSvg(\n d3.select(this).attr('transform'),\n `translate(${xScale.range()[1] - radius},${unitScale.bandwidth() -\n radius})`\n );\n })\n .transition()\n .duration(1000)\n .ease(d3.easeExpIn)\n .attrTween('transform', function() {\n return d3.interpolateTransformSvg(\n d3.select(this).attr('transform'),\n `translate(${WIDTH +\n spacer +\n pad +\n radius +\n 1},${unitScale.bandwidth() - radius}) `\n );\n });\n // .attr('font-size', pad)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"TwistPlace = {\n let button = html``;\n yield button;\n\n d3.select(button).on('click', function() {\n d3.select(Original)\n .selectAll('text')\n .transition()\n .ease(d3.easeCubicIn)\n .duration(1000)\n // .attr('text-anchor', 'end')\n\n .attrTween('transform', function() {\n return d3.interpolateTransformSvg(\n d3.select(this).attr('transform'),\n `translate(${xScale.range()[1] +\n spacer / 2 +\n radius},${0}) rotate(90) scale(2)`\n // `${d3\n // .select(this)\n // .attr('transform')} rotate(90) translate(-20,-15) scale(2)`\n );\n });\n // .attr('font-size', pad)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"viewof Button = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"md`## Approach: Simply SVG\n**Piecewise Interpolation** - It's unnecessary here but it worked\n^{Expand the track object below to see the points changing}\n\nShared yScale domain extent for all symbols. Notice MSFT's flat line\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"track = Symbols.map(symbol => {\n return d3.piecewise(\n d3.interpolate,\n symbol.values.map(x => ({ cx: xScale(x.date), cy: yScale(x.price) }))\n )(ballPosition / dataLength);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"{\n if (PAUSE === false) {\n await Promises.tick(30);\n\n yield \"I'm moving the circles\";\n if (ballPosition > dataLength - 1) {\n mutable ballPosition = Math.floor(pointSlider * dataLength);\n } else {\n mutable ballPosition += 1;\n }\n\n // return yield ballPosition;\n }\n if (PAUSE === true) {\n yield 'PAUSED';\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"mutable ballPosition = Math.floor(pointSlider * dataLength)","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"viewof PAUSE = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"viewof pointSlider = DOM.range(0, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"md`

\n## Approach: Transition X,Y Points\n\nIf we know all the points then we can just transition between them using \\`transition.end\\``","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"////////////////////MOVE IT//////////////////////////////////////////\nd3\n .select(SVG)\n .selectAll('circle')\n .transition()\n .duration(50)\n .ease(d3.easeLinear)\n .attr(\n 'cx',\n ({ date }, i) => Circle_Path_Points[i]['points'][ballPosition - 1][0]\n )\n .attr(\n 'cy',\n ({ price }, i) => Circle_Path_Points[i]['points'][ballPosition - 1][1]\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"Circle_Path_Points = Symbols.map(each => {\n let values = each.values;\n let xScale = d3\n .scaleTime()\n .range([pad, WIDTH - pad])\n .domain(d3.extent(values.map(x => x.date)));\n let _yScale = d3\n .scaleLinear()\n .range([unitScale.bandwidth(), 0])\n .domain([0, each.maxPrice]);\n let points = values.map(x => [xScale(x.date), _yScale(+x.price)]);\n let line = d3\n .line()\n .curve(d3.curveBasis)\n .x(d => xScale(d.date))\n .y(d => _yScale(+d.price))(each.values);\n let key = each.key;\n return { key, line, points };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"md`

\n## Approach: Travelling Path \n- getTotalLength \n- getPointAtLength `","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"md`Works great for a single symbol but when displaying multiple, they are out of sync because the length of the path varies for each symbol. So they start out together and end together but in the middle they are out of sync`","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"Lay_down_path = path => (d, i, a) => t => {\n var p = (1 - t) * path.getTotalLength();\n // (1 - t) * path.getTotalLength();\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"Move_On_Path = path => t => {\n var p = path.getPointAtLength(t * path.getTotalLength());\n return \"translate(\" + p.x + \",\" + p.y + \")\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"md`\n\n----\n## Setup Details\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"unitScale = d3\n .scaleBand()\n .domain(Symbols.map(d => d.key))\n .range([0, height])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"margin = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"height=500","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"radius = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"spacer = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"pad = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"md`## SCALES`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"xScale = d3\n .scaleTime()\n .range([pad, WIDTH - pad])\n .domain(d3.extent(d3.merge(Symbols.map(x => x.values)).map(x => x.date)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"yScale = d3\n .scaleLinear()\n .range([unitScale.bandwidth(), 0])\n .domain(d3.extent(d3.merge(Symbols.map(x => x.values.map(d => +d.price)))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"color = d3\n .scaleOrdinal()\n .domain(Symbols.map(x => x.key))\n .range(d3.schemePastel2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"line = d3\n .line()\n .curve(d3.curveBasis)\n .x(({ date }) => xScale(date))\n .y(({ price }) => yScale(price))","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"fontSize = 15","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"dataLength = Symbols[0].values.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"get_base_svg = className =>\n d3\n .create(\"svg\")\n .attr(\"viewBox\", [pad, 0, WIDTH + spacer, height])\n .attr('width', WIDTH)\n .attr('height', height)\n .style(\"font\", \"10px sans-serif\")\n .style('border', '3px double black')\n .attr('class', className)\n .node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"WIDTH = width //d3.max([width, 500])","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"import { Symbols } from '@stroked/show-reel-original'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}