29:null 2a:["$","title",null,{"children":"Europeans living in a country where same-sex marriage is allowed | Luc Guillemot | Observable"}] 2f:T95c,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .selectAll("text") .data(labels) .join("text") .attr("x", d => xScale(d.year)) .attr("dx", 3) .attr("dy", d => d.index * 10) .attr("font-size", 9) .attr("font-family", "sans-serif") .attr("font-weight", "bold") .attr("text-anchor", "start") .text(d => d.country); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .selectAll("rect") .data(flagColors) .join("rect") .attr("fill", d => d) .attr("fill-opacity", 0.05) .attr("x", 0) .attr("width", bounds.chartWidth) .attr("y", (d, i) => yFlagScale(i)) .attr("height", bounds.chartHeight / flagColors.length); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .append("mask") .attr("id", "fill-area") .append("path") .datum(data) .attr("d", area) .attr("fill", "white"); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .selectAll("rect") .data(flagColors) .join("rect") .attr("fill", d => d) .attr("fill-opacity", 0.6) .attr("x", 0) .attr("width", bounds.chartWidth) .attr("y", (d, i) => yFlagScale(i)) .attr("height", bounds.chartHeight / flagColors.length) .attr("mask", "url(#fill-area)"); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .append("path") .datum(data) .attr("d", line) .attr("fill", "none") .attr("stroke-width", 3) .attr("stroke", "#222"); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .selectAll("circle") .data(data) .join("circle") .attr("fill", "#222") .attr("r", 3) .attr("cx", d => xScale(d.year)) .attr("cy", d => yScale(d.cumPop)); svg .append("g") .attr("transform", `translate(${margins.left}, ${margins.top})`) .selectAll("line") .data(data) .join("line") .attr("x1", d => xScale(d.year)) .attr("x2", d => xScale(d.year)) .attr("y1", d => yScale(d.cumPop)) .attr("y2", 0) .attr("stroke", "#222"); svg.append("g").call(yAxis); svg.append("g").call(xAxis); return svg.node(); }30:[{"id":"5e18a547e16c003dbb1e2d1ce22b62a3c435d9e566dc23c6d3797e2367666a1b7dd1ac5f429f628058efa648cebb09574dd1ef433fa9260db3b3741d5cece3d2","href":"https://static.observableusercontent.com/files/5e18a547e16c003dbb1e2d1ce22b62a3c435d9e566dc23c6d3797e2367666a1b7dd1ac5f429f628058efa648cebb09574dd1ef433fa9260db3b3741d5cece3d2","name":"sameSexMarriage@3.csv","type":"text/csv","lastModified":1618987703472.419,"size":702}] 2d:{"id":"f74d072745878a40","slug":"same-sex-marriage-in-europe","title":"Europeans living in a country where same-sex marriage is allowed","thumbnail":"fb0ea8a6c91ca592b335f97fadcd77f7d8947b7132abbd694e0288b9898eb61c","access_level":"public","create_time":"$D2021-04-05T10:06:55.875Z","update_time":"$D2021-04-21T06:55:50.674Z","view_time":null,"first_public_time":"$D2021-04-05T13:50:23.130Z","has_unpublished_edits":null,"fork":{"id":"3c31ae9c4462b0e9","slug":"starter/2","title":"Starter","owner":{"id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot"}},"stars":1,"starred":false,"owner":{"type":"team","id":"4eed1ed0ec8c7a2c","login":"lucguillemot","name":"Luc Guillemot","avatar_url":"https://avatars-next.observableusercontent.com/692f83824eae0715a07f9a04941a73318aad7b915db8ddda53058c392957fc6f","tier":"starter_2024"},"version":443,"publish_version":443,"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":1,"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":"Europeans living in a country where same-sex marriage is allowed","cells":[{"id":0,"value":"md`# Europeans living in a country where same-sex marriage is allowed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"attribution({\n source: [\n {\n label: \"Eurostats - DEMO_PJAN (Population of 2021)\",\n link:\n \"https://ec.europa.eu/eurostat/databrowser/view/demo_pjan/default/table?lang=en\"\n },\n {\n label: \"PEW Research Center\",\n link:\n \"https://www.pewforum.org/fact-sheet/gay-marriage-around-the-world/#top\"\n }\n ],\n day: \"20\",\n category: \"Timeseries\",\n prompt: \"Upwards\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"labels = d3.groups(data, d => d.year).flatMap((d, i) => d[1].map((d, i) => ({...d, index: i + 1})))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margins.left},${margins.top})`)\n .call(d3.axisLeft(yScale)\n .ticks(4)\n .tickFormat(formatThousands)\n .tickSize(-bounds.chartWidth))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").remove())\n //.attr(\"stroke\", \"#ddd\"))\n .call(g => g.selectAll(\".tick text\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"x\", bounds.chartWidth + 4)) \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"line = d3.line()\n .x(d => xScale(d.year))\n .y(d => yScale(d.cumPop))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"area = d3.area()\n .curve(curve)\n .x(d => xScale(d.year))\n .y0(yScale(0))\n .y1(d => yScale(d.cumPop))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"curve = d3.curveLinear","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"xAxis = g => g\n .attr(\"transform\", `translate(${margins.left}, ${height - margins.bottom})`)\n .call(d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"xScale = d3.scaleTime().domain(d3.extent(data, d => d.year)).range([0, bounds.chartWidth])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"yScale = d3.scaleLinear().domain([0, d3.max(data, d => d.cumPop)]).range([bounds.chartHeight, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"yFlagScale = d3.scaleLinear()\n .domain([0, flagColors.length])\n .range([0, bounds.chartHeight])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"data = d3.csvParse(await FileAttachment(\"sameSexMarriage@3.csv\").text(), d3.autoType).sort((a, b) => d3.ascending(a.year, b.year))","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":175,"value":"flagColors = [\"#FF0018\", \"#FFA52C\", \"#FFFF41\", \"#008018\", \"#0000F9\", \"#86007D\"]","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: 40, right: 100, bottom: 40, left: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 500","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":385,"value":"attribution = ({\n source,\n note,\n day,\n category,\n prompt\n}) => md`

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

\n ${note ? `

${note}

` : \"\"}\n

**Source**: ${source.map(s => `[${s.label}](${s.link})`).join(\", \")}

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"cumulativeSum = ((sum) => (d) => (sum += d ?? 0))(0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"formatMillions = d3.format(\".2s\")","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"