2c:null 2d:["$","title",null,{"children":"CSNU #2 - Visualisation des résolutions et vetos au Conseil de sécurité des Nations unies | Atelier de cartographie de Sciences Po | Observable"}] 32:Tc66,graph = { // Dimensions const w = dim.width, h = dim.height, m = dim.margin // OSSATURE SVG let viz = html` ` const svg = d3.select(viz) for (const [i, r] of rows.entries()) { const g = svg.append('g') .attr("id", r.name) .attr("transform", `translate(${[0, m.top + r.y + i*rowPadding]})`) // Axe Y (une seule fois) if (r.name == "resolutions") g.append("g") .attr("id", "axisY") .attr("transform", `translate(${[m.left, 0]})`) .call( d3 .axisLeft() .scale(y) .tickSize(-(w - m.left - m.right)) ) // Barres g.selectAll('rect') .data(data) .join('rect') .attr('x', d => x(d.year)) .attr('y', d => y(d[r.name])) .attr('height', d => y(0) - y(d[r.name])) .attr('fill', r.name == 'resolutions' ? "#05c5f0" : r.name == 'vetos' ? "#f04405" : "#ff6c36") .attr('width', barWidth) // Labels g.append('text') .attr('class', 'label-row') .attr('x', x(2024)) .attr('y', y(0)) .attr('font-weight', r.name == 'resolutions' || r.name == 'vetos' ? "bold" : "regular") .text(labels.get(r.name)) // Axe X g.append("g") .attr("id", "axisX") .attr("transform", `translate(${[barWidth/2, y(0)]})`) .call( d3 .axisBottom() .scale(x) .ticks(r.name == "resolutions" || r.name == "vetos" || r.name == "China" ? 16 : 0) .tickFormat(d => d%2 == 0 ? d.toString() : null) .tickSize(3) ) } // STYLE svg.append('defs') .html(``) return viz }33:[] 30:{"id":"191ca3fbbf6bfe0c","slug":"visualisation-des-resolutions-et-vetos-au-conseil-de-secur","title":"CSNU #2 - Visualisation des résolutions et vetos au Conseil de sécurité des Nations unies","thumbnail":"42096a44a710f0d2baae8e5b670b283f2c193897fa36911547cd7f76badff758","access_level":"public","create_time":"$D2021-10-04T13:13:25.682Z","update_time":"$D2023-04-18T10:00:43.533Z","view_time":null,"first_public_time":"$D2021-10-28T11:48:37.718Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5d76df5eab7f8bb7","login":"ateliercartographie","name":"Atelier de cartographie de Sciences Po","avatar_url":"https://avatars-next.observableusercontent.com/fab2304a50866da3a682fdbbdf200ecb01ddfd5fbf74f60756d36188cfd2cf68","tier":"starter_2024"},"version":1280,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5f87f2a35829281","login":"tombor","name":"Thomas Ansart","avatar_url":"https://avatars-next.observableusercontent.com/b086dcc95470aae08b776435f7604190c606884a2187354d54b5fbae116aa241","tier":null}],"members":[{"type":"team","id":"5d76df5eab7f8bb7","login":"ateliercartographie","name":"Atelier de cartographie de Sciences Po","avatar_url":"https://avatars-next.observableusercontent.com/fab2304a50866da3a682fdbbdf200ecb01ddfd5fbf74f60756d36188cfd2cf68","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b5f87f2a35829281","login":"tombor","name":"Thomas Ansart","avatar_url":"https://avatars-next.observableusercontent.com/b086dcc95470aae08b776435f7604190c606884a2187354d54b5fbae116aa241","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CSNU #2 - Visualisation des résolutions et vetos au Conseil de sécurité des Nations unies","cells":[{"id":0,"value":"# CSNU #2 - Visualisation des résolutions et vetos au Conseil de sécurité des Nations unies\n> Le graphique ci-dessous est une version simplifiée et actualisée d'un [graphique publié en 2013](http://ceriscope.sciences-po.fr/node/705) dans l'article \"[L’ONU, entre puissance et multilatéralisme](http://ceriscope.sciences-po.fr/puissance/content/part3/l-onu-entre-puissance-et-multilateralisme?page=show)\", Mélanie ALBARET, *CERISCOPE Puissance*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1045,"value":"CNSU = graph.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"toc(\"h2, h3\",\"Plan\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"## Données...\n### ...brutes, récupérées depuis le site du CSNU\n*Voir [notebook précédent](https://observablehq.com/d/040d549badd2dfa6?collection=@tombor/csnu) pour la collecte des données*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"raw_resolutions = aq.load(\n \"https://static.observableusercontent.com/files/f6b183f852e2703b229e35d7b8cdb55e059fe013d607541b5fc280745baf2bd151e9775183a1b5cd22a4b822b5c0245b439ece9dd8130758c4af54168422edbc\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1240,"value":"import { vetos_by_member } from \"@ateliercartographie/resolutions-et-vetos-au-conseil-de-securite-des-nations-uni\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"### ...nettoyées et transformées\nNombre de résolutions par année","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"resolutions_by_year = raw_resolutions\n .groupby('year').count().rename({ count: 'resolutions' })\n .orderby('year')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"Au niveau des vétos, attention à ce que l'on compte. Le nombre de vote contre à une résolution (nb de membres permanents votant contre) ou ✔️ **nombre de vetos (1 vetos pour une résolution ou un paragraphe)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"data = resolutions_by_year\n // .join_left(vetos_by_year)\n .join_left(vetos_by_member)\n // For graphic order\n .select(\n \"year\",\n \"resolutions\",\n \"vetos\",\n \"russia_ussr\",\n \"usa\",\n \"uk\",\n \"france\",\n \"china\"\n )\n .orderby(\"year\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"Inputs.table(data, {width: 800, format: {year: d => d.toLocaleString()}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"## Création du graphique","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"**Tableau de conversion des données en variables visuelles** :\n\n| colonne \t| type \t| projecteur | var. visuelle \t| fonction de conversion\n|-\t|:-:\t|:-: |:-: |-:\t|\n| year \t| temporel\t| d3.scaleLinear()\t \t| x | x() \t|\n| nb_res/vetos \t| quantitatif \t| d3.scaleLinear() \t|y | y()\t|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"meta = ({\n title: \"Résolutions adoptées et vetos apposés\",\n subtitle: \"au Conseil de sécurité des Nations unies, de 1946 à mars 2023\",\n label: \"Émetteurs des vetos\",\n source: \"Source : Nations unies, www.un.org\",\n credit: \"© Atelier de cartographie / Sciences Po, 2021\",\n note: \"Par veto sont entendus les projets de résolutions ou paragraphes non adoptés\",\n note2: \"en raison du vote négatif d'au moins un membre permanent\",\n note3: \"lors des sessions publiques du Conseil de sécurité.\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"labels = new Map([\n [\"resolutions\", \"Résolutions adoptées\"],\n [\"vetos\", \"Vetos apposés\"],\n [\"russia_ussr\", \"URSS / Russie\"],\n [\"usa\", \"États-Unis\"],\n [\"uk\", \"Royaume-Uni\"],\n [\"france\", \"France\"],\n [\"china\", \"Chine\"]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"dim = ({\n width: 600,\n height: 700,\n barMaxHeight: barMaxHeight,\n rowPadding: rowPadding,\n margin: { top: 100, left: 20, right: 200, bottom: 20 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data.columnArray('year')))\n .range([dim.margin.left, dim.width - dim.margin.right]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data.columnArray('resolutions'))])\n .range([dim.barMaxHeight, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"`rows` = Objet contenant la position verticale de chaque graphique. Soit la somme de la hauteur max de chacun des graphiques précédents de haut en bas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"rows = {\n const rows = [],\n max = (string) => d3.max(data.columnArray(string)),\n yinvert = d3\n .scaleLinear()\n .domain([0, max(\"resolutions\")])\n .range([0, dim.barMaxHeight]), // !! range normal (non-inversé)\n names = data.columnNames().slice(1); // toutes les colonnes sauf la première\n\n let last = 0;\n\n names.forEach((e) => {\n let actual =\n last +\n (e == \"resolutions\"\n ? 0 // 1er graph = 0\n : e == \"russia_ussr\"\n ? yinvert(max(e)) + rowPadding * 2 // espace supplémentaire\n : yinvert(max(e)));\n let row = { name: e, y: actual };\n last = actual;\n rows.push(row);\n });\n return rows;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"viewof barMaxHeight = Inputs.range([100, 400], {\n value: 270,\n step: 10,\n label: \"Hauteur de la barre maximum\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"viewof rowPadding = Inputs.range([0, 40], {value: 18, step: 1, label: \"Espace entre graphique\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"viewof barWidth = Inputs.range([1, 6], {value: 4, step: .5, label: \"Largeur de barre\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"---\n## Ressources et librairies\n+ Small multiples par @fil à l'aide de `d3.scaleBand()`, https://observablehq.com/@fil/summer-heat => *non utilisé car dans mon cas l'espace entre chaque sous-graphique est fonction de la hauteur max de chaque sous-graphique et pas une valeur constante*\n+ Text wrap example, https://bl.ocks.org/mbostock/7555321, *pas encore bien compris le fonctionnement...*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {aqtoCSV} from '@tombor/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"import {toc} from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"---\n## Suite ?\nPrévoir de l'interaction :\n+ tooltip au survol de l'année qui affecte tous les sous-graphique et qui **1)** change la couleur des barres de l'année, **2)** trace un trait verticale de l'année et **3)** indique les valeurs au dessus des barres\n + https://observablehq.com/@d3/multitouch (d3.pointer)\n + https://observablehq.com/@d3/learn-d3-interaction\n + https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html\n + https://observablehq.com/@clhenrick/tooltip-d3-convention\n + https://observablehq.com/@d3/line-chart-with-tooltip\n+ clic d'une barre qui filtre un tableau avec le détail des données ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"