Published
Edited
Aug 9, 2022
FileAttachment("SP500@1.csv").csv()
.then(dataArray => {
let positiveValues = dataArray.filter(d => +d.change >= 1).map(d => +d.change);
let negativeValues = dataArray.filter(d => +d.change < 1).map(d => +d.change);
//Color scales
let greenScale = d3.scaleSequential(d3.interpolateGreens)
.domain([d3.min(positiveValues), d3.max(positiveValues)]);
let redScale = d3.scaleSequential(d3.interpolateReds)
.domain([d3.max(negativeValues), d3.min(negativeValues)]);
dataArray.map(datum => {
let tradingDate = new Date(datum.date);
let percentChange = ((datum.change - 1) * 100).toLocaleString('en-US', {maximumFractionDigits: 2});
let calendarDate =
d3.selectAll('.dateBox.date' + tradingDate.toDateString().replaceAll(" ", "_"))
.style('background-color', d => {
let bgColor = datum.change >= 1 ? greenScale(datum.change) : redScale(datum.change);
return bgColor || '#FFF'
})
.attr('title', "Trading Date: " + tradingDate.toDateString() + "\nDaily Return: " + percentChange + "%")
})
});
sp500 = FileAttachment("SP500@1.csv").csv()
nasdaq100 = FileAttachment("NASDAQ100.csv").csv()
usd = FileAttachment("USD.csv").csv()
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.
