Public
Edited
Mar 13
10 forks
Insert cell
Insert cell
Insert cell
Insert cell
dataCities = FileAttachment("ch-2.csv").csv()
Insert cell
{
// Filtre les 5 villes les plus peuplées
const sortedCities = dataCities.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 => d.population) // Taille proportionnelle à la valeur 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("transform", (d,i) => `rotate(45, ${(i + 1) * 130},300)`)
.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
url = "https://api.sharedmobility.ch/v1/sharedmobility/identify?Geometry=6.6472569371047445,46.78131296236756&Tolerance=3000&offset=0&geometryFormat=esrijson"
Insert cell
dataMobility = d3.json(url).then(function(data) {
return data.map(d => {
return {
"lng" : d.geometry.x,
"lat" : d.geometry.y,
"station_name": d.attributes.station_name,
"provider_name" : d.attributes.provider_name,
}
})
})
Insert cell
Insert cell
dataCount = dataMobility.reduce((accumulateur, current) => {
const partenaireExistant = accumulateur.find(d => d.provider_name === current.provider_name);

if (partenaireExistant) {
partenaireExistant.count += 1;
} else {
accumulateur.push({ provider_name : current.provider_name, count : 1})
}
return accumulateur;
}, []
);
Insert cell
Insert cell
{
// Marges et translations
const margin = { top : 10, right: 40, bottom: 30, left: 40 },
width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;


// Ajouter le svg
const monSvg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)

// Création du groupe qui va contenir tous les éléments graphiques
const graphiques = monSvg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);

// Création des domaines pour les deux axes
const domainX = new Set(dataCount.map(d => d.provider_name));
const domainY = [0, d3.max(dataCount, d => d.count)];



// Echelle axe X
const xScale = d3.scaleBand()
.domain(domainX)
.range([0, width])
.paddingInner(0.5); // Distance entre les rectangles. Valeur entre 0 et 1

// Echelle axe Y
const yScale = d3.scaleLinear()
.domain(domainY)
.range([height, 0])

// Dessiner les rectangles
graphiques
.selectAll('rect')
.data(dataCount)
.join(enter => enter.append('rect')
.attr('x', d => xScale(d.provider_name)) // Échelle discrète (scaleBand)
.attr('y', d => yScale(d.count) ) // Échelle linéaire (scaleLinear)
.attr('width', xScale.bandwidth()) // Largeur du rectangle selon la distance entre les rectangles (paddingInner)
.attr('height', d => yScale(0) - yScale(d.count))); // Echelle linéaire (scaleLinear)

// Dessiner les axes
const axisBottom = d3.axisBottom(xScale)


const xAxis = graphiques.append('g')
.attr("transform", `translate(0,${height})`)
.call(axisBottom)



yield monSvg.node();
}
Insert cell
Insert cell
Insert cell
import {heading} from "@ee2dev/formatting-in-observable"
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