31:T81d,chart = { // Create the SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`); // Define a temporal scale for the x-axis and a linear scale for the y-axis. const x = d3 .scaleUtc() .domain(d3.extent(data.map(d => d.date))) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain(d3.extent(data.map(d => d.value))) .range([height - margin.bottom, margin.top]); // Define and append axes. const xAxis = svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); const yAxis = svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call( d3 .axisLeft(y) .tickSizeOuter(0) .tickFormat(d3.format("~s")) ); yAxis .select(".tick:last-of-type text") .clone() .attr("x", 10) .attr("y", -15) .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", "0.75rem") .attr("font-family", "'Helvetica Neue', sans-serif") .text("Total Debt in Trillions USD"); xAxis.selectAll(".tick line").remove(); yAxis .selectAll(".tick line") .attr("x1", 0) .attr("x2", width - margin.left - margin.right) .attr("stroke-dasharray", 2) .attr("stroke", colors.axis); // Define a line generator for the line chart. const line = d3 .line() .curve(d3.curveBasis) .x(d => x(d.date)) .y(d => y(d.value)); svg .append("path") .attr("d", line(data)) .attr("stroke", colors.line) .attr("stroke-width", 1.5) .attr("fill", "none"); // Create a new tooltip to show the debt on hover of the chart. const tooltip = new Tooltip({ x, y }); svg .on("mousemove", event => tooltip.show(bisect(data, x.invert(event.offsetX))) ) .on("mouseout", tooltip.hide); svg.append(() => tooltip.node); return svg.node(); }32:T458,class Tooltip { constructor({ x, y }) { this._x = x; this._y = y; this._date = svg``; this._debt = svg``; this._line = svg``; this.node = svg` ${this._line} ${this._date} ${this._debt} `; } show(d) { this.node.removeAttribute("display"); this.node.setAttribute( "transform", `translate(${this._x(d.date)},${this._y(d.value)})` ); this._date.textContent = formatDate(d.date); this._debt.textContent = formatDebt(d.value); this._line.setAttribute( "transform", `translate(0, ${this._y(d.value) * -1 + margin.top})` ); } hide() { this.node.setAttribute("display", "none"); } }33:[] 2f:{"title":"The National Debt","cells":[{"id":0,"value":"md`# The National Debt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"md`The national debt is one of those elements of political discussion that, for quite some time, has eluded me. As an average citizen, I don't think about the national debt all that often. Unless we're on the eve of a [government](https://en.wikipedia.org/wiki/Government_shutdowns_in_the_United_States#2013) [shutdown](https://en.wikipedia.org/wiki/Government_shutdowns_in_the_United_States#2018), it often feels like the national debt is the favorite straw man argument of Republicans, a trusty tool for demonizing popular progressive legislation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"md`Republicans make [much political fanfare out of discussing the national debt](https://www.washingtonpost.com/politics/2021/04/08/republicans-are-concerned-about-debt-again-even-they-admit-trump-grew-it/), using the issue to construct a narrative of their own fiscal conservatism juxtaposed against \"[tax and spend](https://en.wikipedia.org/wiki/Tax_and_spend) Democrats\". I've always been skeptical of this storyline; Republican presidents and Congresses spent exorbitantly on the Iraq War, ignored warning signs of the subprime mortgage crisis, and celebrated cutting the corporate tax rate nearly in half in 2017 [even though it did little to nothing to help the economy](https://www.washingtonpost.com/politics/2019/05/28/new-report-further-undermines-trumps-claim-that-tax-cuts-were-economic-rocket-fuel/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"md`All of this got me thinking — **who's really responsible for the national debt?** _What have been the motives driving increased government spending? When has increasing the debt been essential to helping Americans, and when has it been actively harmful?_ In this collection, I seek to explore these questions through a few different lenses, from presidential terms to Congressional eras, using the [Debt to the Penny dataset](https://fiscaldata.treasury.gov/datasets/debt-to-the-penny/debt-to-the-penny) maintained by the US Department of the Treasury.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"md`## How has the national debt changed in the last 30 years?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"md`To establish a baseline for this exploration, we can start off with an interactive line chart showing how the debt has evolved over time since the dataset's beginning on April 1, 1993.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"md`Exploring this graphic, we can make a few broad conclusions.\n\n1. The national debt has increased every year since the dataset's beginning in 1993.\n2. We notice a few key **inflection points** in the data pertaining to events like the start of the Iraq War, the '08-'09 subprime mortgage crisis and recession, and the passage of the CARES Act in 2020.\n3. There are occasional stretches of a few weeks or months where the debt is **flat**, especially in the mid-late 2010s. These tend to coincide with government shutdowns.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"md`To get some more concrete summary statistics, we can also derive the total percent change in the national debt during this time period, as well as the average daily and yearly growth rates.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"percentChange = {\n const start = data[0].value;\n const end = data[data.length - 1].value;\n \n return html`

Percent Change ${d3.format(\".0%\")((end - start) / start)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"medianDailyGrowthRate = {\n const changes = d3.pairs(data, (a, b) => (b.value - a.value) / a.value);\n \n const median = d3.median(changes);\n \n return html`

Median Daily Percent Change ${d3.format(\"p\")(median)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"cagr = {\n const { date: startDate, value: startValue } = data[0];\n const { date: endDate, value: endValue } = data[data.length - 1];\n const diffMs = endDate.getTime() - startDate.getTime();\n const totalYears = diffMs / (1000 * 60 * 60 * 24 * 365);\n \n const rate = Math.pow(endValue / startValue, 1 / totalYears) - 1;\n \n return html`

Compound Annual Growth Rate ${d3.format(\"p\")(rate)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"md`These statistics are a useful baseline for beginning our analysis, but they don't yet answer any questions about which political parties, figures, and events are responsible for these changes in the national debt. To begin exploring these questions, let's look at how the national debt changed under different presidents.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"md`### Data Preparation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"endpoint = 'https://api.fiscaldata.treasury.gov/services/api/fiscal_service/v2/accounting/od/debt_to_penny'","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"data = {\n const resolve = (url, acc = []) => {\n const data = d3.json(url).then(response => {\n const result = acc.concat(\n response.data.map(d => ({\n date: d3.utcParse(\"%Y-%m-%d\")(d.record_date),\n value: +d.tot_pub_debt_out_amt\n }))\n );\n\n if (response.links.next) {\n return resolve(`${endpoint}?${response.links.next}`, result);\n }\n\n return result;\n });\n\n return data;\n };\n\n return resolve(`${endpoint}?page[number]=1&page[size]=1000`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":762,"value":"md`### Interaction Elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"bisect = {\n const bisectDate = d3.bisector(d => d.date).left;\n\n return (data, date) => {\n const i = bisectDate(data, date, 1);\n const a = data[i - 1];\n const b = data[i];\n\n return date - a.date > b.date - date ? b : a;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"formatDate = d3.utcFormat(\"%b %-d, ’%y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"formatDebt = d3.format(\"s\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"margin = ({ top: 40, left: 40, right: 40, bottom: 40 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"colors = ({\n axis: '#D1D5DB',\n line: 'steelblue',\n metric: '#9CA3AF'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":775,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}