Published
Edited
Sep 9, 2020
Insert cell
Insert cell
viewof x = html`<input type=range min=0 max=1 step=any>`
Insert cell
x
Insert cell
Insert cell
viewof menssagem = html`<input type=text placeholder="Diga Olá">`
Insert cell
menssagem
Insert cell
Insert cell
viewof cor = html`<select>
<option value="red">vermelho
<option value="orange"> laranja
<option value="yellow"> amarelo
<option selected value="green">verde
<option value="blue">azul
<option value="violet">violeta
</select>`
Insert cell
Insert cell
Insert cell
point
Insert cell
Insert cell
Insert cell
stroke
Insert cell
Insert cell
Insert cell
viewof silly = {
const element = html`<div>Um view exemplo simples</div>`;
element.value = "Eu sou um valor attribuído ao elemento.";
return element;
}
Insert cell
silly
Insert cell
Insert cell
viewExplicito = html`<input type=range>`
Insert cell
valorExplicito = Generators.input(viewExplicito)
Insert cell
Insert cell
viewof x.type
Insert cell
Insert cell
viewof count = {
const element = html`<div style="display: inline-block; font-size: 64px; user-select: none;">🤪</div>`;
element.value = 0;
element.onclick = () => {
++element.value;
element.style.transition = "none";
element.style.transform = `scale(1.5) rotate(${Math.random() * 90 -
45}deg)`;
element.dispatchEvent(new CustomEvent("input"));
requestAnimationFrame(() => {
element.style.transition = "transform 250ms ease";
element.style.transform = "inherit";
});
};
return element;
}
Insert cell
count
Insert cell
Insert cell
Insert cell
Insert cell
sphere = ({type: "Sphere"})
Insert cell
graticule = d3.geoGraticule10()
Insert cell
land = topojson.feature(world, world.objects.land)
Insert cell
world = FileAttachment("land-50m.json").json()
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3-geo@1", "d3-shape@1")
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