Voir la page Web du cours pour retrouver l'ensemble des supports.
data = [
{ name: 'John', height: 170, banana: 12, apple: 5 },
{ name: 'Rosa', height: 156, banana: 8, apple: 4 },
{ name: 'Jack', height: 179, banana: 9, apple: 9 },
{ name: 'Ronda', height: 180, banana: 20, apple: 3 },
{ name: 'Alan', height: null, banana: 2, apple: 7 },
{ name: 'Aurora', height: 171, banana: 6, apple: 7 },
{ name: 'Robert', height: 181, banana: 14, apple: 2 },
{ name: 'Sylvia', height: 170, banana: 10, apple: 3 },
{ name: 'Ross', height: 165, banana: 5, apple: 6 },
{ name: 'Ada', height: 173, banana: 6, apple: 5 },
{ name: 'Rick', height: 160, banana: 4, apple: 4 }
]
Inputs.table(data)
// Obtenir un tableau avec seulement les entrées pour laquelle la propriété `height` n'est pas nulle :
data.filter((d) => { return d.height !== null })
// Obtenir un tableau avec seulement les entrées pour laquelle la propriété `height` est supérieur à 170 :
data.filter((toto) => toto.height > 170)
// Obtenir un tableau avec seulement les entrées pour laquelle la propriété `name` se termine par la lettre 'a'
data.filter((d) => d.name.endsWith('a'))
// Lorsque aucun élément ne correspond, un taleau vide est retourné
data.filter((d) => d.height > 220)
presidents = ['Rosa', 'John', 'Luc']
data.find((d) => d.name === 'Rosa')
// Si aucune correspondance n'est trouvée, undefined est retourné
data.find((d) => d.name === 'XYZ')
// Pour copier tout le tableau, sans argument
data12 = data.slice()
// Pour copier un sous-ensemble du tableau, ici de la cinquième à la dernière
data.slice(4)
// Pour copier un sous-ensemble du tableau, ici de la première à la troisième entrée
data.slice(0, 3)
// Pour copier un sous-ensemble du tableau, ici deux entrées en partant de la fin du tableau
data.slice(-3)
// Obtenir un tableau ne contenant que les noms
data.map(function (d) { return d.name; })
// Obtenir un tableau ne contenant que certaines propriétés
data.map(function(d) {
return {
nom: d.name,
taille: d.height,
}
}).filter((d) => d.taille !== null)
// Obtenir un tableau après avoir modifié ou sélectionné les propriétés
data.map((d) => {
const name = d.name;
const h = (d.height === null) ? null : d.height / 100;
// let h;
// if (d.height === null) {
// h = null;
// } else {
// h = d.height / 100
// }
return {
name: name,
height: h
};
})
function extractTotalFruit(elem) {
const totalFruit = elem.banana + elem.apple;
return totalFruit;
}
data.map(extractTotalFruit)
data3 = data
.filter((d) => d.height !== null) // On choisi ici d'exclure les individus pour lesquels height est null
.map((d) => ({
name: d.name, // On conserve les informations name, apple et banana inchangées
apple: d.apple,
banana: d.banana,
heightCategory: d.height > 178 ? 'Tall' : (d.height > 165 ? 'Medium' : 'Small'),
}))
data3.forEach((d) => {
// Ici, pour chaque objet de notre tableau de données,
// on créée une nouvelle propriété 'total_fruits'
d.totalFruits = d.apple + d.banana;
});
[2, 67, 45, 23, 12].sort((a, b) => b - a)
// Obtenir une copie du tableau, trié selon la propriété `height`
data
.slice()
.sort((a, b) => a.height - b.height)
// Obtenir le tableau filtrant les individus qui ont la propriété height puis en triant selon cette propriété
data.filter((d) => d.height !== null)
.slice()
.sort((a, b) => a.height - b.height)
data2 = {
// Le tableau qui va contenir le jeu de données transformé
const result = [];
// La procédure à appliquer pour chaque élément du jeu de données
data.forEach((d) => {
// Une entrée pour la variable 'apple'
result.push({
name: d.name,
variable: "apple",
value: d.apple
});
// Une entrée pour la variable 'banana'
result.push({
name: d.name,
variable: "banana",
value: d.banana
});
});
return result;
}
// La conversion inverse peut se faire de la manière suivante
{
const result = [];
data2.forEach((d) => {
const existing = result.find((e) => e.name === d.name);
if (existing) {
existing[d.variable] = d.value;
} else {
result.push({
name: d.name,
[d.variable]: d.value
});
}
});
return result;
}
d3.min([12, 4, 2, 5, 9])
d3.max([12, 4, 2, 5, 9])
d3.min(data, (d) => d.banana)
d3.max(data, (d) => d.apple)
d3.min(data.map((d) => d.banana))
d3.max(data.map((d) => d.apple))
d3.extent(data, d => d.height)
d3.mean(data, (d) => d.apple)
d3.median(data, (d) => d.apple)
d3.sum(data, (d) => d.apple)
d3.deviation(data, (d) => d.apple)
d3.group(data3, d => d.heightCategory)
d3.group(
data3,
d => d.heightCategory,
d => d.name.endsWith('a') ? 'Female' : 'Male'
)
d3.rollup(
data3,
v => ({
// Pour chaque groupe, un objet avec le nombre d'individu pris en compte,
// la moyenne du nombre de bananes et la moyenne du nombre de pommes
count: v.length,
banana: d3.mean(v, e => e.banana),
apple: d3.mean(v, e => e.apple),
}),
d => d.heightCategory,
)
d3.rollup(
data3,
v => ({
count: v.length,
banana: d3.mean(v, e => e.banana),
apple: d3.mean(v, e => e.apple),
}),
d => d.heightCategory,
d => d.name.endsWith('a') ? 'Female' : 'Male'
)
pieConstructor = d3.pie()
.value((d) => d.apple)
pieConstructor(data)
d3.range(10)
d3.range(5, 10)
d3.range(3, 15, 2)
Plot.plot({
marks: [
Plot.dot(data, {
y: 'name', x: 'banana', fill: 'banana'
}),
Plot.frame(),
],
})
Plot.plot({
title: 'Scatter plot',
inset: 10,
// On ajoute manuellement un label pour l'axe des ordonnées
y: { label: 'Total fruits' },
marks: [
Plot.dot(data, { // Des points
x: 'height', // La taille en abscisse
y: (d) => d.apple + d.banana, // La somme 'apple' + 'banana' en ordonnées, en utilisant une fonction
stroke: 'rgb(121, 121, 255)', // Une même couleurs pour tous les individus (ici avec son code rgb)
r: 4, // Un rayon de 4 pour tous les individus
}),
Plot.frame()
]
})
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.
