29:null 2a:["$","title",null,{"children":"Gender Income Gap, Squared | Luc Guillemot | Observable"}] 2f:T949,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .selectAll("g") .data(income.filter(d => d.marriageType === "Same-sex Male")) .join("g") .attr( "transform", d => `translate(${xScale(d.value)}, ${bounds.chartHeight - heightScale(d.ageGroup) + ageGroupHeight * .25})` ) .call(gayFlag); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .selectAll("g") .data(income.filter(d => d.marriageType === "Same-sex Female")) .join("g") .attr( "transform", d => `translate(${xScale(d.value)}, ${bounds.chartHeight - heightScale(d.ageGroup) + ageGroupHeight * .25})` ) .call(lesbianFlag); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .selectAll("line") .data(income) .join("line") // .attr("stroke-dasharray", "4 2") .attr("stroke", d => colorScale(d.marriageType)) .attr("x1", d => xScale(d.value) - stripWidth / 2) .attr("x2", d => xScale(d.value) - stripWidth / 2) .attr( "y1", d => bounds.chartHeight - heightScale(d.ageGroup) + ageGroupHeight * .25 ) .attr("stroke-width", stripWidth) .attr( "y2", d => bounds.chartHeight - heightScale(d.ageGroup) + ageGroupHeight ); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .selectAll("line") .data(ageGroups.filter(d => d !== "Total")) .join("line") //.attr("stroke-dasharray", "4 2") .attr("x1", 0) .attr("x2", bounds.chartWidth) .attr("y1", d => bounds.chartHeight - heightScale(d)) .attr("y2", d => bounds.chartHeight - heightScale(d)) .attr("stroke", "#ccc"); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .selectAll("text") .data(ageGroups) .join("text") .attr("x", 0) .attr("y", d => bounds.chartHeight - heightScale(d)) .attr("font-weight", "regular") .attr("font-size", 14) .attr("font-family", "sans-serif") .attr("dominant-baseline", "middle") .attr("dy", ageGroupHeight / 2) .text(d => d); svg.append("g").call(xAxis); return svg.node(); }30:[{"id":"b4aa260da8bf828aeacf91c3701146dcb1644451bcdfe44b5f4c0ddb6476bc209565552b7374327e6b4b86ac1a590af2e8487d898b213f21dd31eaf038494db6","href":"https://static.observableusercontent.com/files/b4aa260da8bf828aeacf91c3701146dcb1644451bcdfe44b5f4c0ddb6476bc209565552b7374327e6b4b86ac1a590af2e8487d898b213f21dd31eaf038494db6","name":"acs-2019-married-couples-household-income@2.csv","type":"text/csv","lastModified":1618254629045.194,"size":337}] 2d:{"id":"2a447036f4dc2807","slug":"gender-income-gap-squared","title":"Gender Income Gap, Squared","thumbnail":"58a3c08b4ae3fb1f7b80ff283f5bd9ef0043b4c2de5ac25840a98e62cad4d0ca","access_level":"public","create_time":"$D2021-04-11T18:11:07.488Z","update_time":"$D2021-04-14T16:57:44.692Z","view_time":null,"first_public_time":"$D2021-04-14T07:22:49.804Z","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":553,"publish_version":553,"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":"Gender Income Gap, Squared","cells":[{"id":0,"value":"md`# Gender Income Gap, Squared\n\nDiscrimination on the work place has long lead gay workers to earn lower wages than straight workers. According to [data from the American Census Survey 2019 about married coupled households](https://www.census.gov/library/stories/2020/09/same-sex-married-couples-have-higher-income-than-opposite-sex-married-couples.html), this gap seems to decrease, which makes the income gender gap even starker, where ${highlightedText(\n { background: colorScale(\"Same-sex Female\"), text: \"lesbian married couples\" }\n)} earn less in average than ${highlightedText({\n background: colorScale(\"Same-sex Male\"),\n text: \"gay male couples\"\n})}, who earn more in average than ${highlightedText({\n background: colorScale(\"Opposite-sex\"),\n text: \"Opposite-sex couples\"\n})}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"swatches({ color: colorScale })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"attribution({\n source: {\n label: \"US Census Bureau - ACS 1-year estimates 2019\",\n link:\n \"https://www.census.gov/library/stories/2020/09/same-sex-married-couples-have-higher-income-than-opposite-sex-married-couples.html\"\n },\n day: \"12\",\n category: \"Distributions\",\n prompt: \"Strips\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"md`These numbers probably don't reflect the reality of the queer community though. Only _married coupled households_ are considered, which account for only 58% of the 980'000 same-sex households in the US, and 88% of opposite-sex households, and only consider the gender binary. Gay male couples tend to live in [coastal metropolitan areas](https://www.census.gov/library/publications/2021/acs/acsbr-005.html) where wages are usually higher. Lesbians couples are more likely to live in smaller cities and suburban areas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"colorScale = d3\n .scaleOrdinal()\n .domain([...new Set(income.map(d => d.marriageType))])\n .range([\"#4f8fe6\", \"#FF9A56\", \"#454545\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"ageGroups = [...new Set(income.map(d => d.ageGroup))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"lesbianFlag = g =>\n g\n .selectAll(\"rect\")\n .data(lesbianFlagColors)\n .join(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => i * 3)\n .attr(\"width\", flagWidth)\n .attr(\"height\", 3)\n .attr(\"fill\", d => d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"gayFlag = g =>\n g\n .selectAll(\"rect\")\n .data(gayFlagColors)\n .join(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => i * 3)\n .attr(\"width\", flagWidth)\n .attr(\"height\", 3)\n .attr(\"fill\", d => d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"lesbianFlagColors = [\"#A30262\", \"#D362A4\", \"#FFFFFF\", \"#FF9A56\", \"#D52D00\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"gayFlagColors = [\n \"#750787\",\n \"#004dff\",\n \"#008026\",\n \"#ffed00\",\n \"#ff8c00\",\n \"#e40303\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"heightScale = d3\n .scaleOrdinal()\n .domain(ageGroups)\n .range([ageGroupHeight, ageGroupHeight*2, ageGroupHeight*3])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(${margins.left}, ${height - margins.bottom})`)\n .call(\n d3\n .axisBottom(xScale)\n .ticks(4)\n .tickSizeInner(4)\n .tickSizeOuter(0)\n )\n .call(g =>\n g\n .selectAll(\".tick > text\")\n .attr(\"font-size\", 14)\n .attr(\"font-weight\", \"regular\")\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"y\", margins.bottom - 20)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"font-size\", 14)\n .text(\n \"→ Median married coupled households income in the United States (USD)\"\n )\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"xScale = d3\n .scaleLinear()\n .domain(d3.extent(income, d => d.value))\n .range([0, bounds.chartWidth])\n .nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"income = d3\n .csvParse(\n await FileAttachment(\n \"acs-2019-married-couples-household-income@2.csv\"\n ).text(),\n d3.autoType\n )\n .filter(d => d.marriageType !== \"Same-sex All\")","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":432,"value":"ageGroupHeight = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"flagWidth = 24","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"stripWidth = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"bounds = ({ margins, \n chartWidth: width - margins.left - margins.right, \n chartHeight: height - margins.top - margins.bottom })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"margins = ({ top: 10, right: 0, bottom: 60, left: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 210","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":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"