graphic = { const width = 1000 // const width = 600 const styles = `` const moneyBox = (data) => `

${dollarFormat(data.value)} ${data.label || ''}

` const candidateCol = (candidate) => { const campaign = candidate.campaignCommittee[0] const details = `

Fundraising details

${dollarFormat(campaign.totalIndividual)} from individual contributions
${dollarFormat(campaign.totalCommittees)} from political committees
${dollarFormat(campaign.totalSelfFinance)} from self financing

` return `

By ${candidate.name} campaign committee

${moneyBox({ value: campaign.totalSpent, color: colors[candidate.party], borderColor: colorsDark[candidate.party], textColor: '#fff', label: 'spent', })} ${moneyBox({ value: campaign.totalRaised - candidate.campaignCommittee[0].totalSpent, color: colorsLight[candidate.party], borderColor: colorsLight[candidate.party], opacity: 0.3, label: 'banked', })}

${campaign.committeeName}

On ${candidate.name} by third-party committees

Spending for ${candidate.name}

${moneyBox({ value: candidate.totalIeFor, color: colors[candidate.party], borderColor: colorsDark[candidate.party], textColor: '#fff', label: 'spent' })}

Spending against ${candidate.name}

${moneyBox({ value: candidate.totalIeAgainst, color: (candidate.party === 'R' ? colors['D'] : colors['R']), borderColor: (candidate.party === 'R' ? colorsDark['D'] : colorsDark['R']), textColor: '#fff', label: 'spent', })}

` } return html` ${styles}

Political spending on Montana's 2020 U.S. Senate race

Figures current as of Oct. 27.

${candidateCol(steveBullock)} ${candidateCol(steveDaines)}

Source: U.S. Federal Election Commission. Note: Daines fundraising shown here includes campaign money raised prior to 2019.

` }