Public
Edited
Feb 27
9 forks
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const myViz = d3.create("svg")
.attr("width", 800)
.attr("heigt", 400)

myViz
.append("circle")
.attr("r", 50)
.attr("cx", 50)
.attr("cy", 50)
.attr("fill", "red")

// Specific to observable
yield myViz.node()
}
Insert cell
Insert cell
Insert cell

{
// Crée un élément SVG avec une largeur de 200 et une hauteur de 200
const myViz = d3.create("svg").attr("width", 200).attr("height", 200);

// Ajoute un cercle à l'élément SVG
myViz
.append("circle")
.attr("r", 50) // Rayon du cercle
.attr("cx", 50) // Position x du centre du cercle
.attr("cy", 50) // Position y du centre du cercle
.attr("fill", "red"); // Couleur de remplissage du cercle

// Ajoute un gestionnaire d'événement pour le survol de la souris (mouseover) sur le cercle
myViz.select("circle")
.on("mouseover", function() {
d3.select(this).attr("fill", "green"); // Change la couleur du cercle en vert
});

// Ajoute un gestionnaire d'événement pour le déplacement de la souris hors du cercle (mouseout)
myViz.select("circle")
.on("mouseout", function() {
d3.select(this).attr("fill", "red"); // Revert la couleur du cercle à rouge
});

// Spécifique à Observable : Renvoie le nœud SVG pour le rendu
yield myViz.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ch@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
data = FileAttachment("ch@2.csv").csv()
Insert cell
Insert cell
{
// Filtre les 5 villes les plus peuplées
const sortedCities = data.sort((a, b) => b.population - a.population);
const top5Cities = sortedCities.slice(0, 5);

// Crée un élément SVG avec une largeur de 100% et une hauteur fixe de 400
const monSvg = d3.create("svg")
.attr("width", "100%")
.attr("height", 400);

// Crée des cercles pour représenter les 5 villes les plus peuplées
const circles = monSvg.selectAll("circle")
.data(top5Cities)
.join(enter => enter.append("circle")
.attr("cx", (d, i) => (i + 1) * 130) // Position x basée sur l'index
.attr("cy", 200) // Position y fixe
.attr("r", d => Math.sqrt(d.population) / 10) // Taille proportionnelle à la racine carrée de la population
.attr("fill", "steelblue")); // Couleur de remplissage des cercles

// Crée des étiquettes de texte pour les noms des villes
const labels = monSvg.selectAll("text")
.data(top5Cities)
.enter().append("text")
.attr("x", (d, i) => (i + 1) * 130) // Position x basée sur l'index
.attr("y", 300) // Position y fixe
.text(d => d.city) // Texte basé sur le nom de la ville
.attr("text-anchor", "middle"); // Ancrage du texte au milieu

// Spécifique à Observable : Renvoie le nœud SVG pour le rendu
yield monSvg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
getRandomCities = function getRandomCities(n) {

const sortedCities = data.sort((a,b) => b.population - a.population).slice(0,20);
// Mélanger le tableau de manière aléatoire
const melange = sortedCities.sort(() => Math.random() - 0.5);

// Sélectionner les n premiers éléments du tableau mélangé
return melange.slice(0, n).sort((a,b) => b.population - a.population);
}
Insert cell
{
// Crée un élément SVG avec une largeur de 100 % et une hauteur fixe de 400
const monSvg = d3.create("svg")
.attr("width", "100%")
.attr("height", 400);

// Met à jour continuellement la visualisation
while (true) {
// Obtient un tableau des 5 villes avec les populations les plus élevées, triées par ordre décroissant
const sortedCities = getRandomCities(5).sort((a, b) => b.population - a.population);

// Met à jour les cercles en fonction des données des villes triées
const circles = monSvg.selectAll("circle")
.data(sortedCities, d => d.city)
.join(
// Sélection d'entrée : Ajoute des cercles pour les nouveaux points de données
enter => enter.append("circle")
.attr("cx", (d, i) => (i + 1) * 130) // Définit la position x en fonction de l'index
.attr("cy", 200) // Définit la position y
.attr("r", d => Math.sqrt(d.population) / 10) // Définit le rayon en fonction de la population
.attr("fill", "steelblue"), // Définit la couleur de remplissage
// Sélection de mise à jour : Met à jour les positions et les attributs des cercles existants
update => update
.attr("cx", (d, i) => (i + 1) * 130) // Met à jour la position x
.attr("fill", "yellow"), // Change la couleur de remplissage pour les cercles mis à jour
// Sélection de sortie : Supprime les cercles qui n'ont plus de données correspondantes
exit => exit.remove()
);

// Met à jour les étiquettes de texte en fonction des données des villes triées
const labels = monSvg.selectAll("text")
.data(sortedCities, d => d.city)
.join(
// Sélection d'entrée : Ajoute des étiquettes de texte pour les nouveaux points de données
enter => enter.append("text")
.attr("x", (d, i) => (i + 1) * 130) // Définit la position x en fonction de l'index
.attr("y", 300) // Définit la position y
.text(d => d.city) // Définit le contenu du texte en fonction du nom de la ville
.attr("text-anchor", "middle"), // Définit l'ancrage du texte au milieu
// Sélection de mise à jour : Met à jour les positions des étiquettes de texte existantes
update => update.attr("x", (d, i) => (i + 1) * 130), // Met à jour la position x
// Sélection de sortie : Supprime les étiquettes de texte qui n'ont plus de données correspondantes
exit => exit.remove()
);

// Spécifique à Observable : Renvoie le nœud SVG pour le rendu
yield monSvg.node();

// Attend 2000 millisecondes avant la prochaine itération
await Promises.tick(3000);
}
}
Insert cell
Insert cell
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"

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