Published
Edited
Jul 6, 2019
15 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
normal = drawFigure({
material: new THREE.MeshNormalMaterial({
color: '#FBB600',
flatShading: true,
})
}) // It yields canvas, but this canvas it's not displayed here (because same DOM element it's used above)
Insert cell
Insert cell
Insert cell
Insert cell
import {slider,worldMapCoordinates} from "@jashkenas/inputs"
Insert cell
Insert cell
viewof slider1 = slider({step:0.1})
Insert cell
viewof slider2 = slider({step:0.1})
Insert cell
viewof slider3 = slider({step:0.1})
Insert cell
viewof map = worldMapCoordinates([-122.27, 37.87])
Insert cell
Insert cell
html`
<style>
.inputs-cont form{display:inline-block;}
</style>

<div class="inputs-cont">

${viewof slider1} ${viewof slider2} ${viewof slider3} <br>
<span style="margin-left:${width/2-200}px"> ${viewof map } </span>

</div> `
Insert cell
Insert cell
map
Insert cell
slider1
Insert cell
slider2
Insert cell
slider3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
THREE = {
const THREE = window.THREE = await require("three@0.99.0/build/three.min.js");
await require("three@0.99.0/examples/js/controls/OrbitControls.js").catch(() => {});
return window.THREE;
}
Insert cell
import {inputsGrid} from "@bumbeishvili/utils"
Insert cell

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.
Learn more