html`<p> Soy un <i>párrafo.</i> </p>`// https://www.w3schools.com/tags/tag_p.asp
{
const p = document.createElement("p"); // Document es esta página, le agrego un elemento de texto <p>
p.appendChild(document.createTextNode("Yo también soy un ")); // Seteo el texto
p.appendChild(document.createElement("i")).appendChild(document.createTextNode("parrafo.")); // Agrego texto formateado
return p;
}
md`Psss! Yo también soy un *párrafo*.`
md`Mi número favorito es el ${Math.random()*100|0}.` // Shift+Enter múltiples veces para ver como cambia
md`Incrible! podemos usar ${tex`\LaTeX`} para expresiones matemáticas ${tex`E = mc^2`}.`
md`Tambien es posible incrustar componentes gráficos como esta linea: ${sparkline([0, 4, 3, 1, 6, 3, 4])} dentro del texto.`
md`La hora actual es ${new Date(now).toLocaleTimeString()}.`
html`<svg width="720" height="120"> # HTML me provee un componente SVG
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>` // cx,cy son las coordenadas de cada círculo y r su radio
html`<svg width="720" height="120"> # HTML me provee un componente SVG
<circle cx="40" cy="60" r="10"></circle>
<rect x="70" y="45" width="30" height="30" stroke="red" fill="transparent" stroke-width="5"/>
<polyline points="120 50 125 60 130 55 135 70 140 65 145 80 "
stroke="orange" fill="transparent" stroke-width="5"/>
</svg>` // cx,cy son las coordenadas de cada círculo y r su radio
barra_slider = html`<input type=range>`
barra_slider.type
barra_slider.value
input_text = html`<input type=text value="Soy un recuadro para escribir texto...">`
viewof input_bar = html`<input type=range>`
input_bar
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.
