The avatar for @john-guerra
John Alexis Guerra Gómez
I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Published
Kadá Coding
Edited
Jan 22, 2021
Insert cell
md`# Kada Coding, Class 2: Variables

* Variables
* HTML
* Inserting variable values
* Inputs
* SVG
* Strings
* Objects
* Functions
* Arrays`
Insert cell
edad = 39.9
Insert cell
texto_intro = "Mafe tiene " + edad + " años"
Insert cell
`Qué pasa si tengo ${texto_intro} `
Insert cell
fecha = Date()
Insert cell
texto_intro + " muy bien cumplidos"
Insert cell
`La fecha es ${fecha} y mi altura es ${altura}`
Insert cell
altura = "1.91mts"
Insert cell
viewof fontSize = html`<input type="range" min=1 max=50>`
Insert cell
md`## Hi ${name}

This is a simple Markdown. Your name has ${
name.length
} letters. So <span style="font-size: ${fontSize}pt">${name}</span>, the thing is that I don't need to repeat your name all the time.


${name.toLocaleUpperCase()}, DON'T MAKE ME YELL IT TO YOU!. Ok, **${name}**?`
Insert cell
students = ["a", "b", "c"]
Insert cell
students[0]
Insert cell
name = "John Alexi"
Insert cell
name.replaceAll(" ", "").length
Insert cell
md`# Esto es un título`
Insert cell
html`<h1> Esto es un título </h1>

Esto es un texto, <strong> con</strong> énfasis

<ul>
<li>Item</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<input/>`
Insert cell
viewof cx = html`<input type="range" min=10 max=300>`
Insert cell
html`<svg width=800 height=600>
<circle cx=${cx} r=300></circle>
</svg>`
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