Published
Edited
Oct 16, 2020
1 star
md`# My first notebook`
html `<p>Text <i>here</i> </p> `
y = x+3;
z = square(x,y)
zz = square2(x,y);
md`The value of zz is **${zz}**.`
htmlcreator('Xavier')
md `## Inputs`
viewof value = html `<input type=range min="0" max="100" value="20" step="1">`
md `by using 'viewof' built-in Observable we cane update the value of the selector, for value now is **${value}**`
viewof selected = html`<select name="weather">
<option value="clear">Clear</option>
<option value="cloudy">Cloudy</option>
<option value="rainy">Rainy</option>
<option value="windy">Windy</option>
</select>`
value
html`<svg width="128" height="128" fill="none" stroke="black">
<rect x="10" y=10 width="${value}" height="50" style="fill:rgb(200,20,30);stroke-width:0" />
<rect x="50" y="30" width="120" height="60" style="fill:rgba(20,200,30, 0.4);stroke-width:0" />
</svg>`
weather = await FileAttachment("power_plants.csv").csv();
md `## Apendix`
42*x + 87
square = function(value, value2){
value2 = value2 + 2;
return value * value2;
}
square2 = (value,value2) => {
value2 = value2 + 2;
return value*value2;
}
htmlcreator = function(word){
return html`<p>Hello <b>${word}</b>!</p>`
}
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.
