md`# Chicago City Council Budget Votes`
table = html`
${styles}
<div class="budget-table">
<table>
<thead class="sticky-col">
<tr>
<th></th>
${voteCols.map(vote => {
const yesVotes = officials.filter(o => o[vote] === "Y").length;
const totalVotes = officials.length;
return html`<th>
<span>${vote.replace("vote", "")}</span>
<span title="${yesVotes} out of ${totalVotes} total votes" class="year-totals">${
officials.filter(o => o[vote] === "Y").length
}/${officials.filter(o => vote in o).length}</abbr>
</span>`;
})}
</tr>
</thead>
<tbody>
${officials.map(({ name, lastName, ward, ...official }) => {
const yesVotes = voteCols.filter(vote => official[vote] === "Y").length;
const totalVotes = voteCols.filter(vote => vote in official).length;
return html`<tr>
<th>
<strong class="hide-desktop">${lastName}</strong>
<strong class="hide-mobile">${name}</strong>
<span class="ward-num">${ward}${nth(+ward)} Ward</span>
<span class="official-totals" title="${yesVotes} yes votes out of ${totalVotes} total votes">
${yesVotes}/${totalVotes}
</span>
</th>
${voteCols.map(
(vote, idx) =>
html`<td class="${vote in official ? `filled` : `empty`}
">${
vote in official
? voteSymbol({
vote: official[vote]
})
: ``
}</td>`
)}
</tr>`;
})}
</tbody>
</table>
</div>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
