2b:null 2c:["$","title",null,{"children":"Board Timeline (ALL_IN_ONE) | Steve Pegg | Observable"}] 31:T3269,chart = { let parent = this; // if (!parent) {console.log(myJSON) parent = document.createElement("div"); var margin = ({ top: 50, right: 130, bottom: 80, left: 30 }) var height = 800 var width = 1150 var regions = [...new Set (data.map(d => d.region))] var electionYears = [...new Set (data.map(d => d.years))]; var getRect = function (d) { const el = d3.select(this); } var opacity = function (count) { return count == 1 ? 1 : 0.4; } var colscheme = ["#FF9800","#00ff9f","#07BEB8","#FF1791","#6917D0"] var color = d3.scaleOrdinal(colscheme).domain(regions) var formatDate = (d) => d //d3.format("d")(d) var x = d3 .scaleBand() //.scaleLinear() .domain(data.map((d) => d.years)) //.domain([d3.min(data, (d) => d.years), d3.max(data, (d) => d.years)]) //.nice() .range([margin.left, width - margin.right]) var y = d3 .scaleBand() .domain(datan.map((d) => d.name)) .range([margin.top, height - margin.bottom]) .padding(0.1) var xAxis = (g) => g .attr("transform", `translate(${0},${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickSizeOuter(0) .tickValues(electionYears) .tickFormat(formatDate) ) var yAxis = (g) => g .attr("transform", `translate(${width - margin.right},0)`) .attr("class", "yAxis") .call(d3.axisRight(y)) .call((g) => g.select(".domain").remove()) 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)) var createTooltip = function (el) { el.style("position", "absolute") .style("pointer-events", "none") .style("top", 0) .style("opacity", 0) .style("background", "white") .style("border-radius", "5px") .style("box-shadow", "0 0 10px rgba(0,0,0,.25)") .style("padding", "10px") .style("line-height", "1.3") .style("font", "11px sans-serif"); } var getTooltipContent = function (d) { return `${d.name}
${d.country}
${d.start} - ${d.end}: Term: ${d.count} `; } 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"); }); g.append("g") .attr("transform", `translate(${margin.left / 3 - 5},${10})`) .append(() => legend({ color: color, title: "", width: 300 }) ); 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", "testing") .attr("x", margin.left) .attr("y", offset -450) .attr("dy", "1em") .attr("text-decoration", "underline") // .attr("text-decoration", "underline wavy red") .attr("text-anchor", "start") .style("font-size", width / 50) .style("font-weight", 400) // .style("text-transform", "uppercase") .html("") // .append("tspan") .attr("font-weight", 700) .text("Board 1999-2023"); svg .append("text") .attr("class", "header") .attr("x", 360) .attr("y", offset -395) .attr("dy", "1em") .attr("text-anchor", "start") .style("font-size", width / 70) .style("font-weight", 400) // .style("text-transform", "uppercase") .html("") // .append("tspan") .attr("font-weight", 700) .text("circle = Secretary, star = Chair of Trustees"); g.append('svg:text') .attr("x", margin.left) .attr("y", offset -370) .attr('class', 'id') .append('svg:tspan') .attr('x', 0) .attr('dy', 5) .text("Average Age when Appointed (Median): 52 (55). Average Age when Resigned (Median): 57 (58)") .append('svg:tspan') .attr('x', 0) .attr('dy', 20) .text("Age Range when Appointed: 25-65. Age Range when Resigned: 32-74") .append('svg:tspan') .attr('x', 0) .attr('dy', 20) .text("Median number of years as Trustee/Secretary = 4") .append('svg:tspan') .attr('x', 0) .attr('dy', 20) .text("Median number of Trustees by Year = 9"); //var parseDate = d3.timeParse("%d/%m/%Y") function invertOrdinal(val, cmpFunc) { cmpFunc = cmpFunc || function (a, b) { return (a >= b); }; const scDomain = this.domain(); let scRange = this.range(); if (scRange.length === 2 && scDomain.length !== 2) { // Special case, interpolate range vals scRange = d3.range(scRange[0], scRange[1], (scRange[1] - scRange[0]) / scDomain.length); } const bias = scRange[0]; for (let i = 0, len = scRange.length; i < len; i++) { if (cmpFunc(scRange[i] + bias, val)) { return scDomain[Math.round(i * scDomain.length / scRange.length)]; } } return this.domain()[this.domain().length - 1]; } x.invert = invertOrdinal //swatches function legend({color, ...options}) { return Legend(color, options); } function Legend(color, { title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { function ramp(color, n = 256) { const canvas = document.createElement("canvas"); canvas.width = n; canvas.height = 1; const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); } return canvas; } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title)); return svg.node(); } return parent; }32:T57c,html` `33:[] 2f:{"id":"dce4a411cc055015","slug":null,"title":"Board Timeline (ALL_IN_ONE)","thumbnail":"c2713fde5cb858b6cf589f179cd439c760d6a9761d2381317708033fc7e28968","access_level":"public","create_time":"$D2023-02-02T09:24:34.080Z","update_time":"$D2023-02-06T17:21:14.733Z","view_time":null,"first_public_time":"$D2023-02-02T09:24:34.080Z","has_unpublished_edits":null,"fork":{"id":"1514fce8a89e98f5","slug":null,"title":"Board Timeline (google sheets data)","owner":{"id":"ea29cfe69c48ffa5","login":"steve-pegg","name":"Steve Pegg"}},"stars":0,"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":1276,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Board Timeline (ALL_IN_ONE)","cells":[{"id":0,"value":"# Board Timeline (ALL_IN_ONE)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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":1185,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"parseDate = d3.timeParse(\"%d/%m/%Y\")","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"$32","pinned":false,"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":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"