31:Tbf0,chart = { const svg = d3.select(DOM.svg(_width,height)) let adjusted = false svg.selectAll("rect.recessions") .data(recessionsRange) .enter().append("rect").classed("recessions", true) .attr("x", d => x(d[0])) .attr("width", d => x(d[1]) - x(d[0])) .attr("y", y.range()[1]) .attr("height", y.range()[0] - y.range()[1]) .style("fill", recessionColor) svg.selectAll("path.series") .data(intoSeries(data.filter(z => z.adjusted==adjusted))) .enter().append("path").classed("series", true) .attr("d", line) .style("fill", "none") .style("stroke", (_,i) => colors[i]) .style("stroke-width", 4) .style("stroke-linejoin", "round") svg.selectAll("text.labels") .data(intoSeries(data.filter(z => z.adjusted==adjusted))) .enter().append("text").classed("labels", true) .text(d => seriesLabels(d.key)) .attr("x", x(new Date(2014,0,1)) + 5) .attr("y", d => { const yPos = y(d[d.length-1][1]) return d.key=="lowest" ? yPos + 15 : yPos // adjust label position to avoid overlap }) .style("fill", (d,i) => colors[i]) .style("dominant-baseline", "middle") const beforeAfterLabel = svg.append("text") .classed("adjustedLabel", true) .text(`${adjusted ? "After\u00A0" : "Before\u00A0"}`) .attr("x", _width/2 * .9).attr("y", 25).style("text-anchor", "end").style("fill", d3.hcl(0,0,20)) .style("font-weight", 700) svg.append("text") .classed("adjustedLabelContinued", true) .text("Taxes and Transfers") .attr("x", _width/2 *.9).attr("y", 25).style("text-anchor", "start").style("fill", d3.hcl(0,0,20)) svg.append("line").attr("x1", x.range()[0]).attr("x2", x.range()[1]).attr("y1", y(0)).attr("y2", y(0)) .style("stroke", "rgb(75,75,75)") svg.append("g") .call(d3.axisLeft(y).tickValues(d3.range(-25,126,25)).tickFormat(d => d==125 ? "+" + d + "%" : d)) .attr("transform", `translate(${margin.left},0)`) svg.append("g") .call(d3.axisBottom(x) .tickValues(d3.timeYear.range(new Date(1985,0,1), new Date(2015,0,1), width > 500 ? 5 : 10) .concat([new Date(1979,0,1), new Date(2014,0,1)])) .tickPadding(8)) // .call(g => g.select(".domain").remove()) .attr("transform", `translate(0,${height-margin.bottom})`) yield svg.node() adjusted = !adjusted while(true) { yield svg.node() await Promises.tick(4000) d3.selectAll(".series") .data(intoSeries(data.filter(z => z.adjusted==adjusted))) .transition() .attr("d", line) d3.selectAll("text.labels") .data(intoSeries(data.filter(z => z.adjusted==adjusted))) .transition() .attr("y", d => { const yPos = y(d[d.length-1][1]) return d.key=="lowest" && !adjusted ? yPos + 15 : yPos // adjust label position to avoid overlap }) beforeAfterLabel .text(`${adjusted ? "After\u00A0" : "Before\u00A0"}`) adjusted = !adjusted } }32:[] 2f:{"title":"The Effect of Taxes and Transfers on Income Over Time","cells":[{"id":0,"value":"md`# The Effect of Taxes and Transfers on Income Over Time\n*Average Cumulative Income Growth, 1979–2014*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"html`

Adapted from \"Cumulative Growth in Average Income, by Income Group, 1979 to 2014\" from the Congressional Budget Office's The Distribution of Household Income, 2014.

\"Highest incomes\" is the top 20 percent of earners; \"lowest\" is the bottom 20 percent of earners; \"middle\" is all the people in between.

Shaded regions () indicate recessions.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"recessionColor = d3.hcl(0,0,90)","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"seriesLabels = d3.scaleOrdinal().domain([\"lowest\", \"middle\", \"highest\"]).range([\"Lowest\", \"Middle\", \"Highest incomes\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"colors = [\"#c3ac87\", \"#808063\", \"#3c524b\"]//.reverse()\n// colors = [\"#f29a94\", \"#b06f7e\", \"#554c64\"].reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"margin = ({top: 40, bottom: 35, left: 50, right: 150})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"line = d3.line()\n .x(d => x(new Date(d[0],0,1)))\n .y(d => y(d[1]))\n// line = d3.line()\n// .x(d => x(d[0]))\n// .y(d => y(d[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"_width = Math.min(width,800)","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"x = d3.scaleTime().domain([new Date(1979,0,1), new Date(2014,0,1)]).range([margin.left,_width-margin.right])\n// x = d3.scaleLinear().domain([1979,2014]).range([margin.left,width-margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"y = d3.scaleLinear().domain([-25,125]).range([height-margin.bottom,margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"// take a dataset organized by year and reorganize it by series\nintoSeries = dataset => \n [\"lowest\",\"middle\",\"highest\"].map(group => {\n const series = d3.range(1979,2015).map(year =>\n [year, dataset.find(z => z.year.getFullYear()==year)[group]]\n )\n series.key = group\n return series\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"recessions = [\n [new Date(1953,7,1), new Date(1954,5,1)],\n [new Date(1957,8,1), new Date(1958,4,1)],\n [new Date(1960,4,1), new Date(1961,2,1)],\n [new Date(1969,12,1), new Date(1970,11,1)],\n [new Date(1973,11,1), new Date(1975,3,1)],\n [new Date(1980,1,1), new Date(1980,7,1)],\n [new Date(1981,7,1), new Date(1982,11,1)],\n [new Date(1990,7,1), new Date(1991,3,1)],\n [new Date(2001,3,1), new Date(2001,11,1)],\n [new Date(2007,12,1), new Date(2009,6,1)],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"recessionsRange = recessions.filter(r => r[0].getFullYear()>=1979)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = d3.tsv(\"https://gist.githubusercontent.com/caseylabrack/52c4eca1993815ec19bf8e8434c7e6e0/raw/da46dfcf66493850ce7e368b0d4e764aa1497912/growth-in-income.tsv\", d => { d.year=new Date(+d.year,6,1); d.lowest=+d.lowest; d.middle=+d.middle; d.highest=+d.highest; d.adjusted=d.adjusted==\"TRUE\" ? true : false; return d})\n// data = d3.tsv(\"https://gist.githubusercontent.com/caseylabrack/52c4eca1993815ec19bf8e8434c7e6e0/raw/da46dfcf66493850ce7e368b0d4e764aa1497912/growth-in-income.tsv\", d => { d.year=+d.year; d.lowest=+d.lowest; d.middle=+d.middle; d.highest=+d.highest; d.adjusted=d.adjusted==\"TRUE\" ? true : false; return d})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}