Big Tech Stock Prices

data = FileAttachment("data/big_tech.csv").csv({ typed: true })
// Company drop down
uniqueCompanies = Array.from(new Set(data.map(d => d.company)))

filteredData = data.filter(d => d.company === selectedCompany)

Opening stock prices

Plot.line(filteredData, {x: "date", y: "open", tip: "x"}).plot({y: {grid: true}})

Maximum shares traded per day

maxVolume = d3.max(filteredData, d => d.volume)
formattedMaxVolume = d3.format(",")(maxVolume)
maxVolumeRow = filteredData.find(d => d.volume === maxVolume)
maxVolumeTime = d3.timeFormat("%B %d, %Y")(maxVolumeRow.date)
volumeCard = html`
  <p>${formattedMaxVolume} on ${maxVolumeTime}</p>`

Maximum opening stock price

maxOpen = d3.max(filteredData, d => d.open)
formattedMaxOpen = d3.format("$.2f")(maxOpen)
maxOpenRow = filteredData.find(d => d.open === maxOpen)
maxOpenTime = d3.timeFormat("%B %d, %Y")(maxOpenRow.date)
openCard = html`
  <p>${formattedMaxOpen} on ${maxOpenTime}</p>`

Maximum stock price

maxHigh = d3.max(filteredData, d => d.high)
formattedMaxHigh = d3.format("$.2f")(maxHigh)
maxHighRow = filteredData.find(d => d.high === maxHigh)
maxHighTime = d3.timeFormat("%B %d, %Y")(maxHighRow.date)
highCard = html`
  <p>${formattedMaxHigh} on ${maxHighTime}</p>`

Data: kaggle.com | Design: Nicola Rennie