31:T19c4,chart = { let selected = mutable points[0]; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("tabindex", 1) .attr("pointer-events", "all") .call( d3 .drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) ); svg.append("style").text(style); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("rect") .attr("fill", "none") .attr("width", width) .attr("height", height); // svg // .append("path") // .attr("class", "area") // .attr("fill", "rgba(79, 166, 245, 0.25)") // .datum(mutable points) // .attr( // "d", // d3 // .area() // .y0(height - margin.bottom) // .curve(d3.curveMonotoneX) // ); svg .append("path") .attr("class", "path") .datum(mutable points) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .call(update); const { realized: aeRealized, projected: aeProjected, aggregate: aeAggregate } = calculateAvgEffective(); // svg // .append("line") // .attr("class", "ae") // .attr("x1", margin.left) // .attr("y1", y(aeAggregate)) // .attr("x2", width - margin.right) // .attr("y2", y(aeAggregate)) // .style("stroke-width", 1) // .style("stroke", "#313a47") // .style("stroke-dasharray", "3,3"); // svg // .append("text") // .attr("class", "aeR") // .attr("x", margin.left + 4) // .attr("y", y(aeRealized) - 4) // .attr("fill", "currentColor") // .attr("text-anchor", "start") // .style("font", "10px system-ui,sans-serif") // .style("opacity", x(time) < 177 ? "0" : "1") // .text("Avg Effective Rate (realized)"); // svg // .append("line") // .attr("class", "aeP") // .attr("x1", x(time)) // .attr("y1", y(aeProjected)) // .attr("x2", width - margin.right) // .attr("y2", y(aeProjected)) // .style("stroke-width", 1) // .style("stroke", "black") // .style("opacity", "0.25") // .style("fill", "none"); // svg // .append("text") // .attr("class", "aeP") // .attr("x", width - margin.right - 4) // .attr("y", y(aeProjected) - 4) // .attr("fill", "currentColor") // .attr("text-anchor", "end") // .style("font", "10px system-ui,sans-serif") // .style("opacity", x(time) > 481 ? "0" : "1") // .text("Avg Effective Rate (projected)"); svg .append("line") .attr("x1", x(time)) .attr("y1", 0) .attr("x2", x(time)) .attr("y2", height - margin.bottom) .style("stroke-width", 1) .style("stroke", "#313a47") .style("fill", "none"); d3.select(window).on("keydown", keydown); function calculateAvgEffective() { const _coupons = d3.utcDay.range(...timeDomain).map((date) => ({ date, value: d3 .scaleLinear() .domain(mutable path.map(({ x: x0 }) => new Date(+x.invert(x0)))) .range(mutable path.map(({ y: y0 }) => y.invert(y0)))(date) })); const realized = _coupons .filter((d) => d.date <= time) .reduce((acc, cur, _, arr) => acc + cur.value / arr.length, 0); const projected = _coupons .filter((d) => d.date > time) .reduce((acc, cur, _, arr) => acc + cur.value / arr.length, 0); const aggregate = _coupons.reduce( (acc, cur, _, arr) => acc + cur.value / arr.length, 0 ); return { realized, projected, aggregate }; } function calculatePoints(path) { if (!path) return; const length = path.getTotalLength(); mutable path = [...d3.range(0, length, length / 10), length].map((len) => { const { x, y } = path.getPointAtLength(len); return { x, y }; }); } function update() { svg .select("path.path") .attr("d", line) .call((sel) => calculatePoints(sel.node())); svg.select("path.area").attr( "d", d3 .area() .y0(height - margin.bottom) .curve(d3.curveMonotoneX) ); const { realized: aeRealized, projected: aeProjected, aggregate: aeAggregate } = calculateAvgEffective(); svg.select("line.ae").attr("y1", y(aeAggregate)).attr("y2", y(aeAggregate)); const circle = svg.selectAll("g.circle").data(mutable points, (d) => d); circle .enter() .append("g") .attr("class", "circle") .call((g) => g.append("circle").attr("r", 30).attr("fill", "none")) .call((g) => g .append("circle") .attr("r", 0) .attr("stroke", "black") .attr("stroke-width", 1.5) // .transition() // .duration(750) // .ease(d3.easeElastic) .attr("r", 5) ) .merge(circle) .attr("transform", (d) => `translate(${d})`) .select("circle:last-child") .attr("fill", (d) => (d === selected ? "lightblue" : "black")); circle.exit().remove(); } function dragsubject(event) { let subject = event.sourceEvent.target.__data__; const i = points.indexOf(subject); if ( subject && i === -1 && event.x > margin.left && event.x < width - margin.right ) { const j = points.findIndex( ([x], i) => i > 0 && x > event.x && points[i - 1][0] < event.x ); mutable points.splice(j, 0, [event.x, event.y]); mutable points = mutable points; update(); } return subject; } function dragstarted({ subject }) { selected = subject; update(); } function dragged(event) { const i = points.indexOf(event.subject); if (i === -1) return; if (i !== 0 && i !== points.length - 1) { event.subject[0] = Math.max( Math.max(margin.left, points[i - 1][0]), Math.min(Math.min(width - margin.right, points[i + 1][0]), event.x) ); } event.subject[1] = Math.max( margin.top, Math.min(height - margin.bottom, event.y) ); update(); } function keydown(event) { if (!selected) return; if (document.activeElement !== svg.node()) return; switch (event.key) { case "Backspace": case "Delete": { event.preventDefault(); const i = mutable points.indexOf(selected); mutable points.splice(i, 1); mutable points = mutable points; selected = mutable points.length ? mutable points[i > 0 ? i - 1 : 0] : null; update(); break; } } } return svg.node(); }32:T72a,{ const accYield = Array.from( d3.cumsum(coupons, (d) => principle * (d.value / 35600)), (value, i) => ({ date: coupons[i].date, value }) ); const rolledAccYield = [ ...d3 .rollup( accYield, (v) => ({ date1: d3.timeWeek.floor(v[0].date), date2: d3.timeWeek.ceil(v[0].date), value: v[v.length - 1].value }), (d) => d3.timeWeek.floor(d.date) ) .values() ]; const pastAccYield = [ ...d3 .rollup( accYield.filter((d) => d.date <= time), (v) => ({ date1: d3.timeWeek.floor(v[0].date), date2: d3.timeWeek.ceil(v[0].date), value: v[v.length - 1].value }), (d) => d3.timeWeek.floor(d.date) ) .values() ]; const flatForwardYield = rolledAccYield .slice(pastAccYield.length) .map((d) => ({ ...d, value: pastAccYield[pastAccYield.length - 1].value })); return Plot.plot({ style: "overflow: visible;", height: 200, width, x: { tickFormat: dateFormat // domain: [...new Set(accYield.map((d) => d3.timeMonth.floor(d.date)))] }, y: { tickFormat: (d) => `${d}`, label: `accrued yield (DAI)` }, marks: [ // Plot.rectY(flatForwardYield, { // x1: "date1", // x2: "date2", // y: "value", // fill: "rgb(79, 166, 245)" // }), // Plot.rectY(pastAccYield, { // x1: "date1", // x2: "date2", // y: "value", // fill: "rgb(79, 166, 245)" // }), Plot.rectY(rolledAccYield, { x1: "date1", x2: "date2", y: "value", stroke: "#313a47", fill: "rgb(79, 166, 245)" }), Plot.ruleY([0]), Plot.ruleX([time], { stroke: "#313a47" }) ] }); }33:[] 2f:{"title":"Accumulated Yield Interactive","cells":[{"id":0,"value":"md`# Accumulated Yield Interactive \n\nThis interactive tool demonstrates how yield accrues on principal, provided a yield-bearing asset's interest rate over time. Click on the line between points to place a control point, or drag an existing one. Hitting Delete will delete the selected point. Thank you to [@tophtucker](https://observablehq.com/@tophtucker) for the original cashflow payout tool, which this is built off of.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1771,"value":"html`

