viewof controls = { const rows = [['noise','Noise'],['arrest','Arrest'],['restaurants','Restaurants'],['school','Schools'],['subway','Subway'],['tree','Trees'],['sky','Sky exposure']]; const labels = Object.fromEntries(rows); const thematicLabels = { score:'Score', noise:'Noise', arrest:'Arrest', restaurants:'Restaurants', school:'Schools', subway:'Subway', tree:'Trees', sky_exposure:'Sky exposure' }; const units = Object.fromEntries(rows.map(([key]) => [key, 5])); const thematic = Inputs.select(Object.keys(thematicLabels), { label:'Color buildings by', format:key => thematicLabels[key], value:'score' }); const panel = html`

`; const title = html`

Building score

Adjust the relative importance of each dataset.

`; const themeRow = html`

`; thematic.style.margin = '0'; themeRow.append(thematic); const grid = html`

`; const inputs = {}; for (const [key, labelText] of rows) { const input = html``; input.setAttribute('aria-label', labelText + ' weight'); const row = document.createElement('label'); row.style.cssText = 'display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;font:14px system-ui,sans-serif;color:#2d3138'; const label = document.createElement('span'); label.textContent = labelText; row.append(label, input); grid.append(row); inputs[key] = input; } const resetButton = html``; const weightsHeader = html`

Dataset weights

`; weightsHeader.append(resetButton); function update(notify = true) { for (const [key] of rows) units[key] = Number(inputs[key].value); const sum = Object.values(units).reduce((total, value) => total + value, 0); panel.value = { thematic: thematic.value, weights: Object.fromEntries(rows.map(([key]) => [key, sum ? units[key] / sum : 0])) }; if (notify) panel.dispatchEvent(new Event('input', { bubbles:true })); } Object.values(inputs).forEach(input => input.addEventListener('input', update)); thematic.addEventListener('input', update); resetButton.addEventListener('click', () => { Object.values(inputs).forEach(input => input.value = '5'); update(); }); panel.append(title, themeRow, weightsHeader, grid); update(false); return panel; }