Professor of Mathematics and Computer Science at a small liberal arts college in Kentucky, USA.
Public
Edited
Nov 1, 2023
Plot.dot(diamonds, {x: "carat", y: "depth"}).plot()
viewof area = Inputs.toggle({label: "Show Area", value: false})
Plot.plot({
marks: [
Plot.ruleY([0]),
area ? Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.2}) : null,
Plot.lineY(aapl, {x: "Date", y: "Close"})
]
})
al = d3.map(aapl, d => ({Date: d.Date, Price: d.Low - 100}))
ah = d3.map(aapl, d => ({Date: d.Date, Price: d.High}))
Plot.plot({
marks: [
[al, ah].map((stock) => Plot.lineY(stock, {x: "Date", y: "Price"}))
]
})
Plot.plot({
y: {
type: "log",
domain: [30, 300],
grid: true
},
marks: [
Plot.lineY(aapl, {x: "Date", y: "Close"})
]
})
linedata = [
{hour: 0, value: 8, sensor: "A"},
{hour: 0, value: 6, sensor: "B"},
{hour: 1, value: 7, sensor: "A"},
{hour: 1, value: 5, sensor: "B"},
{hour: 2, value: 3, sensor: "A"},
{hour: 2, value: 0, sensor: "B"},
{hour: 3, value: 9, sensor: "A"},
{hour: 3, value: 2, sensor: "B"}
]
Plot.lineY(linedata, {x: "hour", y: "value", z: "sensor"}).plot()
Plot.lineY({length: linedata.length}, {
x: linedata.map((d) => d.hour),
y: linedata.map((d) => d.value),
stroke: linedata.map((d) => d.sensor)
}).plot()
Inputs.table(aapl)
timeseries = [
{year: 2014, population: 7295.290765},
{year: 2015, population: 7379.797139},
{year: 2016, population: 7464.022049},
{year: 2017, population: 7547.858925},
{year: 2019, population: 7713.468100},
{year: 2020, population: 7794.798739}
]
Plot
.rectY(timeseries, {x: "year", y: "population", interval: 1})
.plot({x: {tickFormat: ""}})
Plot.lineY(aapl, {x: "Date", y: "Close", tip: true}).plot({y: {grid: true}})
Plot.plot({
grid: true,
marks: [
Plot.dot(olympians, {
x: "weight",
y: "height",
fy: "sex",
sort: (d) => !!d.info,
stroke: (d) => d.info ? "currentColor" : "#aaa"
}),
Plot.tip(olympians, Plot.pointer({
x: "weight",
y: "height",
fy: "sex",
filter: (d) => d.info,
title: (d) => [d.name, d.info].join("\n\n")
}))
]
})
Plot.plot({
grid: true,
marginRight: 50,
nice: true,
facet: {label: null},
marks: [
Plot.frame(),
Plot.dot(penguins.filter(d => !!d.sex), {
x: "culmen_length_mm",
y: "culmen_depth_mm",
fy: "sex"
}),
Plot.tip(penguins.filter(d => !!d.sex), Plot.pointer({
x: "culmen_length_mm",
y: "culmen_depth_mm",
fy: "sex",
title: (d) => `This ${d.species} penguin lives on ${d.island} Island.`
}))
]
})
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.
