Public
Edited
Apr 4
9 forks
2 stars
Insert cell
Insert cell
Insert cell
1 + 1 // Editame!
Insert cell
Insert cell
{
var sum = 0;
for (let i = 0; i < 100; ++i) {
sum += i;
}
return sum;
}
Insert cell
Insert cell
color = "rojo" // Editame para ver como cambian los valores en ambas celdas.
Insert cell
`Mi color favorito es el ${color}.`
Insert cell
Insert cell
letras = { return "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""); }
Insert cell
Insert cell
html`<p> Mi lenguaje favorito es
<span style="background:yellow;"> <i>HTML</i></span>.
</p>` // span-tag: https://www.w3schools.com/tags/tag_span.asp
Insert cell
Insert cell
html`Mi color favorito es el ${color}.`
Insert cell
Insert cell
cars = fetch("https://raw.githubusercontent.com/vega/vega/v4.3.0/docs/data/cars.json")
.then(response => response.json())
Insert cell
Insert cell
function saludar(nombre) {
return `Hola ${nombre}!`;
}
Insert cell
saludar("Susana")
Insert cell
Insert cell
c = {
for (let i = 0; true; ++i) {
yield i;
}
}
Insert cell
md`Actualmente *c = ${c}*.`
Insert cell
Insert cell
{
const height = 13; // altura del canvas
const context = DOM.context2d(width, height); // canvas, área de dibujo
for (var i = 0; i < width; ++i) {
const t = i / width;
const r = Math.floor(255 * Math.sin(Math.PI * (t + 0 / 3)) ** 2);
const g = Math.floor(255 * Math.sin(Math.PI * (t + 1 / 3)) ** 2);
const b = Math.floor(255 * Math.sin(Math.PI * (t + 2 / 3)) ** 2);
context.fillStyle = `rgb(${r},${g},${b})`;
context.fillRect(i, 0, 1, height);
yield context.canvas; // generador
}
}
Insert cell
Insert cell
viewof slider = html`<input type=range>`
Insert cell
sliderValue = slider
Insert cell
Insert cell
import {tweet} from "@mbostock/tweet"
Insert cell
tweet("1772313532962410518") // ID del tweet
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