Public
Edited
Mar 6
12 forks
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = 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
{

}
Insert cell
Insert cell
Insert cell
countPartners = data.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
Insert cell
Insert cell
{
// Trions les données en ordre croissant, et prénons les 10 villes les plus peuplées
const sortedPartners = countPartners.sort((a,b) => a.count - b.count)

// Définissons la taille du SVG
const width = "100%";
const height = 600;
const marginBottom = 70;

// Créons un élément SVG avec avec la largeur et la longuer fixées ci-dessus
const monSvg = d3.create("svg")
.attr("width", width)
.attr("height", height);

// Construisons le diagramme en bâton
const barChart = monSvg
.selectAll("rect")
.data(sortedPartners)
.join(enter => enter
.append("rect")
.attr("x", (d, i) => (i + 1) * 120)
.attr("y", d => height - d.count * 10 - marginBottom)
.attr("width", 80)
.attr("height", d => d.count * 10));

// Rajoutons les étiquettes des partenaires
const labels = monSvg.selectAll(".partners")
.data(sortedPartners)
.join(enter => enter.append("text")
.attr("class", "partners")
.attr("x", (d, i) => (i + 1) * 120 + 40)
.attr("y", d => height - d.count * 10 - marginBottom - 10)
.style("font-size", '12px')
.text(d => d.provider_name)
.attr("text-anchor", "middle"))
// Spécifique à Observable : Renvoie le nœud SVG pour le rendu
yield monSvg.node();
}
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