31:T4a2,{ const d = []; for (const e of data.series) { d.push({ year: e.year, tax: e.values[tooltipX].tax * 100, taxhealth: e.values[tooltipX].taxhealth * 100 }); } const color1 = 'blue'; const color2 = 'purple'; return table(d, { // rank: true, style: 'compact', columns: { year: { title: 'year', type: 'string' }, tax: { title: 'w/o healthcare', type: 'string', formatter(val, i) { const width = val * 1; return html`

${d3.format( '.1%' )(val / 100)}

`; } }, taxhealth: { title: 'with healthcare', type: 'string', formatter(val, i) { const width = val * 1; return html`

${d3.format( '.1%' )(val / 100)}

`; } } } }); }32:T13ba,chart = { const field = h === 'true' ? 'taxhealth' : 'tax'; const series = data.series.filter(e => v === 'bef' ? e.year <= p : v === 'cur' ? e.year === p : v === 'all' ? true : 'ERROR' ); const height = 550; const fmt2 = d3.format('.1f'); const margin = { top: 20, right: 60, bottom: 30, left: 50 }; const x = d3 .scaleLinear() .domain([0, dataHisto.length - 1]) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0.1, 0.8]) .range([height - margin.bottom, margin.top]); const xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .tickFormat(d => data.xFormat[d] + (d < 127 ? '%' : ' top')) .tickValues([...d3.range(0, 100, 10), 99, 108, 117, 127]) ); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(d => Math.round(d * 100) + '%')); const line = d3 .line() .x((d, i) => x(i)) .y(d => y(d[field])); function hover(svg, path) { const dot = svg.append('g').attr('display', 'none'); dot.append('circle').attr('r', 2.5); dot .append('text') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('text-anchor', 'middle') .attr('y', -8); const vline = svg .append('g') .append('line') .attr("stroke", "gray") .attr('stroke-width', 1) .attr("y1", 0 + margin.top) .attr("y2", height - margin.bottom) .attr('display', 'none'); function moved(evt) { evt.preventDefault(); const pointer = d3.pointer(evt, this); const xm = x.invert(pointer[0]); const ym = y.invert(pointer[1]); const i1 = d3.bisectLeft(d3.range(data.gperc.length), xm, 1); const i0 = i1 - 1; const i = Math.min(xm - i0 > i1 - xm ? i1 : i0, data.gperc.length - 1); const s = d3.least(series, d => Math.abs(d.values[i][field] - ym)); console.log({ i0, i1, i, s }); mutable tooltipX = s.values[i].i; path .attr('stroke', d => (d === s ? 'red' : 'lightblue')) .filter(d => d === s) .raise(); dot.attr( 'transform', `translate(${x(s.values[i].i)},${y(s.values[i][field])})` ); vline.attr("x1", x(s.values[i].i)).attr("x2", x(s.values[i].i)); const a = s.values[i].gperc; const b = fmt2(s.values[i][field] * 100); const txt = `${s.year} | x=${a}% y=${b}%`; dot.select('text').text(txt); // dot.select('text').call(text => // text // .selectAll("tspan") // .data([s.year, a, b]) // .join("tspan") // .attr("x", 0) // .attr("y", (d, i) => `${i * 1.5}em`) // // .style("font-weight", (_, i) => (i ? null : "bold")) // .text(d => d) // ); } function entered() { path.style('mix-blend-mode', null).attr('stroke', '#ddd'); dot.attr('display', null); vline.attr('display', null); } function left() { path.attr('stroke', (d, i) => (d.year === p ? 'red' : 'steelblue')); path.attr('stroke-width', (d, i) => (d.year === p ? 2.5 : 1.5)); dot.attr('display', 'none'); vline.attr('display', 'none'); mutable tooltipX = data.N - 1; } if ('ontouchstart' in document) svg .style('-webkit-tap-highlight-color', 'transparent') .on('touchmove', moved) .on('touchstart', entered) .on('touchend', left); else svg .on('mousemove', moved) .on('mouseenter', entered) .on('mouseleave', left); } const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); svg.append('g').call(xAxis); svg.append('g').call(yAxis); const title = svg .append('g') .append('text') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('text-anchor', 'left') .attr('fill', h === 'true' ? 'purple' : 'blue') .attr('x', x(2)) .attr('y', y(0.79)) .text((h === 'true' ? 'WITH' : 'WITHOUT') + ' healthcare'); const years = svg .append('g') .selectAll('text') .data(series) .join('text') .attr('font-family', 'sans-serif') .attr('font-size', 10) .attr('text-anchor', 'left') .attr('fill', 'gray') .attr('x', x(data.gperc.length - 1) + 5) .attr('y', d => y(d.values[data.gperc.length - 1][field])) .text(d => d.year); const path = svg .append('g') .attr('fill', 'none') // .attr('stroke-width', 1.5) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .style('mix-blend-mode', 'multiply') .selectAll('path') .data(series) .join('path') .attr('d', d => line(d.values)) .attr('stroke', (d, i) => (d.year === p ? 'red' : 'steelblue')) .attr('stroke-width', (d, i) => (d.year === p ? 2.5 : 1.5)) .filter(d => d.year === p) .raise(); svg.call(hover, path); return svg.node(); }33:[{"id":"ca23313348719579cc9663d9703d0cfeee925d89284b04bc30fb25335334f997eab0d0563d3b3102250978bf92734169c55783283b19cc202382978011d36491","href":"https://static.observableusercontent.com/files/ca23313348719579cc9663d9703d0cfeee925d89284b04bc30fb25335334f997eab0d0563d3b3102250978bf92734169c55783283b19cc202382978011d36491","name":"us-tax-histo.json","type":"application/json","lastModified":1598719583408.349,"size":66526}] 2f:{"title":"US Tax Rates History","cells":[{"id":0,"value":"md`# US Tax Rates History\n## Aggregated by revenue quantile 1950-2020\n\nThe aggregate tax rate is the sum of all taxes in % applied directly or indirectly to an individual: \n+ payroll tax\n+ income tax\n+ sales and excise tax\n+ property tax\n+ corporate tax\n+ estate tax\n+ health care tax\n + Healthcare costs are a *de facto* a privatized poll tax for all people employed in 50+ people companies\n\nData from [taxjusticenow.org](https://taxjusticenow.org/#/appendix)\n\nThe tax profile changed so radically over 3 generations 😲 that it hardly looks like the same country 🇺🇸 How far can the trend towards flat/regressive tax profile go ? Is there a social force in the opposite direction ? Or beyond a certain breaking point is it bound to even accelerate - black hole style ?? 🤔\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"viewof p = Player(data.years, {\n autoplay: true,\n initial: 0,\n delay: 1500,\n loop: true,\n format: e => 'year ' + e\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"viewof h = radio({\n title: 'Include healthcare costs to tax',\n options: [{ label: 'Yes', value: 'true' }, { label: 'No', value: 'false' }],\n value: 'true'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"viewof v = radio({\n title: 'Show years relative to slider',\n // description: 'TBD',\n options: [\n { label: 'Before', value: 'bef' },\n { label: 'Current', value: 'cur' },\n { label: 'All', value: 'all' }\n ],\n value: 'bef'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"{\n const v = data.gperc[tooltipX];\n const qtile = tooltipX === data.N - 1 ? 'top' + v : v + '%';\n return md`### Tax rates for quantile ${qtile}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"mutable tooltipX = data.N - 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`## Data\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"data = {\n const prefix = 'taxhealth';\n const years = Object.keys(dataHisto[0])\n .filter(e => e.startsWith(prefix))\n .map(e => +e.slice(prefix.length));\n const gperc = dataHisto.map(e => e.gperc);\n const N = gperc.length;\n\n const d = {\n gperc,\n N,\n years,\n series: years.map(year => ({\n year,\n values: dataHisto.map((e, i) => ({\n i,\n gperc: e.gperc,\n tax: e['tax' + year],\n taxhealth: e['taxhealth' + year]\n }))\n }))\n };\n d.xFormat = d.series[0].values.reduce((acc, v) => {\n acc[v.i] = v.gperc;\n return acc;\n }, {});\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"md`\nObject **dataHisto** is extracted from the spreadsheet [Tax simulator in excel format (Updated 1/22/2019)](https://eml.berkeley.edu/~saez/taxsimulator2.xlsx) (from [taxjusticenow.org technical appendix](https://taxjusticenow.org/#/appendix)) tab \"datahist\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"dataHisto = FileAttachment(\"us-tax-histo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"md`## Annex`","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"faStyle({ solid: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"import { Player } from \"@oscar6echo/player\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"import { style as faStyle } from \"@airbornemint/fontawesome\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"import { table } from \"@tmcw/tables\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}