3e:null 3f:["$","title",null,{"children":"Charts Rebuild | Aliu Adekola | Observable"}] 45:T520,graph = { const width = 600; const height = 180; const margin = { top: 20, right: 20, bottom: 20, left: 20 }; const barHeight = 30; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const x = d3 .scaleLinear() .domain([0, 100]) .range([margin.left, width - margin.right]); nestedData.forEach(([sector, entries], i) => { let y = margin.top + i * (barHeight + 20); let xOffset = margin.left; entries.forEach((d) => { const segmentWidth = x(+d.Percentage) - x(0); svg .append("rect") .attr("x", xOffset) .attr("y", y) .attr("width", segmentWidth) .attr("height", barHeight) .attr("fill", color(d["Accommodation Type"])); svg .append("text") .attr("x", xOffset + segmentWidth / 2) .attr("y", y + barHeight / 2 + 4) .attr("text-anchor", "middle") .attr("fill", "white") .attr("font-size", "12px") .text(`${d.Percentage}%`); xOffset += segmentWidth; }); svg .append("text") .attr("x", margin.left) .attr("y", y - 6) .attr("text-anchor", "start") .attr("font-size", "12px") .attr("fill", "#6F68A7") .text(`2023 ${sector.toLowerCase()} students`); }); return svg.node(); }46:T3cec,class PieChart { // ================. BASE SETUP. ============== constructor() { document .getElementsByTagName("head")[0] .insertAdjacentHTML( "beforeend", `` ); const attrs = { id: "ID" + Math.floor(Math.random() * 1000000), svgWidth: 440, svgHeight: 400, marginTop: 75, marginBottom: 75, marginRight: 105, marginLeft: 115, container: "body", defaultFontSize: 12, percentCircleRadius: 14, labelMargin: 10, defaultTextFill: "#6F68A7", backCircleColor: "#EAF0FB", defaultFont: "Helvetica", valueAccessor: (d) => d.value, round: (d, sum) => Math.round((d.data.value / sum) * 100), centerText: ``, groupingText: `Count`, valueFormat: (d) => d3.format(".3s")(d), ctx: document.createElement("canvas").getContext("2d"), dimension: null, group: null, data: null, tooltip: (event, d) => { let items = d.data.items; if (!items) items = [{ key: d.data.key, value: d.data.value }]; return ` ${items .map( (t) => `` ) .join("")}

Country	%
${t.key}	${t.value}

`; }, setData: (state) => { if (!state.group) return state.data; const dt = state.group.all(); dt.sort((a, b) => (a.value > b.value ? -1 : 1)); return dt; } }; // Inner state props Object.assign(attrs, { calc: null, svg: null, chart: null, pie: null, arc: null, arcOuter: null }); this.getState = () => attrs; this.setState = (d) => Object.assign(attrs, d); Object.keys(attrs).forEach((key) => { //@ts-ignore this[key] = function (_) { var string = `attrs['${key}'] = _`; if (!arguments.length) { return eval(`attrs['${key}'];`); } eval(string); return this; }; }); this.initializeEnterExitUpdatePattern(); } initializeEnterExitUpdatePattern() { d3.selection.prototype.patternify = function (params) { var container = this; var selector = params.selector; var elementTag = params.tag; var data = params.data || [selector]; // Pattern in action var selection = container.selectAll("." + selector).data(data, (d, i) => { if (typeof d === "object") { if (d.id) { return d.id; } } return i; }); selection.exit().remove(); selection = selection.enter().append(elementTag).merge(selection); selection.attr("class", selector); return selection; }; } // ================== RENDERING =================== render() { this.setDataProp(); this.setDynamicContainer(); this.calculateProperties(); this.drawSvgAndWrappers(); this.setLayouts(); this.drawSlices(); this.drawCenterTexts(); this.attachEventHandlers(); return this; } setDataProp() { const data = this.getData(); this.setState({ data }); } drawCenterTexts() { const { data, centerPoint, calc, defaultTextFill, valueFormat, centerText, groupingText } = this.getState(); const sum = d3.sum(data, (d) => d.value); const fo = centerPoint .patternify({ tag: "foreignObject", selector: "center-for-text" }) .attr("pointer-events", "none") .attr("x", -calc.innerRadius) .attr("y", -calc.innerRadius) .attr("width", calc.innerRadius * 2) .attr("height", calc.innerRadius * 2); fo.patternify({ tag: "xhtml:div", selector: "for-center-div" }) .html(`

${centerText}
${groupingText}
${valueFormat(sum)}

`); } setLayouts() { const { calc } = this.getState(); const pie = d3 .pie() .value((d) => d.value) .sort(null); const arc = d3 .arc() .innerRadius(calc.innerRadius) .outerRadius(calc.radius) .padAngle(0.02) .cornerRadius(1); const arcOuter = d3 .arc() .innerRadius(arc.outerRadius()() + 2) .outerRadius(arc.outerRadius()() + 10); const arcLabel = d3 .arc() .innerRadius(arcOuter.outerRadius()()) .outerRadius(arcOuter.outerRadius()() + 30); this.setState({ pie, arc, arcOuter, arcLabel }); } attachEventHandlers() {} // Calculate what size will text take when drew getTextWidth(text, { fontSize = 14, fontWeight = 400 } = {}) { const { defaultFont, ctx } = this.getState(); ctx.font = `${fontWeight || ""} ${fontSize}px ${defaultFont} `; const measurement = ctx.measureText(text); return measurement.width; } setDynamicContainer() { const attrs = this.getState(); //Drawing containers var container = d3.select(attrs.container); var containerRect = container.node().getBoundingClientRect(); if (containerRect.width > 0) attrs.svgWidth = containerRect.width; this.setState({ container }); } drawSvgAndWrappers() { const { tooltip, container, svgWidth, svgHeight, defaultFont, calc } = this.getState(); const tip = d3Tip().attr("class", "d3-tip").offset([-10, 0]).html(tooltip); // Draw SVG const svg = container .patternify({ tag: "svg", selector: "svg-chart-container" }) .attr("width", svgWidth) .attr("height", svgHeight) .attr("font-family", defaultFont); svg.call(tip); //Add container g element var chart = svg .patternify({ tag: "g", selector: "chart" }) .attr( "transform", "translate(" + calc.chartLeftMargin + "," + calc.chartTopMargin + ")" ); const centerPoint = chart .patternify({ tag: "g", selector: "center-point" }) .attr( "transform", "translate(" + calc.chartWidth / 2 + "," + calc.chartHeight / 2 + ")" ); this.setState({ chart, svg, centerPoint, tip }); } calculateProperties() { const attrs = this.getState(); //Calculated properties var calc = { id: "ID" + Math.floor(Math.random() * 1000000), // id for event handlings, chartTopMargin: attrs.marginTop, chartLeftMargin: attrs.marginLeft, chartWidth: null, chartHeight: null }; calc.chartWidth = attrs.svgWidth - attrs.marginRight - calc.chartLeftMargin; calc.chartHeight = attrs.svgHeight - attrs.marginBottom - calc.chartTopMargin; calc.radius = Math.min(calc.chartWidth, calc.chartHeight) / 2; calc.innerRadius = calc.radius * 0.7; if (calc.innerRadius < 100) calc.innerRadius = calc.radius * 0.8; this.setState({ calc }); } // =================== API IMPLEMENTATION =============== getData() { const state = this.getState(); const { setData } = state; return setData(state); } drawSlices() { const { round, labelMargin, defaultFontSize, centerPoint, pie, arc, arcOuter, backCircleColor, arcLabel, defaultTextFill, tip, percentCircleRadius } = this.getState(); const dataInitial = this.getData(); const sum = d3.sum(dataInitial, (d) => d.value); const minAllowed = 0.04; let data = dataInitial.filter( (dataItem) => dataItem.value / sum >= minAllowed ); const others = dataInitial.filter( (dataItem) => dataItem.value / sum < minAllowed ); if (others.length > 1) { data.push({ key: "Others", items: others, value: d3.sum(others, (d) => d.value) }); } else { data = dataInitial; } const pieData = pie(data); const right = pieData.filter((d) => this.isRightSide(d)); const left = pieData.filter((d) => !this.isRightSide(d)); pieData.forEach((d, i, arr) => { d.xOffset = 0; if ((i != 0 && i != arr.length - 1) || arr.length < 20) { d.yOffset = 0; } else { d.yOffset = -30; } }); const process = (d, i, arr) => { if (i < 1) return; const prev = arr[i - 1]; const curr = d; const yPrev = arcLabel.centroid(prev)[1] + prev.yOffset; const yCurr = arcLabel.centroid(curr)[1]; console.log(yPrev, yCurr); if (this.isRightSide(curr) && yPrev + percentCircleRadius * 2 > yCurr) { console.log("is Righ Side"); curr.yOffset = yPrev + percentCircleRadius * 2 - yCurr + 2; } else if ( !this.isRightSide(curr) && yPrev + percentCircleRadius * 2 > yCurr ) { curr.yOffset = yPrev + percentCircleRadius * 2 - yCurr + 2; if (arr.length > 4) { if (i < 4 + arr.length / 10) { //curr.xOffset = -10-arr.length/2*1; } if (arr.length > 9) { curr.xOffset = 0; } } console.log("is not Righ Side", this.isRightSide(curr)); } }; right.forEach(process); left.reverse().forEach(process); const that = this; centerPoint .patternify({ tag: "path", selector: "pie-background", data: pie([{ value: 1 }]) }) .attr("d", arcOuter) .attr("fill", backCircleColor); const pieG = centerPoint.patternify({ tag: "g", selector: "pie-wrapper", data: pieData }); pieG .patternify({ tag: "path", selector: "pie-paths", data: (d) => [d] }) .attr("d", arc) .attr("cursor", "pointer") .attr("fill", (d) => that.getColor(d)) .on("mouseenter.tooltip", function (event, d) { tip.show(event, d, this); }) .on("mouseleave.tooltip", function (d) { if (tip) { tip.hide(); } }) .on("mouseenter.color", function (event, d) { d3.select(this).attr("fill", d3.rgb(that.getColor(d)).darker(0.5)); }) .on("mouseleave.color", function (event, d) { d3.select(this).attr("fill", that.getColor(d)); }); pieG .patternify({ tag: "polyline", selector: "pie-label-line", data: (d) => [d] }) .attr("points", (d) => { let textWidth = this.getTextWidth(d.data.key || "", { fontSize: defaultFontSize }) + labelMargin; if (this.isRightSide(d)) { textWidth = -textWidth; } return ` ${arc.centroid(d)[0]}, ${arc.centroid(d)[1]} ${arcLabel.centroid(this.correct(d))[0] + d.xOffset}, ${arcLabel.centroid(this.correct(d))[1] + d.yOffset} ${arcLabel.centroid(this.correct(d))[0] - textWidth + d.xOffset}, ${arcLabel.centroid(this.correct(d))[1] + d.yOffset} `; }) .attr("stroke", defaultTextFill) .attr("fill", "none") .attr("pointer-events", "none") .style("opacity", this.getLabelOpacity); pieG .patternify({ tag: "circle", selector: "pie-center-points", data: (d) => [d] }) .attr("cx", (d) => arc.centroid(d)[0]) .attr("cy", (d) => arc.centroid(d)[1]) .style("opacity", this.getLabelOpacity) .attr("fill", "#FFFFFF") .attr("r", 2) .attr("pointer-events", "none"); pieG .patternify({ tag: "text", selector: "pie-texts", data: (d) => [d] }) .text((d) => d.data.key) .attr("x", (d) => { let x = arcLabel.centroid(this.correct(d))[0]; if (this.isRightSide(d)) x += labelMargin - 5; else x -= labelMargin - 5; return x + d.xOffset; }) .attr("text-anchor", (d) => { if (this.isRightSide(d)) return "start"; return "end"; }) .attr("font-size", defaultFontSize) .attr("y", (d) => arcLabel.centroid(this.correct(d))[1] - 4 + d.yOffset) .attr("fill", defaultTextFill) .style("opacity", this.getLabelOpacity); pieG .patternify({ tag: "text", selector: "pie-percent-texts", data: (d) => [d] }) .text((d) => round(d, sum) + "%") .attr("alignment-baseline", "middle") .attr("x", (d) => { let textWidth = this.getTextWidth(d.data.key || "", { fontSize: defaultFontSize }) + labelMargin + percentCircleRadius; if (this.isRightSide(d)) { textWidth = -textWidth; } return arcLabel.centroid(this.correct(d))[0] - textWidth + d.xOffset; }) .attr("y", (d) => arcLabel.centroid(this.correct(d))[1] + d.yOffset) .attr("text-anchor", "middle") .attr("font-size", 11) .attr("fill", defaultTextFill) .style("opacity", this.getLabelOpacity); pieG .patternify({ tag: "circle", selector: "pie-percent-circle", data: (d) => [d] }) .attr("stroke", defaultTextFill) .attr("r", percentCircleRadius) .style("opacity", this.getLabelOpacity) .attr("fill", "none") .attr("cx", (d) => { let textWidth = this.getTextWidth(d.data.key || "", { fontSize: defaultFontSize }) + labelMargin + percentCircleRadius; if (this.isRightSide(d)) { textWidth = -textWidth; } return arcLabel.centroid(this.correct(d))[0] - textWidth + d.xOffset; }) .attr( "cy", (d) => arcLabel.centroid(this.correct(d))[1] - 1.1 + d.yOffset ); // centroid = arcGenerator.centroid(d); } getLabelOpacity(pieItem) { if (Math.abs(pieItem.yOffset) > 130) { return 0; } return 1; } getColor(d) { if (!d.data) { debugger; } return ( d.data.color || d3.schemeSet2[this.hashCode(d.data.key + "") % d3.schemeSet2.length] ); } isRightSide(n) { const d = this.correct(n); const midAngle = (d.startAngle + d.endAngle) / 2; if (midAngle <= Math.PI) return true; return false; } correct(d) { return Object.assign({}, d, { startAngle: d.startAngle, endAngle: d.endAngle }); } // Get hashcode from string hashCode(s) { for (var i = 0, h; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0; return Math.abs(h); } // =================== // Method which renders initial html elements _doRender() { this._doRedraw(); return this; } // Method which redraws graph after data change _doRedraw() { if (this.hasFilter() && this._multiple) { } else if (this.hasFilter()) { } else { } return this; } }47:[{"id":"9838afd9df9b7e497d059d6a53eeef4912458276c9c5ee9e1e08b5d8218b9d8b58e7a3642d925afec26b9486b4cbceff4c491a2e37174c52c773b04dac2a14f5","href":"https://static.observableusercontent.com/files/9838afd9df9b7e497d059d6a53eeef4912458276c9c5ee9e1e08b5d8218b9d8b58e7a3642d925afec26b9486b4cbceff4c491a2e37174c52c773b04dac2a14f5","name":"accommodation_choices.csv","type":"text/csv","lastModified":1744782204694.817,"size":202},{"id":"f9455f24073e3ced8bfc111c05025112239fdde0601e1cd5be03ba0018c0236c4f6ae00164da80132afd801ae2d4b0e07d4634186c585a3b422625da3f3b45ba","href":"https://static.observableusercontent.com/files/f9455f24073e3ced8bfc111c05025112239fdde0601e1cd5be03ba0018c0236c4f6ae00164da80132afd801ae2d4b0e07d4634186c585a3b422625da3f3b45ba","name":"top_destinations.csv","type":"text/csv","lastModified":1744796995763.381,"size":340}] 43:{"id":"8cc183cbe76db173","slug":null,"title":"Charts Rebuild","thumbnail":"7af84c8fedfac358139ba9ff5e53a32769ce925e83724b2c837ece66a924dc48","access_level":"public","create_time":"$D2025-04-16T05:43:03.018Z","update_time":"$D2025-04-16T11:14:25.207Z","view_time":null,"first_public_time":"$D2025-04-16T09:43:05.124Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a22c0742bacf9ed1","login":"emeritusali","name":"Aliu Adekola","avatar_url":"https://avatars-next.observableusercontent.com/098f0ff02c29c0524efacbaf17550e2d5469ee6eb220eaf4989f0df7d078d51d","tier":"starter_2024","bio":"","following":false},"version":234,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"336043e99a72102f","login":"emeritusali","name":"Aliu Adekola","avatar_url":"https://avatars-next.observableusercontent.com/098f0ff02c29c0524efacbaf17550e2d5469ee6eb220eaf4989f0df7d078d51d","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"336043e99a72102f","login":"emeritusali","name":"Aliu Adekola","avatar_url":"https://avatars-next.observableusercontent.com/098f0ff02c29c0524efacbaf17550e2d5469ee6eb220eaf4989f0df7d078d51d","tier":null,"role":"editor"},{"type":"team","id":"a22c0742bacf9ed1","login":"emeritusali","name":"Aliu Adekola","avatar_url":"https://avatars-next.observableusercontent.com/098f0ff02c29c0524efacbaf17550e2d5469ee6eb220eaf4989f0df7d078d51d","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Charts Rebuild","cells":[{"id":176,"value":"# Charts Rebuild","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"## Accommodation Chosen by International Students","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"legend = {\n const accommodations = Array.from(\n new Set(accommodation_choices.map((d) => d[\"Accommodation Type\"]))\n );\n const svg = d3.create(\"svg\").attr(\"width\", 600).attr(\"height\", 30);\n\n accommodations.forEach((acc, i) => {\n svg\n .append(\"rect\")\n .attr(\"x\", i * 120)\n .attr(\"y\", 0)\n .attr(\"width\", 15)\n .attr(\"height\", 15)\n .attr(\"rx\", 10)\n .attr(\"ry\", 10)\n .attr(\"fill\", color(acc));\n\n svg\n .append(\"text\")\n .attr(\"x\", i * 120 + 20)\n .attr(\"y\", 12)\n .text(acc)\n .attr(\"font-size\", \"12px\");\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"## Top Destinations for students","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"pieContainers = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"{\n pieContainers.innerHTML = \"\"; // clear before fresh render\n\n groupedPieData.forEach((group) => {\n const container = document.createElement(\"div\");\n container.style.width = \"300px\";\n\n // const title = document.createElement(\"h4\");\n // title.textContent = group.sector;\n // title.style.textAlign = \"center\";\n // title.style.marginBottom = \"0.5em\";\n // container.appendChild(title);\n\n const chart = new PieChart()\n .container(container)\n .data(group.data)\n .centerText(group.sector)\n .groupingText(\"Destinations\")\n .round((d) => d.data.value)\n .render();\n\n pieContainers.appendChild(container);\n });\n\n return pieContainers;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"groupedPieData = d3\n .groups(top_destinations, (d) => d.Sector)\n .map(([sector, rows]) => {\n return {\n sector,\n data: rows.map((d) => ({\n key: d.Destination,\n value: +d.Percentage\n }))\n };\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"d3Tip = require(\"d3-tip@0.9.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"top_destinations","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"top_destinations = FileAttachment(\"top_destinations.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"accommodation_choices = FileAttachment(\"accommodation_choices.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"accommodation_choices","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"nestedData = d3.groups(accommodation_choices, (d) => d.Sector)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"color = d3.scaleOrdinal(d3.schemeSet2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"