Published
Edited
Oct 10, 2018
3 stars
archer = require('https://cloud.archer.graphics/libs/archer.min.js')
graphic = {
const graphic = archer.create(container);
graphic.loadUrl(svgUrl, configUrl);
graphic.on('ready', function() {
graphic.view.zoomToFit();
graphic.view.zoomIn(2);
});
return graphic;
}
container = html`<div style="width: 400px; height:300px; border: solid 1px black;"></div>`
{
graphic.setValue('pitch', pitch);
graphic.setValue('roll', roll);
graphic.setValue('orientation', orientation);
}
{
if (autoUpdate) {
const value = now / 1000; // now is a standard observable yielding the current time
viewof pitch.value = Math.cos(value * 0.5) * 90;
viewof roll.value = Math.sin(value) * 40;
viewof orientation.value = (value * 30) % 360 - 180;
// This is needed to trigger the input observables
viewof pitch.dispatchEvent(new CustomEvent("input"));
viewof roll.dispatchEvent(new CustomEvent("input"));
viewof orientation.dispatchEvent(new CustomEvent("input"));
}
}
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.
