Published
Edited
Sep 13, 2022
1 fork
18 stars
Insert cell
Insert cell
Insert cell
Plot.dot(cities100, {
x: "lng",
y: "lat",
r: "population",
fill: "#ccc",
stroke: "#000",
strokeWidth: 1,
sort: null // disable default sort by descending radius
}).plot()
Insert cell
Insert cell
Insert cell
Plot.dot(cities100, {
x: "lng",
y: "lat",
r: "population",
fill: "#ccc",
stroke: "#000",
strokeWidth: 1,
sort: "population" // explicitly sort by ascending population
}).plot()
Insert cell
Insert cell
Plot.dot(cities100, {
x: "lng",
y: "lat",
r: "population",
fill: "#ccc",
stroke: "#000",
strokeWidth: 1,
sort: "population", // explicitly sort by ascending population
reverse: true // then reverse the order
}).plot()
Insert cell
Insert cell
Plot.dot(cities100, {
x: "lng",
y: "lat",
r: "population",
fill: "#ccc",
stroke: "#000",
strokeWidth: 1,
sort: d => -d.population // explicitly sort by descending population
}).plot()
Insert cell
Insert cell
Plot.dot(cities100, {
x: "lng",
y: "lat",
r: "population",
fill: "#ccc",
stroke: "#000",
strokeWidth: 1,
sort: (a, b) => b.population - a.population // explicitly sort by descending population
}).plot()
Insert cell
Insert cell
Plot.dot(
cities100,
Plot.sort((a, b) => b.population - a.population, {
x: "lng",
y: "lat",
r: "population",
fill: "#ccc",
stroke: "#000",
strokeWidth: 1
})
).plot()
Insert cell
Insert cell
cities100 = (await FileAttachment("cities100k.csv").csv({typed: true}))
.sort((a, b) => d3.ascending(a.city, b.city))
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