vegalite = require("@observablehq/vega-lite")
vegalite({
width: 950,
height: 600,
data: {
url: "https://gist.githubusercontent.com/andriy-gazin/442044f2543e9c7d19d76d0c2dc8125f/raw/6a1f9b0be8cbf6c20ecda24b333ebbb315035185/world.json",
format: {
type: "topojson",
feature: "world"
}
},
projection: {
type: "equalEarth"
},
layer: [
// base map
{
mark: {
type: "geoshape",
fill: "darkgray",
stroke: "#F0F0F0",
strokeWidth: 0.5
}
},
// points
{
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: {
type: "circle",
color: "#D11349",
size: 25,
opacity: 0.5,
blend: "darken"
},
encoding: {
longitude: {
field: "longitude",
type: "quantitative"
},
latitude: {
field: "latitude",
type: "quantitative"
}
}
}
],
// config
config: {
view: {
stroke: null
}
}
})
vegalite({
width: 900,
height: 300,
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: {
type: "bar",
color: "#D11349"
},
encoding: {
x: {
timeUnit: "yearmonthdate",
field: "time",
type: "temporal"
},
y: {
aggregate: "count"
}
}
})
vegalite({
vconcat: [
// map
// chart
]
})
vegalite({
vconcat: [
// map
{
width: 900,
height: 600,
data: {
url: "https://gist.githubusercontent.com/andriy-gazin/442044f2543e9c7d19d76d0c2dc8125f/raw/6a1f9b0be8cbf6c20ecda24b333ebbb315035185/world.json",
format: {
type: "topojson",
feature: "world"
}
},
projection: {
type: "equalEarth"
},
layer: [
// base map
{
mark: {
type: "geoshape",
fill: "darkgray",
stroke: "#F0F0F0",
strokeWidth: 0.5
}
},
// points
{
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: {
type: "circle",
color: "#D11349",
size: 25,
opacity: 0.5,
blend: "darken"
},
encoding: {
longitude: {
field: "longitude",
type: "quantitative"
},
latitude: {
field: "latitude",
type: "quantitative"
}
}
}
]
},
// chart
{
width: 900,
height: 150,
data: {
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv"
},
mark: {
type: "bar",
color: "#D11349"
},
encoding: {
x: {
timeUnit: "yearmonthdate",
field: "time",
type: "temporal"
},
y: {
aggregate: "count"
}
}
}
],
// config
config: {
view: {
stroke: null
}
}
})
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.
