29:null 2a:["$","title",null,{"children":"Is Your Country's Tax Rate Progressive? | Luc Guillemot | Observable"}] 2f:Tf80,smallMultiples = { const svg = d3 .create("svg") .attr("width", bounds.totalWidth) .attr("height", bounds.totalHeight); const chartContainer = svg.append("g") .attr("transform", `translate(${bounds.leftMargin}, ${bounds.topMargin})`); const charts = chartContainer.append("g"); const axis = chartContainer.append("g").attr("data-name", "y-axis-group") .attr("transform", `translate(${-bounds.leftMargin}, 0)`); const xAxis = chartContainer.append("g").attr("data-name", "x-axis-group") .attr("transform", `translate(${bounds.margins.left}, 0)`); xAxis.selectAll("line") .data(xScale.domain()) .join("line") .attr("x1", d => xScale(d)) .attr("x2", d => xScale(d)) .attr("y1", d => { const j = byGeo[0][1].find(x => x.dimension === d).value; return yScale(j) + 4 }) .attr("y2", bounds.chartHeight - bounds.margins.bottom) .attr("stroke", axisColor); xAxis.append("g").append("text") .attr("x", bounds.chartWidth / 2) .attr("y", bounds.chartHeight + 16) .attr("font-size", 14) .attr("font-weight", "bold") .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .text("Earnings cases"); xAxis.append("g").append("text") .attr("x", bounds.chartWidth) .attr("y", bounds.chartHeight) .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("text-anchor", "end") .text("wealthier →"); xAxis.append("g").append("text") .attr("x", 0) .attr("y", bounds.chartHeight) .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("text-anchor", "start") .text("← poorer"); xAxis.append("g").selectAll("text") .data(xScale.domain()) .join("text") .attr("x", d => xScale(d)) .attr("y", bounds.chartHeight - 16) .attr("font-size", 12) .attr("font-family", "sans-serif") .attr("text-anchor", "middle") .text(d => earningCases[d]); axis .append("g") .selectAll("line") .data(d3.range(0, nbRows)) .join("line") .attr( "transform", d => `translate(0, ${bounds.height * d + bounds.margins.top})` ) .attr("stroke-dasharray", "6 4") .attr("x1", 0) .attr("x2", bounds.totalWidth) .attr("y1", yScale(20)) .attr("y2", yScale(20)) .attr("stroke", axisColor); axis .append("g") .selectAll("text") .data(d3.range(0, nbRows)) .join("text") .attr( "transform", d => `translate(0, ${bounds.height * d + bounds.margins.top})` ) .attr("x", 0) .attr("y", yScale(20) - 4) .attr("font-size", 10) .attr("font-family", "sans-serif") .text("20%"); axis .append("g") .selectAll("line") .data(d3.range(0, nbRows)) .join("line") .attr( "transform", d => `translate(0, ${bounds.height * d + bounds.margins.top})` ) .attr("stroke-dasharray", "6 4") .attr("x1", 0) .attr("x2", bounds.totalWidth) .attr("y1", yScale(30)) .attr("y2", yScale(30)) .attr("stroke", axisColor); axis .append("g") .selectAll("text") .data(d3.range(0, nbRows)) .join("text") .attr( "transform", d => `translate(0, ${bounds.height * d + bounds.margins.top})` ) .attr("x", 0) .attr("y", yScale(30) - 4) .attr("font-size", 10) .attr("font-family", "sans-serif") .text("30%"); axis .append("text") .attr("x", 0) .attr("y", -10) .attr("font-size", 14) .attr("font-weight", "bold") .attr("font-family", "sans-serif") .text("↑ Tax Rate"); axis .append("text") .attr("x", bounds.chartWidth - 8) .attr("y", yScale(EU27.find(x => x.dimension ==="P1_NCH_AW167").value)) .attr("font-size", 12) .attr("font-family", "sans-serif") .attr("dominant-baseline", "middle") .attr("fill", EUColor) .text("EU27"); charts .selectAll("g") .data(byGeo) .join("g") .each(smallChart); return svg.node(); }30:T6ce,function smallChart(thisData, index) { const multiple = d3.select(this); const xOffset = index % nbCols; const yOffset = Math.floor(index / nbCols); const thisMin = d3.min(thisData[1], d => d.value); const thisMax = d3.max(thisData[1], d => d.value); const chart = multiple .append("g") .attr( "transform", `translate(${xOffset * bounds.width}, ${yOffset * bounds.height})` ); const g = chart .append("g") .attr( "transform", `translate(${bounds.margins.left}, ${bounds.margins.top})` ); g.append("g") .selectAll("path") .data(byGeo) .join("path") .attr("stroke", lowlightColor) .attr("stroke-width", 1) .attr("fill", "none") .attr("d", d => line(d[1])); g.append("rect") .attr("stroke", "none") .attr("fill", highlightColorLight) .attr("fill-opacity", .3) .attr("x", 0) .attr("y", yScale(thisMax)) .attr("width", bounds.chartWidth) .attr("height", yScale(thisMin) - yScale(thisMax)); g.append("path") .attr("stroke", EUColor) .attr("stroke-width", 1) .attr("fill", "none") .attr("d", line(EU27)); g.append("path") .attr("stroke", highlightColor) .attr("stroke-width", 2) .attr("fill", "none") .attr("d", line(thisData[1])); g.selectAll("circle") .data(thisData[1]) .join("circle") .attr("fill", highlightColor) .attr("cx", d => xScale(d.dimension)) .attr("cy", d => yScale(d.value)) .attr("r", 2); g.append("text") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("fill", highlightColor) .attr("dx", 6) .attr("dy", 20) .text(thisData[0]); }31:[{"id":"091b6b346570a4bcf588ed40a4f95644861f8d63d82f0ae14f917b92299f029a907562672930c3ec2fe34cba8ae63dcd48805cc2217053e6575cbc6e17167092","href":"https://static.observableusercontent.com/files/091b6b346570a4bcf588ed40a4f95644861f8d63d82f0ae14f917b92299f029a907562672930c3ec2fe34cba8ae63dcd48805cc2217053e6575cbc6e17167092","name":"euro-taxes@2.csv","type":"text/csv","lastModified":1618506980334.422,"size":8042}] 2d:{"id":"fc465bc2acd8b091","slug":"how-progressive-is-your-income-tax-rate","title":"Is Your Country's Tax Rate Progressive?","thumbnail":"f0ed4f61ab8af95a6a7538d73ac7f3ac8ecc079c0755dcbfbeef245e2ad584df","access_level":"public","create_time":"$D2021-04-14T17:36:24.079Z","update_time":"$D2021-04-25T07:11:45.623Z","view_time":null,"first_public_time":"$D2021-04-16T08:20:46.540Z","has_unpublished_edits":null,"fork":{"id":"3c31ae9c4462b0e9","slug":"starter/2","title":"Starter","owner":{"id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":"starter_2024"},"version":723,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbce705bc4e76709","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":null}],"members":[{"type":"individual","id":"dbce705bc4e76709","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2aaf9ec71cbec838","slug":"30-day-chart-challenge-2021","title":"30 Day Chart Challenge 2021","owner":{"id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot"}},"type":"notebook","body":{"title":"Is Your Country's Tax Rate Progressive?","cells":[{"id":0,"value":"md`# Is Your Country's Tax Rate Progressive?\n\n**${highlightedText({\n background: \"#fff\",\n color: highlightColor,\n text: \"Countries and regions\"\n})}** are sorted by the ${highlightedText({\n background: \"#FFf4f4\",\n text: \"difference between the highest and the lowest tax rate\"\n})} (countries with the most progressive tax rates are on top). Horizontally, _earnings cases_ represent how much of the country's average earning a single person without children earns. The **${highlightedText(\n {\n background: \"#fff\",\n color: EUColor,\n text: \"European Union 27\"\n }\n)}** average is displayed for comparison.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"attribution({\n source: {\n label: \"Eurostat (EARN_NT_TAXRATE, 2020)\",\n link:\n \"https://ec.europa.eu/eurostat/databrowser/view/earn_nt_taxrate/default/table?lang=en\"\n },\n day: \"13 + 14\",\n category: \"Relationships\",\n prompt: \"Correlation + Space\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"axisColor = \"#444\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"EUColor = \"#103c85\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"lowlightColor = \"#ededed\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"highlightColorLight = \"#FFDFDF\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"highlightColor = \"#C2278F\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"line = d3\n .line()\n .defined(d => !isNaN(d.value))\n .x(d => xScale(d.dimension))\n .y(d => yScale(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"bounds = ({\n margins,\n width: multipleWidth,\n height: multipleHeight,\n chartWidth: multipleWidth - margins.left - margins.right,\n chartHeight: multipleHeight - margins.top - margins.bottom,\n totalWidth: multipleWidth * nbCols + leftMargin,\n totalHeight: multipleHeight * nbRows + topMargin,\n topMargin,\n leftMargin\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"multipleHeight = width / nbCols","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"multipleWidth = width / nbCols","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"nbRows = Math.ceil(byGeo.length / nbCols)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"nbCols = Math.floor(width / 200)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"margins = ({ top: 2, right: 2, bottom: 32, left: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"topMargin = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"leftMargin = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(data, d => d.value))\n .range([bounds.chartHeight, 0])\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"xScale = d3\n .scalePoint()\n .domain([...new Set(data.map(d => d.dimension))])\n .range([0, bounds.chartWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"byGeo = d3\n .groups(data.filter(d => d.geo !== \"EU27_2020\"), d => d.label)\n .map(d => [...d, d3.max(d[1], d => d.value) - d3.min(d[1], d => d.value)])\n .sort((a, b) => d3.descending(a[2], b[2]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"maxRate = d3.max(data, d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"minRate = d3.min(data, d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"EU27 = data.filter(d => d.geo === \"EU27_2020\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"data = d3\n .csvParse(await FileAttachment(\"euro-taxes@2.csv\").text(), d3.autoType)\n .sort((a, b) =>\n d3.ascending(\n orderedDimension.indexOf(a.dimension),\n orderedDimension.indexOf(b.dimension)\n )\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"orderedDimension = [\n \"P1_NCH_AW50\",\n \"P1_NCH_AW67\",\n \"P1_NCH_AW80\",\n \"P1_NCH_AW100\",\n \"P1_NCH_AW125\",\n \"P1_NCH_AW167\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"earningCases = ({\n P1_NCH_AW50: \"50%\",\n P1_NCH_AW67: \"67%\",\n P1_NCH_AW80: \"80%\",\n P1_NCH_AW100: \"100%\",\n P1_NCH_AW125: \"125%\",\n P1_NCH_AW167: \"167%\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Visualization Assets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## Libraries & Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"highlightedText = ({ background, color, text }) =>\n html` ${text}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"attribution = ({\n source,\n note,\n day,\n category,\n prompt\n}) => md`

**#30DayChartChallenge** | ${day} | ${category} | ${prompt}

\n ${note ? `

${note}

` : \"\"}\n

**Source**: ${\n source.link ? `[${source.label}](${source.link})` : source.label\n}

**Creator**: [Luc Guillemot](https://lucguillemot.com/)

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"formatPercentage = d3.format(\".1%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"formatThousands = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"