viewof museumComparison = { const container = html`

Museum Social Reach Comparison

Comparison Mode:

`; // A) Grab references 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"); // B) Chart setup & Data 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 g = 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 xAxis = g.append("g").attr("transform", `translate(0,${height})`); const yAxis = g.append("g"); // Add grid group const yGrid = g.append("g").attr("class", "grid"); const tooltip = d3.select(container).append("div").attr("class", "tooltip"); const data = await FileAttachment("museum.json").json(); data.forEach(d => { d.instagram = +d["Instagram Followers"] || 0; d.twitter = +d["Twitter Followers"] || 0; d.youtube = +d["YouTube Subscribers"] || 0; d.reviews = +d["Number of Google Reviews"] || 0; }); const metrics = [ { label: "Instagram Followers", value: "instagram" }, { label: "Twitter Followers", value: "twitter" }, { label: "YouTube Subscribers", value: "youtube" }, { label: "Google Reviews", value: "reviews" } ]; metrics.forEach(m => { const opt = document.createElement("option"); opt.value = m.value; opt.text = m.label; metricSelect.appendChild(opt); }); const museumNames = data.map(d => d.museum_name).sort(); const fillSelect = sel => { sel.innerHTML = ""; const ph = document.createElement("option"); ph.value = ""; ph.text = "Select a Museum"; ph.selected = true; sel.appendChild(ph); museumNames.forEach(name => { const o = document.createElement("option"); o.value = name; o.text = name; sel.appendChild(o); }); }; fillSelect(museumSelectA); fillSelect(museumSelectB); fillSelect(singleMuseumSelect); let groupDropdowns = []; comparisonModeSelect.onchange = () => { // Clear existing bars g.selectAll('rect').remove(); const mode = comparisonModeSelect.value; singleMuseumsContainer.style.display = mode === 'single' ? 'flex' : 'none'; groupMuseumsContainer.style.display = mode === 'group' ? 'flex' : 'none'; updateChart(); }; [museumSelectA, museumSelectB, singleMuseumSelect, metricSelect].forEach(el => el.onchange = updateChart); generateButton.onclick = () => { dynamicContainer.innerHTML = ''; groupDropdowns = []; const count = +numMuseumsInput.value; for (let i = 0; i < count; i++) { const wrapper = document.createElement('div'); wrapper.className = 'dropdown-group'; const lbl = document.createElement('label'); lbl.textContent = `Museum #${i+1}:`; wrapper.appendChild(lbl); const sel = document.createElement('select'); fillSelect(sel); wrapper.appendChild(sel); dynamicContainer.appendChild(wrapper); groupDropdowns.push(sel); sel.onchange = updateChart; } updateChart(); }; function updateChart() { const mode = comparisonModeSelect.value; const metric = metricSelect.value; if (!metric) return; let bars = []; if (mode === 'single') { const A = data.find(d => d.museum_name === museumSelectA.value); const B = data.find(d => d.museum_name === museumSelectB.value); if (!A || !B) return; bars = [ { name: A.museum_name, val: A[metric], color: '#E74C3C' }, { name: B.museum_name, val: B[metric], color: '#3498DB' } ]; } else { const S = data.find(d => d.museum_name === singleMuseumSelect.value); const names = groupDropdowns.map(s => s.value).filter(v => v); const vals = data.filter(d => names.includes(d.museum_name)).map(d => d[metric]); if (!S || !vals.length) return; const avg = vals.reduce((a, b) => a + b, 0) / vals.length; bars = [ { name: S.museum_name, val: S[metric], color: '#E74C3C' }, { name: `Avg of ${vals.length}`, val: avg, color: '#3498DB' } ]; } x.domain(bars.map(b => b.name)); y.domain([0, d3.max(bars, b => b.val)]).nice(); xAxis.call(d3.axisBottom(x)); yAxis.call(d3.axisLeft(y)); // Draw grid yGrid.call(d3.axisLeft(y).tickSize(-width).tickFormat('')); const sel = g.selectAll('rect').data(bars, d => d.name); sel.join( enter => enter.append('rect') .attr('x', d => x(d.name)).attr('width', x.bandwidth()) .attr('y', y(0)).attr('height', 0).attr('fill', d => d.color) .on('mouseover', (e, d) => { tooltip.style('display', 'block') .html(`${d.name}
${d.val.toLocaleString()}`) .style('left', e.pageX + 10 + 'px') .style('top', e.pageY - 20 + 'px'); }) .on('mouseout', () => tooltip.style('display', 'none')) .transition().duration(800).attr('y', d => y(d.val)).attr('height', d => height - y(d.val)), update => update.transition().duration(800) .attr('x', d => x(d.name)).attr('width', x.bandwidth()) .attr('y', d => y(d.val)).attr('height', d => height - y(d.val)).attr('fill', d => d.color), exit => exit.transition().duration(500) .attr('y', y(0)).attr('height', 0).remove() ); } updateChart(); return container; }