Public
Edited
Aug 11, 2023
Insert cell
Insert cell
yellow_tripdata_2016-05-100k@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
yellow_tripdata_201605100k
X
pickup_longitude
Y
pickup_latitude
Color
Size
Facet X
Facet Y
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
filtered_yellow_tripdata_201605100k = yellow_tripdata_201605100k.filter(
(d) => (d.pickup_latitude > 40.63 &&
d.pickup_latitude < 40.82 &&
d.pickup_longitude < -73.76 &&
d.pickup_longitude > -74.06));
Insert cell
Insert cell
nyc = FileAttachment("new-york-city-boroughs.geojson").json()
Insert cell
nyc.features.shift() // remove Staten Island
Insert cell
Insert cell
Plot.plot({
height: 800,
aspectRatio: 1,
marks: [
Plot.dot(
filtered_yellow_tripdata_201605100k,
{
x: "pickup_longitude",
y: "pickup_latitude",
r: 1,
fill: "black",
stroke: null,
}
),
Plot.geo(nyc, {stroke: "blue", strokeOpacity: 0.2}),
]
})
Insert cell
Insert cell
Plot.plot({
height: 800,
aspectRatio: 1,
marks: [
Plot.dot(
filtered_yellow_tripdata_201605100k,
{
x: "pickup_longitude",
y: "pickup_latitude",
r: 1,
fill: "black",
fillOpacity: 0.2,
stroke: null,
}
),
Plot.geo(nyc, {stroke: "blue", strokeOpacity: 0.2}),
]
})
Insert cell
Insert cell
function selectorSample(I) {
return I.filter((i, j) => j % 10 === 0);
}
Insert cell
Plot.plot({
height: 800,
marks: [
Plot.dot(
filtered_yellow_tripdata_201605100k,
Plot.select(
{y: selectorSample},
{
x: "pickup_longitude",
y: "pickup_latitude",
r: 1,
fill: "black",
fillOpacity: 0.2,
stroke: null,
}
)
),
Plot.geo(nyc, {stroke: "blue", strokeOpacity: 0.2}),
]
})
Insert cell
Insert cell
Plot.plot({
height: 800,
color: {
scheme: "OrRd",
type: "symlog",
legend: true,
zero: true
},
marks: [
Plot.rect(filtered_yellow_tripdata_201605100k,
Plot.bin(
{ fill: "count" },
{
x: "pickup_longitude",
y: "pickup_latitude",
inset: 0,
thresholds: 300
}
)
),
Plot.geo(nyc, {stroke: "blue", strokeOpacity: 0.2}),
]
})
Insert cell
Plot.plot({
height: 800,
color: {
scheme: "OrRd",
type: "sqrt",
legend: true,
zero: true
},
marks: [
Plot.density(filtered_yellow_tripdata_201605100k, {
x: "pickup_longitude",
y: "pickup_latitude",
bandwidth: 0.1,
fill: "density"
}),
Plot.geo(nyc, {stroke: "blue", strokeOpacity: 0.2}),
]
})
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