Voir la page Web du cours pour retrouver l'ensemble des supports.
Public
Edited
Sep 10, 2024
Plot.plot({
// Une marge autour des données (mais dans le cadre)
inset: 12,
// Le titre de l'axe Y
y: {
label: 'Satisfaction client',
},
// Le titre de l'axe X
x: {
label: 'Revenus',
},
marks: [
// La marque "dot" pour tracer les points (on colore en fonction de la ville)
Plot.dot(dataset, {x: "revenu", y: "satisfaction_client", stroke: 'ville'}),
// La marque "frame" pour le cadre
Plot.frame(),
]
})
Plot.plot({
inset: 5,
title: 'Évolution des ventes pour le produit A',
y: {
// On affiche l'axe Y entre 65 et 180
domain: [65, 180],
},
x: {
// On affiche l'axe X entre le 01/01 et le 02/06
// (ça permet de faire apparaitre Juin sur l'axe, sinon il n'était pas affiché)
domain: [new Date(2024, 0, 1), new Date(2024, 5, 2)],
},
marks: [
Plot.frame(),
// On passe le jeu de données filtré en 1er argument,
// puise les options (variable pour l'axe x, variable pour l'axe y, couleur)
// en 2nd argument
Plot.lineY(dataset.filter((d) => d.produit === "Produit A"), {x: "mois", y: "ventes", stroke: "ville"})
]
})
dsAggValues = Array.from(
// Rollup retourne un object Map, on le convertit directement en un tableau de paire de clé-valeurs
d3.rollup(
// On ne s'intéresse qu'au produit A
dataset.filter((d) => d.produit === "Produit A"),
// On veut récupérer la somme des produit A vendu pour chaque ville
// (quel que soit le mois)
v => d3.sum(v, item => item.ventes),
d => d.ville,
)
)
// On tranforme le tableau de tableau en un tableau d'objects
dsAgg = dsAggValues.map((d) => ({ ville: d[0], ventes: d[1] }))
Plot.plot({
// On ajoute un titre au graphique
title: 'Ventes pour le produit A',
// On choisit manuellement les couleur pour nos 3 modalités
color: {
range: ['cyan', 'magenta', 'yellow'],
},
// Les marques à utiliser
marks: [
// Une marque barY pour avoir une barre qui s'étend le long de l'axe Y
Plot.barY(
// On utilise le jeu de données aggrégé
dsAgg,
{
x: 'ville',
y: 'ventes',
fill: 'ville',
sort: {x: "y", reverse: true},
}
),
Plot.ruleY([0]) // On ajoute manuellement une ligne horizontale, à la valeur 0
]
})
Plot.plot({
title: 'Ventes cumulées (produit A et produit B)',
y: {
domain: [0, 2000],
label: "Total des ventes",
},
marks: [
Plot.barY(
// Premier argument, comme d'habitude, le jeu de données à utilisé
dataset,
// Second argument, la transformation "groupX", pour aggréger en faisant la somme ("sum")
// sur l'axe des Y, et toujours en utilisant les ventes sur l'axe des Y et les villes
// sur l'axe des X. Comme précédemment, on peut trier avec "sort".
Plot.groupX(
{ y: "sum" },
{
x: "ville",
y: "ventes",
fill: "ville",
sort: {x: "y", reverse: true},
tip: true,
}
),
),
Plot.ruleY([0]),
]
})
Plot.plot({
title: "Évolution des ventes au cours du 1er semestre pour l'ensemble des produits",
marginBottom: 40,
y: {
// cf. le graphique 2
domain: [64, 180],
label: 'Total des ventes',
},
x: {
// cf. le graphique 2
domain: [new Date(2024, 0, 1), new Date(2024, 5, 2)],
label: null,
},
grid: true,
// On veut décomposer les représentation en fonction de la variable "produit",
// en affichant les différentes modalités (ici produit A et produit B)
// sur l'axe des X :
facet: {
data: dataset,
x: "produit",
label: null
},
marks: [
Plot.lineY(dataset, {x: "mois", y: "ventes", stroke: "ville"}),
]
})
dataset = [
{
"ville": "Paris",
"mois": new Date(2024, 0, 1),
"produit": "Produit A",
"ventes": 120,
"revenu": 2400,
"satisfaction_client": 85
},
{
"ville": "Paris",
"mois": new Date(2024, 1, 1),
"produit": "Produit A",
"ventes": 135,
"revenu": 2700,
"satisfaction_client": 88
},
{
"ville": "Paris",
"mois": new Date(2024, 2, 1),
"produit": "Produit A",
"ventes": 110,
"revenu": 2200,
"satisfaction_client": 84
},
{
"ville": "Paris",
"mois": new Date(2024, 3, 1),
"produit": "Produit A",
"ventes": 150,
"revenu": 3000,
"satisfaction_client": 89
},
{
"ville": "Paris",
"mois": new Date(2024, 4, 1),
"produit": "Produit A",
"ventes": 140,
"revenu": 2800,
"satisfaction_client": 87
},
{
"ville": "Paris",
"mois": new Date(2024, 5, 1),
"produit": "Produit A",
"ventes": 130,
"revenu": 2600,
"satisfaction_client": 85
},
{
"ville": "Lyon",
"mois": new Date(2024, 0, 1),
"produit": "Produit A",
"ventes": 80,
"revenu": 1600,
"satisfaction_client": 82
},
{
"ville": "Lyon",
"mois": new Date(2024, 1, 1),
"produit": "Produit A",
"ventes": 95,
"revenu": 1900,
"satisfaction_client": 87
},
{
"ville": "Lyon",
"mois": new Date(2024, 2, 1),
"produit": "Produit A",
"ventes": 100,
"revenu": 2000,
"satisfaction_client": 85
},
{
"ville": "Lyon",
"mois": new Date(2024, 3, 1),
"produit": "Produit A",
"ventes": 110,
"revenu": 2200,
"satisfaction_client": 88
},
{
"ville": "Lyon",
"mois": new Date(2024, 4, 1),
"produit": "Produit A",
"ventes": 105,
"revenu": 2100,
"satisfaction_client": 86
},
{
"ville": "Lyon",
"mois": new Date(2024, 5, 1),
"produit": "Produit A",
"ventes": 115,
"revenu": 2300,
"satisfaction_client": 89
},
{
"ville": "Marseille",
"mois": new Date(2024, 0, 1),
"produit": "Produit A",
"ventes": 150,
"revenu": 3000,
"satisfaction_client": 87
},
{
"ville": "Marseille",
"mois": new Date(2024, 1, 1),
"produit": "Produit A",
"ventes": 165,
"revenu": 3300,
"satisfaction_client": 91
},
{
"ville": "Marseille",
"mois": new Date(2024, 2, 1),
"produit": "Produit A",
"ventes": 155,
"revenu": 3100,
"satisfaction_client": 89
},
{
"ville": "Marseille",
"mois": new Date(2024, 3, 1),
"produit": "Produit A",
"ventes": 170,
"revenu": 3400,
"satisfaction_client": 92
},
{
"ville": "Marseille",
"mois": new Date(2024, 4, 1),
"produit": "Produit A",
"ventes": 160,
"revenu": 3200,
"satisfaction_client": 90
},
{
"ville": "Marseille",
"mois": new Date(2024, 5, 1),
"produit": "Produit A",
"ventes": 155,
"revenu": 3100,
"satisfaction_client": 88
},
{
"ville": "Paris",
"mois": new Date(2024, 0, 1),
"produit": "Produit B",
"ventes": 130,
"revenu": 2600,
"satisfaction_client": 84
},
{
"ville": "Paris",
"mois": new Date(2024, 1, 1),
"produit": "Produit B",
"ventes": 145,
"revenu": 2900,
"satisfaction_client": 89
},
{
"ville": "Paris",
"mois": new Date(2024, 2, 1),
"produit": "Produit B",
"ventes": 120,
"revenu": 2400,
"satisfaction_client": 83
},
{
"ville": "Paris",
"mois": new Date(2024, 3, 1),
"produit": "Produit B",
"ventes": 160,
"revenu": 3200,
"satisfaction_client": 91
},
{
"ville": "Paris",
"mois": new Date(2024, 4, 1),
"produit": "Produit B",
"ventes": 150,
"revenu": 3000,
"satisfaction_client": 87
},
{
"ville": "Paris",
"mois": new Date(2024, 5, 1),
"produit": "Produit B",
"ventes": 140,
"revenu": 2800,
"satisfaction_client": 85
},
{
"ville": "Lyon",
"mois": new Date(2024, 0, 1),
"produit": "Produit B",
"ventes": 100,
"revenu": 2000,
"satisfaction_client": 86
},
{
"ville": "Lyon",
"mois": new Date(2024, 1, 1),
"produit": "Produit B",
"ventes": 115,
"revenu": 2300,
"satisfaction_client": 88
},
{
"ville": "Lyon",
"mois": new Date(2024, 2, 1),
"produit": "Produit B",
"ventes": 110,
"revenu": 2200,
"satisfaction_client": 85
},
{
"ville": "Lyon",
"mois": new Date(2024, 3, 1),
"produit": "Produit B",
"ventes": 130,
"revenu": 2600,
"satisfaction_client": 89
},
{
"ville": "Lyon",
"mois": new Date(2024, 4, 1),
"produit": "Produit B",
"ventes": 125,
"revenu": 2500,
"satisfaction_client": 87
},
{
"ville": "Lyon",
"mois": new Date(2024, 5, 1),
"produit": "Produit B",
"ventes": 135,
"revenu": 2700,
"satisfaction_client": 90
},
{
"ville": "Marseille",
"mois": new Date(2024, 0, 1),
"produit": "Produit B",
"ventes": 140,
"revenu": 2800,
"satisfaction_client": 83
},
{
"ville": "Marseille",
"mois": new Date(2024, 1, 1),
"produit": "Produit B",
"ventes": 155,
"revenu": 3100,
"satisfaction_client": 90
},
{
"ville": "Marseille",
"mois": new Date(2024, 2, 1),
"produit": "Produit B",
"ventes": 145,
"revenu": 2900,
"satisfaction_client": 88
},
{
"ville": "Marseille",
"mois": new Date(2024, 3, 1),
"produit": "Produit B",
"ventes": 165,
"revenu": 3300,
"satisfaction_client": 91
},
{
"ville": "Marseille",
"mois": new Date(2024, 4, 1),
"produit": "Produit B",
"ventes": 160,
"revenu": 3200,
"satisfaction_client": 89
},
{
"ville": "Marseille",
"mois": new Date(2024, 5, 1),
"produit": "Produit B",
"ventes": 155,
"revenu": 3100,
"satisfaction_client": 88
}
]
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.
