33:T525,chart = { const node = html`${style}`; const sel = d3.select(node).select("svg"); const p = sel .select("g#peaks") .selectAll("path") .data(scaledPeaks) .enter() .append("path") .attr("d", peak => line(peak.data)) .style("stroke", d => randColor()); async function drop() { const t = p .transition() .duration(1000) .delay((d, i) => 500 + i ** (1 / 3) * 500) .attr( "transform", peak => `translate(${x(peak.summit.date)}, ${dx(peak.data.length)})` ) .attr("d", peak => d3 .line() .x(d => peak.x(d.date)) .y(d => peak.y(d.value)) .defined(d => d)(peak.data) ); await t.end(); const tt = sel .select("g#peaks") .selectAll("path") .transition() .duration(1000) .attr("transform", "translate(0,0)") .attr("d", peak => line(peak.data)); await tt.end(); drop(); } drop(); return node; }34:[{"id":"6f6f5796b49c71cae85088af7c3687743598ff3f00315b9d3b91b26840abe12cab7ea8ace75a6d2551683f3492a326f6abbc6d327862773bbebf51a12bf332d5","href":"https://static.observableusercontent.com/files/6f6f5796b49c71cae85088af7c3687743598ff3f00315b9d3b91b26840abe12cab7ea8ace75a6d2551683f3492a326f6abbc6d327862773bbebf51a12bf332d5","name":"btc-2021-03-09.csv","type":"text/csv","lastModified":1615421399167.086,"size":81974}] 31:{"title":"Bitcoin fractal bubbles (animated)","cells":[{"id":0,"value":"md`# Bitcoin fractal bubbles (animated)\n\nHere’s every Bitcoin peak, scaled by prominence, with each rendered on its own scale so it doesn’t get dwarfed by the exponential growth since then. See [static version](https://next.observablehq.com/@tophtucker/bitcoin-fractal-bubbles) for background.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"data = FileAttachment(\"btc-2021-03-09.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"peaks = getPeaks(data).filter(d => d.length > 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"scaledPeaks = peaks.map(data => {\n const radius = Math.floor(data.length / 2)\n const summit = data[radius]\n const scaledRadius = r(radius)\n let x\n if (data[0] === undefined) {\n x = d3.scaleTime()\n .domain([summit.date, data[data.length - 1].date])\n .range([0, scaledRadius])\n } else {\n x = d3.scaleTime()\n .domain([data[0].date, summit.date])\n .range([-scaledRadius, 0])\n }\n const y = d3.scaleLinear()\n .domain(d3.extent(data.filter(d => d).map(d => d.value)))\n .range([scaledRadius * 0.4, -scaledRadius * 0.4])\n return {data, radius, summit, x, y}\n}).sort((a, b) => b.data.length - a.data.length)","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"getPeaks = data => {\n const peaks = []\n data.forEach((d, i, arr) => {\n const peak = [d]\n for (let radius = 1; radius < arr.length / 2; radius++) {\n const next = arr[i + radius]\n const prev = arr[i - radius]\n const nextIsLower = !next || next.value < d.value\n const prevIsLower = !prev || prev.value < d.value\n if (nextIsLower && prevIsLower) {\n peak.push(next)\n peak.unshift(prev)\n } else {\n break;\n }\n }\n peaks.push(peak)\n })\n return peaks\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"height = width * 0.7","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"h = height / 3.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"marginTop = 32","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"marginRight = 40","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"r = d3.scaleLinear()\n .domain(d3.extent(peaks.map(d => Math.floor(d.length / 2))))\n .range([1, width / 4])","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"x = d3.scaleTime()\n .domain(d3.extent(data.map(d => d.date)))\n .range([0, width - marginRight])","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data.map(d => d.value)))\n .range([h, marginTop])","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"dx = d3.scaleLog()\n .domain(d3.extent(peaks.map(d => d.length)))\n .range([height, h + r.range()[1] / 3])","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.value))\n .defined(d => d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"randColor = () => `hsl(${360 * Math.random()}, 50%, 50%)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"formatDate = d3.timeFormat(\"%B %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"formatValue = d3.format(\"$,.0f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}