Published
Edited
Jun 19, 2020
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
stuff
Insert cell
Insert cell
parse_data({
display: 'editable'
})`
viewof x = render_notebook({
cells: [
{
name: 'renewing',
display: 'editable',
value: { value: 10, type: 'constant' }
}
]
})
`
Insert cell
parse_data = options => (strings, ...args) => {
let string = String.raw(strings, ...args);
let cell = parseCell(string);
let name = cell.id.type === 'ViewExpression' ? cell.id.id.name : cell.id.name;
let modifier = null;
if (cell.id.type === 'ViewExpression') {
modifier = 'viewof';
}

return {
name: name,
value: {
type: 'code',
modifier: modifier,
value: string.slice(cell.body.start, cell.body.end)
},
...options
};
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
notebook_header_style = css`
.small-inspect {
display: flex;
flex-direction: row;
overflow-x: auto;
cursor: pointer;
}
.small-inspect::-webkit-scrollbar {
display: none;key
}
.small-inspect > .observablehq--cellname {
flex-shrink: 0;
}
.small-inspect > .observablehq--caret {
align-self: center;
}
.small-inspect .observablehq {
margin: 0;
}
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
render(
undefined,
jsx`
<${shadow.div}
slots=${{ stuff: jsx`<span class="Hmm">WOW</span>` }}
>
<div>Hey</div><slot name="stuff" />
</${shadow.div}>
`
)
Insert cell
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