Public
Edited
Aug 19, 2023
Insert cell
Insert cell
Insert cell
Insert cell
x = d3.scaleLinear()
.domain([1964, d3.max(data, d => d.index)]).nice()
.range([margin.left, width - margin.right])
Insert cell
BrkSp500@3.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
data = Object.assign((d3.csvParse(await FileAttachment("BrkSp500@3.csv").text(), d3.autoType)).map(({Year, Brk_gain, Brk_price, SP500_gain, SP500_price}) => ({index: Year, y1: Brk_price, y2:SP500_price, y1_gain:Brk_gain, y2_gain:SP500_gain})), {x: "Year", y1: "BRK.A", y2:"SP500"})

Insert cell
data[56]={index: 2021, y1:450662.0, y2: 4766.18, y1_gain: 29.6, y2_gain: 27.2}
Insert cell
data[57]={index: 2022, y1:469317.0, y2: 3839.50, y1_gain: 4.0, y2_gain: -18.1}
Insert cell
data[58]={index: 2023, y1:535816.81, y2: 4369.71, y1_gain:14.2, y2_gain: 14.1}
Insert cell
Insert cell
Insert cell
render_data_table(data)
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
y_y1 = d3.scaleLinear() // try scaleLog may give you different perspective
//.domain([13, d3.max(data, d => d.y1)]).nice()
.domain([13, 700000]).nice() // do this little Trick to align the two axis, say 500K to 5000..
.range([height - margin.bottom, margin.top])
Insert cell
y_y2 = d3.scaleLinear() // same here for scalelog
//.domain([16, d3.max(data, d => d.y2)]).nice()
.domain([16, 7000]).nice()
.range([height - margin.bottom, margin.top])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more