31:T624,generateGraph = (purchases, performanceMeasurements, yAxisForPerformanceMeasurements, yForPerformanceMeasurement) => { const lastSnapshot = marketSnapshots[marketSnapshots.length - 1]; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis); svg.append("g").call(yAxisForMarketSnapshot); svg.append("g").call(yAxisForPerformanceMeasurements); svg .append("g") .append("path") .datum(marketSnapshots) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", polyLineWith(yForMarketSnapshot)); svg .append("g") .append("path") .datum(performanceMeasurements) .attr("fill", "none") .attr("stroke", "hsl(50, 80%, 60%)") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", polyLineWith(yForPerformanceMeasurement)); svg .append("g") .selectAll("line") .data(purchases) .enter().append("line") .attr("fill", "none") .attr("stroke", p => { const diff = lastSnapshot.value - p.snapshot.value; if (diff >= 0) { return "rgba(0, 128, 0, 0.5)"; } else { return "rgba(255, 0, 0, 0.5)"; } }) .attr("stroke-width", 1) .attr("x1", p => x(p.snapshot.date)) .attr("y1", p => yForMarketSnapshot(p.snapshot.value)) .attr("x2", x(lastSnapshot.date)) .attr("y2", yForMarketSnapshot(lastSnapshot.value)); return svg.node(); }32:[] 2f:{"title":"Experiments with dollar-cost averaging","cells":[{"id":0,"value":"md`# Experiments with dollar-cost averaging`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"html`\nRegular purchases\n\n${\n generateGraph(\n regularPurchases,\n regularPurchasePerformanceMeasurements,\n yAxisForRegularPurchasePerformanceMeasurements,\n yForRegularPurchasePerformanceMeasurement\n )\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"html`\nRandom purchases\n\n${\n generateGraph(\n randomPurchases,\n randomPurchasePerformanceMeasurements,\n yAxisForRandomPurchasePerformanceMeasurements,\n yForRandomPurchasePerformanceMeasurement\n )\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"{\n const totalPctChange = bigTrade.pctChange;\n const regularTradePctChange = regularTrades.reduce((sum, trade) => {\n return sum + (trade.fractionOfTotal * trade.pctChange);\n }, 0);\n const randomTradePctChange = randomTrades.reduce((sum, trade) => {\n return sum + (trade.fractionOfTotal * trade.pctChange);\n }, 0);\n return html`\n Total gain/loss: ${formatChangeInPercentage(totalPctChange)}
\n Gain/loss with regular purchases: ${formatChangeInPercentage(regularTradePctChange)}
\n Gain/loss with random purchases: ${formatChangeInPercentage(randomTradePctChange)}\n `\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"{\n const frequencyInput = html``;\n frequencyInput.addEventListener(\"change\", (event) => {\n const parsedFrequency = parseInt(event.target.value, 10);\n \n if (!isNaN(parsedFrequency)) {\n mutable frequency = parsedFrequency;\n }\n });\n \n return html`\n Make a purchase every: ${frequencyInput} days
\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"{\n const generateNewGraphButton = html`\n \n `;\n generateNewGraphButton.addEventListener(\"click\", (event) => {\n event.preventDefault();\n refreshGraph();\n });\n \n const generateNewRandomPurchasesButton = html`\n \n `;\n generateNewRandomPurchasesButton.addEventListener(\"click\", (event) => {\n event.preventDefault();\n refreshRandomPurchases();\n });\n \n const randomizeFrequencyButton = html`\n \n `;\n randomizeFrequencyButton.addEventListener(\"click\", (event) => {\n event.preventDefault();\n randomizeFrequency();\n });\n \n return html`\n ${generateNewGraphButton}\n ${generateNewRandomPurchasesButton}\n ${randomizeFrequencyButton}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"mutable frequency = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"mutable marketSnapshots = generateMarketSnapshots()","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"regularPurchases = {\n const snapshotIndices = _.range(0, marketSnapshots.length, frequency);\n const availableCashPerPurchase = availableCash / snapshotIndices.length;\n return generatePurchases(snapshotIndices, (snapshot, availableCash, isFinal) => {\n const pricePerShare = snapshot.value;\n return Math.floor(availableCashPerPurchase / pricePerShare) * pricePerShare\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"mutable randomPurchases = generateRandomPurchases()","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"bigTrade = {\n const firstSnapshot = marketSnapshots[0];\n const lastSnapshot = marketSnapshots[marketSnapshots.length - 1];\n return { pctChange: (lastSnapshot.value / firstSnapshot.value) - 1 };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"regularTrades = generateTradesFrom(regularPurchases)","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"randomTrades = generateTradesFrom(randomPurchases)","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"regularPurchasePerformanceMeasurements = buildPurchasePerformanceMeasurements(regularTrades)","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"randomPurchasePerformanceMeasurements = buildPurchasePerformanceMeasurements(randomTrades)","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"generateMarketSnapshots = () => {\n const initialPricePerShare = 1000;\n const snapshots = [{ date: startDate, value: initialPricePerShare }];\n \n _.times(dateFns.differenceInDays(endDate, startDate), () => {\n const lastSnapshot = snapshots[snapshots.length - 1];\n snapshots.push({\n date: dateFns.addDays(lastSnapshot.date, 1),\n value: lastSnapshot.value + _.random(-20, 20)\n });\n });\n \n return snapshots;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"generateRandomPurchases = () => {\n const shuffledIndices = _.shuffle(_.range(0, marketSnapshots.length));\n const randomLength = _.random(marketSnapshots.length);\n const randomIndices = shuffledIndices.slice(0, randomLength).sort((a, b) => a - b);\n return generatePurchases(randomIndices, (snapshot, availableCash, isFinal) => {\n if (isFinal) {\n return availableCash;\n } else {\n return availableCash * _.random(0.01, 0.25, true);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"generatePurchases = (snapshotIndices, determineValue) => {\n const result = snapshotIndices.reduce(({ availableCash, purchases }, snapshotIndex, index) => {\n const snapshot = marketSnapshots[snapshotIndex];\n const value = determineValue(snapshot, availableCash, index === snapshotIndices.length - 1);\n const newPurchase = {\n snapshot: snapshot,\n date: snapshot.date,\n value: value\n };\n return {\n purchases: purchases.concat([newPurchase]),\n availableCash: availableCash - value\n };\n }, { availableCash: availableCash, purchases: [] });\n return result.purchases;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"generateTradesFrom = (purchases) => {\n const lastSnapshot = marketSnapshots[marketSnapshots.length - 1];\n const purchaseTotal = purchases.reduce((sum, purchase) => {\n return sum + purchase.value;\n }, 0);\n return purchases.map(purchase => {\n return {\n date: purchase.date,\n pctChange: (lastSnapshot.value / purchase.snapshot.value) - 1,\n fractionOfTotal: purchase.value / purchaseTotal\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"buildPurchasePerformanceMeasurements = (trades) => {\n const totalPctChange = bigTrade.pctChange;\n return trades.reduce((cumulatives, trade) => {\n const pctChange = (trade.fractionOfTotal * trade.pctChange);\n const value = cumulatives.length > 0\n ? cumulatives[cumulatives.length - 1].value + pctChange\n : pctChange;\n return cumulatives.concat([\n { date: trade.date, value: value }\n ]);\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"polyLineWith = (y) => {\n return d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y(d => y(d.value))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0, ${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"x = d3\n .scaleTime()\n .domain(d3.extent(marketSnapshots, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"yAxisForMarketSnapshot = (g) => {\n return g\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(yForMarketSnapshot))\n /*\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(p => p.y)\n )\n */\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"yForMarketSnapshot = d3\n .scaleLinear()\n .domain(d3.extent(marketSnapshots, d => d.value))\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"yAxisForRegularPurchasePerformanceMeasurements = (g) => {\n return g\n .attr(\"transform\", `translate(${width - margin.right}, 0)`)\n .call(d3.axisRight(yForRegularPurchasePerformanceMeasurement))\n /*\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(p => p.y)\n )\n */\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"yForRegularPurchasePerformanceMeasurement = d3\n .scaleLinear()\n .domain(d3.extent(regularPurchasePerformanceMeasurements, d => d.value))\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"yAxisForRandomPurchasePerformanceMeasurements = (g) => {\n return g\n .attr(\"transform\", `translate(${width - margin.right}, 0)`)\n .call(d3.axisRight(yForRandomPurchasePerformanceMeasurement))\n /*\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(p => p.y)\n )\n */\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"yForRandomPurchasePerformanceMeasurement = d3\n .scaleLinear()\n .domain(d3.extent(randomPurchasePerformanceMeasurements, d => d.value))\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"refreshGraph = () => {\n mutable marketSnapshots = generateMarketSnapshots();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"refreshRandomPurchases = () => {\n mutable randomPurchases = generateRandomPurchases();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"randomizeFrequency = () => {\n const frequency = _.random(1, (dateFns.differenceInDays(endDate, startDate) / 2) - 1);\n mutable frequency = Math.floor(frequency / 5) * 5;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"numberOfMonths = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"startDate = new Date(2020, 2, 1, 0, 0, 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"endDate = dateFns.addMonths(startDate, numberOfMonths)","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"availableCash = 1000000","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"margin = ({ top: 20, right: 40, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"formatDiff = (diff) => {\n const formattedDiff = formatAsCurrency(diff);\n \n if (diff >= 0) {\n return html`+${formattedDiff}`\n } else {\n return `${formattedDiff}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"formatChangeInPercentage = (ratio) => {\n const format = new Intl.NumberFormat('en-US', {\n style: 'percent',\n minimumFractionDigits: 2,\n maximumFractionDigits: 2\n });\n const delta = ratio;\n const formattedDelta = format.format(delta);\n console.log(\"ratio\", ratio, \"delta\", delta, \"formattedDelta\", formattedDelta);\n \n if (delta >= 0) {\n return html`+${formattedDelta}`\n } else {\n return `${formattedDelta}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"formatAsCurrency = (number) => {\n const format = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });\n return format.format(number);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require('d3@5', 'd3-array')","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"_ = require('lodash@4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"dateFns = import('date-fns@2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## Prior art\n\n* \n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}