30:Tfc1,chart = { let parent = this; // if (!parent) { parent = document.createElement("div"); const svg = d3.select(DOM.svg(width, height)); const g = svg .append("g") .attr("transform", (d, i) => `translate(${margin.left} ${margin.top})`); const members = svg .append("g") .attr("fill", "steelblue") .selectAll("rect") .data(filteredData) .enter() .append("rect") .attr("x", (d) => x(d.start)) .attr("y", (d) => y(d.name)) .attr("rx", 3) .attr("fill", (d) => color(d.region)) .attr("opacity", (d) => opacity(d.count)) .attr("height", y.bandwidth()) .attr("width", (d) => x(d.end) - x(d.start)); const tooltip = d3.select(document.createElement("div")).call(createTooltip); const line = svg .append("line") .attr("y1", margin.top - 10) .attr("y2", height - margin.bottom) .attr("stroke", "pink") .style("pointer-events", "none"); members.attr("transform", (d, i) => `translate(0 ${y(i)})`); members .each(getRect) .on("mouseover", function (d) { d3.select(this).select("rect").attr("fill", "white"); tooltip.style("opacity", 1).html(getTooltipContent(d)); }) .on("mouseleave", function (d) { d3.select(this).select("rect").attr("fill", color(d.region)); tooltip.style("opacity", 0); }); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.on("mousemove", function (d) { let [x, y] = d3.mouse(this); line.attr("transform", `translate(${x} 0)`); y += 20; if (x > width / 2) x -= 100; tooltip.style("left", x + "px").style("top", y + "px"); }); parent.appendChild(svg.node()); parent.appendChild(tooltip.node()); parent.groups = members; //let offset = height - margin.bottom / 3 + 50; let offset = margin.top + 420; svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", offset - 230) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size", width / 40) .style("font-weight", 400) .style("text-transform", "uppercase") .html("PSF Board Timeline ") .append("tspan") .attr("font-weight", 700) .text("2001-2022"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", offset - 180) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size", `${width / 45}px`) .style("font-weight", 700) .html(d3.format(".0%")(onetimers)) .append("tspan") .attr("font-weight", 400) .text(" of the 59 members served only once"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", offset - 140) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size", `${width / 45}px`) .style("font-weight", 400) .html("In the past 5 years, more than half ") //.append("tspan") .attr("font-weight", 400); //.text("almost half were elected in the past 5 years"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", offset - 100) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size", `${width / 45}px`) .style("font-weight", 400) .html("of the elected people were new") //.append("tspan") .attr("font-weight", 400); //.text("almost half were elected in the past 5 years"); g.append("g") .attr("transform", `translate(${margin.left / 3 - 5},${-15})`) .append(() => legend({ color: color, title: "", width: 300 }) ); svg .append("text") .attr("class", "legend_footer") .attr("x", width - margin.left) .attr("y", height - margin.bottom / 3) .text(footer); // } else { // const civs = d3.selectAll(".civ"); // civs // .data(filteredData, (d) => d.region) // .transition() // // .delay((d,i)=>i*10) // .ease(d3.easeCubic) // .attr("transform", (d, i) => `translate(0 ${y(i)})`); // } return parent; }31:T4a4,getRect = function (d) { const el = d3.select(this); // const sx = x(d.start); // const sy = y(d.name); // const w = x(d.end) - x(d.start); // //const isLabelRight = sx > width / 2 ? sx + w < width : sx - w > 0; // //el.style("cursor", "pointer"); // el.append("rect") // .attr("x", sx) // .attr("y", sy) // .attr("height", y.bandwidth()) // .attr("width", w) // .attr("rx", 3) // //.attr("opacity", (d) => opacity(d.count)) // .attr("fill", (d) => color(d.region)); // if (d.count == 1) { // el.append("text") // .text(d.country) // .attr("x", isLabelRight ? sx - 5 : sx + w + 5) // .attr("y", sy) // .attr("fill", "white") // .style("text-anchor", isLabelRight ? "end" : "start") // .style("dominant-baseline", "hanging"); // } } // .append("g") // .attr("fill", "steelblue") // .selectAll("rect") // .data(data) // .enter() // .append("rect") // .attr("x", (d) => x(d.start)) // .attr("y", (d) => y(d.name)) // .attr("rx", 3) // .attr("fill", (d) => color(d.country)) // .attr("opacity", (d) => opacity(d.count)) // .attr("height", y.bandwidth()) // .attr("width", (d) => x(d.end) - x(d.start));32:T7a7,function pivot(ddata) { var long_data = []; ddata.forEach(function (row) { //var long_data = []; var count = 0; var name = ""; var country = ""; var origin = ""; var region = ""; Object.keys(row).forEach(function (colname) { //ignore empty rows if (row[colname] == null) { return; } if (colname == "Origin") { //long_data.push({ origin: row[colname] }); origin = row[colname]; } else if (colname == "CurrentCountry") { //long_data.push({ location: row[colname] }); country = row[colname]; } else if (colname == "Name") { //long_data.push({ name: row[colname] }); name = row[colname]; } else if (colname == "Region") { //long_data.push({ name: row[colname] }); region = rename.get(row[colname]) || row[colname]; } else { return; } }); Object.keys(row).forEach(function (colname) { //ignore empty rows if ( row[colname] == null || colname == "Origin" || colname == "CurrentCountry" || colname == "Name" || colname == "Region" ) { return; } else { count += 1; if (count <= 4 && name == "Kushal Das") { long_data.push({ name: name, country: "India", region: "Asia", origin: origin, start: new Date(colname).getFullYear(), end: row[colname] + new Date(colname).getFullYear(), count: count }); } else { long_data.push({ name: name, country: country, region: region, origin: origin, start: new Date(colname).getFullYear(), end: row[colname] + new Date(colname).getFullYear(), count: count }); } } }); // list_long_data.push(long_data); }); return long_data; }33:T47b,html` `34:[{"id":"4291c439c2194cc5f3f2027e7d4c6340c6080b9daaf0221b3d119646e2aa6e148b29afdf8e7d8df0a42db6abab29ea9c42250fe704438af51afa04cc1265c5e7","href":"https://static.observableusercontent.com/files/4291c439c2194cc5f3f2027e7d4c6340c6080b9daaf0221b3d119646e2aa6e148b29afdf8e7d8df0a42db6abab29ea9c42250fe704438af51afa04cc1265c5e7","name":"PSFBoardTimeline@4.csv","type":"text/csv","lastModified":1672318877027.36,"size":3808},{"id":"09a87d1f1a5b6badb6754eaf270ce1c545723e5076f69e97156415850fb8ba3555e04273a886fbf1c2dc340682d02ddaafefee842b71ef8dcc0776759961e24e","href":"https://static.observableusercontent.com/files/09a87d1f1a5b6badb6754eaf270ce1c545723e5076f69e97156415850fb8ba3555e04273a886fbf1c2dc340682d02ddaafefee842b71ef8dcc0776759961e24e","name":"PSFBoardTimeline@5.csv","type":"text/csv","lastModified":1673277187456.642,"size":3801},{"id":"0395fc25a410972ad22b9aae40dbeb1f150b4fd2a1fb02254af609865885f88214a67799fbb07aec656ad6f688c603a6a0bded68a0870b8f7610496ef3fc2ea4","href":"https://static.observableusercontent.com/files/0395fc25a410972ad22b9aae40dbeb1f150b4fd2a1fb02254af609865885f88214a67799fbb07aec656ad6f688c603a6a0bded68a0870b8f7610496ef3fc2ea4","name":"PSFBoardTimeline-1.csv","type":"text/csv","lastModified":1682485494637.762,"size":3797}] 2e:{"title":"PSF Board Timeline","cells":[{"id":0,"value":"# PSF Board Timeline\n\nPython Software Foundation Board members in the past 20 years.\n\nMany served multiple terms on the board, the first terms are marked in bright colors\n\nNote: Van Lindberg has at some point switched from elected to appointed, it's not clear when.\n\nSource: [PSF Board](https://www.python.org/psf/board/)","pinned":false,"hidden":false,"mode":"md"},{"id":184,"value":"viewof sorting = select({\n title: \"Sorted by\",\n options: [\"first time\", \"region\"],\n value: \"first time\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"filteredData = dataselector()","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"margin = ({ top: 50, right: 130, bottom: 80, left: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"dataselector = function () {\n let filteredData = [];\n if (sorting !== \"first time\") {\n filteredData = [].concat.apply(\n [],\n dataByRegion.map((d) => d.values)\n );\n } else {\n filteredData = data; //.sort((a, b) => d3.ascending(a.start, b.start));\n }\n return filteredData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"footer = \"Source: The PSF Board | Frendly D&I Chat @PSF | @terezaif\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"createTooltip = function (el) {\n el.style(\"position\", \"absolute\")\n .style(\"pointer-events\", \"none\")\n .style(\"top\", 0)\n .style(\"opacity\", 0)\n .style(\"background\", \"white\")\n .style(\"border-radius\", \"5px\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"padding\", \"10px\")\n .style(\"line-height\", \"1.3\")\n .style(\"font\", \"11px sans-serif\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"getTooltipContent = function (d) {\n return `${d.name}\n
\n${d.country}\n
\n${d.start} - ${d.end}: Term: ${d.count}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"dataByRegion = d3\n .nest()\n .key((d) => d.region)\n .entries(data)\n .sort((a, b) => d3.ascending(a.key, b.key))","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"opacity = function (count) {\n return count == 1 ? 1 : 0.4;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"colscheme = [\n \"#FF9800\",\n georgi_colors.shandy,\n \"#00ff9f\",\n georgi_colors.mid,\n georgi_colors.light,\n georgi_colors.dark\n] //d3.schemeSet2","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"color = d3.scaleOrdinal(colscheme).domain(regions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"regions = d3\n .nest()\n .key((d) => d.region)\n .entries(data)\n .map((d) => d.key)\n .sort(d3.ascending)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"x = d3\n .scaleLinear()\n .domain([d3.min(data, (d) => d.start), d3.max(data, (d) => d.end)])\n //.nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"y = d3\n .scaleBand()\n .domain(filteredData.map((d) => d.name))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"electionYears = d3\n .nest()\n .key((d) => d.start)\n .entries(data)\n .map((d) => d.key)\n .sort(d3.ascending)","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(${0},${height - margin.bottom})`)\n .call(\n d3\n .axisBottom(x)\n .tickSizeOuter(0)\n .tickValues(electionYears)\n .tickFormat(formatDate)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"formatDate = (d) => d //d3.format(\"d\")(d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", `translate(${width - margin.right},0)`)\n .call(d3.axisRight(y))\n .call((g) => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"data = pivot(psfboardtimeline)","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"rename = new Map([\n [\"North America\", \"N. America\"],\n [\"South America\", \"S. America\"]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"psfboardtimeline = await FileAttachment(\"PSFBoardTimeline-1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"onetimers = Number(once[0].all) / Number(all[0].all)","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"","pinned":false,"hidden":false,"mode":"sql","output":"","database":"var:data"},{"id":275,"value":"select count(*) as all from\n(select name, count(*) cnt from data group by name) counts\n","pinned":false,"hidden":false,"mode":"sql","output":"all","database":"var:data"},{"id":294,"value":"select count(*) as all from\n(select name, count(*) cnt from data group by name) counts\nwhere cnt == 1","pinned":false,"hidden":false,"mode":"sql","output":"once","database":"var:data"},{"id":523,"value":"avg5 = d3.mean(\n first.filter(function (d) {\n return d.start > 2017;\n }),\n (d) => Number(d.cnt)\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"avg10 = d3.mean(\n first.filter(function (d) {\n return d.start > 2012;\n }),\n (d) => Number(d.cnt)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"select cast(start as int) as start, cast(count(*) as int) as cnt\n from data \n where count = 1\ngroup by start","pinned":false,"hidden":false,"mode":"sql","output":"first","database":"var:data"},{"id":131,"value":"georgi_colors = ({\n grey: \"#15151b\",\n dark: \"#6917D0\",\n mid: \"#07BEB8\",\n light: \"#FF1791\",\n shandy: \"#FFE873\",\n text: \"white\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"import { checkbox, select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"d33 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}