Public
Edited
Dec 29, 2023
Insert cell
Insert cell
Insert cell
Plot.plot({
x: { nice: true },
y: { nice: true },
grid: true,
color: { nice: true, legend: true, scheme: "dark2" },
marks: [
Plot.ruleX([13.6]),
Plot.ruleY([10.9]),
Plot.line(data, {
x: "price",
y: "quantity",
stroke: "group",
strokeWidth: 3,
tip: true
})
]
})
Insert cell
Plot.plot({
x: { nice: true },
y: { nice: true },
grid: true,
color: { nice: true, legend: true },
marks: [
Plot.line(data, {
x: "price",
y: (d) => d.price / d.c2,
stroke: "group",
tip: true
})
]
})
Insert cell
data = {
data1.map((d) => (d.group = "group1"));
data2.map((d) => (d.group = "group2"));
let data = data1.concat(data2);
return data;
}
Insert cell
data
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
data1 = mkData(setupUI.solidCost1, setupUI.changeableCost1, setupUI.n)
Insert cell
data2 = mkData(setupUI.solidCost2, setupUI.changeableCost2, setupUI.n)
Insert cell
mkData = (c1, c2, n) => {
let priceScale = d3.scaleLinear().domain([0, n]).range([10, 20]),
price,
quantity,
data = [];

for (let i = 0; i < n; ++i) {
price = priceScale(i);
quantity = c1 / (price - c2);
data.push({ price, quantity, pq: price * quantity, c1, c2 });
}

return data;
}
Insert cell
d3 = require("d3")
Insert cell
aapl
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