31:Tde5,chartdark = { replay; const container = html``; const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${width} ${height}`); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", 20) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size", width / 40) .style("font-weight", 400) .style("text-transform", "uppercase") .html("The PSF Board Elections ") .append("tspan") .attr("font-weight", 700) .text("2020-2022"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", 70) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size", `${width / 45}px`) .style("font-weight", 700) .html("Only Fellows") .append("tspan") .attr("font-weight", 400) .text(" tend to have a vote turnout over 50%"); const div = d3.select(container).append("div").classed("tooltip", true); const tooltip = new Tooltip(div); // function that sets the tooltip's HTML when revealed // can be passed the hovered selection's datum function tooltipContents(datum) { const { member, votedlabel, year, turnout } = datum; return `Type: ${ member + "/" + votedlabel }
Turnout: ${turnout}
Election Year: ${year} `; } const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(d3.axisLeft(y)) .style("font-size", "15px") .call((axis) => axis .append("text") .text(xLabel) // .style("fill", "#fcfcfc") .style("text-anchor", "middle") // .style("font-size", "16px") .attr("x", 150) .attr("y", 540) ); g.append("g") // .attr("fill", "#B8BFC6") .selectAll("rect") .data(dataPos) .join("rect") .attr("x", (d) => d.x0) .attr("width", barWidth) .attr("height", barHeight) .attr("fill", (d) => color(d.member)) .attr("opacity", (d) => opacity(d.voted)) .on("mouseover", (event, d) => { tooltip.display(d, tooltipContents); // tooltip.style("opacity", 1) // d3.select(this) // .style("stroke", "white") // .style("opacity", 1); }) .on("mouseout", () => { tooltip.hide(); }) .on("mousemove", (event) => { tooltip.move(event); }) .transition() .duration( (d, i) => 0.1 * (d.yearsIndex + 1) * (data.length - yearsCount.get(d.year)) ) .delay((d, i) => Math.floor(d.count / nRows) * 20 + (d.count % nRows) * 5) .attr("x", (d) => d.x1) .attr("y", (d) => d.y1) .attr("width", squareSize) .attr("height", squareSize) .attr("stroke-width", 0.5) .attr("stroke", "black"); g.append("g") .attr("transform", `translate(${width - 400},50)`) .append(() => legend({ color: color, title: "Member Type", width: 250 }) ); svg .append("text") .attr("class", "legend_footer") .attr("x", width - margin.right) .attr("y", height - margin.bottom) .text(footer); return container; }32:T47b,html` `33:[{"id":"b10b18453c255b1ce663f4d806b8ba9fad92c3171ac575809335d99f5c6cddff55df892a9cb3e54088fd81298a4ef80c7c60cc5a309f5fc2a451778b3ed5eeac","href":"https://static.observableusercontent.com/files/b10b18453c255b1ce663f4d806b8ba9fad92c3171ac575809335d99f5c6cddff55df892a9cb3e54088fd81298a4ef80c7c60cc5a309f5fc2a451778b3ed5eeac","name":"genres_unique_songs.csv","type":"text/csv","lastModified":1671789749231.63,"size":306872},{"id":"2144f34eb2c581e7d460925bbf7e5bfcc47c4d4f6c2d82f3c2879bef356e5a1185bf5acb48a34d07b9f55dcfc784286275aa4255a6673721c6c6a15a620aaec3","href":"https://static.observableusercontent.com/files/2144f34eb2c581e7d460925bbf7e5bfcc47c4d4f6c2d82f3c2879bef356e5a1185bf5acb48a34d07b9f55dcfc784286275aa4255a6673721c6c6a15a620aaec3","name":"Screenshot 2023-01-31 at 13.25.10.png","type":"image/png","lastModified":1675167938804.353,"size":568000}] 2f:{"title":"Who voted in the PSF Board Elections","cells":[{"id":0,"value":"# Who voted in the PSF Board Elections\n\nData from the PSF blog \n- [2020](https://pyfound.blogspot.com/2020/06/2020-python-software-foundation-board_26.html)\n- [2021](https://discuss.python.org/t/2021-python-software-foundation-board-of-directors-election-results/9418)\n- [2022](https://pyfound.blogspot.com/2022/07/board-election-results-for-2022.html)\n\nMember type breakdown provided by Ee Durbin (Director of Infrastructure with the PSF)\nFor a detailed explanation on member type fluctuation and description read the [2020 python software foundation board](https://pyfound.blogspot.com/2020/06/2020-python-software-foundation-board_26.html) blog","pinned":false,"hidden":false,"mode":"md"},{"id":599,"value":"viewof replay = html`