2b:null 2c:["$","title",null,{"children":"JDI Board Timeline WIP | Steve Pegg | Observable"}] 31:T11a9,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(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)); // .on("click", mouseClick); 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", "steelblue"); // .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 (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); members.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", 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("circle denotes Company Secretary"); 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"); svg.selectAll(".yAxis .tick").each(function(d) { d3.select(this).select("text").style("fill", function() { var value = data.filter(function(e) { return d === e.name && d === "Stephen John Pegg" })[0]; // console.log(value) return value ? "white" : "white"; }) }) function mouseClick() { console.log("mouseClick"); } //.attr("stroke", function (d) { // if(d === "Stephen John Pegg") { // return "yellow"}}) 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:[{"id":"d41497cb42222db30c7c679f5bccc6cb3769266b3c140147378adc0e0bda86a8e39de11e01c1f64a51162771edd1a0ab140b64de1e1097b6090a8b9caca5217c","href":"https://static.observableusercontent.com/files/d41497cb42222db30c7c679f5bccc6cb3769266b3c140147378adc0e0bda86a8e39de11e01c1f64a51162771edd1a0ab140b64de1e1097b6090a8b9caca5217c","name":"directors4.csv","type":"text/csv","lastModified":1674380752329.597,"size":2770}] 2f:{"id":"5bd608a3db20865b","slug":null,"title":"JDI Board Timeline WIP","thumbnail":"254a79c25a7e66bdeb69bc87a87293913b37d377da0867820266bd9a80963ea4","access_level":"public","create_time":"$D2023-01-22T09:45:52.329Z","update_time":"$D2023-01-26T10:30:40.282Z","view_time":null,"first_public_time":"$D2023-01-22T09:45:52.329Z","has_unpublished_edits":null,"fork":{"id":"d3e3f79046bce410","slug":null,"title":"JDI Board Timeline","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":1295,"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":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"JDI Board Timeline WIP","cells":[{"id":0,"value":"# JDI Board Timeline WIP\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":1261,"value":"width = 1150","pinned":true,"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 // .style('fill', (d) => d.years >= 100 ? 'red' : 'black')\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":true,"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 \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 .attr(\"stroke-width\", 0.3)\n // .attr(\"stroke\", d3.schemePaired[7]) \n .call((g) => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":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":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":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(7,31);\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})\n\n \n} \n \n })\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":133,"value":"$33","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":"d33 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"fc = require('d3fc')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"x.invert = invertOrdinal","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1218,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"