30:T944,// async function lines(svg) { LineChart = { let view = get_base_svg(); yield view; let svg = d3.select(view); // svg.selectAll('*').remove(); let symbolGroup = svg .selectAll(".symbol") .data(data, 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)})` ); g.each(function(d) { const e = d3.select(this); e.append("path").attr("class", "symbol-line"); e.append("circle") .attr("r", 5) .style("fill", ({ key }) => color(key)) .style("stroke", "#000") .style("stroke-width", "2px"); e.append("text") .attr('text-anchor', 'start') .attr('font-size', fontSize) .attr("x", radius * 1.2) .attr("dy", fontSize / 2) // .attr( // 'transform', // `translate(${xScale.range()[1] + radius},${-unitScale.bandwidth() * // 0.5}) rotate(90)` // ) .text(d.key); }); async function draw(k) { g.each(function(d) { const e = d3.select(this); e.select(".symbol-line").attr("d", ({ values, _yScale }) => { line.y(d => _yScale(d.price)); return line(values.slice(0, k + 1)); }); e.selectAll("circle, text") .data(({ values }) => [values[k], values[k]]) .attr( "transform", ({ date, price }, i) => `translate(${xScale(date)},${d._yScale(price)})` ); }); if (k === dataLength - 1) { await Promises.delay(1000); await svg .selectAll('text') .transition() .duration(2000) .attrTween('transform', function() { return d3.interpolateTransformSvg( d3.select(this).attr('transform'), `translate(${WIDTH + radius}, ${0}) rotate(90)` ); }) .end(); } } const n = Symbols[0].values.length; let k = Math.floor(startAt * dataLength); while (invalidation && k < n) { draw(k); if ((k += 1) >= n - 1) { await draw(n - 1); return; } await Promises.delay(30); } // symbolGroup }31:T9ca,End = { let data = [...Symbols], height = 500, pad = 10, priceExtent = d3.max(d3.merge(data.map(x => x.values)).map(x => x.price)), _yScale = yScale.copy().range([0, overlap * unitScale.bandwidth()]), // .range([0, overlap * unitScale.bandwidth()]) area = d3 .area() .curve(d3.curveNatural) .defined(d => !isNaN(+d.price)) .x(d => xScale(d.date)) .y0(0) .y1(d => _yScale(+d.price)); const svgRef = get_base_svg(); yield svgRef; let svg = d3.select(svgRef); // svg.append("g").call(yAxis); const each = svg .selectAll(".horizons") .data(data, d => d.key) .join("g") .attr('class', 'horizons') .attr( "transform", d => `translate(0,${unitScale(d.key) + unitScale.bandwidth()})` ); each .append("text") .attr('text-anchor', 'start') .attr('font-size', fontSize) .attr( 'transform', `translate(${xScale.range()[1] + radius},${-unitScale.bandwidth() * 0.5}) rotate(90) scale(1.5) ` ) .text(d => d.key); each .append("clipPath") .attr("id", d => (d.clip = DOM.uid("clip")).id) .append("rect") .attr("width", WIDTH) .attr("y", -unitScale.bandwidth()) .attr("height", unitScale.bandwidth()); each .append("defs") .append("path") .attr("id", d => (d.path = DOM.uid("path")).id) .attr("d", d => { _yScale.domain([d3.min(d.values, d => d.price) / 2, d.maxPrice]); return area(d.values); }); each .append("g") .attr("clip-path", d => d.clip) .selectAll("use") .data(d => Array.from({ length: overlap * 2 }, (_, i) => Object.assign({ index: i < overlap ? -i - 1 : i - overlap }, d) ) ) .join("use") .attr("fill", d => color(d.index)) .attr( "transform", d => `scale(1,-1) translate(0,${(d.index + 1) * unitScale.bandwidth()})` ) .attr("xlink:href", d => d.path.href); await Promises.delay(2000); await svg .selectAll('text') .transition() .ease(d3.easeCubicIn) .duration(1000) // .attr('text-anchor', 'end') .attrTween('transform', function() { return d3.interpolateTransformSvg( d3.select(this).attr('transform'), `translate(${WIDTH + radius - fontSize / 2},${-unitScale.bandwidth()}) rotate(90) scale(2)` // `${d3 // .select(this) // .attr('transform')} rotate(90) translate(-20,-15) scale(2)` ); }) .end(); }32:T52a,Rotate_Labels_Horizontal = { let button = html``; yield button; d3.select(button).on('click', function() { d3.select(End) .selectAll('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] + radius},${-unitScale.bandwidth() + radius}) rotate(90) scale(1.5)` // `${d3 // .select(this) // .attr('transform')} rotate(90) translate(-20,-15) scale(2)` ); }); }); // d3.select(End) // .selectAll('text') // .transition() // .ease(d3.easeCubicIn) // .duration(1000) // // .attr('text-anchor', 'end') // .attrTween('transform', function() { // return d3.interpolateTransformSvg( // d3.select(this).attr('transform'), // `rotate(90) translate(${-pad - fontSize / 2},${-fontSize / 2}) ` // // `${d3 // // .select(this) // // .attr('transform')} rotate(90) translate(-20,-15) scale(2)` // ); // }); // // .attr('font-size', pad) // }); }33:T5c8,async function Lines(node) { // LINE = { // let view = get_base_svg(); // yield view; let y = yScale.copy().range([unitScale.bandwidth(), 0]); line.y(d => y(d.price)); let svg = d3.select(node); svg.selectAll('*').remove(); let symbolGroup = svg .selectAll(".symbol") .data(Symbols, d => d.key) .join("g") .attr("class", "symbol"); const g = symbolGroup.attr( "transform", (d, i) => `translate(${0},${unitScale(d.key)})` ); g.each(function({ key }) { const e = d3.select(this); e.append("path").attr("class", "symbol-line"); e.append("circle") .attr("r", 5) .style("fill", ({ key }) => color(key)) .style("stroke", "#000") .style("stroke-width", "2px"); e.append("text") .attr("x", 12) .attr("dy", "1em") .text(key); }); function draw(k) { g.each(function({ maxPrice }) { const e = d3.select(this); y.domain([0, maxPrice]); e.select(".symbol-line").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)},${y(price)})` ); }); } const n = Symbols[0].values.length; let k = 100; while (k < n) { draw(k); if ((k += 1) >= n - 1) { draw(n - 1); return; } await Promises.delay(30); } }34:T7ba,async function Horizons(node) { let layersCount = overlap; let svg = d3.select(node); let uid = DOM.uid('horizon-clip'); svg .append("defs") .append("clipPath") .attr("id", uid.id) .append("rect") .attr("width", WIDTH + spacer) .attr("height", unitScale.bandwidth()); let symbolGroup = svg.selectAll(".symbol"); let _yscale = yScale.copy().range([unitScale.bandwidth(), 0]); area.y0(unitScale.bandwidth()).y1(d => _yscale(d.price)); Balls_Drop(svg); const g = symbolGroup.attr("clip-path", uid); g.each(async function(d) { _yscale.domain([0, d.maxPrice]); d3.select(this) .selectAll(".area") .data(d3.range(layersCount)) .enter() .insert("path", ".area") .attr("class", "area") .attr("transform", d => `translate(0,${unitScale(Symbols[d].key)})`) .attr("d", area(d.values)) .style("fill", (d, i) => turboColorScheme[Math.floor(colorSampleIndex())]) .style("fill-opacity", 1); _yscale.domain([0, d.maxPrice / layersCount]); await Promise.all([ g .selectAll('text') .transition() .duration(1000) .attrTween('transform', function() { return d3.interpolateTransformSvg( d3.select(this).attr('transform'), `translate(${WIDTH + spacer / 2},${0}) rotate(90) scale(2) ` // `${d3 // .select(this) // .attr('transform')} rotate(90) translate(-20,-15) scale(2)` ); }) .end(), d3 .select(this) .select(".symbol-line") .transition() .duration(duration) .attr("d", d => axis(d.values)) // .attr('transform', `translate(${0},${unitScale.bandwith()})`) .end(), d3 .select(this) .selectAll(".area") .transition() .duration(duration) .style("fill-opacity", 0.3) .attr("d", area(d.values)) .end() ]); }); }35:Tbe0,TooltippedHoverChart = { const svgRef = get_base_svg('view'); let svg = d3.select(svgRef).append('g'); yield svgRef; let data = [...Symbols], step = unitScale.bandwidth(), z = d3 .scaleLinear() // .base(1) // .exponent(2) .range([0, overlap * step]), area = d3 .area() .curve(d3.curveNatural) .defined(d => !isNaN(+d.price)) .x(d => xScale(d.date)) .y0(0) .y1(d => z(+d.price)); const serie = svg .selectAll(".symbol") .data(data, d => d.key) .join("g") .attr( "transform", d => `translate(0,${unitScale(d.key) + unitScale.bandwidth()})` ) .attr('class', 'symbol'); serie .append("clipPath") .attr("id", d => (d.clip = DOM.uid("clip")).id) .append("rect") .attr("width", WIDTH) .attr("y", -step) .attr("height", step); serie .append("defs") .append("path") .attr("id", d => (d.path = DOM.uid("path")).id) .attr("d", d => { z.domain([d3.min(d.values, d => d.price) / 2, d.maxPrice]); return area(d.values); }); serie .append("g") .attr("clip-path", d => d.clip) .selectAll("use") .data(d => Array.from({ length: overlap * 2 }, (_, i) => Object.assign({ index: i < overlap ? -i - 1 : i - overlap }, d) ) ) .join("use") .attr("fill", d => color(d.index)) .attr( "transform", d => `scale(1,-1) translate(0,${(d.index + 1) * unitScale.bandwidth()})` ) .attr("xlink:href", d => d.path.href); svg .selectAll('.rule') .data(d3.range(2), (d, i) => i) .join('line') .attr('class', 'rule') .attr('y1', pad) .attr('y2', height - pad) .attr('stroke', 'black') .attr('stroke-width', 1) .call(hoverRuleSplit); svg .on('mousemove', function() { const x = d3.mouse(this); d3.select(this) .selectAll('.rule') .transition() .duration(50) .attr('opacity', 0.6) .attr('y1', pad) .attr('y2', height - pad) .attr('x1', x[0]) .attr('x2', x[0]); }) .on('mouseleave', function() { d3.select(this) .selectAll('.rule') .call(hoverRuleSplit); }); serie .append("text") .attr('text-anchor', 'start') .attr( 'transform', `translate(${xScale.range()[1] + radius + 1},${-unitScale.bandwidth() / 2}) ` ) // .attr("x", 4) // .attr("y", step / 2) // .attr("dy", "0.35em") .text(d => d.key); await Promises.delay(2000); await d3 .select(svgRef) .selectAll('text') .transition() .duration(2000) .attrTween('transform', function() { return d3.interpolateTransformSvg( d3.select(this).attr('transform'), `translate(${xScale.range()[1] + radius + 1},${-unitScale.bandwidth()}) rotate(90) scale(2.5)` // `${d3 // .select(this) // .attr('transform')} rotate(90) translate(-20,-15) scale(2)` ); }) .end(); }36:[] 2e:{"title":"Slow Reel - Horizons","cells":[{"id":0,"value":"md`# Slow Reel - Horizons\nmaking show-reel slowly`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1469,"value":"md`## Previously...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1912,"value":"viewof startAt = viewof startingPoint","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1907,"value":"md`## To`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1906,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1905,"value":"Flag_Names = {\n let button = html``;\n yield button;\n\n d3.select(button).on('click', function() {\n d3.select(End)\n .selectAll('text')\n .transition()\n .ease(d3.easeBounceOut)\n\n .duration(1000)\n .attr('font-size', fontSize)\n .attrTween('transform', function(d, i) {\n return d3.interpolateTransformSvg(\n d3.select(this).attr('transform'),\n `translate(${xScale.range()[1] + radius},${0})`\n );\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1904,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1666,"value":"md`## Up Next: Lines to Horizons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"Runner = {\n yield Lines(SVG);\n await Promises.delay(2000);\n yield Horizons(SVG);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1410,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1162,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2002,"value":"Balls_Drop = svg => {\n svg\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}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"SVG = get_base_svg('view')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2008,"value":"axis = d3\n .line()\n .x(({ date }) => xScale(date))\n .y(unitScale.bandwidth())\n .curve(d3.curveNatural)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1589,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"// d3\n// .select(SVG)\n// .selectAll('.symbol')\n// .select('text')\n// .transition()\n// .duration(2000)\n// .attrTween('transform', function() {\n// return d3.interpolateTransformSvg(\n// d3.select(this).attr('transform'),\n// `translate(${WIDTH},${-fontSize / 2}) rotate(90) `\n// // `${d3\n// // .select(this)\n// // .attr('transform')} rotate(90) translate(-20,-15) scale(2)`\n// );\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1196,"value":"// d3\n// .select(HORIZON3)\n// .selectAll('text')\n\n// .transition()\n// .duration(duration)\n\n// .attr('text-anchor', \"center\")\n// .attr('dominant-baseline', \"middle\")\n// // .attr('y', (d, i) => unitHeight / 2)\n// // .attr('x', (d, i) => w - pad)\n// // .style('transform-origin', `${unitHeight / 2} , ${w - pad}`)\n// // .attr(\n// // \"transform\",\n// // () =>\n// // )\n// .attrTween('transform', function() {\n// let it = d3.interpolateTransformSvg(\n// d3.select(this).attr('transform'),\n// `translate(${w - pad + 2 * margin},${0}) rotate(${90})`\n// );\n// mutable temp3 = it;\n// return it;\n// })\n\n// .attrTween('font-size', function() {\n// return d3.interpolateNumber(pad / 2, pad);\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"duration = 1500;","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"delay = 500","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":880,"value":"margin = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"// unitHeight = height / 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":1504,"value":"// unitScale = d3\n// .scaleBand()\n// .range([height - pad, pad])\n// .domain(Symbols.map(x => x.key))","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"// y = d3.scaleLinear().range([unitScale.bandwidth(), 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"color = d3\n .scaleOrdinal()\n .domain(Symbols.map(x => x.key))\n .range(d3.schemePastel2)","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"radius = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"area = d3\n .area()\n .x(({ date }) => xScale(date))\n .y1(({ price }) => yScale(price))\n .curve(d3.curveBasis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1858,"value":"// yScale = _yScale\n// .copy()\n// .base(1)\n// .exponent(2)\n// .range([0, overlap * unitScale.bandwidth()])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1964,"value":"data = Symbols.map(x => {\n let y = d3\n .scaleLinear()\n .range([unitScale.bandwidth(), 0])\n .domain([0, x.maxPrice]);\n\n x._yScale = y;\n x._area = d3\n .area()\n .x(({ date }) => xScale(date))\n .y0(unitScale.bandwidth())\n .y1(({ price }) => y(price))\n .curve(d3.curveNatural);\n //(x.values)\n\n return x;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":755,"value":"md`## ANX`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1855,"value":"priceExtent = d3.max(d3.merge(Symbols.map(x => x.values)).map(x => x.price))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1455,"value":"import {\n Original as orig,\n pad,\n spacer,\n height,\n unitScale,\n fontSize,\n xScale,\n get_base_svg,\n WIDTH,\n yScale,\n viewof startingPoint,\n dataLength\n} from '@stroked/slow-reel-lines'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1973,"value":"import { Symbols } from '@stroked/show-reel-original'","pinned":true,"hidden":false,"mode":"ojs"},{"id":904,"value":"// Symbols = d3.shuffle(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"// import { Symbols as data} from '@stroked/show-reel-original'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1012,"value":"schemes = [\n d3[\"interpolateBlues\"],\n d3[\"interpolateGreens\"],\n d3[\"interpolateGreys\"],\n d3[\"interpolateOranges\"],\n d3[\"interpolatePurples\"],\n d3[\"interpolateReds\"]\n].map(d => d(3))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1021,"value":"d3[\"interpolateBlues\"](3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":962,"value":"import {\n turboColorScheme,\n colorSampleIndex\n} from '@stroked/how-to-slice-a-sphere'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1671,"value":"colorScale = i => d3[scheme][overlap * 2 + 1][i + (i >= 0) + overlap]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1674,"value":"colorScale(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1619,"value":"viewof overlap = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1602,"value":"viewof rotateLabels = DOM.range(0, 180)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1689,"value":"viewof mirror = {\n const label = html` Mirror negative values`;\n label.value = label.control.checked;\n label.onclick = event => {\n label.value = label.control.checked;\n label.dispatchEvent(new CustomEvent(\"input\"));\n };\n return label;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1591,"value":"hoverRuleSplit = g => {\n if (tooltip === 'horizontal') {\n g.transition()\n .duration(3000)\n .attr('x1', (d, i) => (i === 0 ? 0 : WIDTH))\n .attr('x2', (d, i) => (i === 0 ? 0 : WIDTH))\n .attr('opacity', 0);\n return;\n } else {\n g.attr('y1', (d, i) => (i === 0 ? margin.top : (height - pad) / 2))\n .attr('y2', (d, i) => (i === 0 ? (height - pad) / 2 : height - pad))\n .transition()\n .duration(1000)\n .ease(d3.easeCubicOut)\n .attr('y1', (d, i) => (i === 0 ? pad : height - pad))\n .attr('y2', (d, i) => (i === 0 ? pad : height - pad));\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1593,"value":"viewof tooltip = html`\n\n\n\n\n\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}