md`# Vega-Lite: Facet`
vegalite = require("@observablehq/vega-lite")
vegalite({
width: 800,
height: 650,
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: "bar",
encoding: {
x: {
field: "mag",
type: "quantitative",
bin: {
step: 0.5
}
},
y: {
aggregate: "count",
type: "quantitative"
},
tooltip: {
aggregate: "count",
type: "quantitative"
},
color: {
field: "magType",
type: "nominal"
}
}
})
vegalite({
width: 800,
height: 150,
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: "bar",
encoding: {
x: {
field: "mag",
type: "quantitative",
bin: {
step: 0.5
}
},
y: {
aggregate: "count",
type: "quantitative"
},
tooltip: {
aggregate: "count",
type: "quantitative"
},
row: {
field: "magType",
type: "nominal"
}
}
})
vegalite({
width: 250,
height: 250,
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: "bar",
encoding: {
x: {
field: "mag",
type: "quantitative",
bin: {
step: 0.5
}
},
y: {
aggregate: "count",
type: "quantitative"
},
tooltip: {
aggregate: "count",
type: "quantitative"
},
facet: {
field: "magType",
type: "nominal",
columns: 3
}
}
})
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.
