Public
Edited
May 9
Insert cell
Insert cell
Insert cell
WWF Species List.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
// Vega-Lite JSON
render({
mark: { type: 'bar' },
data: { values: wwfSpeciesList },
encoding: {
x: { aggregate: 'count' },
y: { field: 'LAND/WATER', type: 'nominal' },
color: { field: 'LAND/WATER', type: 'nominal' }
}
})
Insert cell
render({
mark: { type: 'bar' },
data: { values: wwfSpeciesList },
encoding: {
x: { aggregate: 'count' },
y: { field: 'LAND/WATER', type: 'nominal' },
color: {
field: 'LAND/WATER',
scale: {
range: ['#B5651D', '#1f77b4']
}
}
}
})

Insert cell
Insert cell
// Vega-Lite JSON
render({
mark: { type: 'arc', stroke: 'white' },
data: { values: wwfSpeciesList },
encoding: {
angle: { aggregate: 'count' },
color: {
field: 'ANIMAL CLASS',
type: 'nominal',
scale: {
range: ['#eff3ff', '#c6dbef', '#9ecae1', '#6baed6', '#3182bd', '#08519c']
}
}
}
})
Insert cell
// Vega-Lite JSON
render({
mark: { type: 'arc', stroke: 'white' },
data: { values: wwfSpeciesList },
encoding: {
angle: { aggregate: 'count' },
color: {
field: 'ANIMAL CLASS',
type: 'nominal',
scale: {
range: ['#4daf4a', '#fb8072', '#377eb8', '#000000', '#daa520', '#006400']
}
}
}
})
Insert cell
Insert cell
// Vega-Lite JSON
render({
mark: { type: 'bar' },
data: { values: wwfSpeciesList },
transform: [
{ filter: 'datum["CONSERVATION STATUS"] !== ""' }
],
encoding: {
x: { aggregate: 'count' },
y: {
field: 'CONSERVATION STATUS',
type: 'nominal',
scale: {
domain: ['Critically Endangered', 'Endangered', 'Vulnerable', 'Near Threatened', 'Least Concern']
}
},
color: {
field: 'CONSERVATION STATUS',
type: 'nominal',
scale: {
domain: ['Critically Endangered', 'Endangered', 'Vulnerable', 'Near Threatened', 'Least Concern'],
//range: ['#d7191c', '#fdae61', '#abdda4', '#2a83ba', '#984ea3']
range: ['#e41a1c', '#ff7f00', '#a6d854', '#1b7837', '#1e90ff']
}
}
}
})
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