id=DOM.uid().id
html`<a class='sds dds'>asdf</a>`
html`<style>
a{display:none;}
#${id} { display: flex; flex-wrap:wrap; }
#${id} figure { margin: 0 20px 10px 0; width:100px; }
</style>`
html`<div id=${id}></div>`
{
const canvas = () => {
const w = 600,
h = 400;
const c = html`<canvas draggable=true width=${w} height=${h}>`.getContext(
'2d'
);
c.canvas.ondragstart = e => {
const t = e.dataTransfer;
t.setData('text/foo', 'bar');
t.setData('text/uri-list', c.canvas.toDataURL());
};
const g = c.createLinearGradient(0, 0, w, h);
g.addColorStop(0, '#c00');
g.addColorStop(1, '#fe0');
c.fillStyle = g;
c.fillRect(0, 0, w, h);
return c.canvas;
};
// return html`${[1,2,3].map(n=>`<figure>
// <canvas width='10' height='10' id='canva${n}'></canvas>
// <figcaption>Canvas</figcaption>
// </figure>
// `).reduce((acc,cur)=>acc+cur,'')}`
const d = document.querySelector('#' + id);
d.textContent = '';
Array.from({ length: 20 }, (v, i) => i).map(n => {
const div = html`<figure>
<canvas width='100' height='100' id='canvas-${n}'></canvas>
<figurecaption><input/>Canvas ${n}</figurecaption>
</figure>`;
const ctx = div.children[0].getContext('2d');
// ctx.fillRect(2, 2, 16, 16);
ctx.canvas.onmousemove = ctx.canvas.ontouchmove = evt =>
ctx.fillRect(evt.layerX, evt.layerY, 10, 10);
d.appendChild(div);
});
return d;
}
{const div=html`<figure>
<canvas width='10' height='100' id='canvas-'></canvas>
<div>Canvas </div>
</figure>`
return div}
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.
