vegalite = require("@observablehq/vega-lite")
vegalite({
width: 600,
height: 400,
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: "circle",
encoding: {
x: {
field: "time",
type: "temporal"
},
y: {
field: "mag",
type: "quantitative"
}
}
})
vegalite({
width: 300,
height: 400,
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: "bar",
encoding: {
y: {
field: "mag",
type: "quantitative",
bin: true
},
x: {
aggregate: "count"
}
}
})
vegalite({
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
hconcat: [
// time series
// histogram
]
})
vegalite({
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
hconcat: [
// time series
{
width: 600,
height: 400,
mark: "circle",
encoding: {
x: {
field: "time",
type: "temporal"
},
y: {
field: "mag",
type: "quantitative"
}
}
},
// histogram
{
width: 300,
height: 400,
mark: "bar",
encoding: {
y: {
field: "mag",
type: "quantitative",
bin: true
},
x: {
aggregate: "count"
}
}
}
]
})
vegalite({
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
hconcat: [
// time series
// selection brush
// histogram
// transform filter
]
})
vegalite({
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
hconcat: [
// time series
{
width: 600,
height: 400,
// selection brush
selection: {
brush: {
type: "interval",
encodings: ["x", "y"]
}
},
mark: "circle",
encoding: {
x: {
field: "time",
type: "temporal"
},
y: {
field: "mag",
type: "quantitative"
}
}
},
// histogram
{
width: 300,
height: 400,
// transform filter
transform: [
{
filter: {
selection: "brush"
}
}
],
mark: "bar",
encoding: {
y: {
field: "mag",
type: "quantitative",
bin: {
step: 0.5
},
scale: {
domain: [-2, 7]
}
},
x: {
aggregate: "count"
}
}
}
]
})
vegalite({
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
hconcat: [
// time series
// color condition
// histogram
// selection brush
]
})
vegalite({
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
hconcat: [
// time series
{
width: 600,
height: 400,
mark: "circle",
encoding: {
x: {
field: "time",
type: "temporal"
},
y: {
field: "mag",
type: "quantitative"
},
color: {
condition: {
selection: "brush",
value: "#D11349"
},
value: "#81858C"
}
}
},
// histogram
{
width: 300,
height: 400,
selection: {
brush: {
type: "interval",
encodings: ["y"]
}
},
mark: {
type: "bar",
color: "#D11349"
},
encoding: {
y: {
field: "mag",
type: "quantitative",
bin: {
step: 0.5
}
},
x: {
aggregate: "count"
}
}
}
]
})
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.
