2c:null 2d:["$","title",null,{"children":"Worse for You: Inflation or Taxation? | jimbo the consensualist 🃏 | Observable"}] 32:Tb05,{ const height = 400; const margin = {top: 20, right: 20, bottom: 30, left: 70}; const svg = d3.select(DOM.svg(width, height)); const min = 0; const max = d3.max(data, d => d.cumulativeEndowment); const y = d3.scaleLinear() .domain([min, max]) .range([height - margin.bottom, margin.top]); const x = d3.scaleLinear() .domain([0, periods]) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.1) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .ticks(5, '') .tickFormat('')) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5, ',.2r')) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); svg.append('line') .attr('x1', x(crossoverPeriod)) .attr('y1', y(0)) .attr('x2', x(crossoverPeriod)) .attr('y2', y(max)) .style('stroke', 'gray') .style('stroke-dasharray', '5 5') .style('stroke-width', 2); svg.selectAll('.series') .data(series) .enter() .append('g') .classed('series', true) .selectAll('.segment') .data(({value, color}) => d3.pairs(data, (a, b) => ({ a: value(a), b: value(b), color, }))) .enter() .append('line') .classed('segment', true) .attr('x1', (_, i) => x(i)) .attr('y1', ({a}) => y(a)) .attr('x2', (_, i) => x(i+1)) .attr('y2', ({b}) => y(b)) .style('stroke', ({color}) => color) .style('stroke-width', 3); const div = d3.select(document.createElement('div')) .style('position', 'relative'); div.node().append(svg.node()); const legend = div.append('div') .style('background-color', 'rgba(255, 255, 255, 0.9)') .style('padding', '8px') .style('position', 'absolute') .style('right', `${margin.right + 10}px`) .style('bottom', `${margin.bottom + 20}px`); legend .selectAll('.entry') .data(series) .enter() .append('p') .classed('entry', true) .style('padding', '0 0 0 0.5em') .style('margin', '0 0 2px 0') .style('border-left', d => `3px solid ${d.color}`) .style('font-family', 'Menlo, Consolas, monospace') .style('font-size', '10px') .text(d => d.name); return div.node(); }33:[] 30:{"id":"f28064fc6a391d8c","slug":"worse-for-you-inflation-or-taxation","title":"Worse for You: Inflation or Taxation?","thumbnail":"319e152ce283272976dcc157f64f262048eb273ee7a1cd6d7b1e9660fb80819b","access_level":"public","create_time":"$D2019-07-02T09:20:51.990Z","update_time":"$D2019-10-18T12:46:49.743Z","view_time":null,"first_public_time":"$D2019-07-02T16:20:29.739Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"c59693e81648bf90","login":"jimbojw","name":"jimbo the consensualist 🃏","avatar_url":"https://avatars-next.observableusercontent.com/1f7a1307af61a3499fb9a9b09b672de153ed76d32c0e8c961b7981fe1057d50c","tier":"starter_2024"},"version":313,"publish_version":313,"role":null,"authored":false,"authors":[{"type":"individual","id":"7b1a8c8bb2eb846c","login":"jimbojw","name":"jimbo the consensualist 🃏","avatar_url":"https://avatars-next.observableusercontent.com/1f7a1307af61a3499fb9a9b09b672de153ed76d32c0e8c961b7981fe1057d50c","tier":null}],"members":[{"type":"individual","id":"7b1a8c8bb2eb846c","login":"jimbojw","name":"jimbo the consensualist 🃏","avatar_url":"https://avatars-next.observableusercontent.com/1f7a1307af61a3499fb9a9b09b672de153ed76d32c0e8c961b7981fe1057d50c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Worse for You: Inflation or Taxation?","cells":[{"id":0,"value":"md`# Worse for You: Inflation or Taxation?\n\nWhen economists talk about inflation, they usually mean the observation that prices go up over time.\nThe flip side of inflation is purchasing power loss.\nIf it takes more money to buy something (increased price), then it can equally be said that the same amount of money buys less (loss of purchasing power).\n\nIn this notebook, you can compare the effects of inflation and taxation on your income.\nYou'll see that while tax rates tend to be much higher than inflation rates in any given period, inflation is a greater drain on income over the long term because its effects are cumulative.\n\nUse the controls below the graph to explore how the values impact your income.\nThe dashed vertical line shows the crossover period after which inflation costs you more than taxes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof periods = {\n const node = html`\n \n periods (working years)\n \n \n `;\n const input = node.querySelector('[value]');\n input.oninput = () => node.value = +input.value;\n input.oninput();\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof startingEndowment = {\n const node = html`\n \n starting salary\n \n \n `;\n const input = node.querySelector('[value]');\n input.oninput = () => node.value = +input.value;\n input.oninput();\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof raisePercentage = {\n const node = html`\n \n raise (annual salary increase)\n \n %\n \n `;\n const input = node.querySelector('[value]');\n input.oninput = () => node.value = +input.value;\n input.oninput();\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof inflationLossPercentage = {\n const node = html`\n \n inflation rate (purchasing power loss)\n \n % \n \n `;\n const input = node.querySelector('[value]');\n input.oninput = () => node.value = +input.value;\n input.oninput();\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof taxationLossPercentage = {\n const node = html`\n \n tax rate\n \n %\n \n `;\n const input = node.querySelector('[value]');\n input.oninput = () => node.value = +input.value;\n input.oninput();\n return node;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`\n## Notes\n\n* Many central banks have a stated target inflation rate of 2%.\n* U.S. tax receipts as a percent of GDP has been about [15-20%](https://fred.stlouisfed.org/series/FYFRGDA188S) since WW2.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"crossoverPeriod = data.filter(d => d.valueOfEndowment > d.cumulativeIncome).length - 1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"data = generateData()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"series = [{\n name: 'Salary (before tax)',\n value: d => d.cumulativeEndowment,\n color: '#ccc',\n },{\n name: 'Income (after tax)',\n value: d => d.cumulativeIncome,\n color: 'navy',\n },{\n name: 'Purchasing Power (before tax)',\n value: d => d.valueOfEndowment,\n color: 'darkorange',\n }]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function generateData() {\n const data = [];\n \n for (let i = 0; i < periods + 1; i++) {\n const datum = data[i] = i ? {...data[i-1]} : {\n endowment: startingEndowment,\n cumulativeEndowment: 0,\n cumulativeTaxes: 0,\n cumulativeIncome: 0,\n purchasingPower: 1,\n };\n \n datum.endowment *= (100 + raisePercentage) / 100;\n datum.taxes = datum.endowment * (taxationLossPercentage / 100);\n datum.income = datum.endowment - datum.taxes;\n \n datum.cumulativeEndowment += datum.endowment;\n datum.cumulativeTaxes += datum.taxes;\n datum.cumulativeIncome += datum.income;\n datum.purchasingPower *= (100 - inflationLossPercentage) / 100;\n datum.valueOfEndowment = datum.purchasingPower * datum.cumulativeEndowment;\n datum.valueOfIncome = datum.purchasingPower * datum.cumulativeIncome;\n }\n \n return data;\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"