Public
Edited
Jan 30, 2024
1 star
Insert cell
Insert cell
Insert cell
viewof zoo = render({
type: 'object', title: 'Zoo Object',
properties: {
pi: {
type: 'number', title: 'π',
minimum: 3, maximum: 4
},
'42': {
type: 'integer', title: 'The Answer to the Ultimate Question of Life, The Universe, and Everything',
minimum: -42, maximum: 100
},
poster: {
type: 'string', title: 'motivational poster'
}
}
}, {
data: {
pi: 3.141592653589793,
'42': 42,
poster: 'Keep Calm and Carry On'
}
})
Insert cell
Insert cell
Insert cell
{

const person = {
// type: 'object',
title: 'Person',
properties: {
kind: { enum: ['person'] }
}
};

const group = {
// type: 'object',
title: 'Group',
properties: {
kind: { enum: ['group'] },
members: {
type: 'array', title: 'Band members',
items: {
type: 'object', title: 'Band member',
properties: {
first: {
type: 'string', title: 'First name',
pattern: '^[a-zA-Z]+$'
},
last: {
type: 'string', title: 'Last name'
},
tools: {
type: 'array', title: 'Tools',
items: {
type: 'string', title: 'instrument'
}
},
alive: {
type: 'boolean', title: 'alive'
},
gender: {
enum: ['M', 'F'], title: 'gender'
}
}
}
}
}
};

const schema = {
type: 'object', title: 'Rock',
properties: {
readonly: {
type: 'boolean', title: 'readonly'
},
years: {
type: 'object', title: 'Years',
properties: {
from: {
type: 'integer', title: 'From',
minimum: 1900,
maximum: 2020,
exclusiveMaximum: true
},
to: {
type: 'number', title: 'To',
minimum: 1900,
exclusiveMinimum: true,
maximum: 2020
}
}
},
contry: {
type: 'null', title: 'Country'
},
artist: {
type: 'array', title: 'Artists',
items: {
type: 'object',
oneOf: [person, group],
properties: {
name: {
type: 'string', title: 'Name',
minLength: 2, maxLength: 42
}
}
}
}
}
};

const data = {
readonly: false,
years: {
from: 1961,
to: 1971
},
contry: 'UK',
artist: [
{
kind: 'person',
name: 'Paul McCartney'
},
{
kind: 'group',
name: 'The Beatles',
members: [
{ first: 'John', last: 'Lennon', tools: ['Rhythm guitar'], gender: 'M' },
{ first: 'Paul', last: 'McCartney', tools: ['Bass', 'Piano'], alive: true },
{ first: 'George', last: 'Harrison', tools: ['Lead guitar'], alive: false },
{ first: 'Ringo', last: 'Starr', tools: null, alive: true }
]
},
{
kind: 'person',
name: 'John Lennon'
}
]
};
return render(schema, {data: data})
}
Insert cell
Insert cell
Insert cell
Insert cell
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