aapl = FileAttachment("aapl.csv").csv({typed: true})
Plot.plot({
marks: [
Plot.areaY(aapl, {x: "Date", y: "Close"})
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.areaY(aapl, {x: "Date", y: "Close", fill: "#ccc"}),
Plot.lineY(aapl, {x: "Date", y: "Close"}),
Plot.ruleY([0])
]
})
numbers = d3.cumsum({length: 600}, d3.randomNormal())
Plot.plot({
marks: [
Plot.areaY(numbers)
]
})
Plot.plot({
y: {
grid: true
},
marks: [
Plot.areaY(d3.shuffle(aapl.slice(0, 100)), {
// sort: "Date", // uncomment to fix
x: "Date",
y: "Close"
})
]
})
sftemp = FileAttachment("sf-temperatures.csv").csv({typed: true})
Plot.plot({
y: {
label: "↑ Temperature (°F)",
grid: true
},
marks: [
Plot.areaY(sftemp, {x: "date", y1: "low", y2: "high"})
]
})
Plot.plot({
y: {
label: "↑ Temperature (°F)",
grid: true
},
marks: [
Plot.ruleY([32]),
Plot.areaY(sftemp, Plot.windowY({
x: "date",
y1: "low",
y2: "high",
fill: "#ccc",
k: 14
})),
Plot.line(sftemp, Plot.windowY({
x: "date",
y: d => (d.low + d.high) / 2,
k: 14
}))
]
})
Plot.plot({
x: {
label: null
},
y: {
grid: true,
reverse: true
},
marks: [
Plot.areaY(aapl, {x: "Date", y: "Close", fill: "#ccc"}),
Plot.lineY(aapl, {x: "Date", y: "Close"}),
Plot.ruleY([0])
]
})
Plot.plot({
x: {
grid: true
},
marks: [
Plot.areaX(aapl, {y: "Date", x: "Close", fill: "#ccc"}),
Plot.lineX(aapl, {y: "Date", x: "Close"}),
Plot.ruleX([0])
]
})
someCloses = aapl.map(d => d.Date.getUTCMonth() < 3 ? NaN : d.Close)
Plot.plot({
y: {
grid: true
},
marks: [
Plot.areaY(aapl, {x: "Date", y: someCloses, fill: "#ccc"}),
Plot.lineY(aapl, {x: "Date", y: someCloses}),
Plot.ruleY([0])
]
})
someAapl = aapl.filter(d => d.Date.getUTCMonth() >= 3)
Plot.plot({
y: {
grid: true
},
marks: [
Plot.areaY(someAapl, {x: "Date", y: "Close", fill: "#ccc"}),
Plot.lineY(someAapl, {x: "Date", y: "Close"}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.areaY(construction, {x: "date", y: "unemployed", curve, fillOpacity: 0.1}),
Plot.lineY(construction, {x: "date", y: "unemployed", curve, strokeWidth: 1}),
Plot.ruleY([0])
]
})
bls = FileAttachment("bls-industry-unemployment.csv").csv({typed: true})
construction = bls.filter(d => d.industry === "Construction")
Plot.plot({
marks: [
Plot.areaY(bls, {x: "date", y2: "unemployed", z: "industry", fillOpacity: 0.1}),
Plot.lineY(bls, {x: "date", y: "unemployed", z: "industry", strokeWidth: 1})
]
})
Plot.plot({
marks: [
Plot.areaY(bls, {x: "date", y: "unemployed", fill: "industry"}), // implicit stacking
Plot.ruleY([0])
]
})
Plot.plot({
height: 600,
y: {
axis: null
},
fy: {
axis: "right",
label: null
},
facet: {
data: bls,
y: "industry",
marginRight: 140
},
marks: [
Plot.areaY(bls, {x: "date", y: "unemployed", fillOpacity: 0.2}),
Plot.lineY(bls, {x: "date", y: "unemployed", strokeWidth: 1})
]
})
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.
