The avatar for @linogaliana
Lino Galiana
Public
Edited
Dec 8, 2022
Fork of Observable et données spatiales
26
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
a = 5
Insert cell
b = 6
Insert cell
c = a + b
Insert cell
x = {
let val1 = 8;
let val2 = 7;
return val1 * val2;
}
Insert cell
function sum(a, b) {
return a + b;
}
Insert cell
sum(10, 30)
Insert cell
multi = (a, b) => a * b
Insert cell
multi(3, 8)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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
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
viewof slider1 = Inputs.range([0, 100], {
label: "Choisissez une valeur",
step: 1
})
Insert cell
slider1
Insert cell
La valeur choisie est **${slider1}**. Trop cool, hein ?

Vous doutez de moi ? Voici l'option choisie précedemment: ${form['option4']}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sketch(world, { fill: "none", k: k })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
discr = require("statsbreaks@0.3.1")
Insert cell
discr.shape(sampledata)
Insert cell
Insert cell
discr.breaks({ values: sampledata, method: "jenks", nb: nbreaks, precision: 0 })
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.table(maddison)
Insert cell
Insert cell
maddison.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
cities = d3
.csv(
"https://raw.githubusercontent.com/neocarto/resources/master/datasets/simplemaps_worldcities_basicv1.73/worldcities.csv",
d3.autoType
)
.then((r) => r.filter((d) => +d.population > 1000000))
Insert cell
Inputs.table(cities)
Insert cell
Insert cell
viewof file = Inputs.file({label: "Data"})
Insert cell
Insert cell
Insert cell
SummaryTable(cities)
Insert cell
Insert cell
Insert cell
world = d3.json(
"https://raw.githubusercontent.com/neocarto/bertin/main/data/world.geojson"
)
Insert cell
Insert cell
view(world)
Insert cell
Insert cell
Insert cell
db
select * from electricite
Insert cell
dbtable
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
myData = [10, 3, 20, 10, 10]
Insert cell
{
const width = 500;
const height = 75;

const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("background-color", "#CCC");

svg
.append("g")
.attr("fill", "#e04a28")
.selectAll("circle")
.data(myData)
.join("circle")
.attr("cx", (d, i) => 50 + i * 100)
.attr("cy", height / 2)
.attr("r", (d) => d);

return svg.node();
}
Insert cell
Insert cell
Insert cell
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 500])
.style("width", "100%")
.style("height", "auto");

//const projection = d3.geoAitoff();
const projection = d3.geoBertin1953();
const path = d3.geoPath(projection);

// La sphère
svg
.append("g")
.append("path")
.datum({ type: "Sphere" })
.attr("fill", " #a9daeb")
.attr("d", path); // En SVG, l'attribut d définit un tracé à dessiner

// Les graticules
svg
.append("g")
.append("path")
.datum(d3.geoGraticule10())
.attr("d", path) // En SVG, l'attribut d définit un tracé à dessiner
.style("fill", "none")
.style("stroke", "white")
.style("stroke-width", 0.8)
.style("stroke-opacity", 0.5)
.style("stroke-dasharray", 2);

// DATUM
svg
.append("g")
.append("path")
.datum(world) // Datum lit le tableau de données d'un coup => affiche tout de la même façon.
.attr("fill", "#508bab")
.attr("fill-opacity", 0.9)
.attr("stroke", "white")
.attr("stroke-width", 0.2)
.attr("d", path); // En SVG, l'attribut d définit un tracé à dessiner

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [Plot.tickX(data, { x: "gdppc" })]
})
Insert cell
Plot.plot({
marks: [Plot.boxX(data, { x: "gdppc" })]
})
Insert cell
Insert cell
Plot.plot({
marks: [Plot.dotX(data, { x: "gdppc", fill: "black" })]
})
Insert cell
Plot.plot({
marks: [Plot.dotX(data, Plot.dodgeY({ x: "gdppc", fill: "black" }))],
height: 250
})
Insert cell
Insert cell
Plot.plot({
grid: true,
marginLeft: 50,
facet: {
data: data,
y: "region"
},
marks: [Plot.boxX(data, { x: "gdppc" })]
})
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
color: {
scheme: "turbo",
type: "symlog"
},
grid: true,
x: {
type: logx ? "log" : undefined
},
y: {
type: logy ? "log" : undefined
},

marks: [
Plot.circle(maddison, {
r: "pop",
fill: "gdppc",
stroke: "white",
strokeWidth: 0.3,
x: "gdp",
y: "pop",
filter: (d) => d.year == year
}),

Plot.text(maddison, {
r: "pop",
text: "countrycode",
fill: "white",
x: "gdp",
y: "pop",
filter: (d) => d.year == year
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
geom = FileAttachment("geom@3.json").json()
Insert cell
stats = FileAttachment("stats.csv").csv({ typed: true })
Insert cell
test = bertin.match(geom, "ISO3_CODE", stats, "id")
Insert cell
test.unmatched_data
Insert cell
countries = bertin.merge(geom, "ISO3_CODE", stats, "id")
Insert cell
Insert cell
Insert cell
Insert cell
bertin.draw({
params: { projection: "Bertin1953" },
layers: [
{ type: "header", text: "La planète bleue" },
{ geojson: countries, fill: "white", fillOpacity: 0.4, stroke: "none" },
{ type: "graticule" },
{ type: "outline" }
]
})
Insert cell
Insert cell
bertin.draw({
params: {
projection: "Bertin1953"
//projection: "Berghaus"
//projection: "HoaXiaoguang"
//projection: "Spilhaus"
//projection: "Polar"
},
layers: [
{ type: "header", text: "La population mondiale" },
{
type: "bubble",
geojson: countries,
values: "pop",
fill: "#000080",
fillOpacity: 0.5,
dorling: true,
k: k2,
leg_x: 650,
leg_y: 400,
leg_round: 0,
tooltip: ["$name", "$pop"]
},
{ geojson: countries, fill: "white", fillOpacity: 0.5, stroke: "none" },
{ type: "graticule" },
{ type: "outline" }
]
})
Insert cell
bertin.draw({
params: { projection: "Bertin1953" },
layers: [
{ type: "header", text: "PIB par habitant" },
{
geojson: countries,
tooltip: ["$name", "$gdppc"],
fill: {
type: "choro",
values: "gdppc",
colors: "RdYlGn",
leg_x: 100,
leg_y: 100,
leg_round: 0
}
},
{ type: "graticule" },
{ type: "outline" }
]
})
Insert cell
bertin.draw({
params: {
projection: "Bertin1953"
//projection: "Berghaus"
//projection: "HoaXiaoguang"
//projection: "Spilhaus"
//projection: "Polar"
},
layers: [
{ type: "header", text: "La population mondiale" },
{
type: "bubble",
geojson: countries,
values: "pop",
fill: {
type: "choro",
values: "gdppc",
colors: "RdYlGn",
leg_x: 100,
leg_y: 100,
leg_round: 0
},
//dorling: true,
k: k2,
leg_x: 650,ichage de données numériques sous une forme graphique et dynamique. Elles est conforme aux normes W3C et utilise les technologies courantes SVG, JavaScript et CSS pour la visualisation de données. Cett
leg_y: 400,
leg_round: 0,
tooltip: ["$name", "$pop"]
},
{ geojson: countries, fill: "white", fillOpacity: 0.5, stroke: "none" },
{ type: "graticule" },
{ type: "outline" }
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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