viewof x = html`<input type=range min=0 max=1 step=any>`
x
viewof message = html`<input type=text placeholder="Say hello">`
message
viewof color = html`<select>
<option>red
<option>orange
<option>yellow
<option selected>green
<option>blue
<option>violet
</select>`
color
point
stroke
viewof silly = {
const element = html`<div>I am a silly view!</div>`;
element.value = "I am a silly value.";
return element;
}
silly
explicitView = html`<input type=range>`
explicitValue = Generators.input(explicitView)
viewof x.type
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;
}
count
sphere = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
world = FileAttachment("land-50m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3-geo@1", "d3-shape@1")
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.
