vegalite = require("@observablehq/vega-lite")
vegalite({
width: 900,
height: 400,
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: "circle",
encoding: {
x: {
field: "time",
type: "temporal",
axis: {
title: null,
ticks: false,
tickCount: 5,
format: "%d/%m",
labelPadding: 10
}
},
y: {
field: "mag",
type: "quantitative"
}
}
})
vegalite({
width: 900,
height: 400,
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: "circle",
encoding: {
x: {
field: "time",
type: "temporal",
axis: {
title: null,
ticks: false,
labelAlign: "left",
labelExpr: "[timeFormat(datum.value, '%d') !== '01' ? timeFormat(datum.value, '%d') : timeFormat(datum.value, '\\n %B')]",
labelPadding: {
condition: {
test: {field: "value", timeUnit: "date", equal: 1}, value: 30},
value: 10
}
}
},
y: {
field: "mag",
type: "quantitative"
}
}
})
vegalite({
width: 900,
height: 400,
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: "circle",
encoding: {
x: {
field: "time",
type: "temporal",
axis: {
title: null,
ticks: false,
tickCount: 5,
format: "%d/%m",
labelPadding: 10
}
},
y: {
field: "mag",
type: "quantitative",
axis: {
title: "magnitude",
titleAnchor: "end",
ticks: false,
labelPadding: 10,
values: [0, 2, 4, 6]
}
}
}
})
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.
