Public
Edited
Apr 27, 2023
1 star
Insert cell
Insert cell
locations = Plot.plot(
(() => {
const n = 3; // number of facet columns
const keys = allTypes.map((d) => d.Name).sort();
const index = new Map(keys.map((key, i) => [key, i]));
const fx = (key) => index.get(key) % n;
const fy = (key) => Math.floor(index.get(key) / n);
return {
height: 800,
width: 800,
axis: null,
y: { ticks: 0 },
x: { ticks: 0 },
fx: { padding: 0.03 },
fy: { padding: 0.03 },
color: { scheme: "YlGnBu" },
facet: {
data: allOrders,
y: (d) => fy(d.pizza_type),
x: (d) => fx(d.pizza_type)
},
marks: [
Plot.density(allOrders, {
x: "longitude",
y: "latitude",
fill: "density",
thresholds: 100,
bandwidth: 5
}),
Plot.geo(topojson.feature(us, us.objects.states), {
stroke: "#ccc"
}),
Plot.dot(allOrders, {
x: "longitude",
y: "latitude",
stroke: "none",
fill: "black",
r: 1
}),
Plot.text(keys, { fx, fy, frameAnchor: "top-left", dx: 6, dy: 6 }),
Plot.frame()
],
projection: {
type: "albers-usa",
domain: {
type: "MultiPoint",
coordinates: allOrders.map((d) => [+d.longitude, +d.latitude])
},
inset: 20
}
};
})()
)
Insert cell
pizzeriaDB
select p.name as pizza_type, c.latitude, c.longitude
from order_items i
join products p
on p.sku = i.sku
join orders o
on o.id = i.orderID
join customers c on c.id = o.customerID
Insert cell
pizzeriaDB
select distinct name from products
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