Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Preact.render(htm`<${App} page="All" />`)
class App extends Preact.Component {
addTodo() {
const {todos = []} = this.state;
this.setState({todos: todos.concat(`Item ${todos.length}`)});
}
render({page}, {todos = []}) {
return htm`
<div class="app">
<${Header} name="ToDo’s (${page})" />
<ul>
${todos.map(todo => htm`
<li>${todo}</li>
`)}
</ul>
<button onClick=${() => this.addTodo()}>Add Todo</button>
<${Footer}>footer content here</>
</div>
`;
}
}
Header = ({name}) => htm`<h1>${name} List</h1>`
htm = (await require("htm@2/dist/htm.umd.js")).bind(Preact.h)
Preact = require("preact@8/dist/preact.min.js").catch(() => window.preact)
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.
