2c:null 2d:["$","title",null,{"children":"ARBES | Yonsei University | Observable"}] 32:T765,viewof tab = { const wrapper = html`

`; let value = "SOIL CONSERVATION PRACTICES"; const buttons = wrapper.querySelectorAll("button"); const title = wrapper.querySelector("div:last-child"); function update() { for (const b of buttons) { const selected = b.textContent === value; b.style.width = "30%"; b.style.padding = "12px 0"; b.style.border = "none"; b.style.borderRadius = "10px"; b.style.fontSize = "15px"; b.style.fontWeight = "600"; b.style.color = "white"; b.style.background = selected ? "#6cab72" : "#7a7a7a"; b.style.cursor = "pointer"; b.style.transition = "all 0.2s ease"; b.style.boxShadow = selected ? "0 3px 8px rgba(0,0,0,0.18)" : "0 2px 5px rgba(0,0,0,0.12)"; } title.textContent = value === "SOIL CONSERVATION PRACTICES" ? "Soil Conservation Practices in Program and Control Communities" : "Five Crops Most Commonly Grown in Program and Control Communities"; wrapper.value = value; } for (const b of buttons) { b.onclick = () => { value = b.textContent; update(); wrapper.dispatchEvent(new Event("input")); }; b.onmouseover = () => { if (b.textContent !== value) { b.style.background = "#666666"; } }; b.onmouseout = () => { update(); }; } update(); return wrapper; }33:T260c,chart1 = async() => { const raw = await FileAttachment("arbes_soil_percent.csv").csv(); const categories = [ "Households with erosion in their fields", "Households that practice crop rotation in their fields", "Households that practice fallowing in their fields", "Households that irrigate their fields", "Households that use manure in their fields" ]; const countryOrder = ["Ethiopia", "Ghana", "Mali", "Malawi", "Tanzania"]; const colorMap = new Map([ ["Ethiopia", "#e0c55a"], ["Ghana", "#6cab72"], ["Mali", "#a24a5d"], ["Malawi", "#666666"], ["Tanzania", "#6f9fd1"] ]); const chartWidth = 760; const chartHeight = 180; const gap = -25; const marginTop = 14; const marginRight = 36; const marginBottom = 10; const marginLeft = 16; const titleWidth = 150; const labelWidth = 72; const axisShift = 130; const lineWidth = 1.2; function createMultiSelect(labelText, options, defaultSelected = options) { const wrapper = html`

`; const label = html`

${labelText}

`; const button = html``; const arrow = html`▼`; button.appendChild(arrow); const panel = html``; const allId = `${labelText}-all-${Math.random().toString(36).slice(2)}`; const allRow = html` (All) `; panel.appendChild(allRow); const rows = options.map(option => { const id = `${labelText}-${option}-${Math.random().toString(36).slice(2)}`; const row = html` ${option} `; panel.appendChild(row); return row.querySelector("input"); }); function getSelected() { return rows.filter(input => input.checked).map(input => input.value); } function updateButtonText() { const selected = getSelected(); if (selected.length === options.length) { button.childNodes[0] ? null : null; button.firstChild && button.firstChild.nodeType === 3 ? button.firstChild.remove() : null; button.prepend("(All)"); } else if (selected.length === 0) { button.firstChild && button.firstChild.nodeType === 3 ? button.firstChild.remove() : null; button.prepend("(None)"); } else if (selected.length === 1) { button.firstChild && button.firstChild.nodeType === 3 ? button.firstChild.remove() : null; button.prepend(selected[0]); } else { button.firstChild && button.firstChild.nodeType === 3 ? button.firstChild.remove() : null; button.prepend(`(${selected.length} selected)`); } } function syncAllBox() { const selected = getSelected(); allRow.querySelector("input").checked = selected.length === options.length; } rows.forEach(input => { input.checked = defaultSelected.includes(input.value); input.addEventListener("input", () => { syncAllBox(); updateButtonText(); wrapper.dispatchEvent(new CustomEvent("input")); }); }); allRow.querySelector("input").checked = defaultSelected.length === options.length; allRow.querySelector("input").addEventListener("input", e => { const checked = e.target.checked; rows.forEach(input => { input.checked = checked; }); updateButtonText(); wrapper.dispatchEvent(new CustomEvent("input")); }); button.addEventListener("click", e => { e.stopPropagation(); panel.style.display = panel.style.display === "none" ? "block" : "none"; }); document.addEventListener("click", e => { if (!wrapper.contains(e.target)) { panel.style.display = "none"; } }); wrapper.value = getSelected; wrapper.getSelected = getSelected; updateButtonText(); wrapper.append(label, button, panel); return wrapper; } const selectedCountries = createMultiSelect( "Country", countryOrder, countryOrder ); const selectedCategories = createMultiSelect( "Soil Conservation Practices", categories, categories ); const controls = html`

`; controls.append(selectedCountries, selectedCategories); const container = html`

`; const chartHolder = html`

`; container.append(controls, chartHolder); function render() { const shownCountries = selectedCountries.getSelected(); const shownCategories = selectedCategories.getSelected(); chartHolder.innerHTML = ""; if (shownCategories.length === 0 || shownCountries.length === 0) { const emptySvg = d3.create("svg") .attr("width", chartWidth) .attr("height", 80) .attr("viewBox", [0, 0, chartWidth, 80]) .style("max-width", "100%") .style("height", "auto") .style("font", "12px sans-serif"); emptySvg.append("text") .attr("x", 16) .attr("y", 40) .attr("fill", "black") .text("No data selected. Please choose at least one country and one soil conservation practice."); chartHolder.append(emptySvg.node()); return; } const totalHeight = shownCategories.length * chartHeight + (shownCategories.length - 1) * gap; const svg = d3.create("svg") .attr("width", chartWidth) .attr("height", totalHeight) .attr("viewBox", [0, 0, chartWidth, totalHeight]) .style("max-width", "100%") .style("height", "auto") .style("font", "10px sans-serif"); shownCategories.forEach((category, i) => { const yOffset = i * (chartHeight + gap); const filtered = raw .filter(row => row.Col3 === category && shownCountries.includes(row.Country)) .map(row => ({ country: row.Country, percent: +String(row.YesPercent).replace("%", "") })) .sort((a, b) => shownCountries.indexOf(a.country) - shownCountries.indexOf(b.country)); const axisX = marginLeft + titleWidth + labelWidth + axisShift; const chartRight = chartWidth - marginRight; const x = d3.scaleLinear() .domain([0, d3.max(filtered, row => row.percent) || 0]) .nice() .range([axisX, chartRight]); const y = d3.scaleBand() .domain(shownCountries) .range([yOffset + marginTop, yOffset + chartHeight - marginBottom]) .padding(0.55); svg.append("line") .attr("x1", axisX) .attr("x2", axisX) .attr("y1", yOffset + marginTop) .attr("y2", yOffset + chartHeight - marginBottom) .attr("stroke", "black") .attr("stroke-width", lineWidth); svg.append("g") .selectAll(`text.country-${i}`) .data(filtered) .join("text") .attr("x", axisX - 6) .attr("y", row => y(row.country) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("fill", "black") .attr("font-size", 10) .text(row => row.country); svg.append("g") .selectAll(`rect.bar-${i}`) .data(filtered) .join("rect") .attr("x", axisX) .attr("y", row => y(row.country)) .attr("width", row => x(row.percent) - axisX) .attr("height", y.bandwidth()) .attr("fill", row => colorMap.get(row.country)); svg.append("g") .selectAll(`text.value-${i}`) .data(filtered) .join("text") .attr("x", row => x(row.percent) + 4) .attr("y", row => y(row.country) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("fill", "black") .attr("font-size", 9) .text(row => row.percent + "%"); const firstCountry = shownCountries[0]; svg.append("text") .attr("x", marginLeft) .attr("y", y(firstCountry) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", 11) .attr("fill", "black") .text(category); if (i < shownCategories.length - 1) { svg.append("line") .attr("x1", marginLeft) .attr("x2", chartWidth - marginRight) .attr("y1", yOffset + chartHeight + gap / 2) .attr("y2", yOffset + chartHeight + gap / 2) .attr("stroke", "black") .attr("stroke-width", lineWidth); } }); chartHolder.append(svg.node()); } selectedCountries.addEventListener("input", render); selectedCategories.addEventListener("input", render); render(); return container; }34:T21f1,chart2 = async() => { const raw = await FileAttachment("arbes_crop_percent.csv").csv(); const countryOrder = ["Ethiopia", "Ghana", "Mali", "Malawi", "Tanzania"]; const colorMap = new Map([ ["Ethiopia", "#e0c55a"], ["Ghana", "#6cab72"], ["Mali", "#a24a5d"], ["Malawi", "#666666"], ["Tanzania", "#6f9fd1"] ]); const width = 900; const rowHeight = 22; const groupGap = 12; const marginTop = 12; const marginBottom = 12; function createMultiSelect(labelText, options, defaultSelected = options) { const wrapper = html`

`; const label = html`

${labelText}

`; const button = html``; const arrow = html`▼`; button.appendChild(arrow); const panel = html``; const allId = `${labelText}-all-${Math.random().toString(36).slice(2)}`; const allRow = html` (All) `; panel.appendChild(allRow); const rows = options.map(option => { const id = `${labelText}-${option}-${Math.random().toString(36).slice(2)}`; const row = html` ${option} `; panel.appendChild(row); return row.querySelector("input"); }); function getSelected() { return rows.filter(input => input.checked).map(input => input.value); } function setButtonText(text) { while (button.firstChild && button.firstChild !== arrow) { button.removeChild(button.firstChild); } button.insertBefore(document.createTextNode(text), arrow); } function updateButtonText() { const selected = getSelected(); if (selected.length === options.length) setButtonText("(All)"); else if (selected.length === 0) setButtonText("(None)"); else if (selected.length === 1) setButtonText(selected[0]); else setButtonText(`(${selected.length} selected)`); } function syncAllBox() { const selected = getSelected(); allRow.querySelector("input").checked = selected.length === options.length; } rows.forEach(input => { input.checked = defaultSelected.includes(input.value); input.addEventListener("input", () => { syncAllBox(); updateButtonText(); wrapper.dispatchEvent(new CustomEvent("input")); }); }); allRow.querySelector("input").checked = defaultSelected.length === options.length; allRow.querySelector("input").addEventListener("input", e => { const checked = e.target.checked; rows.forEach(input => { input.checked = checked; }); updateButtonText(); wrapper.dispatchEvent(new CustomEvent("input")); }); button.addEventListener("click", e => { e.stopPropagation(); panel.style.display = panel.style.display === "none" ? "block" : "none"; }); document.addEventListener("click", e => { if (!wrapper.contains(e.target)) { panel.style.display = "none"; } }); wrapper.getSelected = getSelected; updateButtonText(); wrapper.append(label, button, panel); return wrapper; } const selectedCountries = createMultiSelect( "Country", countryOrder, countryOrder ); const controls = html`

`; controls.append(selectedCountries); const container = html`

`; const chartHolder = html`

`; container.append(controls, chartHolder); function render() { const shownCountries = selectedCountries.getSelected(); chartHolder.innerHTML = ""; if (shownCountries.length === 0) { const emptySvg = d3.create("svg") .attr("width", width) .attr("height", 80) .attr("viewBox", [0, 0, width, 80]) .style("max-width", "100%") .style("height", "auto") .style("font", "12px sans-serif"); emptySvg.append("text") .attr("x", 16) .attr("y", 40) .attr("fill", "black") .text("No data selected. Please choose at least one country."); chartHolder.append(emptySvg.node()); return; } const grouped = countryOrder .filter(country => shownCountries.includes(country)) .map(country => ({ country, values: raw .filter(d => d.Country === country) .map(d => ({ crop: d.Crop, value: +String(d["%HHcrops"]).replace("%", "") })) })) .filter(d => d.values.length > 0); const totalRows = d3.sum(grouped, d => d.values.length); const totalGap = groupGap * (grouped.length - 1); const height = marginTop + marginBottom + totalRows * rowHeight + totalGap; const countryW = width * 0.15; const cropW = width * 0.15; const barAreaW = width * 0.70; const barW = barAreaW * 0.90; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("max-width", "100%") .style("height", "auto") .style("font", "12px sans-serif"); const xBar = d3.scaleLinear() .domain([0, 100]) .range([0, barW]); svg.append("line") .attr("x1", countryW) .attr("x2", countryW) .attr("y1", 0) .attr("y2", height) .attr("stroke", "#ccc"); svg.append("line") .attr("x1", countryW + cropW) .attr("x2", countryW + cropW) .attr("y1", 0) .attr("y2", height) .attr("stroke", "#ccc"); const g = svg.append("g") .attr("transform", `translate(0, ${marginTop})`); let yOffset = 0; grouped.forEach((group, groupIndex) => { const blockHeight = group.values.length * rowHeight; const countryY = yOffset + blockHeight / 2; g.append("text") .attr("x", countryW / 2) .attr("y", countryY) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-size", 14) .attr("font-weight", 600) .attr("fill", "black") .text(group.country); group.values.forEach((d, i) => { const y = yOffset + i * rowHeight + rowHeight / 2; const barX = countryW + cropW + 10; g.append("text") .attr("x", countryW + 10) .attr("y", y) .attr("dominant-baseline", "middle") .attr("font-size", 12) .attr("fill", "black") .text(d.crop); g.append("rect") .attr("x", barX) .attr("y", y - 6) .attr("width", barW) .attr("height", 12) .attr("fill", "#f2f2f2") .attr("rx", 2); g.append("rect") .attr("x", barX) .attr("y", y - 6) .attr("width", xBar(d.value)) .attr("height", 12) .attr("fill", colorMap.get(group.country) || "#999") .attr("rx", 2); g.append("text") .attr("x", barX + xBar(d.value) + 6) .attr("y", y) .attr("dominant-baseline", "middle") .attr("font-size", 11) .attr("fill", "black") .text(`${d.value}%`); }); yOffset += blockHeight; if (groupIndex < grouped.length - 1) { g.append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", yOffset + groupGap / 2) .attr("y2", yOffset + groupGap / 2) .attr("stroke", "black") .attr("stroke-width", 1); yOffset += groupGap; } }); chartHolder.append(svg.node()); } selectedCountries.addEventListener("input", render); render(); return container; }35:[{"id":"3f00dd076acdf1ff6b5ecb2f0618b0ebb3941f23e744a3c6b2b49f736849122b66ccec1b3b46916190c13d3054c510f5b7e786eaeaa9234d8acfb50e7dadb789","href":"https://static.observableusercontent.com/files/3f00dd076acdf1ff6b5ecb2f0618b0ebb3941f23e744a3c6b2b49f736849122b66ccec1b3b46916190c13d3054c510f5b7e786eaeaa9234d8acfb50e7dadb789","name":"arbes_crop_percent.csv","type":"text/csv","lastModified":1773802272181.417,"size":749},{"id":"c2589633280e7a8ad7e48b7da8c6f7fc4e62b91046b12187d91c198eff2bc6b82847fab290cd61e79686a598102fb81a027de0f06a35b159020410d6b3c692ff","href":"https://static.observableusercontent.com/files/c2589633280e7a8ad7e48b7da8c6f7fc4e62b91046b12187d91c198eff2bc6b82847fab290cd61e79686a598102fb81a027de0f06a35b159020410d6b3c692ff","name":"arbes_soil_percent.csv","type":"text/csv","lastModified":1773793094966.456,"size":1438}] 30:{"id":"3219ba596e39def0","slug":null,"title":"ARBES","thumbnail":"7d7142010485ee8d342e0b21ae014c7a8db7a93c74d7ae6af1e773925e9fd69a","access_level":"public","create_time":"$D2026-03-18T00:18:04.914Z","update_time":"$D2026-03-18T03:23:59.658Z","view_time":null,"first_public_time":"$D2026-03-18T01:49:38.612Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6686209f2dacbb68","login":"yonsei-university","name":"Yonsei University","avatar_url":"https://avatars-next.observableusercontent.com/0ef313aea0a6d14e694642337ad9fb2c3d61bab08e797d7bf396f201ea06499b","tier":"starter_2024"},"version":124,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"993abe2b01c94697","login":"apikeu-muhammad-afiq-aiman-bin-affandi","name":"아피크 Muhammad Afiq Aiman bin Affandi","avatar_url":"https://avatars-next.observableusercontent.com/a3c91dc94a67b55a27b9cb13cd75d20a8cd74d4570e4acc69327d28827cd0613","tier":null}],"members":[{"type":"individual","id":"993abe2b01c94697","login":"apikeu-muhammad-afiq-aiman-bin-affandi","name":"아피크 Muhammad Afiq Aiman bin Affandi","avatar_url":"https://avatars-next.observableusercontent.com/a3c91dc94a67b55a27b9cb13cd75d20a8cd74d4570e4acc69327d28827cd0613","tier":null,"role":"editor"},{"type":"team","id":"6686209f2dacbb68","login":"yonsei-university","name":"Yonsei University","avatar_url":"https://avatars-next.observableusercontent.com/0ef313aea0a6d14e694642337ad9fb2c3d61bab08e797d7bf396f201ea06499b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"ARBES","cells":[{"id":56,"value":"# ARBES\nby International Food Policy Research Institute (IFPRI)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"tabbedChart = await (tab === \"SOIL CONSERVATION PRACTICES\" ? chart1() : chart2())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"Original Tableau Viz: https://public.tableau.com/app/profile/ifpri.td7290/viz/ARBES/SOILCONSERVATIONPRACTICES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"