Help with a chart that depends on a drop-down list

Community Help
1

Hello,
I hope you’re well.
I need help with my code. I’d like to create a chart that depends on a drop-down list (country) and a 2nd drop-down list for ISO standards.
Depending on the country selected, I’d like a graph to be displayed showing the number of certificates per ISO standard.
To do this, I need to work on my database, which is made up of 4 columns (countries, standards, sectors of activity and certificates). In my database, the country is found as many times as there are sectors of activity. I would therefore need to write some code that would allow me to extract the number of certificates per ISO standard and for the country in question independently of the sector of activity.
I’ve already created the drop-down list of countries, and the value of the list has been assigned to the “CountrySelects” variable. I did exactly the same thing for the standards. Now I find this step doesn’t work:

(async () => {
// Attendre la sélection d’un pays dans la liste déroulante
let PaysSelectionne = await listeDeroulantePays;

// Filtrer les données pour le pays sélectionné
let filteredData = MasterFile.filter(d => d.Country === PaysSelectionne.value);

// Créer une base de données pour le pays sélectionné avec le nombre de certificats par norme ISO
let dataByNorm = {};
filteredData.forEach(d => {
    if (!dataByNorm[d.Norm]) {
        dataByNorm[d.Norm] = 0;
    }
    dataByNorm[d.Norm] += d.Certificates;
});

// Afficher la base de données pour le pays sélectionné
console.log(dataByNorm);

// Maintenant, utiliser dataByNorm pour créer un graphique

})();

Would anyone be willing to help me?

2

For interactive drop-downs, are you using Observable Inputs and have you checked the examples? Note that it’s nearly impossible to understand the issue based on a fragment of code. For example, await listeDeroulantePays suggests this is a Promise, not a reactive input (which would return a generator).

1 Like
3

I understand perfectly. So I’m going to put the whole code :

MasterFile = FileAttachment("Master File ISO - Copie.csv").csv()
uniqueCountryNames = [...new Set(MasterFile.map(entry => entry.Country))];
viewof listeDeroulantePays = Inputs.select(uniqueCountryNames, {label: "Select country"});
PaysSelectionne = await listeDeroulantePays;
uniqueNormNames = [...new Set(MasterFile.map(entry => entry.Norm))];
viewof listeDeroulanteNormes = Inputs.select(uniqueNormNames, {label: "Select country"});
NormeSelectionne = await listeDeroulanteNormes;
(async () => {
    // Attendre la sélection d'un pays dans la liste déroulante
    let PaysSelectionne = await listeDeroulantePays;
    
    // Filtrer les données pour le pays sélectionné
    let filteredData = MasterFile.filter(d => d.Country === PaysSelectionne.value);
    
    // Créer une base de données pour le pays sélectionné avec le nombre de certificats par norme ISO
    let dataByNorm = {};
    filteredData.forEach(d => {
        if (!dataByNorm[d.Norm]) {
            dataByNorm[d.Norm] = 0;
        }
        dataByNorm[d.Norm] += d.Certificates;
    });
    
    // Afficher la base de données pour le pays sélectionné
    console.log(dataByNorm);
    
    // Maintenant, utiliser dataByNorm pour créer un graphique
})();
4

can you share the notebook?

1 Like
5

Yes of course :slight_smile:

6

I’ve sent you a suggestion to group the data by country and then by norm.

1 Like
7

Hello,
Thank you very much for your suggestion.
But unfortunately the number of certificates is always 40, whatever the standard or country. This is due to the fact that there are 40 times the country in a row in my database, i.e. one line for each sector of activity. What I wanted to do was to find a code that would add up, for the country and standard in question, the number of certificates in the last column of my database.

Example:
123: Object {
Country: "Albania
Norm: “ISO 9001”
Sector: “Textiles and textile products”
Certificates: “9”
}
124: Object {
Country: “Albania”
Norm: “ISO 9001”
Sector: “Leather and leather products”
Certificates: “1”
}

For the ISO 9’001 standard (and if we assume that there are only these 2 sectors of activity and only this ISO standard), there should be 10 certificates (9+1) in the drop-down list for the ISO 9’001 standard and for the country “Albania”.

I don’t know if you see what I mean? :slight_smile:

Vanessa

8

You could use d3.rollup to make these computations inside each group.

1 Like
9

Thank you very much for your valuable advice. I’m really sorry because I’m new to this platform so I’m trying to learn on my own.
I’ve tried using D3. rollup but I always get this “undefined” error message. Can you explain to me what I’ve done wrong in my code?
It’s on the same link.
certificatesByCountryNormSector = d3.rollup(
MasterFile,(values) => d3.sum(values, (d) => parseInt(d[3])), (d) => [d[0], d[1], d[2]]
);

I’ve tried another way of doing things under the “another way of doing things” section but I still have the problem of the “undefined” error message.

10 
certificatesByCountryNormSector = d3.rollup(
  MasterFile,
  (values) => d3.sum(values, (d) => d.Certificates),
  (d) => d.Country,
  (d) => d.Norm
)
1 Like
11

it works!!! Many thanks

1 Like