Web developer and autodidact with an interest in creative coding.
Handlebars = {
const hb = await require('handlebars@4.1.2/dist/handlebars.min.js');
// Register a helper.
// n is the argument, block the inner content.
hb.registerHelper('times', (n, block) => {
let s = '', i = n;
while(i-- > 0) s += block.fn(i);
return s;
});
return hb;
}
table_hbs = Handlebars.compile(`
<table>
{{#if headers}}
<thead>
<tr>{{#each headers}}<th>{{@this}}</th>{{/each}}</tr>
</thead>
{{/if}}
<tbody>
{{#each rows}}
<tr>{{#each @this}}<td>{{{@this}}}</td>{{/each}}</tr>
{{/each}}
</tbody>
</table>
`)
choochoo_hbs = Handlebars.compile(`
🚂{{#times size}}🚃{{/times}}{{#if late ~}}
{{#times late ~}} {{/times}}🏃
{{/if}}
`)
md`
### Departures
${table_hbs({headers: ['Train', 'Status'], rows: [
['Train 1', choochoo_hbs({size: 5})],
['<span style=color:red>Train 2</span>', choochoo_hbs({size: 3, late: 55})],
['Train 3', choochoo_hbs({size: 8})],
]})}
`
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.
