Public
Edited
Apr 17
Inputs.table(restaurants, { width: 300 })
new Set(restaurants.map(d => d.lat)).size
lats = restaurants.map(d => d.lat)
[Math.min(...lats), Math.max(...lats)]
// // here is the very early beginnings of a plot
// // revise/expand the code or replace it with an image generated elsewhere
// Map tim range of data
render({
mark: {
type: "point",
opacity: 0.5,
size: 30
},
data: { values: restaurants },
encoding: {
x: {
field: "lat",
type: "quantitative",
axis: { title: "Latitude" },
scale: { domain: [47.65161, 47.6698722839355] }
},
y: {
value: 0,
},
jitter: { y: { range: 0.6 } }
},
width: 1000,
height: 300
})
render({
mark: "bar",
data: { values: restaurants },
encoding: {
x: {
field: "lat",
bin: { maxbins: 30 }, // change # bins if needed
type: "quantitative",
axis: { title: "Latitude (binned)" }
},
y: {
aggregate: "count",
type: "quantitative",
axis: { title: "Number of Restaurants" }
}
},
width: 600,
height: 300
})
render({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
width: 600,
height: 60,
layer: [
{
// bar
transform: [
{
aggregate: [
{ op: "q1", field: "lat", as: "q1" },
{ op: "q3", field: "lat", as: "q3" }
]
}
],
mark: { type: "bar", size: 20, color: "#a3c9f1" },
encoding: {
x: { field: "q1", type: "quantitative" },
x2: { field: "q3" }
}
},
// min
{
transform: [
{
aggregate: [{ op: "min", field: "lat", as: "lat" }]
}
],
mark: { type: "tick", size: 30, color: "orange " },
encoding: {
x: { field: "lat", type: "quantitative" }
}
},
// min
{
transform: [
{
aggregate: [{ op: "max", field: "lat", as: "lat" }]
}
],
mark: { type: "tick", size: 30, color: "black" },
encoding: {
x: { field: "lat", type: "quantitative" }
}
},
// max
{
transform: [
{
aggregate: [{ op: "mean", field: "lat", as: "lat" }]
}
],
mark: { type: "tick", size: 30, color: "red" },
encoding: {
x: { field: "lat", type: "quantitative" }
}
}
],
encoding: {
x: {
field: "lat",
type: "quantitative",
scale: { domain: [47.65161, 47.6698722839355] },
axis: { title: "Latitude" }
},
y: { value: 30 }
},
data: { values: restaurants }
})
render({
mark: "bar",
data: { values: restaurants },
encoding: {
x: {
field: "lat",
bin: { maxbins: 30 }, // change # bins if needed
type: "quantitative",
axis: { title: "Latitude (binned)" }
},
y: {
aggregate: "count",
type: "quantitative",
axis: { title: "Number of Restaurants" }
}
},
{
mark: {type: "tick", color: 'red', size: 40},
encoding:
{
x: { aggregate: "max", field: "lat", type: "quantitative"}
y: {value: 0}
}
,
width: 600,
height: 300
})
render({
width: 600,
height: 200,
data: { values: restaurants },
transform: [
{
density: "lat",
bandwidth: 0.0005,
extent: [47.65, 47.67],
steps: 100
}
],
mark: "area",
encoding: {
x: {
field: "value",
type: "quantitative",
axis: { title: "Latitude" }
},
y: {
field: "density",
type: "quantitative",
axis: { title: "Density" }
}
}
})
// put code or image here (and repeat as needed)
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.
