Published
Edited
Nov 12, 2021
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
jobsData = FileAttachment("jobs_data@4.csv").csv({ typed: true })
Insert cell
Insert cell
lineplot = Plot.plot({
marginLeft: 80,
marginRight: 65,
y: {
grid: true,
label: "↑ Unemployment"
// Could also adjust data into "millions" here, using d => d * 1000
// transform: d => d * 1000
},
marks: [
Plot.ruleY([0]),
Plot.line(jobsData, {
sort: "Date",
x: "Date",
y: "Adj_Value_millions",
curve,
strokeWidth: 1
}),
Plot.areaY(jobsData, {
x: "Date",
y: "Adj_Value_millions",
curve,
fill: "#c5ebf3",
fillOpacity: 0.6
}),
Plot.text(jobsData.slice(-1), {
x: "Date",
y: "Adj_Value_millions",
text: ["–4.2 million jobs since Feb. 2020"],
fill: "#8a817c",
dy: "-0.5em",
dx: "-2em"
})
]
})
Insert cell
Insert cell
Insert cell
oilData = FileAttachment("oil_production_price@1.csv").csv({ typed: true })
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