31:Tc19,{ const svg = d3.select(DOM.svg(_width, height)) svg.append("g") .selectAll("rect") .data(data) .enter().append("rect") .attr("x", d => x(d.householdSize)) .attr("y", d => y(d.high)) .attr("height", d => y(Math.max(d.low,10e3)) - y(d.high)) .attr("width", x.bandwidth()) .style("fill", d => colors(d.rank)) .style("shape-rendering", "crispEdges") const labels = svg.append("g") .selectAll("text") .data(data.filter(d => d.householdSize==7)).enter() labels .append("text") .text(d => rankLabels(d.rank)) // .attr("x", x.range()[1] + 18) .attr("x", x.range()[1] + 5) .attr("y", d => y(d.high) + (y(Math.max(d.low,10e3)) - y(d.high))/2) .style("font-size", ".8em").style("font-family", "sans-serif").style("dominant-baseline", "central") // labels // .append("circle") // .attr("cx", x.range()[1] + 8) // .attr("cy", d => y(d.high) + (y(Math.max(d.low,10e3)) - y(d.high))/2) // .attr("r", 5) // .style("fill", d3.hcl(270,50,90)).style("stroke", "black") // .style("opacity", d => data.filter(z => z.householdSize==input.size) // .find(z => z.low < input.income && z.high > input.income).rank==d.rank ? 1 : 0) svg.append("g") .call(d3.axisBottom(x).tickSize(0).tickPadding(6)) .attr("transform", `translate(0,${height-margin.bottom})`) svg.append("g") .call(d3.axisLeft(y).tickValues([10e3,25e3,50e3,75e3,100e3,250e3,500e3,1e6,2e6]) .tickFormat((d,i) => { let formatted = "" formatted += i==8 ? "$" : "" formatted += d >=1e6 ? d/1e6 + "m" : d/1e3 + "k" formatted += i==8 ? "+" : "" return formatted })) .attr("transform", `translate(${margin.left}, 0)`) const you = svg.append("g").style("opacity", d => input.income && input.size ? 1 : 0) you.append("circle") .attr("cx", d => x(input.size) + x.bandwidth()/2) .attr("cy", d => y(input.income)) .attr("r", 5) .style("fill", d3.hcl(270,50,90)) .style("stroke", "black") you.append("text") .text(d => input.size < 6 ? "← You" : "You →") .attr("x", d => input.size < 6 ? x(input.size) + x.bandwidth()/2 + 10 : x(input.size) + x.bandwidth()/2 - 10) .style("text-anchor", d => input.size < 6 ? "start" : "end") .attr("y", d => y(input.income)) .style("fill", d => data.filter(z => z.householdSize==input.size) .filter(z => z.low < input.income && z.high > input.income) .map(z => colors(z.rank)) .map(z => d3.hcl(z).l)[0] > 45 ? "black" : "white") .style("font-size", ".7em").style("font-family", "sans-serif") .style("dominant-baseline", "central") svg.append("text") .text("Household Size") .attr("x", (x.range()[0] + x.range()[1])/2) .attr("y", y.range()[0] + 40) .style("text-anchor", "middle").style("font-family", "sans-serif").style("font-weight", 700).style("font-size", ".9em") return svg.node() }32:T476,md`Most measures of income don't consider this important factor: how many mouths do you have to feed? A recent Congressional Budget Office report created income groups that took household size into account. Its method was to divide household income by the square root of household size. The Census uses a similar measure. So a household of four that earned $80k is considered the equivalent of a single person making $40k because ${tex`\dfrac{80}{\sqrt{4}} = 40`}. CBO explains this method, called the *square root equivalence scale*, this way: >Economies of scale in some types of consumption—housing in particular—can mean that two people generally do not need twice the income to live as well as one person who lives alone. [Read the report](https://www.cbo.gov/system/files/115th-congress-2017-2018/reports/53597-distribution-household-income-2014.pdf) to learn more about CBO's methodology. Data: Congressional Budget Office, *The Distribution of Household Income, 2015*, [supplemental data file](https://www.cbo.gov/system/files/2018-11/54646-supplemental-data.xlsx) ("Income Group Minimums, by Household Size, 1979 to 2015").`33:[] 2f:{"title":"Look Up Your Real Income Rank","cells":[{"id":0,"value":"md`# Look Up Your Real Income Rank\n*Income Rank by Income (log scale) and Household Size, in 2015 Dollars*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof input = {\n const form = html``;\n form.oninput = () => form.value = {income: form.income.valueAsNumber * 1000, size: form.size.valueAsNumber}\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"md`---\n### Methods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"_width = Math.min(width,700)","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"rankLabels = d3.scaleOrdinal()\n .domain(uniques(data.map(d => d.rank)))\n .range([\"Bottom 20%\", \"21–40\", \"41–60\", \"61–80\", \"81–90\", \"91–95\", \"96–99\", \"Top 1%\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"uniques = arr => arr.reduce((acc,inc) => acc.includes(inc) ? acc : acc.concat(inc), [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"colors = d3.scaleOrdinal()\n .domain(uniques(data.map(d => d.rank)))\n // .range([\"#0d0887\",\"#5302a3\",\"#8b0aa5\",\"#b83289\",\"#db5c68\",\"#f48849\",\"#febd2a\",\"#f0f921\"].reverse())\n // .range([\"#ffffd9\",\"#edf8b1\",\"#c7e9b4\",\"#7fcdbb\",\"#41b6c4\",\"#1d91c0\",\"#225ea8\",\"#0c2c84\"])\n.range([\"#ffcace\", \"#f7a4b1\", \"#e08aa1\", \"#c17898\", \"#9d6a8e\", \"#735b7f\", \"#494765\", \"#232b3d\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"data = d3.csv(\"https://gist.githubusercontent.com/caseylabrack/16d26b08e9ccf03e1f6febca75e61e40/raw/dab28c9418a7b1710d6bdf30d469cbba768d777c/income-ranks-by-household-expanded.csv\", d3.autoType)\n .then(data => {\n let clone = JSON.parse(JSON.stringify(data))\n clone.map(d => {\n if(isNaN(d.high)) d.high = y.domain()[1]\n return d\n })\n return clone\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"margin = ({top : 20, bottom: 50, left: 35, right: 100\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"x = d3.scaleBand()\n .domain(uniques(data.map(z => z.householdSize)))\n .range([margin.left, _width-margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"height = 400\n//height = _width/1.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"y = d3.scaleLog()\n .domain([1e4,2e6])\n .range([height-margin.bottom, margin.top]).clamp(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}