title = "CBO Interest Rate Forecasts"
seriesName = "rates"
sourceName = "CBO"
data = d3.csvParse(
await FileAttachment("cbo-data.csv").text(),
({ on, about, value }) => ({
on: dateParse(on),
about: dateParse(about),
value: +value
})
)
dataGrouped = Array.from(d3.group(data, ({ on }) => +on).values())
dataActual = data.filter(({ on, about }) => +on === +about)
dateParse = d => d3.timeMonth.round(new Date(d))
dateFormat = d3.timeFormat("%Y")
valueFormat = d3.format(".2f")
line = d3
.line()
.defined(d => !isNaN(d.value))
.x(d => x(d.about))
.y(d => y(d.value))
x = d3
.scaleUtc()
.domain(d3.extent([...data.map(d => d.on), ...data.map(d => d.about)]))
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.nice()
.range([height - margin.bottom, margin.top])
xAxis = g =>
g.attr("transform", `translate(0,${height - margin.bottom})`).call(
d3
.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
)
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(
d3
.axisLeft(y)
.tickFormat(valueFormat)
.ticks(5)
)
.call(g => g.select(".domain").remove())
.call(g =>
g
.select(".tick:last-of-type text")
.clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(title)
)
function halo(text) {
text
.select(function() {
return this.parentNode.insertBefore(this.cloneNode(true), this);
})
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", 4)
.attr("stroke-linejoin", "round");
}
margin = ({top: 20, right: 30, bottom: 30, left: 40})
height = 500
widthMini = 200
heightMini = 100
xMini = x.copy().range([0, widthMini])
yMini = y.copy().range([heightMini, 0])
lineMini = d3
.line()
.defined(d => !isNaN(d.value))
.x(d => xMini(d.about))
.y(d => yMini(d.value))
describeSeries = (series, future) => {
if (!series.length) return false;
if (series.length === 1) return `was at ${valueFormat(series[0].value)}`;
const diff =
series[series.length - 1].value - series[series.length - 2].value;
const rise = future ? "would rise to" : "rose to";
const fell = future ? "would fall to" : "fell to";
const stay = future ? "would stay to" : "stayed at";
return `${diff > 0 ? rise : diff < 0 ? fell : stay} ${valueFormat(
series[series.length - 1].value
)}`;
}
d3 = require("d3@6")
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.
