Published unlisted
Edited
Nov 27, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
choropleth = vl
.layer(
vl.markGeoshape({ fill: '#f1f1ff' }).data(vl.sphere()),
vl.markGeoshape({ stroke: '#ffffff', strokeWidth: 1 }).data(vl.graticule()),
vl
.markGeoshape({ stroke: 'black' })
.data(
vl
.topojson("https://unpkg.com/world-atlas@2/countries-110m.json")
.feature("countries")
)
.transform(
// Transform is advanced
vl
.lookup("properties.name")
.from(
// Lookup is even more advanced
vl
.lookupData(Array.from(seatsByWomen))
.key('Country Name')
.fields(yearSlider.toString())
)
.as("Percentage of seats by women")
)
.project(vl.projection("equalEarth"))
.encode(
vl
.color()
.fieldQ("Percentage of seats by women")
.legend({ orient: "top" }),
vl.tooltip(["properties.name", "Percentage of seats by women"])
)
.width(width)
.height(width / 2)
.autosize({ type: "fit-x", contains: "content" })
)
.render()
Insert cell
Insert cell
function take(values, index) {
return values.constructor.from(index, i => values[i]);
}
Insert cell
take(seatsByWomen,[206])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more