MAP à fond la forme !
const films = [
{ titre: "Inception", genre: "SF", note: 9, annee: 2010 },
{ titre: "Titanic", genre: "Romance", note: 8, annee: 1997 },
{ titre: "Interstellar", genre: "SF", note: 10, annee: 2014 },
{ titre: "Le Roi Lion", genre: "Animation", note: 9, annee: 1994 },
{ titre: "Avatar", genre: "SF", note: 7, annee: 2009 },
{ titre: "Gladiator", genre: "Action", note: 8, annee: 2000 },
{ titre: "Matrix", genre: "SF", note: 9, annee: 1999 },
{ titre: "Blade Runner 2049", genre: "SF", note: 8, annee: 2017 },
{ titre: "La La Land", genre: "Romance", note: 8, annee: 2016 },
{ titre: "Shrek", genre: "Animation", note: 8, annee: 2001 },
{ titre: "Dune", genre: "SF", note: 8, annee: 2021 },
{ titre: "Forrest Gump", genre: "Romance", note: 10, annee: 1994 },
{ titre: "Mad Max: Fury Road", genre: "Action", note: 9, annee: 2015 },
{ titre: "Seven", genre: "Thriller", note: 9, annee: 1995 },
];
const categoriser = (rate) => {
if (rate <= 0.072) return "VeryRare"; // 1 / 15
if (rate <= 0.15) return "Rare"; // 2 / 15
if (rate <= 0.25) return "Medium"; // 3–4 / 15
if (rate <= 0.35) return "Frequent"; // 5 / 15
return "Dominant"; // 6+ / 15
};
function analyzeByKey(items, key) {
const total = items.length;
const occur = Object.groupBy(items, (item) => item[key]);
const map = new Map();
for (const [value, list] of Object.entries(occur)) {
const count = list.length;
const rate = Number((count / total).toFixed(4));
map.set(value, {
value,
count,
rate,
category: categoriser(rate),
items: list,
});
}
return [...map.values()];
}
const data = analyzeByKey(films, "genre");
console.log(data);
//
{
value: 'SF',
count: 6,
rate: 0.4286,
category: 'Dominant',
items: [ [Object], [Object], [Object], [Object], [Object], [Object] ]
},
{
value: 'Romance',
count: 3,
rate: 0.2143,
category: 'Medium',
...
Stage en entreprise how-to !
👑Je viens de vous rediger une aide pour la conduite de votre projet !
→ lien
Dans quelque temps, vous serez force de propositions pour proposer d'autres solutions
🛟code
👑https://github.com/dupontdenis/proposition-D3.git
Voici le code à injectez dans la cosnole de https://www.cinematheque.fr/video/1469.html le code doit ajouter la bibliothèque D3 !
https://gist.github.com/dupontdenis/feceb799636e48651f21b41565d6daef
Saison 2 : Magie de JS dans le DOM
Exemple 1
Dans la console d'un site Exemple collez le code suivant !
const allTag = (rootElement) => {
let tags = [],
counts = {};
const explore = (element) => {
for (const child of element.children) {
tags.push(child.nodeName);
explore(child);
}
};
explore(rootElement);
const getWordCnt = (arr) => {
return arr.reduce((acc, tag) => {
acc[tag] = (acc[tag] || 0) + 1;
return acc;
}, {});
};
counts = getWordCnt(tags);
const sortCounts = (obj) => {
let sortedEntries = Object.entries(obj).sort((a, b) => b[1] - a[1]);
// return Object.fromEntries(sortedEntries);
return sortedEntries
};
return sortCounts(counts);
};
const tagCounts = allTag(document.body);
const sortedKeys = tagCounts.map((entry) => entry[0].toLowerCase());
console.log(sortedKeys);
// Create a table for displaying results
const createTable = (data) => {
let table = document.createElement("table");
table.style.border = "1px solid black";
table.style.borderCollapse = "collapse";
table.style.width = "50%";
let headerRow = table.insertRow();
let tagHeader = headerRow.insertCell(0);
let countHeader = headerRow.insertCell(1);
tagHeader.textContent = "Tag Name";
countHeader.textContent = "Count";
tagHeader.style.border = countHeader.style.border = "1px solid black";
tagHeader.style.padding = countHeader.style.padding = "5px";
tagHeader.style.fontWeight = "bold";
countHeader.style.fontWeight = "bold";
for (let [tag, count] of (data)) {
let row = table.insertRow();
let tagCell = row.insertCell(0);
let countCell = row.insertCell(1);
tagCell.textContent = tag;
countCell.textContent = count;
tagCell.style.border = countCell.style.border = "1px solid black";
tagCell.style.padding = countCell.style.padding = "5px";
}
// document.body.appendChild(table);
document.body.insertAdjacentHTML("afterbegin", table.outerHTML);
};
// Display the table
createTable(tagCounts);
Exemple 2
HTML
<div id="wrapper">
<div data-tabname="Onglet 1">Contenu 1</div>
<div data-tabname="Onglet 2">Contenu 2</div>
<div data-tabname="Onglet 3">Contenu 3</div>
</div>
Magie du JS
Création des boutons
Gestion des événements
Contenu 2
End of saison 1
Special event
Préparation à l'examen : PizzaJS
Function Style, Method Style
The main difference between the function style and the use of the `filter() or map()` method lies
in the programming paradigm they represent.
🥇**Function Style**: The function style represents the procedural programming paradigm.
🎖️ **Method Style**: The method style represents the functional programming paradigm.
const languageSkills = [
{
language: "Spanish",
skill: "Professional Proficiency",
},
{
language: "English",
skill: "Professional Working Proficiency",
},
{
language: "German",
skill: "Professional Proficiency",
},
];
const output = languageSkills.reduce((map, { language, skill }) => {
if (map.has(skill)) map.get(skill).push(language);
else map.set(skill, [language]);
return map;
}, new Map());
const nativeResult = Object.groupBy(languageSkills, (item) => item.skill);
DS : 30minutes Mercredi P1
Thème : Films, genres, notes, années
const films = [
{ titre: "Inception", genre: "SF", note: 9, annee: 2010 },
{ titre: "Titanic", genre: "Romance", note: 8, annee: 1997 },
{ titre: "Interstellar", genre: "SF", note: 10, annee: 2014 },
{ titre: "Amélie", genre: "Comédie", note: 7, annee: 2001 },
{ titre: "Avatar", genre: "SF", note: 7, annee: 2009 }
];
Extraire la liste des titres des films.
Donner les films par genre.
Vérifier si tous les films sont sortis après 1990.
Trouver le film dont le titre est "Titanic".
Vérifier s’il existe au moins un film avec une note ≥ 9.
Tester si la liste des genres contient "Comédie".
Sélectionner les films de genre SF.
Calculer la somme des notes des films.
Inscription à :
Articles (Atom)