viewof museumComparison = { const container = html`

Compare Financial Health Across Museums

Comparison Mode:

`; // ----------------------------------------- // A) Grab references to the DOM elements // ----------------------------------------- const comparisonModeSelect = container.querySelector("#comparisonModeSelect"); const singleMuseumsContainer = container.querySelector("#singleMuseumsContainer"); const groupMuseumsContainer = container.querySelector("#groupMuseumsContainer"); const museumSelectA = container.querySelector("#museumSelectA"); const museumSelectB = container.querySelector("#museumSelectB"); const singleMuseumSelect = container.querySelector("#singleMuseumSelect"); const numMuseumsInput = container.querySelector("#numMuseumsInput"); const generateButton = container.querySelector("#generateButton"); const dynamicContainer = container.querySelector("#dynamicDropdownsContainer"); const metricSelect = container.querySelector("#metricSelect"); const percentageToggleContainer = container.querySelector("#percentageToggleContainer"); const percentageCheckbox = container.querySelector("#percentageCheckbox"); // The chart area const svg = d3.select(container).select("svg"); const margin = { top: 50, right: 30, bottom: 100, left: 100 }; const width = +svg.attr("width") - margin.left - margin.right; const height = +svg.attr("height") - margin.top - margin.bottom; const gMain = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const x = d3.scaleBand().range([0, width]).padding(0.4); const y = d3.scaleLinear().range([height, 0]); const xAxisGroup = gMain.append("g") .attr("class", "axis") .attr("transform", `translate(0, ${height})`); const yAxisGroup = gMain.append("g").attr("class", "axis"); const yGrid = gMain.append("g").attr("class", "grid"); const tooltip = d3.select(container).append("div").attr("class", "tooltip"); // ----------------------------------------- // B) Load Data (from File Attachments) // ----------------------------------------- const data = await FileAttachment("museum.json").json(); // Helper parse function parseNumber(value) { if (value == null || value === "NA" || isNaN(+value)) return 0; return +value; } function safeDivide(a, b) { const numA = parseNumber(a); const numB = parseNumber(b); return numB === 0 ? 0 : numA / numB; } // Parse numeric fields data.forEach(d => { d.total_prog_expenses = parseNumber(d.total_prog_expenses); d.total_expenses = parseNumber(d.total_expenses); d.total_advertising_expense = parseNumber(d.total_advertising_expense); d.total_exec_comp = parseNumber(d.total_exec_comp); d.total_other_comp = parseNumber(d.total_other_comp); d.total_revenue = parseNumber(d.total_revenue); d.fixed_assets = parseNumber(d.fixed_assets); d.eoy_endownment_ = parseNumber(d.eoy_endownment_); }); // Get museum names const museumNames = Array.from(new Set(data.map(d => d.museum_name).filter(Boolean))).sort(); // Define metrics const metrics = [ { label: "Program Expense Ratio", value: "prog_ratio", compute: d => safeDivide(d.total_prog_expenses, d.total_expenses) }, { label: "Advertising Expense Ratio", value: "adv_ratio", compute: d => safeDivide(d.total_advertising_expense, d.total_expenses) }, { label: "Compensation Measure", value: "comp_measure", compute: d => d.total_exec_comp + d.total_other_comp }, { label: "Total Revenue", value: "total_revenue", compute: d => d.total_revenue }, { label: "Fixed Assets", value: "fixed_assets", compute: d => d.fixed_assets }, { label: "EOY Endowment", value: "eoy_endownment_", compute: d => d.eoy_endownment_ } ]; // Populate metric dropdown d3.select(metricSelect) .selectAll("option.metricOption") .data(metrics) .enter() .append("option") .attr("class", "metricOption") .attr("value", d => d.value) .text(d => d.label); // Populate "Single vs Single" selects d3.select(museumSelectA) .selectAll("option.museumOption") .data(museumNames) .enter() .append("option") .attr("value", d => d) .text(d => d); d3.select(museumSelectB) .selectAll("option.museumOption") .data(museumNames) .enter() .append("option") .attr("value", d => d) .text(d => d); // Populate "Single Museum" in group mode d3.select(singleMuseumSelect) .selectAll("option.museumOption") .data(museumNames) .enter() .append("option") .attr("value", d => d) .text(d => d); let groupDropdowns = []; // ----------------------------------------- // C) UI Event Listeners // ----------------------------------------- comparisonModeSelect.onchange = () => { const mode = comparisonModeSelect.value; if (mode === "single") { singleMuseumsContainer.classList.remove("hidden"); singleMuseumsContainer.classList.add("visible"); groupMuseumsContainer.classList.remove("visible"); groupMuseumsContainer.classList.add("hidden"); } else { singleMuseumsContainer.classList.remove("visible"); singleMuseumsContainer.classList.add("hidden"); groupMuseumsContainer.classList.remove("hidden"); groupMuseumsContainer.classList.add("visible"); } updateChart(); }; museumSelectA.onchange = updateChart; museumSelectB.onchange = updateChart; singleMuseumSelect.onchange = updateChart; metricSelect.onchange = () => { const selectedMetricValue = metricSelect.value; if (selectedMetricValue === "total_revenue") { percentageToggleContainer.style.display = "block"; } else { percentageToggleContainer.style.display = "none"; percentageCheckbox.checked = false; } updateChart(); }; percentageCheckbox.onchange = updateChart; generateButton.onclick = () => { dynamicContainer.innerHTML = ""; groupDropdowns = []; const numberOfMuseums = +numMuseumsInput.value; if (numberOfMuseums < 1) return; for (let i = 0; i < numberOfMuseums; i++) { const div = d3.select(dynamicContainer) .append("div") .attr("class", "dropdown-group"); div.append("label").text(`Museum #${i+1}:`); const selectEl = div.append("select") .attr("class", "averageMuseumSelect") .style("min-width", "200px"); // Populate with museum names selectEl.selectAll("option.museumOption") .data(museumNames) .enter() .append("option") .attr("value", d => d) .text(d => d); // Keep reference groupDropdowns.push(selectEl); selectEl.on("change", updateChart); } updateChart(); }; // ----------------------------------------- // D) Chart update function // ----------------------------------------- function updateChart() { const mode = comparisonModeSelect.value; const selectedMetricValue = metricSelect.value; const showPercentage = percentageCheckbox.checked; if (!selectedMetricValue) return; const mInfo = metrics.find(m => m.value === selectedMetricValue); if (!mInfo) return; let barData = []; // Single vs Single if (mode === "single") { const museumA = museumSelectA.value; const museumB = museumSelectB.value; if (!museumA || !museumB) return; const recA = data.find(d => d.museum_name === museumA); const recB = data.find(d => d.museum_name === museumB); if (!recA || !recB) return; const valA = mInfo.compute(recA); const valB = mInfo.compute(recB); if (selectedMetricValue === "total_revenue" && showPercentage) { const total = valA + valB; const shareA = total ? (valA / total) * 100 : 0; const shareB = total ? (valB / total) * 100 : 0; barData = [ { museum: museumA, label: mInfo.label, value: shareA, color: "Red" }, { museum: museumB, label: mInfo.label, value: shareB, color: "Darkred" } ]; y.domain([0, 100]).nice(); } else { barData = [ { museum: museumA, label: mInfo.label, value: valA, color: "Red" }, { museum: museumB, label: mInfo.label, value: valB, color: "Darkred" } ]; y.domain([0, d3.max(barData, d => d.value) || 0]).nice(); } } // Group vs Single else { const singleMuseum = singleMuseumSelect.value; if (!singleMuseum) return; const singleRec = data.find(d => d.museum_name === singleMuseum); if (!singleRec) return; const singleValue = mInfo.compute(singleRec); const groupNames = groupDropdowns .map(sel => sel.node().value) .filter(Boolean); if (groupNames.length === 0) return; const groupRecords = data.filter(d => groupNames.includes(d.museum_name)); if (groupRecords.length === 0) return; let sum = 0; groupRecords.forEach(d => { sum += mInfo.compute(d); }); const avgValue = sum / groupRecords.length; if (selectedMetricValue === "total_revenue" && showPercentage) { const totalRevenue = singleValue + sum; const singleShare = totalRevenue ? (singleValue / totalRevenue) * 100 : 0; const groupShare = totalRevenue ? (sum / totalRevenue) * 100 : 0; let secondBarLabel = (groupRecords.length === 1) ? groupNames[0] : `Sum of ${groupRecords.length}`; barData = [ { museum: singleMuseum, label: mInfo.label, value: singleShare, color: "Red" }, { museum: secondBarLabel, label: mInfo.label, value: groupShare, color: "Darkred" } ]; y.domain([0, 100]).nice(); } else { let secondBarLabel = (groupRecords.length === 1) ? groupNames[0] : `Avg of ${groupRecords.length}`; barData = [ { museum: singleMuseum, label: mInfo.label, value: singleValue, color: "Red" }, { museum: secondBarLabel, label: mInfo.label, value: avgValue, color: "Darkred" } ]; y.domain([0, d3.max(barData, d => d.value) || 0]).nice(); } } // ----------------------------------------- // Render x.domain(barData.map(d => d.museum)); xAxisGroup .transition().duration(500) .call(d3.axisBottom(x)); yAxisGroup .transition().duration(500) .call( d3.axisLeft(y).tickFormat(d => { if (selectedMetricValue === "total_revenue" && showPercentage) { return d + "%"; } return d3.format(",")(d); }) ); yGrid .transition().duration(500) .call(d3.axisLeft(y).tickSize(-width).tickFormat("")); // Remove old bars gMain.selectAll(".bar").remove(); // Add new bars gMain.selectAll(".bar") .data(barData) .enter() .append("rect") .attr("class", "bar") .attr("x", d => x(d.museum)) .attr("width", x.bandwidth()) .attr("y", height) .attr("height", 0) .attr("fill", d => d.color) .on("mouseover", function(event, d) { let displayValue; if (selectedMetricValue === "total_revenue" && showPercentage) { displayValue = d.value.toFixed(2) + "%"; } else { displayValue = d3.format(",")(d.value); } tooltip .style("display", "block") .style("position", "absolute") .html(`${d.museum}
${d.label}: ${displayValue}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 20) + "px"); }) .on("mousemove", function(event) { tooltip .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 20) + "px"); }) .on("mouseout", function() { tooltip.style("display", "none"); }) .transition().duration(800) .attr("y", d => y(d.value)) .attr("height", d => height - y(d.value)); } // Fire once so the chart is ready if the user picks items updateChart(); // Return the container (so Observable shows it) return container; }