2b:null 2c:["$","title",null,{"children":"Board Timeline (google sheets data) | Steve Pegg | Observable"}] 31:T194e,chart = { let parent = this; // if (!parent) {console.log(myJSON) 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(data.filter(d => d.count !== 0)) .enter() .append("rect") .attr("x", (d) => x(d.start + d.count-1)) .attr("y", (d) => y(d.name)) .attr("rx", 3) //function (d){ if(d.country === "Secretary") {return 0} else {return 3}}) .attr("fill", (d) => color(d.region)) // .attr("opacity", (d) => opacity(d.count)) .attr("height", y.bandwidth()-(y.bandwidth()/50)) // .attr("width", (d) => x(d.end)-x(d.start)); .attr("width", x.bandwidth()-(x.bandwidth()/50)); const places = svg.append('g') .selectAll("circle") .data(data.filter(d => d.country === "Secretary" && d.count !== 0)) // .data(filteredData.filter(d => d.count === 1 && d.country === "Secretary")) .enter() .append("circle") .attr('cx', (d) => x(d.start + d.count -1) + (x.bandwidth()/2)) .attr('cy', (d) => y(d.name) + (y.bandwidth()/2)) .attr('r', 6) //function (d){ if(d.country === "Secretary") {return 0} else {return 3}}) // .attr('stroke', 'white') .attr("fill", "white"); // .attr("opacity", (d) => opacity(d.count)) // .attr("height", y.bandwidth()) // .attr("width", (d) => x(d.end) - x(d.start)); var s = svg.selectAll(".shapes") .data(data.filter(d => d.mark === 2)) var sg = s.enter() .append("g") .attr("class", "shapes") .attr("transform", function(d,i) { return "translate(" + (x(d.start + d.count -1) + (x.bandwidth()/2)) + ","+ (y(d.name) + (y.bandwidth()/2))+ ")" }) .attr("fill", "white") .attr("stroke-width", 1) sg.append("path") .attr("d", function(d) {return d3.symbol().type(d3.symbolStar).size("75")()}) .attr("stroke", "black") // .attr('cx', (d) => x(d.start + d.count -1) + (x.bandwidth()/2)) //.attr('cy', (d) => y(d.name) + (y.bandwidth()/2)) 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 (event, d) { let [xt, yt] = d3.pointer(event); d3.select(this).select("rect").attr("fill", "white"); tooltip.style("opacity", 1).html(getTooltipContent(d)); }) .on("mouseleave", function (event, d) { d3.select(this).select("rect").attr("fill", color(d.region)); tooltip.style("opacity", 0); svg.selectAll(".yAxis .tick").selectAll("text").style("fill", "white") }); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.on("mousemove", function (event, d) { let [xt, yt] = d3.pointer(event); line.attr("transform", `translate(${xt} 0)`); yt += 20; svg.selectAll(".yAxis .tick").each(function(d) { d3.select(this).select("text").style("fill", function() { var value = data.filter(function(e) { return e.years === x.invert(xt) && e.count !== 0 && d === e.name })[0]; return value ? "yellow" : "black";}) }) if (xt > width / 2) xt -= 100; tooltip.style("left", xt + "px").style("top", yt + "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", 370) .attr("y", offset -420) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size", width / 60) .style("font-weight", 400) //.style("text-transform", "uppercase") .html("") // .append("tspan") .attr("font-weight", 700) .text("circle = Secretary, star = Chair of Trustees"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", offset -250) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size", width / 60) .style("font-weight", 400) // .style("text-transform", "uppercase") .html("") // .append("tspan") .attr("font-weight", 700) .text("Median number of Trustees by Year = 9"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", offset -200) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size",18) .style("font-weight", 400) // .style("text-transform", "uppercase") .html("") // .append("tspan") .attr("font-weight", 700) .text("Median number of years as Trustee/Secretary = 4"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", offset -350) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size",18) .style("font-weight", 400) // .style("text-transform", "uppercase") .html("") // .append("tspan") .attr("font-weight", 700) .text("AVERAGE Age when Appointed (Median): 52 (55). AVERAGE Age when Resigned (Median): 57 (58)"); svg .append("text") .attr("class", "header") .attr("x", margin.left) .attr("y", offset -300) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size",18) .style("font-weight", 400) // .style("text-transform", "uppercase") .html("") // .append("tspan") .attr("font-weight", 700) .text("AGE RANGE when Appointed: 25-65. AGE RANGE when Resigned 32-74"); 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); //AVERAGE Age when Appointed (Median): 52 (55). AVERAGE Age when Resigned (Median): 57 (58) //AGE RANGE when Appointed: 25-65. AGE RANGE when Resigned 32-74 // console.log(JSON.stringify(data)) return parent; }32: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));33:T47b,html` `34:[] 2f:{"id":"1514fce8a89e98f5","slug":null,"title":"Board Timeline (google sheets data)","thumbnail":"9b6365edb59c1bcd7217b842af3a32ea60067787cf4edea9eebf76e92376f56d","access_level":"public","create_time":"$D2023-01-22T19:49:26.466Z","update_time":"$D2023-02-06T17:22:13.324Z","view_time":null,"first_public_time":"$D2023-01-22T19:49:26.466Z","has_unpublished_edits":null,"fork":{"id":"5bd608a3db20865b","slug":null,"title":"JDI Board Timeline WIP","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"stars":1,"starred":false,"owner":{"type":"team","id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":"starter_2024","bio":"Mainly coding for fun these days!"},"version":1111,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"bio":"Mainly coding for fun these days!"}],"members":[{"type":"individual","id":"1281bb8ce5440734","login":"steve-pegg","name":"Steve Pegg","avatar_url":"https://avatars-next.observableusercontent.com/91fcbf278fe93654a1747f10b741f5a8784201a827ba9ee211f90deccfffe490","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Board Timeline (google sheets data)","cells":[{"id":0,"value":"# Board Timeline (google sheets data)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"parseDate = d3.timeParse(\"%d/%m/%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"electionYears = [...new Set (data.map(d => d.years))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"margin = ({ top: 50, right: 130, bottom: 80, left: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"footer = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"opacity = function (count) {\n return count == 1 ? 1 : 0.4;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"color = d3.scaleOrdinal(colscheme).domain(regions)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"regions = [...new Set (data.map(d => d.region))]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"x = d3\n .scaleBand()\n //.scaleLinear()\n .domain(data.map((d) => d.years))\n //.domain([d3.min(data, (d) => d.years), d3.max(data, (d) => d.years)])\n //.nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"y = d3\n .scaleBand()\n .domain(datan.map((d) => d.name))\n .range([margin.top, height - margin.bottom])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"formatDate = (d) => d //d3.format(\"d\")(d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"yAxis = (g) =>\n g\n .attr(\"transform\", `translate(${width - margin.right},0)`)\n .attr(\"class\", \"yAxis\")\n .call(d3.axisRight(y))\n .call((g) => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"import { checkbox, select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"x.invert = invertOrdinal","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":" function invertOrdinal(val, cmpFunc) {\n cmpFunc = cmpFunc || function (a, b) {\n return (a >= b);\n };\n\n const scDomain = this.domain();\n let scRange = this.range();\n\n if (scRange.length === 2 && scDomain.length !== 2) {\n // Special case, interpolate range vals\n scRange = d3.range(scRange[0], scRange[1], (scRange[1] - scRange[0]) / scDomain.length);\n }\n\n const bias = scRange[0];\n for (let i = 0, len = scRange.length; i < len; i++) {\n if (cmpFunc(scRange[i] + bias, val)) {\n return scDomain[Math.round(i * scDomain.length / scRange.length)];\n }\n }\n\n return this.domain()[this.domain().length - 1];\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"url = \"https://docs.google.com/spreadsheets/d/1snRkceV0qbdVdTh7zj_pwqru3_bfjv4-vufcox785O8/edit#gid=0\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"\ngetCsvUrl = url => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3]\n const gid = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/export?format=csv&gid=${gid}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"datan = d3.csv(getCsvUrl(url), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"data = { \n var arr = []\n \n const columns = datan.columns.slice(8,33);\n var x = 0\n var c\n \n datan.forEach(function (d) { \n c = 0 \n for (x = 0; x < columns.length; x++) {\n if (+d[columns[x]] > 0)\n {c += 1} \n else \n {c =0} \n\n \n arr.push({\"name\": d.name,\"start\":(parseDate(d.start)).getFullYear(), \"end\":(parseDate(d.end)).getFullYear(),\"years\": columns[x],\"count\": c,\"country\": d.country, \"region\": d.Region, \"origin\": d.origin, \"mthServed\":d.mthServed, c:c, \"mark\":parseFloat((+d[columns[x]])) })\n\n \n} \n \n })\n //d[columns[x]]\n //+ parseFloat((+d[columns[x]]).toFixed(2))\n \n return arr\n \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"x.invert = invertOrdinal","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"myJSON = JSON.stringify(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"d33 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"