Public
Edited
Apr 9, 2024
viewof num_countries_to_show = Inputs.range([5, 190], {
value: 5,
step: 1,
label: "Count:"
})
uniqueNormNames = [...new Set(MasterFile.map(entry => entry.Norm))];
viewof listeDeroulanteNormes = Inputs.select(uniqueNormNames, {label: "Select norm"});
NormeSelectionne = await listeDeroulanteNormes;
MasterFile = FileAttachment("Master File ISO - Copie@3.csv").csv()
max = d3.max(Array.from(certificatesByCountryNorm.values(), (o) => o.certificates))
country_name = d3.rollup(
MasterFile,
(a) => a[0],
(o) => o.Country
)
country_abbr = d3.rollup(
MasterFile,
(a) => a[0],
(o) => o.ISO3
)
certificatesByCountryNorm = d3.rollup(
MasterFile,
(values) => d3.sum(values, (d) => d.Certificates),
(d) => d.Country,
(d) => d.Norm,
)
barplot3 = {
let w = 650;
let h = 300;
let pad = 30;
let div = d3.create("div").style("position", "relative");
let svg = div.append("svg").attr("viewBox", [0, 0, w, h]);
let countries = Array.from(certificatesByCountryNorm.keys()).slice(0, num_countries_to_show);
let x_scale = d3
.scaleBand()
.domain(countries.map(country => country))
.range([pad, w - pad])
.padding(0.2);
let max = d3.max(countries.map(country => certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0));
let y_scale = d3
.scaleLinear()
.domain([0, max])
.range([h - pad, pad]);
svg
.selectAll("rect")
.data(countries)
.enter()
.append("rect")
.attr("x", (country) => x_scale(country))
.attr("y", (country) => y_scale(certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0))
.attr("width", x_scale.bandwidth())
.attr("height", (country) => h - y_scale(certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0) - pad)
.attr("fill", "steelblue")
.on("pointerenter", function () {
d3.select(this).attr("stroke", "black").attr("stroke-width", 2).raise();
})
.on("pointerleave", function () {
d3.select(this).attr("stroke", null).attr("stroke-width", null);
})
.each(function (country) {
let value = certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0;
tippy(this, {
theme: "light-border",
allowHTML: true,
content: `<span style="font-weight: bold">${country_name.get(country)}</span><br> ${value} certificates for ${NormeSelectionne}`
});
});
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(0,${h - pad})`)
.call(d3.axisBottom(x_scale).tickSize(0).tickFormat((d) => country_abbr.get(d)));
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(${pad}, 0)`)
.call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0));
div
.append("div")
.style("position", "absolute")
.style("right", "10px")
.style("bottom", "15px")
.style("font-size", "60%")
.text("Source: ISO Survey");
return div.node();
}
barplot = {
let w = 650;
let h = 300;
let pad = 30;
let div = d3.create("div").style("position", "relative");
let svg = div.append("svg").attr("viewBox", [0, 0, w, h]);
let countries = Array.from(certificatesByCountryNorm.keys()).slice(0, num_countries_to_show);
let x_scale = d3
.scaleBand()
.domain(countries)
.range([pad, w - pad])
.padding(0.2);
let max = d3.max(countries.map(country => certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0));
let y_scale = d3
.scaleLinear()
.domain([0, max])
.range([h - pad, pad]);
svg
.selectAll("rect")
.data(countries)
.enter()
.append("rect")
.attr("x", (country) => x_scale(country))
.attr("y", (country) => y_scale(certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0))
.attr("width", x_scale.bandwidth())
.attr("height", (country) => h - y_scale(certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0) - pad)
.attr("fill", "steelblue")
.on("pointerenter", function (event, country) {
d3.select(this).attr("stroke", "black").attr("stroke-width", 2).raise();
let value = certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0;
let countryFullName = country_abbr.get(country);
let countryName = countryFullName ? countryFullName.name : "Unknown";
tippy(this, {
theme: "light-border",
allowHTML: true,
content: `<span style="font-weight: bold">${countryName}</span><br> ${value} certificates for ${NormeSelectionne}`
});
})
.on("pointerleave", function () {
d3.select(this).attr("stroke", null).attr("stroke-width", null);
tippy.hideAll();
});
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(0,${h - pad})`)
.call(d3.axisBottom(x_scale).tickSize(0).tickFormat((d) => {
let countryFullName = country_abbr.get(d);
return countryFullName ? countryFullName.name : "Unknown";
}));
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(${pad}, 0)`)
.call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0));
div
.append("div")
.style("position", "absolute")
.style("right", "10px")
.style("bottom", "15px")
.style("font-size", "60%")
.text("Source: ISO Survey");
return div.node();
}
barplot4 = {
let w = 650;
let h = 300;
let pad = 30;
let div = d3.create("div").style("position", "relative");
let svg = div.append("svg").attr("viewBox", [0, 0, w, h]);
// Récupérer tous les pays de certificatesByCountryNorm
let countries = Array.from(certificatesByCountryNorm.keys()).slice(0, num_countries_to_show);
// Créer une Map pour stocker la correspondance entre les noms complets et les abréviations des pays
let countryAbbrMap = new Map();
countries.forEach(country => {
let countryAbbr = country_abbr.get(country);
if (countryAbbr) {
countryAbbrMap.set(country, countryAbbr.name); // Assurez-vous que 'name' correspond à la propriété où se trouve l'abréviation
}
});
let x_scale = d3
.scaleBand()
.domain(countries)
.range([pad, w - pad])
.padding(0.2);
let max = d3.max(countries.map(country => certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0));
let y_scale = d3
.scaleLinear()
.domain([0, max])
.range([h - pad, pad]);
svg
.selectAll("rect")
.data(countries)
.enter()
.append("rect")
.attr("x", (country) => x_scale(country))
.attr("y", (country) => y_scale(certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0))
.attr("width", x_scale.bandwidth())
.attr("height", (country) => h - y_scale(certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0) - pad)
.attr("fill", "steelblue")
.on("pointerenter", function (event, country) {
d3.select(this).attr("stroke", "black").attr("stroke-width", 2).raise();
let value = certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0;
let abbr = countryAbbrMap.get(country);
tippy(this, {
theme: "light-border",
allowHTML: true,
content: `<span style="font-weight: bold">${abbr}</span><br> ${value} certificates for ${NormeSelectionne}`
});
})
.on("pointerleave", function () {
d3.select(this).attr("stroke", null).attr("stroke-width", null);
tippy.hideAll();
});
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(0,${h - pad})`)
.call(d3.axisBottom(x_scale).tickSize(0).tickFormat((d) => countryAbbrMap.get(d)));
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(${pad}, 0)`)
.call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0));
div
.append("div")
.style("position", "absolute")
.style("right", "10px")
.style("bottom", "15px")
.style("font-size", "60%")
.text("Source: ISO Survey");
return div.node();
}
barplot5 = {
let w = 650;
let h = 300;
let pad = 30;
let div = d3.create("div").style("position", "relative");
let svg = div.append("svg").attr("viewBox", [0, 0, w, h]);
let tableau_temporaire = Array.from(certificatesByCountryNorm)
let pays_normes = {}
tableau_temporaire.forEach((pays) => {
pays_normes[pays[0]] = {}
for (const normes of pays[1]) {
pays_normes[pays[0]][normes[0]] = normes[1]
}
})
let pays_normes_tries = []
for (const [pays, normes] of Object.entries(pays_normes)) {
if (NormeSelectionne in normes) {
pays_normes_tries.push({
pays: pays,
[NormeSelectionne]: normes[NormeSelectionne]
})
} else {
pays_normes_tries.push({
pays: pays,
[NormeSelectionne]: 0
})
}
}
pays_normes_tries.sort((a, b) => b[NormeSelectionne] - a[NormeSelectionne])
// Récupérer tous les pays de certificatesByCountryNorm
let countries = pays_normes_tries.slice(0, num_countries_to_show);
console.log(countries)
// Récupérer toutes les abréviations ISO3 des pays
let iso3Countries = MasterFile.map(entry => entry.ISO3);
iso3Countries = [... new Set(iso3Countries)]
// Créer une Map pour stocker la correspondance entre les abréviations ISO3 et les noms complets des pays
let countryNameMap = new Map();
MasterFile.forEach(entry => {
countryNameMap.set(entry.ISO3, entry.Country);
});
let x_scale = d3
.scaleBand()
.domain(countries.map(d => d.pays))
.range([pad, w - pad])
.padding(0.2);
// Calculer le nombre maximal de certificats pour la norme sélectionnée
let max = d3.max(countries.map(d => d[NormeSelectionne]));
console.log(max)
let y_scale = d3
.scaleLinear()
.domain([0, max])
.range([h - pad, pad]);
svg
.selectAll("rect")
.data(countries)
.enter()
.append("rect")
.attr("x", (entry) => x_scale(entry.pays))
.attr("y", (entry) => y_scale(entry[NormeSelectionne]))
.attr("width", x_scale.bandwidth())
.attr("height", (entry) => h - y_scale(entry[NormeSelectionne]) - pad)
.attr("fill", "steelblue")
.on("pointerenter", function (event, entry) {
d3.select(this).attr("stroke", "black").attr("stroke-width", 2).raise();
let abbr = entry.ISO3;
let value = entry[NormeSelectionne];
tippy(this, {
theme: "light-border",
allowHTML: true,
content: `<span style="font-weight: bold">${entry.pays}</span><br> ${value} certificates for ${NormeSelectionne}`
});
})
.on("pointerleave", function () {
d3.select(this).attr("stroke", null).attr("stroke-width", null);
tippy.hideAll();
});
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(0,${h - pad})`)
.call(d3.axisBottom(x_scale).tickSize(0).tickFormat((d) => country_name.get(d).ISO3));
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(${pad}, 0)`)
.call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0));
div
.append("div")
.style("position", "absolute")
.style("right", "10px")
.style("bottom", "15px")
.style("font-size", "60%")
.text("Source: ISO Survey");
return div.node();
}
barplot31 = {
let w = 650;
let h = 300;
let pad = 45;
let div = d3.create("div").style("position", "relative");
let svg = div.append("svg").attr("viewBox", [0, 0, w, h]);
let tableau_temporaire = Array.from(certificatesByCountryNorm)
let pays_normes = {}
tableau_temporaire.forEach((pays) => {
pays_normes[pays[0]] = {}
for (const normes of pays[1]) {
pays_normes[pays[0]][normes[0]] = normes[1]
}
})
let pays_normes_tries = []
for (const [pays, normes] of Object.entries(pays_normes)) {
if (NormeSelectionne in normes) {
pays_normes_tries.push({
pays: pays,
[NormeSelectionne]: normes[NormeSelectionne]
})
} else {
pays_normes_tries.push({
pays: pays,
[NormeSelectionne]: 0
})
}
}
pays_normes_tries.sort((a, b) => b[NormeSelectionne] - a[NormeSelectionne])
// Récupérer tous les pays de certificatesByCountryNorm
let countries = pays_normes_tries.slice(0, num_countries_to_show);
console.log(countries)
// Récupérer toutes les abréviations ISO3 des pays
let iso3Countries = MasterFile.map(entry => entry.ISO3);
iso3Countries = [... new Set(iso3Countries)]
// Créer une Map pour stocker la correspondance entre les abréviations ISO3 et les noms complets des pays
let countryNameMap = new Map();
MasterFile.forEach(entry => {
countryNameMap.set(entry.ISO3, entry.Country);
});
let x_scale = d3
.scaleBand()
.domain(countries.map(d => d.pays))
.range([pad, w - pad])
.padding(0.2);
// Calculer le nombre maximal de certificats pour la norme sélectionnée
let max = d3.max(countries.map(d => d[NormeSelectionne]));
console.log(max)
let y_scale = d3
.scaleLinear()
.domain([0, max])
.range([h - pad, pad]);
svg
.selectAll("rect")
.data(countries)
.enter()
.append("rect")
.attr("x", (entry) => x_scale(entry.pays))
.attr("y", (entry) => y_scale(entry[NormeSelectionne]))
.attr("width", x_scale.bandwidth())
.attr("height", (entry) => h - y_scale(entry[NormeSelectionne]) - pad)
.attr("fill", "steelblue")
.on("pointerenter", function (event, entry) {
d3.select(this).attr("stroke", "black").attr("stroke-width", 2).raise();
let abbr = entry.ISO3;
let value = entry[NormeSelectionne];
tippy(this, {
theme: "light-border",
allowHTML: true,
content: `<span style="font-weight: bold">${entry.pays}</span><br> ${value} certificates for ${NormeSelectionne}`
});
})
.on("pointerleave", function () {
d3.select(this).attr("stroke", null).attr("stroke-width", null);
tippy.hideAll();
});
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(0,${h - pad})`)
.call(d3.axisBottom(x_scale).tickSize(0).tickFormat((d) => ""));
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(${pad}, 0)`)
.call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0));
div
.append("div")
.style("position", "absolute")
.style("right", "10px")
.style("bottom", "15px")
.style("font-size", "60%")
.text("Source: ISO Survey");
return div.node();
}
barplot7 = {
// Définir la fonction pour créer le graphique
function createBarPlot(num_countries_to_show) {
// Définir les dimensions du graphique
let w = 650;
let h = 300;
let pad = 30;
// Sélectionner la div parent pour le graphique
let div = d3.create("div").style("position", "relative");
// Créer le conteneur SVG pour le graphique
let svg = div.append("svg").attr("viewBox", [0, 0, w, h]);
// Récupérer les données pour les pays à afficher
let countriesData = MasterFile.slice(0, num_countries_to_show);
// Créer l'échelle pour l'axe des X
let x_scale = d3
.scaleBand()
.domain(countriesData.map(entry => entry.ISO3))
.range([pad, w - pad])
.padding(0.2);
// Calculer le nombre maximal de certificats pour la norme sélectionnée
let max = d3.max(countriesData.map(entry => +entry.Certificates));
// Créer l'échelle pour l'axe des Y
let y_scale = d3
.scaleLinear()
.domain([0, max])
.range([h - pad, pad]);
// Créer les barres du graphique
svg
.selectAll("rect")
.data(countriesData)
.enter()
.append("rect")
.attr("x", (entry) => x_scale(entry.ISO3))
.attr("y", (entry) => y_scale(+entry.Certificates))
.attr("width", x_scale.bandwidth())
.attr("height", (entry) => h - y_scale(+entry.Certificates) - pad)
.attr("fill", "steelblue")
.on("pointerenter", function (event, entry) {
d3.select(this).attr("stroke", "black").attr("stroke-width", 2).raise();
let abbr = entry.ISO3;
let value = entry.Certificates;
tippy(this, {
theme: "light-border",
allowHTML: true,
content: `<span style="font-weight: bold">${entry.Country}</span><br> ${value} certificates for ${NormeSelectionne}`
});
})
.on("pointerleave", function () {
d3.select(this).attr("stroke", null).attr("stroke-width", null);
tippy.hideAll();
});
// Créer l'axe des X
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(0,${h - pad})`)
.call(d3.axisBottom(x_scale).tickSize(0).tickFormat((d) => d));
// Créer l'axe des Y
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(${pad}, 0)`)
.call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0));
// Ajouter une légende
div
.append("div")
.style("position", "absolute")
.style("right", "10px")
.style("bottom", "15px")
.style("font-size", "60%")
.text("Source: ISO Survey");
// Retourner le nœud de la div parent pour le graphique
return div.node();
}
// Appeler la fonction avec la valeur initiale de num_countries_to_show
return createBarPlot(num_countries_to_show);
}
Plot.plot({
x: {
tickFormat:
// replace with your own function to get abbriviation
function country_abbr(ISO3) {
return ISO3.slice(0, 3);
},
tickRotate: 45
},
}
{
let countryAbbrMap = new Map();
certificatesByCountryNorm.forEach(entry => {
countryAbbrMap.set(entry.name, entry.ISO3);
});
}
barplot12335334 = {
let w = 650;
let h = 300;
let pad = 30;
let div = d3.create("div").style("position", "relative");
let svg = div.append("svg").attr("viewBox", [0, 0, w, h]);
// Récupérer tous les pays de certificatesByCountryNorm
let countries = Array.from(certificatesByCountryNorm.keys()).slice(0, num_countries_to_show);
// Créer une Map pour stocker la correspondance entre les noms complets et les abréviations des pays
let countryAbbrMap = new Map();
countries.forEach(country => {
let countryAbbr = country_abbr.get(country);
if (countryAbbr) {
countryAbbrMap.set(country, countryAbbr.iso3); // Assurez-vous que 'iso3' correspond à la propriété où se trouve l'abréviation
}
});
let x_scale = d3
.scaleBand()
.domain(countries)
.range([pad, w - pad])
.padding(0.2);
let max = d3.max(countries.map(country => certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0));
let y_scale = d3
.scaleLinear()
.domain([0, max])
.range([h - pad, pad]);
svg
.selectAll("rect")
.data(countries)
.enter()
.append("rect")
.attr("x", (country) => x_scale(country))
.attr("y", (country) => y_scale(certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0))
.attr("width", x_scale.bandwidth())
.attr("height", (country) => h - y_scale(certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0) - pad)
.attr("fill", "steelblue")
.on("pointerenter", function (event, country) {
d3.select(this).attr("stroke", "black").attr("stroke-width", 2).raise();
let value = certificatesByCountryNorm.get(country).get(NormeSelectionne) || 0;
let abbr = countryAbbrMap.get(country);
tippy(this, {
theme: "light-border",
allowHTML: true,
content: `<span style="font-weight: bold">${abbr}</span><br> ${value} certificates for ${NormeSelectionne}`
});
})
.on("pointerleave", function () {
d3.select(this).attr("stroke", null).attr("stroke-width", null);
tippy.hideAll();
});
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(0,${h - pad})`)
.call(d3.axisBottom(x_scale).tickSize(0).tickFormat((d) => countryAbbrMap.get(d)));
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(${pad}, 0)`)
.call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0));
div
.append("div")
.style("position", "absolute")
.style("right", "10px")
.style("bottom", "15px")
.style("font-size", "60%")
.text("Source: ISO Survey");
return div.node();
}
barplot123 = {
// Définir la fonction pour créer le graphique
function createBarPlot(num_countries_to_show) {
// Définir les dimensions du graphique
let w = 650;
let h = 300;
let pad = 30;
// Sélectionner la div parent pour le graphique
let div = d3.create("div").style("position", "relative");
// Créer le conteneur SVG pour le graphique
let svg = div.append("svg").attr("viewBox", [0, 0, w, h]);
// Récupérer les données pour les pays à afficher
let countriesData = MasterFile.slice(0, num_countries_to_show);
// Créer l'échelle pour l'axe des X
let x_scale = d3
.scaleBand()
.domain(countriesData.map(entry => entry.ISO3))
.range([pad, w - pad])
.padding(0.2);
// Calculer le nombre maximal de certificats pour la norme sélectionnée
let max = d3.max(countriesData.map(entry => +entry.Certificates));
// Créer l'échelle pour l'axe des Y
let y_scale = d3
.scaleLinear()
.domain([0, max])
.range([h - pad, pad]);
// Créer les barres du graphique
svg
.selectAll("rect")
.data(countriesData)
.enter()
.append("rect")
.attr("x", (entry) => x_scale(entry.ISO3))
.attr("y", (entry) => y_scale(+entry.Certificates))
.attr("width", x_scale.bandwidth())
.attr("height", (entry) => h - y_scale(+entry.Certificates) - pad)
.attr("fill", "steelblue")
.on("pointerenter", function (event, entry) {
d3.select(this).attr("stroke", "black").attr("stroke-width", 2).raise();
let abbr = entry.ISO3;
let value = entry.Certificates;
tippy(this, {
theme: "light-border",
allowHTML: true,
content: `<span style="font-weight: bold">${entry.Country}</span><br> ${value} certificates for ${NormeSelectionne}`
});
})
.on("pointerleave", function () {
d3.select(this).attr("stroke", null).attr("stroke-width", null);
tippy.hideAll();
});
// Créer l'axe des X
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(0,${h - pad})`)
.call(d3.axisBottom(x_scale).tickSize(0).tickFormat((d) => d));
// Créer l'axe des Y
svg
.append("g")
.style("font-size", "8px")
.attr("transform", `translate(${pad}, 0)`)
.call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0));
// Ajouter une légende
div
.append("div")
.style("position", "absolute")
.style("right", "10px")
.style("bottom", "15px")
.style("font-size", "60%")
.text("Source: ISO Survey");
// Retourner le nœud de la div parent pour le graphique
return div.node();
}
// Appeler la fonction avec la valeur initiale de num_countries_to_show
return createBarPlot(num_countries_to_show);
}
require.resolve(`tippy.js/themes/light-border.css`)
tippy = require("tippy.js")
countriess = FileAttachment("countries-2 (1)@1.json").json()
countries = {
let countries = await FileAttachment("countries-2 (1)@2.json").json();
return topojson.feature(countries, countries.objects.countries);
}
function get_cert_count(countryName, standardCode) {
// Vérifie si le pays existe dans les données
if (certificatesByCountryNorm.has(countryName)) {
let countryData = certificatesByCountryNorm.get(countryName);
// Vérifie si la norme existe pour ce pays
if (countryData.has(standardCode)) {
return countryData.get(standardCode);
} else {
// Si la norme n'est pas trouvée, retourne -1 ou une autre valeur appropriée
return -1;
}
} else {
// Si le pays n'est pas trouvé, retourne -1 ou une autre valeur appropriée
return -1;
}
}
tworldwide_certificate_map1 = {
let w = 900;
let h = 500;
let cnt = 0;
let div = d3.create("div").style("position", "relative");
let svg = div
.append("svg")
.attr("viewBox", [0, 0, w, h])
.style("max-width", "1000px");
let proj = d3.geoEqualEarth().fitSize([w, h], { type: "Sphere" });
let path = d3.geoPath().projection(proj);
let zoom = 1;
let map = svg.append("g");
map
.append("path")
.attr("d", path({ type: "Sphere" }))
.attr("stroke", "black")
.attr("fill", d3.color("lightblue").brighter(0.3));
let country_group = map
.append("g")
.attr("stroke", "#666")
.attr("stroke-width", 1 / zoom);
country_group
.selectAll("path.state")
.data(countries.features)
.join("path")
.attr("d", path)
.attr("stroke", "#666")
.attr("fill", function (c) {
let certCount = get_cert_count(c, "ISO 9001"); // Vous pouvez ajuster ici pour obtenir le nombre de certificats pour une norme spécifique
if (certCount >= 0) {
// Ajoutez ici la logique de coloration en fonction du nombre de certificats
} else {
return "white";
}
})
.on("pointerenter", function (d) {
let certCount = get_cert_count(d, "ISO 9001"); // Obtenez le nombre de certificats pour la norme sélectionnée
let countryName = d.properties.ADMIN;
let tooltipContent;
if (certCount >= 0) {
tooltipContent = `<span style="font-weight: bold">${countryName}</span><br> Certificats ISO 9001 : ${certCount}`;
} else {
tooltipContent = `<span style="font-weight: bold">${countryName}</span><br> Pas de données disponibles`;
}
// Ajoutez ici le code pour afficher la tooltip avec le contenu approprié
})
.on("pointerleave", function () {
// Ajoutez ici le code pour cacher la tooltip lorsque le curseur quitte le pays
});
// Code pour gérer le zoom de la carte
// Code pour ajouter la source de données
return div.node();
}
tworldwide_certificate_map = {
let w = 900;
let h = 500;
let cnt = 0;
let div = d3.create("div").style("position", "relative");
let svg = div
.append("svg")
.attr("viewBox", [0, 0, w, h])
.style("max-width", "1000px");
let proj = d3.geoEqualEarth().fitSize([w, h], { type: "Sphere" });
let path = d3.geoPath().projection(proj);
let zoom = 1;
let map = svg.append("g");
map
.append("path")
.attr("d", path({ type: "Sphere" }))
.attr("stroke", "black")
.attr("fill", d3.color("lightblue").brighter(0.3));
let country_group = map
.append("g")
.attr("stroke", "#666")
.attr("stroke-width", 1 / zoom);
country_group
.selectAll("path.state")
.data(countries.features)
.join("path")
.attr("d", path)
.attr("stroke", "#666")
.attr("fill", function (d) {
let certCount = get_cert_count(d, "ISO 9001"); // Remplacez "ISO 9001" par la norme souhaitée
// Ajoutez ici la logique de coloration en fonction du nombre de certificats
})
.on("mouseenter", function (d) {
let countryName = d.properties.ADMIN;
d3.select(this).attr("stroke", "black").attr("stroke-width", 2 / zoom).raise();
d3.select(this).append("title").text(countryName); // Affiche le nom du pays lors du survol
})
.on("mouseleave", function () {
d3.select(this).attr("stroke", null).attr("stroke-width", null);
d3.select(this).selectAll("title").remove(); // Supprime le nom du pays lorsque le curseur quitte le pays
});
svg.call(
d3
.zoom()
.extent([
[0, 0],
[w, h]
])
.translateExtent([
[0, 0],
[w, h]
])
.scaleExtent
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.
