2d:null 2e:["$","title",null,{"children":"TU Enrollment in Liberia | Malik Koné | Observable"}] 33:T160e,mapEnrollment = { const w = Math.min(width, 980); const h = 660; const margin = 28; const legendWidth = 190; const features = liberia.features.map((d) => ({ ...d, students: studentsByCounty.get(normCounty(d.properties.name)) ?? 0 })); const projection = d3.geoMercator().fitExtent( [ [margin, margin + 25], [w - legendWidth - margin, h - margin] ], { type: "FeatureCollection", features } ); const path = d3.geoPath(projection); const format = d3.format(","); const color = d3.scaleThreshold().domain([1, 25, 50, 250, 500, 1000]).range([ "#f3f0e8", // 0 "#e8dfc7", // 1–24 "#d9c779", // 25–49 "#94b47a", // 50–249 "#3d9075", // 250–499 "#0d5b55", // 500–999 "#083b4d" // 1000+ ]); const svg = d3 .create("svg") .attr("viewBox", [0, 0, w, h]) .attr("style", "max-width:100%; height:auto; background:white;"); svg .append("text") .attr("x", margin) .attr("y", 28) .attr("font-family", "sans-serif") .attr("font-size", 20) .attr("font-weight", 700) .attr("fill", "#083b4d") .text("Tubman University Student Origin by County"); svg .append("text") .attr("x", margin) .attr("y", 49) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("fill", "#444") .text("Semester I, AY 2025–2026"); svg .append("g") .selectAll("path") .data(features) .join("path") .attr("d", path) .attr("fill", (d) => color(d.students)) .attr("stroke", "#0b3d2e") .attr("stroke-width", 0.8) .append("title") .text((d) => `${d.properties.name}: ${format(d.students)} students`); svg .append("path") .datum({ type: "FeatureCollection", features }) .attr("d", path) .attr("fill", "none") .attr("stroke", "#0b3d2e") .attr("stroke-width", 1.8); const labelOffset = new Map([ ["montserrado", [22, -6]], ["bomi", [-18, -10]], ["margibi", [26, 8]], ["grandcapemount", [-18, -8]], ["grandbassa", [28, 10]], ["rivercess", [28, 8]], ["sinoe", [18, 10]], ["grandkru", [8, 12]], ["maryland", [18, 6]], ["rivergee", [18, -8]] ]); const labelData = features.map(d => { const key = normCounty(d.properties.name); const [x, y] = path.centroid(d); const [dx, dy] = labelOffset.get(key) ?? [0, 0]; return { ...d, key, x, y, lx: x + dx, ly: y + dy }; }); svg.append("g") .attr("fill", "none") .attr("stroke", "#777") .attr("stroke-width", 0.5) .attr("opacity", 0.7) .selectAll("line") .data(labelData.filter(d => labelOffset.has(d.key))) .join("line") .attr("x1", d => d.x) .attr("y1", d => d.y) .attr("x2", d => d.lx) .attr("y2", d => d.ly); const countyLabels = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 9.5) .attr("font-weight", 650) .attr("text-anchor", "middle") .attr("paint-order", "stroke") .attr("stroke", "white") .attr("stroke-width", 3) .attr("fill", "#102a2a") .selectAll("text") .data(labelData) .join("text") .attr("x", d => d.lx) .attr("y", d => d.ly); countyLabels.append("tspan") .attr("x", d => d.lx) .text(d => d.properties.name); countyLabels .filter(d => d.students >= 300) .append("tspan") .attr("x", d => d.lx) .attr("dy", "1.15em") .attr("font-size", 9) .attr("font-weight", 500) .text(d => `${format(d.students)} students`); const city = svg .append("g") .selectAll("g") .data(places) .join("g") .attr("transform", (d) => `translate(${projection(d.coords)})`); city .append("circle") .attr("r", (d) => (d.name.includes("Harper") ? 5.5 : 4.5)) .attr("fill", "#b81f35") .attr("stroke", "white") .attr("stroke-width", 1.6); city .append("text") .attr("x", 8) .attr("y", -8) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("font-weight", 700) .attr("paint-order", "stroke") .attr("stroke", "white") .attr("stroke-width", 3) .attr("fill", "#111") .text((d) => d.name); const legendItems = [ { label: "0 / not reported", value: 0 }, { label: "1–24", value: 1 }, { label: "25–49", value: 25 }, { label: "50–249", value: 50 }, { label: "250–499", value: 250 }, { label: "500–999", value: 500 }, { label: "1,000+", value: 1000 } ]; const legend = svg .append("g") .attr("transform", `translate(${w - legendWidth + 10}, ${margin + 70})`) .attr("font-family", "sans-serif"); legend .append("text") .attr("x", 0) .attr("y", -14) .attr("font-size", 13) .attr("font-weight", 700) .attr("fill", "#083b4d") .text("Students registered"); const row = legend .selectAll("g") .data(legendItems) .join("g") .attr("transform", (_, i) => `translate(0, ${i * 24})`); row .append("rect") .attr("width", 18) .attr("height", 18) .attr("rx", 2) .attr("fill", (d) => color(d.value)) .attr("stroke", "#777") .attr("stroke-width", 0.4); row .append("text") .attr("x", 26) .attr("y", 13) .attr("font-size", 12) .attr("fill", "#333") .text((d) => d.label); svg .append("text") .attr("x", margin) .attr("y", h - 12) .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("fill", "#555") .text( "Source: Office of the Registrar, TU Registration Statistical Report, Semester I AY 2025–2026." ); return svg.node(); }34:T5f9,downloadMap = { const svg = mapEnrollment.cloneNode(true); svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); const viewBox = svg.getAttribute("viewBox").split(/[,\s]+/).map(Number); const svgWidth = viewBox[2]; const svgHeight = viewBox[3]; const svgText = new XMLSerializer().serializeToString(svg); const svgBlob = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" }); const svgUrl = URL.createObjectURL(svgBlob); // PNG export resolution multiplier const scale = 3; const img = new Image(); const imgUrl = URL.createObjectURL(svgBlob); await new Promise((resolve, reject) => { img.onload = resolve; img.onerror = reject; img.src = imgUrl; }); const canvas = document.createElement("canvas"); canvas.width = svgWidth * scale; canvas.height = svgHeight * scale; const ctx = canvas.getContext("2d"); // White background for brochure / PowerPoint use ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const pngBlob = await new Promise(resolve => canvas.toBlob(resolve, "image/png") ); const pngUrl = URL.createObjectURL(pngBlob); return html`

Download Enrollment SVG Download Enrollment PNG

`; }35:T4fd,marylandMap = { const w = Math.min(width, 900); const h = 650; const margin = 24; const projection = d3.geoMercator() .fitExtent([[margin, margin], [w - margin, h - margin]], liberia); const path = d3.geoPath(projection); const svg = d3.create("svg") .attr("viewBox", [0, 0, w, h]) .attr("style", "max-width:100%; height:auto; background:white;"); svg.append("g") .selectAll("path") .data(liberia.features) .join("path") .attr("d", path) .attr("fill", d => d.properties.name === "Maryland" ? "#d9a514" : "#f5efe6") .attr("stroke", "#0b3d2e") .attr("stroke-width", 0.8) .append("title") .text(d => d.properties.name); svg.append("path") .datum(liberia) .attr("d", path) .attr("fill", "none") .attr("stroke", "#0b3d2e") .attr("stroke-width", 1.8); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("text-anchor", "middle") .attr("paint-order", "stroke") .attr("stroke", "white") .attr("stroke-width", 3) .attr("fill", "#123") .selectAll("text") .data(liberia.features) .join("text") .attr("transform", d => `translate(${path.centroid(d)})`) .text(d => d.properties.name); return svg.node(); }36:T5fd,downloadMarylandMap = { const svg = mapEnrollment.cloneNode(true); svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); const viewBox = svg.getAttribute("viewBox").split(/[,\s]+/).map(Number); const svgWidth = viewBox[2]; const svgHeight = viewBox[3]; const svgText = new XMLSerializer().serializeToString(svg); const svgBlob = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" }); const svgUrl = URL.createObjectURL(svgBlob); // PNG export resolution multiplier const scale = 3; const img = new Image(); const imgUrl = URL.createObjectURL(svgBlob); await new Promise((resolve, reject) => { img.onload = resolve; img.onerror = reject; img.src = imgUrl; }); const canvas = document.createElement("canvas"); canvas.width = svgWidth * scale; canvas.height = svgHeight * scale; const ctx = canvas.getContext("2d"); // White background for brochure / PowerPoint use ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const pngBlob = await new Promise(resolve => canvas.toBlob(resolve, "image/png") ); const pngUrl = URL.createObjectURL(pngBlob); return html`

Download Maryland SVG Download Maryland PNG

`; }37:[] 31:{"id":"bcd1219ee3fc57bb","slug":"liberian-map","title":"TU Enrollment in Liberia","thumbnail":"9363e9951b2f806bab341feabcfd2f54ad8ef75badc25002e6a2f241eefa3e6b","access_level":"public","create_time":"$D2026-06-12T18:11:29.094Z","update_time":"$D2026-06-12T19:48:38.002Z","view_time":null,"first_public_time":"$D2026-06-15T17:01:21.606Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":98,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024","role":"editor"},{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"TU Enrollment in Liberia","cells":[{"id":0,"value":"# TU Enrollment in Liberia","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof countyStudents = Inputs.form(\n Object.fromEntries(\n countyDefaults.map(d => [\n d.key,\n Inputs.range([0, 1600], {\n label: d.label,\n value: d.value,\n step: 1\n })\n ])\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"## Maryland in Liberia","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"## Technical details","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"countyDefaults = [\n { key: \"maryland\", label: \"Maryland\", value: 1254 },\n { key: \"grandkru\", label: \"Grand Kru\", value: 948 },\n { key: \"rivergee\", label: \"River Gee\", value: 412 },\n { key: \"sinoe\", label: \"Sinoe\", value: 48 },\n { key: \"grandgedeh\", label: \"Grand Gedeh\", value: 42 },\n { key: \"nimba\", label: \"Nimba\", value: 34 },\n { key: \"grandbassa\", label: \"Grand Bassa\", value: 33 },\n { key: \"lofa\", label: \"Lofa\", value: 29 },\n { key: \"bong\", label: \"Bong\", value: 23 },\n { key: \"montserrado\", label: \"Montserrado\", value: 13 },\n { key: \"grandcapemount\", label: \"Grand Cape Mount\", value: 9 },\n { key: \"bomi\", label: \"Bomi\", value: 3 },\n { key: \"gbapolu\", label: \"Gbarpolu / Gbapolu\", value: 1 },\n { key: \"rivercess\", label: \"River Cess\", value: 0 },\n { key: \"margibi\", label: \"Margibi\", value: 0 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"studentsByCounty = {\n const m = new Map(Object.entries(countyStudents));\n\n // spelling safeguards\n m.set(\"gbarpolu\", countyStudents.gbapolu);\n m.set(\"gbapolu\", countyStudents.gbapolu);\n\n return m;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@7\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"liberiaMeta = d3.json(\"https://www.geoboundaries.org/api/current/gbOpen/LBR/ADM1/\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"liberiaTopo = d3.json(\n \"https://code.highcharts.com/mapdata/countries/lr/lr-all.topo.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"liberia = topojson.feature(liberiaTopo, liberiaTopo.objects.default)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"liberia.features.map(d => d.properties.name).sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"normCounty = (name) => name.toLowerCase().replace(/[^a-z]/g, \"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"places = [\n { name: \"Monrovia\", coords: [-10.8074, 6.3106] },\n { name: \"Harper / TU\", coords: [-7.7169, 4.375] }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"liberia.features.map(d => ({\n mapName: d.properties.name,\n normalized: normCounty(d.properties.name),\n students: studentsByCounty.get(normCounty(d.properties.name)) ?? 0\n}))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"