Target Asset's APY

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"md`The rates above accumulate to the following:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"viewof time = Scrubber(d3.utcDay.range(...timeDomain), {\n autoplay: false,\n loop: false,\n delay: 50,\n format: (date) => date.toLocaleString(\"en\", { month: \"long\", day: \"numeric\" })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"| CURRENT TIME | PRINCIPAL | REALIZED YIELD (PY) | PROJECTED YIELD (FY) |\n ----------- | -----------| ----------- | ----------- |\n| ${time.toLocaleString(\"en\", { month: \"long\", day: \"numeric\" })} | ${principle} DAI | ${math.round(coupons.reduce(\n (acc, cur) =>\n cur.date < time ? acc + principle * (cur.value / 35600) : acc,\n 0\n ), 2)} DAI |${math.round(coupons.reduce(\n (acc, cur) =>\n cur.date > time ? acc + principle * (cur.value / 35600) : acc,\n 0\n ), 2)} DAI |","pinned":false,"hidden":false,"mode":"md"},{"id":1757,"value":"html`

Cumulative Interest

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1805,"value":"---\n_**Disclaimer:** This post is for general information purposes only. It does not constitute investment advice or a recommendation or solicitation to buy or sell any investment and should not be used in the evaluation of the merits of making any investment decision. It should not be relied upon for accounting, legal or tax advice or investment recommendations. The opinions reflected herein are subject to change without being updated._\n","pinned":false,"hidden":false,"mode":"md"},{"id":265,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"mutable path = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"x = d3.scaleTime()\n .domain(timeDomain)\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"y = d3.scaleLinear()\n .domain([0, 5 * start])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"scaleTimeToValue = d3\n .scaleLinear()\n .domain(path.map(({ x: x0 }) => new Date(+x.invert(x0))))\n .range(path.map(({ y: y0 }) => y.invert(y0)))\n// .clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"coupons = d3.utcDay\n .range(...timeDomain)\n .map((date) => ({ date, value: scaleTimeToValue(date) }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"timeDomain = [d3.timeYear.offset(new Date(), -1), new Date()].map(date => d3.timeMonth.floor(date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"style = `\nsvg[tabindex] {\n display: block;\n border: solid 2px transparent;\n box-sizing: border-box;\n}\nsvg[tabindex]:focus {\n outline: none;\n border: solid 2px lightblue;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"mutable points = {\n const rates = [...Array(8)].reduce(\n (acc, cur) => acc.concat(rateGen(acc[acc.length - 1])),\n [start / 100]\n );\n\n return d3\n .range(0, 8)\n .map((i) => [x(d3.interpolate(...timeDomain)(i / 7)), y(rates[i] * 100)]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"rateGen = {\n const nrm = d3.randomNormal(0, 1);\n return (r0) => {\n const dr =\n 0.3 * (0.08141725733951365 - r0) +\n 0.03631460674105631 * math.sqrt(r0) * nrm();\n return r0 + dr;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"line = d3.line().curve(d3.curveMonotoneX)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"width = 740","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"margin = ({left: 40, top: 20, right: 20, bottom: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0).tickFormat(dateFormat))","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(4))\n .call((g) => g.select(\".domain\").remove())\n .call((g) =>\n g\n .append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(\"Annual rate (%)\")\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"principle = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"start = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":998,"value":"math = require(\"mathjs\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"import {CashFlow, dateFormat} from \"@observablehq/cash-flow\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}