The avatar for @geovis-m2-geomas
Geovis-M2-GEOMAS
Public
Cours
Edited
Feb 12
Paused
10
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
## Cellules

Un notebook Observable est une suite de cellules. Le contenu des cellules peut être de 3 principaux types :
- JavaScript
- Markdown
- HTML

Vous pouvez voir et modifier le type de cellule en cliquant sur l'icone, à gauche de la cellule. Le résultat de la cellule apparaît au dessus de la cellule.

Insert cell
Insert cell
a = 10000
Insert cell
b = 12000
Insert cell
c = a + b
Insert cell
d = 'Ceci est une cellule JavaScript'
Insert cell
// Une autre cellule JavaScript
function somme(a, b) {
return a + b;
}
Insert cell
somme(a, b)
Insert cell
Insert cell
Ceci est une *cellule* **Markdown** ! Cliquez sur l'icône avec 4 lignes pour changer son type si vous le souhaitez !
Insert cell
Insert cell
Insert cell
Insert cell
<p>Ceci est une cellule <i>HTML</i>
Insert cell
<svg width="200" height="100">
<ellipse rx="20" ry="14" cx="80" cy="30" fill="lightgreen" stroke="black" stroke-width="2.5"></ellipse>
<text y="70" font-size="14">
<tspan x="20" >Ceci est une cellule HTML</tspan>
<tspan x="20" dy="14">contenant un élément SVG</tspan>
</text>
</svg>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof checkboxes = Inputs.checkbox(["A", "B"], {
label: "Select some",
value: "A"
})
Insert cell
viewof radios = Inputs.radio(["A", "B"], {label: "Select one", value: "A"})
Insert cell
radios
Insert cell
viewof form = Inputs.form({
option1: Inputs.checkbox(["A", "B"], {label: "Select some"}),
option2: Inputs.range([0, 100], {label: "Amount", step: 1}),
option3: Inputs.radio(["A", "B"], {label: "Select one"}),
option4: Inputs.select(["A", "B"], {label: "Select one"})
})
Insert cell
Insert cell
Insert cell
viewof slider1 = Inputs.range([0, 100], {
label: "Choisissez une valeur",
step: 1
})
Insert cell
slider1
Insert cell
Insert cell
Insert cell
Insert cell
viewof color = Inputs.color({label: "Couleur", value: "#4682b4"})
Insert cell
<svg viewBox="0 0 1000 ${rectheight}" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="${rectwidth}px" height="${rectheight}px" fill="${color}" stroke="#06000C" />
</svg>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Cette instruction va renvoyer l'erreur "SyntaxError: Unexpected token", mais n'empêche pas les autres cellules de fonctionner
,dfksdhgffgghfujfy
Insert cell
Insert cell
Insert cell
result = n1 + n2
Insert cell
n1 = 212
Insert cell
n2 = 93
Insert cell
Insert cell
c1 = c2 + 2
Insert cell
c2 = c1 + 4
Insert cell
Insert cell
dd = 12
Insert cell
dd = 49
Insert cell
Insert cell
randomVal = Math.random()
Insert cell
result2 = randomVal * 2 // Mis à jour automatiquement quand "randomVal" change
Insert cell
Insert cell
Insert cell
fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())
Insert cell
Insert cell
await fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())
Insert cell
Insert cell
// Sans await
fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json()).title
Insert cell
// Avec await
(await fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())).title
Insert cell
Insert cell
'Ceci est une chaine de caractères'.split(' ')
Insert cell
Insert cell
variable = 12
Insert cell
Insert cell
{
const v = 'Ceci est une chaine de caractères';
let result = 0;
v.split('').forEach((char) => {
if (char === 'e') {
result += 1;
}
});
return `Il y a ${result} fois la lettre 'e'`;
}
Insert cell
Insert cell
res = {
const v = 'Ceci est une chaine de caractères';
let result = 0;
v.split('').forEach((char) => {
if (char === 'e') {
result += 1;
}
});
return `Il y a ${result} fois la lettre 'e'`;
}
Insert cell
Insert cell
Insert cell
pier = ({
age: 12,
name: 'Pier'
})
Insert cell
Insert cell
function sum(a, b) {
return a + b;
}
Insert cell
pow = function (x, n) {
return x ** n;
}
Insert cell
mult = (a, b) => a * b
Insert cell
mult2 = function (a, b) { return a * b }
Insert cell
Insert cell
foo = 12
Insert cell
// Cette cellule essaye de modifier la valeur de 'foo', ce n'est pas possible par défaut :
{
// Some other code here...
foo = 15
}
Insert cell
Insert cell
mutable bar = 18
Insert cell
// Cette cellule essaye de modifier la valeur de 'bar', c'est possible grâce au mot-clé mutable
{
// Some other code here...
mutable bar = 32
}
Insert cell
Insert cell
Insert cell
dicopal = require('bertin@1.7.1')
Insert cell
_ = import("https://cdn.skypack.dev/lodash-es@4")
Insert cell
_.camelCase('Ceci est un test')
Insert cell
Insert cell
Insert cell
width
Insert cell
Insert cell
viewof n = Inputs.range([0, 255], {step: 1, label: "A number to be squared"})
Insert cell
Insert cell
viewof s = Inputs.select(['Entry 1', 'Entry 2', 'Entry 3'], {step: 1, label: "Select one item"})
Insert cell
Insert cell
viewof cbx = Inputs.checkbox(["A", "B"], {label: "Select some", value: ["A"]})
Insert cell
cbx.map((d) => `La boite ${d} est sélectionnée`)
Insert cell
Insert cell
Inputs.table(olympians)
Insert cell
olympians
Insert cell
Insert cell
{
// On retourne 1 mais le code continue d'être exécuté ensuite
yield 1;
// On attend 1.5s
await Promises.delay(1500);
// Etc..
yield 2;
await Promises.delay(1500);
yield 3;
}
Insert cell
Insert cell
Insert cell
Insert cell
d3.schemeBuPu[5]
Insert cell
topojson
Insert cell
Insert cell
Plot.plot({
inset: 10,
title: 'Un scatter plot',
marks: [
Plot.dot([[1, 2], [1.4, 5], [2, 4], [2.5, 8], [3, 6], [3.5, 3], [4, 6], [5, 9]], { stroke: 'red' }),
Plot.frame()
]
})
Insert cell
Insert cell
Insert cell
Insert cell
import { chart } from "@d3/contours"
Insert cell
Insert cell
chart
Insert cell
Insert cell
Insert cell
projHatano = d3.geoProjection(hatanoRaw).rotate([-10.2, 0, 0]) // Le code de hatanoRaw est défini en annexe à la fin du notebook
Insert cell
import { map } with { projHatano as projection } from "@d3/world-map"
Insert cell
map
Insert cell
Insert cell
data1 = FileAttachment("Échirolles.csv").csv({typed: true})
Insert cell
data1
X
surface
Y
prix
Color
—
Size
—
Facet X
type
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.dot(data1, { fx: "type", x: "surface", y: "prix", tip: true })
]
})
Insert cell
data1
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
data = FileAttachment("limites_communales_metro_epsg4326.geojson").json()
Insert cell
{
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container);
const layer = L.geoJSON(data).addTo(map);
map.fitBounds(layer.getBounds(), {maxZoom: 9});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Insert cell
Plot.plot({ projection: { type: "equal-earth", domain: data }, marks: [Plot.geo(data)] })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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