Published
Edited
Feb 7, 2022
Insert cell
banksDF = FileAttachment("banks_market_cap_financial_crisis@1.csv").csv({typed: true})
Insert cell
Inputs.table(banksDF)
Insert cell
Plot.plot({
marks: [
Plot.dot(banksDF, {x:"Name", y: "Market Value as of January 20th 2009 ($Bn)"}),
Plot.dot(banksDF, {x:"Name", y: "Market Value as of January 20th 2009 ($Bn)"}),
//Plot.line(banksDF, {x:"Year", y: "Value"}),
//Plot.link(banksDF, {x1: 1, x2: 2, y1: "Market Value as of January 20th 2009 ($Bn)", y2: "Market Value as of Q2 2007 ($Bn)" })
//Plot.normalizeY(tempDf, { basis: "mean", x:"Year", y:"Value"})
]
})
Insert cell
banks = FileAttachment("banks_refactored@1.csv").csv({typed:true})
Insert cell
Inputs.table(banks)
Insert cell
function highlight(d) {
return /Santander/.test(d.Name);
}
Insert cell
Plot.plot({
x: {type: "point", axis: "top", label: null},
y: {axis: "left", inset: 10},
color: {
domain: [false, true],
range: ["#ccc", "red"]
},
marks: [
Plot.line(banks, {x: "Year",
y: "Market_Values_Bn",
z: "Name",
strokeWidth: 1,
sort: highlight,
stroke: highlight
}
),
Plot.text(banks, Plot.selectFirst({x: "Year", y: "Market_Values_Bn", z: "Name", text: d => `${d.Market_Values_Bn} ${d.Name} `, textAnchor: "end", dx: 100})),
Plot.text(banks, Plot.selectLast({x: "Year", y: "Market_Values_Bn", z: "Name", text: d => `${d.Name} ${d.Market_Values_Bn} `, textAnchor: "start", dx: -100})),
]
})
Insert cell
import {SlopeChart} from "@d3/slope-chart"

chart = SlopeChart(receipts, {
x: d => d.year,
y: d => d.receipts,
z: d => d.country,
width,
height: 600
})
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