41:null 42:["$","title",null,{"children":"Députés actifs de l'Assemblée nationale | Jérémie's Workspace | Observable"}] 48:T60f,

Les données mises à disposition, nommées "***Députés actifs de l'Assemblée nationale - Informations et statistiques***", sont fournies par le gouvernement ([data.gouv.fr](https://www.data.gouv.fr/)). Ces données correspondent aux [députés de l'Assemblée nationale qui sont actifs](https://www.data.gouv.fr/fr/datasets/deputes-actifs-de-lassemblee-nationale-informations-et-statistiques/). Chaque ligne contient les informations générales des députés ainsi que leurs réseaux sociaux et leur participation à l'Assemblée. Les données comprennent : - ${nb_ind} individus - **les informations générales des députés** : législature, sexe, nom, prénom, lieu et date de naissance, âge - **les informations des partis des députés** : nom du groupe, département d'élection du député, numéro de circonscription, date de fonction et travail - **les réseaux sociaux des députés** : mail, twitter, facebook et son site personnel - **leur participation au sein de l'Assemblée** : nombre de mandats, expérience (durée jour/mois/année) ainsi que les différents scores (participation, loyauté, majorité) - la date de mise à jour du jeu de données Le flux de données est mis à jour quotidiennement. Producteur : [Datan](https://www.data.gouv.fr/fr/organizations/datan/#/datasets) Licence : [Licence Ouverte / Open Licence (Etalab)](https://www.etalab.gouv.fr/wp-content/uploads/2014/05/Licence_Ouverte.pdf)

49:T8c0,

- **Graphique n°1 :**

Pour notre premier graphique, nous nous intéresserons au taux de participation des membres de l’assemblée par rapport à leur groupe parlementaire.
Pour visualiser au mieux les informations sur ce sujet, nous utiliserons une série de boxplot afin de pouvoir facilement comparer des informations telles que la médiane et les quartiles des taux de participation de chaque groupe.

- **Graphique n°2 :**

Dans cette seconde visualisation, nous nous intéresserons à la parité hommes/femmes de chaque groupe parlementaire.
Pour faire ceci, nous utiliserons un graphique à barres groupées, qui montrera le nombre de députés de chaque groupe par rapport à leur genre. De cette manière, nous aurons à la fois accès à une comparaison du nombre de députés de chaque groupe, et à une comparaison de leur niveau de parité.

- **Graphique n°3 :**

Pour notre troisième graphique, nous voulons mettre en valeur la corrélation entre l’expérience des députés et le taux de « fidélité » à leur groupe lors des votes.
Cela nous permettra de nous rendre compte s’il existe un lien (négatif où positif) entre la réélection d’un député et son taux d’adhésion à une cause commune.
Pour cela, nous allons créer un graphique en nuage de points accompagné d’une droite de régression linéaire, comprenant l’ancienneté des députés en abscisse, et leur taux de « fidélité » en ordonnée.

- **Graphique n°4 :**

Pour notre dernier graphique, nous allons réaliser un nuage de points comparant l’âge avec au choix : le taux de participation des députés, le taux de participation des députés par rapport à leur spécialité, leur taux de loyauté, et leur taux de loyauté à la majorité présidentielle. En parcourant ces différents champs dont les valeurs dépendent des actions des députés, et en les comparant avec leur âge, ce graphique devrait nous permettre de nous rendre compte de l’influence globale de l’âge d’un député sur ses actions à l’Assemblée.

4a:T58a,

**Analyse du 2nd graphique :** Dans ce graphique en boxplot, nous pouvons voir la médiane, les quartiles, ainsi que les extremums des taux de participation des députés de chaque groupe parlementaire à l'Assemblée nationale. On voit à première vue que le groupe de majorité présidentielle Renaissance est le plus actif, suivi de très près par les groupes du Rassemblement National et Démocrates. Néanmoins, on voit également que bien qu'étant les groupes participant le plus, ceux-ci ont une médiane de participation située autour de 35% des votes seulement. Une autre chose que l'on remarque sur le graphique, est un grand écart de participation entre Ecologiste-NUPES et le groupe des Socialistes et apparentés, ce qui nous permet de classer les groupes parlementaires en deux catégories: celle des groupes participant le moins aux votes de l'Assemblée comprenant les groupes Libertés, Indépendants, Outre-mer et Territoires, Gauche démocrate et républicaine - NUPES, Les Républicains et Socialistes et apparentés, et celle des groupes participant le plus, qui comprend les autres groupes. Enfin, il faut souligner que ce graphique représente mal les informations sur les députés indépendants étant donné que ceux-ci ne sont pas unis par un projet politique commun.

4b:T7e5,

**Analyse du 4e graphique :** Sur ce graphique, nous avons les taux de participation, de participation à une spécialité, de loyauté au groupe parlementaire, et de loyauté avec la majorité présidentielle, en fonction de l'âge des députés. Cela va nous permettre de voir s'il existe un lien entre l'âge et chacune de ces caractéristiques. Premièrement, en croisant l'âge et la participation, on se rend compte que l'âge influe peu sur le taux de participation, avec un nuage de points réparti de manière globalement uniforme sur la longueur. Deuxièmement, pour ce qui est du score de participation à une spécialité, on a encore une fois une répartition très grande des points par rapport à l'âge, mais aussi sur la participation, ce qui nous indique que les députés sont très divers dans la mesure dans laquelle ils sont prêts à voter sur les lois concernant leurs commissions parlementaires. Troisièmement, sur le score de loyauté, on se rend compte encore une fois qu'il n'y a que peu de corrélation avec l'âge. On se rend néanmoins compte de la même répartition que sur le graphique précédent, avec la majorité des députés étant très fidèles à leur groupe parlementaire, et une minorité se trouvant avec un score de 0. Dernièrement, en croisant l'âge et le score de soutien de la majorité présidentielle, on voit encore une fois une assez faible relation entre les deux variables, mais la disposition du nuage de points en "tas" très concentré nous indique la présence de groupes assez soudés dans leur niveau de soutien à la majorité, ce qui peut très probablement s'expliquer par l'appartenance des députés à des groupes parlementaires distincts. Pour conclure, ces graphiques nous apprennent au final que l'âge influe très peu sur les décisions d'un député, et confirment les phénomènes que nous avons pu observer auparavant.

4c:T106b,{ const container = yield htl.html`

`; const map = L.map(container); const layer = L.geoJSON(franceMetropEtDom20223, { onEachFeature: onEachFeature, style: styleFunction, // Ajout de la fonction de style }).addTo(map); map.fitBounds(layer.getBounds(), { maxZoom: 9 }); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© OpenStreetMap contributors', }).addTo(map); function onEachFeature(features, layer) { const departmentCodeGeoJSON = features.properties.CODGEO; const departmentNomGeoJSON = features.properties.LIBGEO; // Lien entre les données, filtre par département const deputesParDepartement = data.filter(d => d.departementCode === departmentCodeGeoJSON); const nomsDepartements = data.filter(d => d.departementNom === departmentNomGeoJSON); const genreHomme = deputesParDepartement.filter(d => d.genre === "M."); const genreFemme = deputesParDepartement.filter(d => d.genre === "Mme"); // Nombre de députés par département const nbDeputes = deputesParDepartement.length; const nbHommes = genreHomme.length; const nbFemmes = genreFemme.length; const pourcentageHommes = Math.round((nbHommes / (nbHommes + nbFemmes)) * 10000) / 100 + "%" // Pour garder 2 décimales après la virgule const pourcentageFemmes = Math.round((nbFemmes / (nbHommes + nbFemmes)) * 10000) / 100 + "%" if (nbDeputes > 0) { // Popup s'affichant au clic layer.bindPopup(`Code de département : ${departmentCodeGeoJSON}
Nombre de députés: ${nbDeputes}

Nombre d'hommes : ${nbHommes}
Pourcentage d'hommes : ${pourcentageHommes}

Nombre de femmes : ${nbFemmes}
Pourcentage de femmes : ${pourcentageFemmes}`); } } function styleFunction(feature) { const nbDeputes = data.filter(d => d.departementCode === feature.properties.CODGEO).length; const nbHommes = data.filter(d => d.departementCode === feature.properties.CODGEO && d.genre === "M.").length; const nbFemmes = data.filter(d => d.departementCode === feature.properties.CODGEO && d.genre === "Mme").length; // Définir des règles de style en fonction de la valeur de nbDeputes return { fillColor: getColor(nbHommes, nbFemmes), weight: 2, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.7 }; } // Fonction pour définir la couleur en fonction du nombre de députés function getColor(nbHommes, nbFemmes) { return nbFemmes == 0 ? '#000CBB' : (nbHommes / (nbHommes + nbFemmes)) > 0.75 ? '#164CE6' : nbHommes > nbFemmes ? '#53ABE8' : nbHommes == 0 ? '#B50000' : (nbFemmes / (nbHommes + nbFemmes)) > 0.75 ? '#FC1515' : nbFemmes > nbHommes ? '#FF4163' : '#FFEDA0'; } // Create a legend const legend = htl.html`

100% d'hommes

+ de 75% d'hommes

+ de 50% d'hommes

50% de chaque

+ de 50% de femmes

+ de 75% de femmes

100% de femmes

`; // Append the legend to the container container.appendChild(legend); return container; }4d:T598,data = dataRaw.map((deputes) => ({ id: deputes.id, legislature: deputes.legislature, genre: deputes.civ, nom: deputes.nom, prenom: deputes.prenom, villeNaissance: deputes.villeNaissance, date_naissance: new Date(deputes.naissance), age: +deputes.age, groupe: deputes.groupe, groupeAbrev: deputes.groupeAbrev, departementNom: deputes.departementNom, departementCode: deputes.departementCode.replace("2a", "2A").replace("2b", "2B"), circonscription: deputes.circo, datePriseFonction: new Date(deputes.datePriseFonction), job: deputes.job, mail: deputes.mail, twitter: deputes.twitter, facebook: deputes.facebook, website: deputes.website, nombreMandats: deputes.nombreMandats === "" ? null : +deputes.nombreMandats, experienceDepute: deputes.experienceDepute === "" ? null : +deputes.experienceDepute.replace(" ans", "") || +deputes.experienceDepute.replace(" an", "") || +deputes.experienceDepute.replace(" mois", "")/12 || +deputes.experienceDepute.replace(" jours", "")/365, scoreParticipation: deputes.scoreParticipation === "" ? null : +deputes.scoreParticipation, scoreParticipationSpecialite: deputes.scoreParticipationSpecialite === "" ? null : +deputes.scoreParticipationSpecialite, scoreLoyaute: deputes.scoreLoyaute === "" ? null : +deputes.scoreLoyaute, scoreMajorite: deputes.scoreMajorite === "" ? null : +deputes.scoreMajorite, dateMaj: new Date(deputes.dateMaj), }))4e:T14c3,

# TP noté : Députés actifs de l'Assemblée nationale
⇒ Ce travail est **à effectuer en groupe de 2** et est à rendre pour le **31 octobre 2023** (avant 20h). ⇒ Un rendu intermédiaire doit être fait pour le **15 octobre 2023** (avant 20h). ⇒ Ainsi, vous m'enverrez **par email** ([matthieu.viry@cnrs.fr](mailto:matthieu.viry@cnrs.fr)) : - **le 15/10/2023** : le nom des deux participants du groupe + la description des graphiques que vous prévoyez de réaliser + les éventuelles difficultés rencontrées en JavaScript lors des premières étapes de manipulation des données. - **le 31/10/2023** : le lien permettant d'accéder au notebook terminé (je ferais un *fork* de votre notebook le 31/10/2023 à 20h pour sauvegarder l'état actuel du notebook puis le corriger). ## Consignes Vous allez analyser le jeu de données [Députés actifs de l'Assemblée nationale - Informations et statistiques](https://www.data.gouv.fr/fr/datasets/deputes-actifs-de-lassemblee-nationale-informations-et-statistiques/) ([lien direct vers le jeu de données CSV](https://www.data.gouv.fr/fr/datasets/r/092bd7bb-1543-405b-b53c-932ebb49bb8e)). Pour cela : - Récupération du jeu de données (avec [`d3.csv`](https://d3js.org/d3-fetch#csv), son usage est similaire à [`d3.json`](https://d3js.org/d3-fetch#json) que nous avons déjà utilisé en TP). - Présentation du jeu de données : provenance, licence, description des variables utilisées, lien vers les données, etc. - Affichage d'un tableau de données. - Analyser le jeu de données selon les principales dimensions qu'il propose (âge et genre des députés, groupes parlementaire des députés, nombre de mandats, les différents scores qui sont proposés, etc.) : - cela doit vous conduire à la production d'au moins 4 visualisations de types différents, - au moins une de ces visualisation doit comporter une interaction avec un élément externe au graphique (un *dropdown menu*, un *slider*, etc.), - chacune de ces visualisations doit être accompagnée d'un paragraphe expliquant votre choix *(pourquoi avoir fait ce graphique ? qu'est-ce que vous voulez montrer ? quelles limites à la visualisation proposée ? etc.)*, - vous pouvez bien-entendu ajouter d'autres paragraphes de textes décrivant les données sur des aspects que vous avez trouvé intéressants mais pour lesquels vous avez choisi de ne pas faire de visualisation. - L'ensemble doit être rendu sous forme d'un notebook Observable correctement mis en page (titres de niveaux adaptés, blocs de codes inutiles mis en bas du notebook dans une section dédiée, etc.). ### Conseils La majorité des éléments techniques nécessaires à la réalisation de ce TP sont fournis dans les supports de cours suivants : - [Préparation et transformation de données](https://observablehq.com/@sd-progwebdataviz/preparation-et-transformation-de-donnees) - [Bibliothèque Plot (1)](https://observablehq.com/@sd-progwebdataviz/bibliotheque-plot) - [Bibliothèque Plot (2) - Interactions](https://observablehq.com/@sd-progwebdataviz/bibliotheque-plot-2-interactions) - [Solutions - Prix des carburants](https://observablehq.com/d/04c5b3168a7b5f37) N'hésitez pas à regarder la [documentation de Plot](https://observablehq.com/plot) ou à rechercher d'autres exemple sur la plateforme Observable (champ *Search* en haut à gauche dans l'interface) pour aller plus loin que ce qui a été vu en cours. Par ailleurs, vous devez soigner chacun des graphiques, comme vu dans le [deuxième CM](https://mthh.github.io/ProgWebDataviz/CM-seance2.html) : - choix réfléchi du type de graphique et des informations que vous souhaitez communiquer aux lecteurs - choix des éventuelles couleurs*, de la présence ou non d'une grille, des éléments d'habillage de votre graphique, etc., - présence d'une légende lorsque nécessaire, - nommage des axes (changez le titre des axes afin de mettre un label plus explicite ou mieux formaté que le nom de la variable), - présence d'un tooltip au survol lorsque cela peut apporter des informations supplémentaires, - présence de la source des données + d'information sur les auteurs, sur chaque graphique. Comme expliqué dans le support [Bibliothèque Plot (2) - Interactions](https://observablehq.com/@sd-progwebdataviz/bibliotheque-plot-2-interactions), si le graphique le nécessite, n'hésitez pas à mettre en valeur des éléments importants (individus spécifiques, moyenne ou médiane, etc.) ou à proposer des interactions (par exemple pour filtrer les individus répondant à une caractéristique choisie par l'utilisateur). \* *Vous pouvez par exemple vous inspirez des couleurs présentes sur la page https://commons.wikimedia.org/wiki/File:XVIe_l%C3%A9gislature.svg si vous avez besoin de colorer des marques graphiques selon les différents groupes parlementaires.* ### Barème indicatif - Récupération et préparation des données : 2.5pts - Présentation des données : 2.5pts - Graphique + explication : 3pts - Graphique + explication : 3pts - Graphique + explication : 3pts - Graphique + interaction + explication : 4pts - Soin apporté au rendu (mise en page, orthographe, etc.) : 2pts

4f:T871,map = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); svg.call(template); // Append paths for departments svg .append("g") .selectAll("path") .data(departements.features) .enter() .append("path") .attr("d", path) .style("fill", "#6dabc7") .style("stroke", "white") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.6) .attr("fill-opacity", 1) .on("mouseover", (event, d) => { // Get the corresponding "departementCode" value for the department const departmentNomValue = data.find(item => item.departement === d.properties.code).departementCode; // Show a tooltip with the "departementCode" value tooltip.transition().duration(200).style("opacity", 0.9); tooltip.html(`Departement: ${departmentNomValue}`) .style("left", (event.pageX) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", () => { // Hide the tooltip on mouseout tooltip.transition().duration(500).style("opacity", 0); }); // Append paths for regions svg .append("g") .selectAll("path") .data(regions.features) .enter() .append("path") .attr("d", path) .style("fill", "none") .style("stroke", "white") .attr("stroke-width", 1) .attr("fill-opacity", 1); // Define the tooltip const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); function onEachFeature(features, layer) { const departmentCodeGeoJSON = features.properties.DEP; // Lien entre les données, filtre par département const deputesParDepartement = data.filter(d => d.departementCode === departmentCodeGeoJSON); const nomsDepartements = data.departementNom // Nombre de députés par département const nbDeputes = deputesParDepartement.length; if (nbDeputes > 0) { // Popup s'affichant au clic layer.bindPopup(`Code de département: ${departmentCodeGeoJSON}
Nombre de députés: ${nbDeputes}`); } } return svg.node(); }50:Tfed,template = (selection) => { var defs = selection.append("defs"); const pattern = defs .append("pattern") .attr("id", "hatch") .attr("patternUnits", "userSpaceOnUse") .attr("width", 6) .attr("height", 6); pattern .append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", 6) .attr("y1", 6) .attr("stroke", "#f4f4f4") .attr("stroke-width", 4) .attr("stroke-opacity", 0.9); const filter = defs .append("filter") .attr("id", "border-blur") .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", 200) .attr("result", "shadow"); const shadow = defs .append("filter") .attr("id", "shadow") .attr("x", 0) .attr("y", 0) .attr("width", "200%") .attr("height", "200%"); shadow .append("feOffset") .attr("result", "offOut") .attr("in", "SourceAlpha") .attr("dx", 5) .attr("dy", 5); shadow .append("feGaussianBlur") .attr("result", "blurOut") .attr("in", "offOut") .attr("stdDeviation", 5); shadow .append("feBlend") .attr("in", "SourceGraphic") .attr("in2", "blurOut") .attr("mode", "normal"); selection .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .style("fill", "#9ACBE3") .attr("filter", "url(#border-blur)"); selection .append("rect") .attr("fill-opacity", 0.4) .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "url('#hatch')"); selection .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", 65) .attr("fill", "white") .attr("fill-opacity", 0.5); selection .append("g") .append("path") .datum(land) .attr("d", path) .style("fill", "white") .attr("fill-opacity", 0.4); if (remote) { selection .append("g") .append("path") .datum(boxes) .attr("d", path) .attr("fill", "none") .attr("stroke", "white"); } selection .append("g") .append("path") .datum(departements) .attr("d", path) .style("fill", "black") .attr("fill-opacity", 0.2) .attr("filter", "url(#shadow)"); // Texts selection .append("text") .attr("x", 15) .attr("y", height - 45) .attr("text-anchor", "start") .style("font-family", "Roboto") .attr("font-size", (d) => "10pt") .attr("fill", "#474747") .text(licence + " " + author); selection .append("text") .attr("x", 15) .attr("y", height - 30) .attr("text-anchor", "start") .style("font-family", "Roboto") .attr("font-size", (d) => "10pt") .attr("fill", "#474747") .text("Sources: " + sources); selection .append("text") .attr("x", 15) .attr("y", height - 15) .attr("text-anchor", "start") .style("font-family", "Roboto") .attr("font-size", (d) => "10pt") .attr("fill", "#474747") .text(note); selection .append("text") .attr("x", 20) .attr("y", 45) .attr("text-anchor", "start") .style("font-family", "Roboto") .attr("font-size", (d) => "30pt") .attr("fill", "#474747") .text(title); if (remote) { selection .append("g") .selectAll("text") .data(remoteTerritories) .join("text") .attr("x", (d) => d.x) .attr("y", (d) => d.y) .style("font-family", "Roboto") .style("font-size", "11px") .attr("fill", "#474747") .attr("fill-opacity", 0.7) .text((d) => d.name); selection .append("g") .selectAll("text") .data(remoteTerritories) .join("text") .attr("x", (d) => d.x + 78) .attr("y", (d) => d.y + 85) .attr("text-anchor", "end") .style("font-family", "Roboto") .style("font-size", "8px") .attr("fill", "#474747") .attr("fill-opacity", 0.7) .text((d) => d.scale); } selection .append("g") .attr("transform", `translate(620, 900)`) .append("g") .call(scaleBar); }51:[{"id":"7fa30f62b898e08523b5afc5852834fdad21d12015926cadef9d9e591f363c05939a00fda4acbc29795b891a77fb0102192ac2798876b0a45fe709679585a21a","href":"https://static.observableusercontent.com/files/7fa30f62b898e08523b5afc5852834fdad21d12015926cadef9d9e591f363c05939a00fda4acbc29795b891a77fb0102192ac2798876b0a45fe709679585a21a","name":"france-metrop-et-dom-2022@1.geojson","type":"application/geo+json","lastModified":1700131660465.254,"size":1149337},{"id":"7fa30f62b898e08523b5afc5852834fdad21d12015926cadef9d9e591f363c05939a00fda4acbc29795b891a77fb0102192ac2798876b0a45fe709679585a21a","href":"https://static.observableusercontent.com/files/7fa30f62b898e08523b5afc5852834fdad21d12015926cadef9d9e591f363c05939a00fda4acbc29795b891a77fb0102192ac2798876b0a45fe709679585a21a","name":"france-metrop-et-dom-2022@2.geojson","type":"application/geo+json","lastModified":1700131720718.787,"size":1149337},{"id":"180959f2bf6687cee8ed53d4fea23a5d15bc2cb188b576ec261c65a1636381310d127ee43fbf0d2daaf13203e5f8a4b2d324273f9261ea65a321d9becc36fb45","href":"https://static.observableusercontent.com/files/180959f2bf6687cee8ed53d4fea23a5d15bc2cb188b576ec261c65a1636381310d127ee43fbf0d2daaf13203e5f8a4b2d324273f9261ea65a321d9becc36fb45","name":"france-metrop-departements-from-voronoi-cog-2022@1.geojson","type":"application/geo+json","lastModified":1700141751075.331,"size":1080310},{"id":"7fa30f62b898e08523b5afc5852834fdad21d12015926cadef9d9e591f363c05939a00fda4acbc29795b891a77fb0102192ac2798876b0a45fe709679585a21a","href":"https://static.observableusercontent.com/files/7fa30f62b898e08523b5afc5852834fdad21d12015926cadef9d9e591f363c05939a00fda4acbc29795b891a77fb0102192ac2798876b0a45fe709679585a21a","name":"france-metrop-et-dom-2022@3.geojson","type":"application/geo+json","lastModified":1700141795520.73,"size":1149337},{"id":"4c8f43064b5dddd58d20fd0c539ace4d4a4d601d77c722ccfbd284abe69be34abaf5300cebc954bff9a77b5695c394d310971cc9cdc5f9a3ea1a964c194fd49d","href":"https://static.observableusercontent.com/files/4c8f43064b5dddd58d20fd0c539ace4d4a4d601d77c722ccfbd284abe69be34abaf5300cebc954bff9a77b5695c394d310971cc9cdc5f9a3ea1a964c194fd49d","name":"Oswald-Medium.ttf","type":"font/ttf","lastModified":1696419071551.912,"size":87596},{"id":"0d277450ad648743c97b1a1163f13dbcdcef0867a353f4602b00766112ecf357202f15182dc1f67e1df83bad7ac7990294b310d25e401d99680458717c2f1312","href":"https://static.observableusercontent.com/files/0d277450ad648743c97b1a1163f13dbcdcef0867a353f4602b00766112ecf357202f15182dc1f67e1df83bad7ac7990294b310d25e401d99680458717c2f1312","name":"Roboto-Regular.ttf","type":"font/ttf","lastModified":1696419071551.912,"size":168260},{"id":"7fa30f62b898e08523b5afc5852834fdad21d12015926cadef9d9e591f363c05939a00fda4acbc29795b891a77fb0102192ac2798876b0a45fe709679585a21a","href":"https://static.observableusercontent.com/files/7fa30f62b898e08523b5afc5852834fdad21d12015926cadef9d9e591f363c05939a00fda4acbc29795b891a77fb0102192ac2798876b0a45fe709679585a21a","name":"france-metrop-et-dom-2022.geojson","type":"application/geo+json","lastModified":1700036134861.676,"size":1149337},{"id":"180959f2bf6687cee8ed53d4fea23a5d15bc2cb188b576ec261c65a1636381310d127ee43fbf0d2daaf13203e5f8a4b2d324273f9261ea65a321d9becc36fb45","href":"https://static.observableusercontent.com/files/180959f2bf6687cee8ed53d4fea23a5d15bc2cb188b576ec261c65a1636381310d127ee43fbf0d2daaf13203e5f8a4b2d324273f9261ea65a321d9becc36fb45","name":"france-metrop-departements-from-voronoi-cog-2022.geojson","type":"application/geo+json","lastModified":1700036140625.587,"size":1080310}] 46:{"id":"776c216f5bdf2c89","slug":"tp-note","title":"Députés actifs de l'Assemblée nationale","thumbnail":"5939c24388104db1f585dcc2d80b24afb5505c5ca17768e8354279f532fda8be","access_level":"public","create_time":"$D2023-10-04T11:31:11.551Z","update_time":"$D2023-11-17T12:03:30.432Z","view_time":null,"first_public_time":"$D2023-10-04T14:43:07.422Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"e4c1434eaba8892d","login":"jeremie2-ws","name":"Jérémie's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7c3a72a133359e1ef0cce375b6148a304726ad98cd2fcc85e515592bf8040e51","tier":"starter_2024","bio":"","following":false},"version":1016,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"11386db1165218f1","login":"jeremie2","name":"Jérémie","avatar_url":"https://avatars-next.observableusercontent.com/ef868252742418e697ae14736f5ea479091f1e26ba41eb5df8e7a32ae6daaf89","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"11386db1165218f1","login":"jeremie2","name":"Jérémie","avatar_url":"https://avatars-next.observableusercontent.com/ef868252742418e697ae14736f5ea479091f1e26ba41eb5df8e7a32ae6daaf89","tier":null,"role":"editor"},{"type":"team","id":"e4c1434eaba8892d","login":"jeremie2-ws","name":"Jérémie's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/7c3a72a133359e1ef0cce375b6148a304726ad98cd2fcc85e515592bf8040e51","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Députés actifs de l'Assemblée nationale","cells":[{"id":362,"value":"# Députés actifs de l'Assemblée nationale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":596,"value":"
\n

\nAlloza Gabriel
\nMacé Jérémie\n

\n **Analyse du 1er graphique :**\n\nCe graphique nous donne le nombre de députés hommes et femmes dans chaque groupe parlementaire à l'Assemblée.\nNous pouvons voir que tous les groupes excepté Ecologiste-NUPES présentent un nombre d'hommes plus important que celui de femmes parmi leurs députés.\n\nNéanmoins, l'écart hommes/femmes n'est pas le même pour chaque groupe, par exemple, dans les groupes Les Républicains et Libertés, Indépendants, Outre-mer et Territoires, le nombre de députées est en dessous de la moitié de celui des députés, tandis que pour les groupes Renaissance et Rassemblement National, le nombre de députées est supérieur à la moitié de leurs collègues masculins appartenant au même groupe.\n\nPour finir, il faut rappeler que les députés indépendants sont mal représentés par ce graphique pour les mêmes raisons que sur le graphique précédent.\n\n

\n **Analyse du 3e graphique :**\n\nIci, nous avons un nuage de points reliant l’expérience d'un député en années avec son score de loyauté à son groupe lors des votes de l'Assemblée.\n\nCe nuage de points indique à première vue que l’expérience influe bien sur la loyauté au groupe, ce qui est confirmé par la droite de régression linéaire qui descend d'à peu près 10 points de pourcentage, avec l'augmentation de l’expérience des députés.\n\nPour ce qui est des minimums, on a quelques points à 0 répartis sur l'étendue du temps d'expérience et situés très à l'écart des autres, ce qui est assez surprenant.\n\nEn dehors de ces cas extrêmes, on peut voir que les députés sont globalement fidèles à leur groupe.\n\n

\n **Analyse de la carte :**\n \nSur cette carte, on peut voir la proportion hommes/femmes des députés provenant de chaque département, indiquée par un code couleur.
\nUne chose qui saute au yeux est la prédominance du bleu sur cette carte, ce qui est logique étant donné que la majorité des députés sont des hommes.\nNéanmoins, on pourrait s'attendre à ce que cette majorité d'hommes soit répartie à peu près équitablement sur le territoire, ce qui n'est pas le cas.\nEn effet, beaucoup de départements n'ont élu que des députés hommes tandis que certains ont élu une nette majorité de femmes, allant jusqu'à n'élire que des femmes, comme la Creuse où les Pyrénées orientales par exemple.\n\nCette carte nous apprend donc l’existence d'une forte disparité quant au genre des élus en fonction du département.\n

\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":908,"value":"## Code permettant la réalisation des graphiques\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":865,"value":"url = \"https://www.data.gouv.fr/fr/datasets/r/092bd7bb-1543-405b-b53c-932ebb49bb8e\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"dataRaw = await d3.csv(url);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"nb_ind = data.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"date = Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"scores = Object.keys(data[0]).filter(f => f.startsWith('score')).map(f => f.replace('score', ''))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"franceMetropEtDom20223 = FileAttachment(\"france-metrop-et-dom-2022@3.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"\n ---\n\n ### Style graphique","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"addFonts([\n {\n fontFamily: \"Oswald\",\n url: await FileAttachment(\"Oswald-Medium.ttf\").url(),\n style: \"normal\",\n weight: \"normal\",\n stretch: \"normal\"\n },\n {\n fontFamily: \"Roboto\",\n url: await FileAttachment(\"Roboto-Regular.ttf\").url(),\n style: \"normal\",\n weight: \"normal\",\n stretch: \"normal\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import { addFonts } from '@jakoblistabarth/load-custom-fonts'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"\n ---\n\n ### Carte test\n
\n

\n Le fond de carte fonctionne avec l'ajout des territoires d'outre-mer mais la liaison des données est compliquée.
\n Cette carte aurait été idéale pour la présentation si nous avions réussi à bien lier les données par département.\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":581,"value":"viewof remote = Inputs.toggle({ label: \"Remote territories\", value: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"md`**1. Data Import**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"departements = {\n let d = remote\n ? \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/France/departements.topojson\"\n : \"https://raw.githubusercontent.com/neocarto/resources/master/geometries//France/departements_nodom.topojson\";\n\n return d3.json(d).then((r) => topojson.feature(r, r.objects.DEPT));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"regions = {\n let d = remote\n ? \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/France/regions.topojson\"\n : \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/France/regions_nodom.topojson\";\n\n return d3.json(d).then((r) => topojson.feature(r, r.objects.regions));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"land = {\n let d = remote\n ? \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/France/land.topojson\"\n : \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/France/world_nodom.topojson\";\n\n return d3.json(d).then((r) => topojson.feature(r, r.objects.world));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"boxes = d3\n .json(\n \"https://raw.githubusercontent.com/neocarto/resources/master/geometries/France/boxes.topojson\"\n )\n .then((r) => topojson.feature(r, r.objects.boxes))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"md`**2. Remote territories** `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"md`**3. Map Template**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"lambert93 = \"+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"height = 1090","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"width = 1100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"projection = proj4d3(lambert93).fitExtent(\n [\n [30, 75],\n [width - 30, height - 30]\n ],\n departements\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"scaleBar = d3\n .geoScaleBar()\n .projection(projection)\n .size([0, 0])\n .left(0.9)\n .top(0.99)\n .units(d3.geoScaleKilometers)\n .distance(100)\n .label(\"100 km\")\n .labelAnchor(\"middle\")\n .tickSize(null)\n .tickValues(null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"md`**4. Texts**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"licence = \"CC BY 4.0\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"title = \"Map of France\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"author = \"Nicolas Lambert, 2021\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"sources = \"https://observablehq.com/@neocartocnrs/map-template-france-lambert-93\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"note = `NB: ${\n remote\n ? \"Remotes territories are not at the same scale as metropolitan France (European France). The enlargement or reduction factor is indicated in the boxes in percentage.\"\n : \"European territories only.\"\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"remoteTerritories = [\n { name: \"Guadeloupe\", scale: \"90%\", x: 20, y: 485 },\n { name: \"Martinique\", scale: \"130%\", x: 20, y: 586 },\n { name: \"Guyane\", scale: \"15%\", x: 20, y: 687 },\n { name: \"Mayotte\", scale: \"150%\", x: 736, y: 966 },\n { name: \"La Réunion\", scale: \"110%\", x: 837, y: 966 }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"md`**Libraries & helpers**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"function coords2obj(bbox) {\n let [[x0, y0], [x1, y1]] = bbox;\n let obj = {\n type: \"LineString\",\n coordinates: [[x0, y0], [x1, y0], [x1, y1], [x0, y1], [x0, y0]]\n };\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"proj4 = require(\"proj4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"// proj4d3() is a function developped by @fil. See https://observablehq.com/@fil/proj4js-d3\nfunction proj4d3(proj4string) {\n const degrees = 180 / Math.PI,\n radians = 1 / degrees,\n raw = proj4(proj4string),\n p = function (lambda, phi) {\n return raw.forward([lambda * degrees, phi * degrees]);\n };\n p.invert = function (x, y) {\n return raw.inverse([x, y]).map(function (d) {\n return d * radians;\n });\n };\n const projection = d3.geoProjection(p).scale(1);\n projection.raw = raw;\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"d3 = require(\"d3@6\", \"d3-geo-scale-bar@1.0.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 47:"$46:body"