Web Datavis researcher by day, Indie Game designer by night
Published
Edited
May 13, 2021
Importers
dashboard(layout)
dashboard = {
let render = (node) => {
if(node.type === undefined) {
return `<div class="empty"></div>`
}
if(node.type == 'cell') {
return `<div class="cell" ${node.flex ? `style="flex: ${node.flex}"` : ''};"><div class="cell_header">${node.title ? node.title : node.content}</div><div class="cell_content" id="${node.content.replace(' ','_')}"></div></div>`
}
if(node.type == 'hbox' || node.type == 'vbox') {
return `<div style="display: flex; ${node.flex ? `flex: ${node.flex};` : ''} flex-direction: ${node.type == 'hbox' ? 'row' : 'column'}">${node.children.map(c => render(c)).join('')}</div>`
}
}
return render
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
mutable layout = ({
type: 'hbox',
children: [{},{
type: 'vbox',
children: [{
type: 'hbox',
children: [{},{
type: 'cell',
content: 'a_cell'
}]
},{},{
type: 'cell',
content: 'a_cell'
}]
}]
})
a_cell = html`<div>aaaa</div>`
d3 = require('d3@5')
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.
