Software artisan · Data is alive, flows, and belongs to you
An Hexgrid Web Component
HexGrid, html`<hex-grid name="from an HTML literal"></hex-grid>`
HexGrid = {
class HexGrid extends LitElement {
static get styles() {
return lit.css`
:host {
display: inline-block;
border: 2px solid indigo;
padding: 0.5rem 1.5rem;
margin-bottom: 1rem; }
p {
color: indigo;
font-family: 'Georgia'; }`;
}
static get properties() {
return {
name: { type: String }
}
}
constructor() {
super();
this.name = 'Somebody';
}
render() {
return lit.html`<p>Hello, <em>${this.name}!</em></p>`;
}
}
if( !window.customElements.get( 'hex-grid')) {
window.customElements.define('hex-grid', HexGrid)
}
return HexGrid
}
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.
