vegalite = require("@observablehq/vega-lite")
vegalite({
width: 900,
height: 600,
data: {
url: "https://gist.githubusercontent.com/andriy-gazin/442044f2543e9c7d19d76d0c2dc8125f/raw/6a1f9b0be8cbf6c20ecda24b333ebbb315035185/world.json",
format: {
type: "topojson",
feature: "world"
}
},
mark: {
type: "geoshape"
}
})
vegalite({
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"
},
mark: {
type: "geoshape"
}
})
vegalite({
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"
},
mark: {
type: "geoshape",
fill: "darkgray",
stroke: "#F0F0F0",
strokeWidth: 0.5
}
})
vegalite({
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"
},
mark: {
type: "geoshape",
fill: "darkgray",
stroke: "#F0F0F0",
strokeWidth: 0.5
},
encoding: {
tooltip: {
field: "properties.name",
type: "nominal"
}
}
})
vegalite({
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"
},
selection: {
country: {
type: "single",
on: "mouseover",
empty: "none"
}
},
mark: {
type: "geoshape",
stroke: "#F0F0F0",
strokeWidth: 0.5
},
encoding: {
tooltip: {
field: "properties.name",
type: "nominal"
},
color: {
condition: {
selection: "country",
value: "#F67280"
},
value: "darkgray"
}
}
})
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.
