2b:null 2c:["$","title",null,{"children":"Day 24: #30DayChartChallenge. Proportion of seats held by women in national parliaments | Roman Sverdan | Observable"}] 31:T4b2,dataviz = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible"); svg.append("g").call(xAxis); svg.append("g").call(yAxis); const path = svg .append("g") .attr("fill", "none") .attr("stroke", "#ddd") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(data.countries) .join("path") .attr("d", (d) => line(d.values.map((el, i) => (el == 0 ? el[i - 1] : el)))) .attr("class", (d) => d.code.toLowerCase()); svg.select(".wld, .euu").raise(); svg.selectAll(".eas").raise().classed("poi", true); svg.call(hover, path); svg .append("text") .attr("class", "legend") .attr("y", y(31.8)) .attr("x", width - margin.right + 5) .attr("font-weight", "bold") .style("fill", "rgb(251 0 0 / 83%)") .text("EU"); svg .append("text") .attr("class", "legend") .attr("y", y(24.58)) .attr("x", width - margin.right + 5) .text("World Mean"); svg.selectAll(`.${sc}`).style("stroke", "black").style("stroke-width", "2px"); svg.selectAll(`.${sc}`).raise(); return svg.node(); }32:T77a,html` `33:T6f6,function hover(svg, path) { 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 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("y", -8); function moved(event) { event.preventDefault(); const pointer = d3.pointer(event, this); const xm = x.invert(pointer[0]); const ym = y.invert(pointer[1]); const i = d3.bisectCenter(data.dates, xm); const s = d3.least(data.countries, (d) => Math.abs(d.values[i] - ym)); path .attr("stroke", (d) => (d === s ? "steelblue" : "#ddd")) .attr("stroke-width", (d) => (d === s ? 1.5 : 0.5)) .filter((d) => d === s) .raise(); dot.attr( "transform", `translate(${x(data.dates[i]) - halfYearSize},${y(s.values[i])})` ); svg.selectAll(".euu,.wld,.poi").raise(); toolTip .style("left", event.pageX + 18 + "px") .style("top", event.pageY + 18 + "px") .style("display", "block").html(`${s.values[i].toFixed( 2 )}%
${s.name} `); } function entered() { path.attr("stroke", "#ddd").attr("stroke-width", 0.5); dot.attr("display", null); svg.selectAll(".sgp,.wld,.poi").raise(); svg.selectAll(`.${sc}`).raise(); } function left() { path.attr("stroke", null).attr("stroke-width", 0.5); dot.attr("display", "none"); svg.selectAll(".euu,.wld,.poi").raise(); toolTip.style("display", "none"); } }34:[{"id":"c4acaa2e22e5600d22c6c4a8f337dca860ad37d38b3bfa9654d4514b5eb0dade6eb0ad2c845c99330129e86e9ec1938580f3a2484a5e51f90ccab9bee76dd7e2","href":"https://static.observableusercontent.com/files/c4acaa2e22e5600d22c6c4a8f337dca860ad37d38b3bfa9654d4514b5eb0dade6eb0ad2c845c99330129e86e9ec1938580f3a2484a5e51f90ccab9bee76dd7e2","name":"candidates2020.json","type":"application/json","lastModified":1673698080372.631,"size":143364},{"id":"883d83b92b5e94816b4b9c67c1fa3e0c5f423d4989dcf5a93a2b479c5750053261dc68b92f17706b067985f7c4e1fdbeb214bc603b3c55753b8e679cc2c4f938","href":"https://static.observableusercontent.com/files/883d83b92b5e94816b4b9c67c1fa3e0c5f423d4989dcf5a93a2b479c5750053261dc68b92f17706b067985f7c4e1fdbeb214bc603b3c55753b8e679cc2c4f938","name":"seats_by_women@1.json","type":"application/json","lastModified":1673698080372.631,"size":244459}] 2f:{"id":"01c9cf6b2f2ee268","slug":"30daychartchallenge-day-24","title":"Day 24: #30DayChartChallenge. Proportion of seats held by women in national parliaments","thumbnail":"f1aca9bf9163310dc9dc37961cac6d7d8004c6e9cf96e4ca3898817e04edf2d2","access_level":"public","create_time":"$D2023-01-14T12:08:00.372Z","update_time":"$D2023-04-24T19:13:54.158Z","view_time":null,"first_public_time":"$D2023-01-14T12:08:00.372Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":"starter_2024"},"version":2161,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null}],"members":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6909a3a6854e8e08","slug":"30daychartchallenge-2023","title":"#30DayChartChallenge 2023","owner":{"id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan"}},"type":"notebook","body":{"title":"Day 24: #30DayChartChallenge. Proportion of seats held by women in national parliaments","cells":[{"id":0,"value":"md`# Day 24: #30DayChartChallenge. Proportion of seats held by women in national parliaments\n\ndata: World bank\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2109,"value":"viewof selectedCountry = Inputs.select(\n data.countries.map((el) => el.name),\n {\n value: \"World\",\n label: \"Select country\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"

\nAbbreviations on the chart
\nOECD - Organisation for Economic Co-operation and Development
\nIDA - International Development Association
\nIBRD - International Bank for Reconstruction and Development
\n
\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":530,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"margin = ({top: 30, right: 50, bottom: 70, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data.dates))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data.countries, d => d3.max(d.values))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1878,"value":"xLoc = x(data.dates[20] - (data.dates[20] - data.dates[19]) / 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1881,"value":"yLoc = y(31.8)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1823,"value":"halfYearSize = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text('% of Seats'))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"line = d3\n .line()\n .defined((d) => !isNaN(d))\n .x((d, i) => x(data.dates[i]))\n .y((d) => y(d))\n .curve(d3.curveStep)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2145,"value":"sc = countryCode[selectedCountry].toLowerCase()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"md`
\n### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"regions = [\n \"ARB\",\n \"CEB\",\n \"EAP\",\n \"EAR\",\n \"EAS\",\n \"ECA\",\n \"ECS\",\n \"EMU\",\n \"EUU\",\n \"HIC\",\n \"HPC\",\n \"IBD\",\n \"IBT\",\n \"IDA\",\n \"IDB\",\n \"IDX\",\n \"LAC\",\n \"LCN\",\n \"LDC\",\n \"LIC\",\n \"LMC\",\n \"LMY\",\n \"LTE\",\n \"MEA\",\n \"MIC\",\n \"MNA\",\n \"NAC\",\n \"OED\",\n \"OSS\",\n \"PRE\",\n \"PST\",\n \"SSA\",\n \"SST\",\n \"TEA\",\n \"TEC\",\n \"TLA\",\n \"TMN\",\n \"TSA\",\n \"UMC\",\n \"WLD\"\n]\n// \"INX\", \"FCS\",","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"seatsByWomen = FileAttachment(\"seats_by_women@1.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"data = {\n function parseData(seatsByWomen) {\n let res = {\n dates: Object.keys(seatsByWomen[0]).slice(39, 60).map(d3.utcParse(\"%Y\")),\n countries: seatsByWomen.map((el) => ({\n name: el[\"Country Name\"],\n code: el[\"Country Code\"],\n values: Object.values(el)\n .slice(39, 60)\n .map((e) => +e)\n }))\n };\n return res;\n }\n let countriesData = parseData(seatsByWomen);\n let regionsData = parseData(\n seatsByWomen.filter((el) => regions.includes(el[\"Country Code\"]))\n );\n\n return countriesData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2113,"value":"countryCode = {\n let res = {};\n const codes = data.countries.map((el) => (res[el.name] = el.code));\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"d3 = require(\"d3@^6.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"