Public
Edited
Apr 8, 2024
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(salamanders, {
x: "totalLength",
y: "weight",
fill: "creekSection",
opacity: 0.45
})
]
})
Insert cell
Plot.plot({
marks: [
Plot.dot(salamanders, {
x: "totalLength",
y: "weight",
fill: "creekSection",
opacity: 0.45
})
],
y: { type: "pow", exponent: 0.5 },
x: { reverse: true, domain: [0, 400], ticks: 5 },
color: { range: ["pink", "teal"], legend: true },
grid: true
})
Insert cell
Plot.plot({
marks: [
Plot.rectY(
salamanders,
Plot.binX(
{ y: "mean" },
{ x: "date", y: "totalLength", interval: "5 years" }
)
)
]
})
Insert cell
salamanders
X
date
Y
mean
totalLength
Color
mean
totalLength
Size
Facet X
Facet Y
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
color: { legend: true },
marks: [
Plot.rectY(
salamanders,
Plot.binX(
{ fill: "mean", y: "mean" },
{
x: "date",
y: "totalLength",
fill: "totalLength",
tip: true,
interval: "5 years"
}
)
),
Plot.ruleY([0])
]
})
Insert cell
Plot.plot({
marks: [
Plot.dot(salamanders, {
x: "totalLength",
y: "weight",
fill: "creekSection",
fy: "creekSection"
})
]
})
Insert cell
Insert cell
stocksBig3 = stocks.filter(
(d) =>
d.stock_symbol === "AAPL" ||
d.stock_symbol === "GOOGL" ||
d.stock_symbol === "TSLA"
)
Insert cell
Plot.plot({
marks: [
Plot.lineY(stocksBig3, { x: "date", y: "close", stroke: "stock_symbol" })
],
color: { legend: true }
})
Insert cell
Plot.plot({
marks: [
Plot.lineY(stocksBig3, {
x: "date",
y: "close",
stroke: "stock_symbol",
opacity: 0.45
}),
Plot.lineY(
stocksBig3,
Plot.windowY(
{ k: 50, anchor: "middle", reduce: "mean" },
{ x: "date", y: "close", stroke: "stock_symbol", tip: true }
)
),
Plot.text(
stocksBig3,
Plot.selectLast({
x: "date",
y: "close",
text: "stock_symbol",
fill: "stock_symbol"
})
)
],
color: { legend: true }
})
Insert cell
Plot.plot({
marks: [
Plot.lineY(stocksBig3, {
x: "date",
y: "close",
stroke: "stock_symbol",
opacity: 0.45,
tip: true
}),
Plot.tip(
stocksBig3,
Plot.selectMaxY({
x: "date",
y: "close",
stroke: "stock_symbol",
anchor: "right",
fill: "yellow"
})
)
]
})
Insert cell
viewof pickColor = Inputs.color({ label: "Favorite color", value: "#4682b4" })
Insert cell
wb = FileAttachment("wb_tidy.csv").csv({ typed: true })
Insert cell
wb2010 = wb.filter((d) => d.year === 2010)
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(wb2010, { x: "gdp", y: "life_exp", fill: "gray" }),
],
x: { type: "log" },
margin: 50
})
Insert cell
viewof selectRegion = Inputs.select(
wb.map((d) => d.region),
{ label: "Select region:", unique: true }
)
Insert cell
Plot.plot({
marks: [
Plot.dot(wb, {
x: "gdp",
y: "co2",
fill: "country_name",
r: "gdp",
filter: (d) => d.region == selectRegion && d.year <= pickYear,
opacity: (d) => (d.year == pickYear ? 1 : 0.2)
})
],
x: { type: "log" },
y: { type: "log" },
r: { range: [3, 20] },
margin: 50
})
Insert cell
viewof pickYear = Inputs.range(
d3.extent(wb, (d) => d.year),
{ label: "Year: ", step: 1, value: d3.min(wb, (d) => d.year) }
)
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