2d:null 2e:["$","title",null,{"children":"Geo Map et Dashboard | zidane | Observable"}] 33:T656,geo_map = (width = 900, g) => { // Params let height = width - 100 let margin = { top: 10, right: 10, bottom: 10, left: 10 }; let W = width - margin.left - margin.right, H = height - margin.top - margin.bottom; var colorExtent = d3.extent(data_ofyear.map(d => d[qualite_selected(qualites1)])) var color = d3.scaleSequential(d3.interpolateOrRd).domain(colorExtent) // Projection let projection = d3geo.geoKavrayskiy7() .fitSize([W*1.2, H-margin.bottom*3], countries) .translate([W*0.46, W*2/3*0.6]) let path = d3.geoPath(projection) // svg const svg = g || d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); // map svg.append("g").selectAll("path") .data(features) .enter() .append("path") .attr("d", path) .style('fill-opacity', 1) .style('fill',d=>color(countriesObj_byCode.get(d.id))) .attr("name-country", d => { return countries_hash.get(d.id) }) .on("mouseenter",(e,d) =>{ svg.append("text") .attr("class","legend") .attr("x",width/3 - self.length) .attr("y",height - margin.bottom*1.75 ) .text(countries_hash.get(d.id)) svg.append("text") .attr("class","legend") .attr("x",width/3 - self.length) .attr("y",height - margin.bottom*0.5 ) .text(qualites1 + " : "+ countriesObj_byCode.get(d.id)) }).on("mouseleave",(e,d) =>{ svg.selectAll(".legend").remove() }) return svg.node() }34:[] 31:{"id":"9bfd94d64fb15064","slug":"geomap-et-dashboard","title":"Geo Map et Dashboard","thumbnail":"27c9e9148b0c2c10d0b83518954841288e695055a84d20cf05c198d1158ffe76","access_level":"public","create_time":"$D2022-03-15T20:29:18.124Z","update_time":"$D2022-03-17T18:43:35.892Z","view_time":null,"first_public_time":"$D2022-03-17T18:44:18.555Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dc9d160be77ea63a","login":"zidane-dev","name":"zidane","avatar_url":"https://avatars-next.observableusercontent.com/750e2b67700df34a81b0bff49c6a6f2d20c76a4622263a84745984cc1d83f789","tier":"starter_2024"},"version":942,"publish_version":942,"role":null,"authored":false,"authors":[{"type":"individual","id":"789421ee7f9813bf","login":"zidane-dev","name":"zidane","avatar_url":"https://avatars-next.observableusercontent.com/750e2b67700df34a81b0bff49c6a6f2d20c76a4622263a84745984cc1d83f789","tier":null}],"members":[{"type":"individual","id":"789421ee7f9813bf","login":"zidane-dev","name":"zidane","avatar_url":"https://avatars-next.observableusercontent.com/750e2b67700df34a81b0bff49c6a6f2d20c76a4622263a84745984cc1d83f789","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Geo Map et Dashboard","cells":[{"id":0,"value":"# Geo Map et Dashboard\n## IBN MAJAH Zidane\n\n## 1. Exploration de donées\nNous importons les données sous le nom ***raw***, chaque objet du jeu contient le *nom* d'un pays et le *continent* auquel il appartient, ce sont les deux seules variables nominatives que l'on a. Ensuite, nous avons des variables numériques; l'*année* qui varie pour un même pays, et donc pour chacune de ces années, l'*espérance de vie*, la *population* et le *GDP per capita* (ou le RNB). \nLes données sont déjà correctement typées, nous n'aurons pas à faire de transformation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"raw[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"typeof(raw[0].gdpPercap)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"undefinedValuesCount = {\n let count = 0\n raw.forEach(obj => {\n if(typeof(obj.pop)!=\"number\") count += 1\n if(typeof(obj.lifeExp)!=\"number\") count += 1\n if(typeof(obj.gdpPercap)!=\"number\") count += 1\n })\n return count\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"Explorons d'abord les différents groupements qu'on pourrait faire avec ces données","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":215,"value":"g_contins = d3.group(raw, d => d.continent)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"g_yeCou = d3.group(raw, d => d.year, d => d.country)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"g_conCouY = d3.group(raw, d => d.continent, d => d.country, d => d.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"Pour visualiser ces données par groupements, il serait utile de pouvoir compter par exemple la moyenne pour chaque continent de chacune des variables quantitatives, ce genre de groupement serait plus adaptés à un barre chart puisqu'il est intemporel. Justement, un groupement temporel est beaucoup plus intéressant, il permettra de soutirer un aperçu de l'évolution de ces données.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":383,"value":"meanPercont = d3.map(g_contins, d => \n {let obk = {continent:d[0],\n pop: d3.mean(d[1], f => f.pop),\n lifeExp: d3.mean(d[1], f => f.lifeExp),\n gdpPercap: d3.mean(d[1], f => f.gdpPercap)}\n return obk})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"meanContYears = Array.from(d3.rollup(raw, d => {\n return{pop : d3.mean(d.map(n=> n.pop)),\n lifeExp : d3.mean(d.map(n=> n.lifeExp)),\n gdpPercap : d3.mean(d.map(n=> n.gdpPercap))\n }\n }, \n d => d.year, d => d.continent)) // On obtient le rollup avec pour chaque année la moyenne des variables, pour chaque continent.\n .map(year => {\n let obj = Array.from(year[1]).map(continent=>{\n let obj = continent[1]\n obj['continent'] = continent[0]\n obj['year'] = year[0]\n return obj }) \n return obj}).flat(1) // On transfrome cette Map en un tableau d'objets pour pouvoir le manipuler plus facilement.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"## Exploration d'inputs pour l'interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"pays = d3.map(Array.from(d3.group(raw, d=> d.country)), d=>d[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"continents = d3.map(Array.from(d3.group(raw, d=> d.continent)), d=>d[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"viewof pays_select = Inputs.select(pays, {label: \"Pays\", width: '50%'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"pays_select","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"viewof continent_select = Inputs.select(continents, {label: \"Continent\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"pays_ofContinent_select = Inputs.select(d3.map(Array.from(g_conCouY.get(continent_select)), d=>d[0]), {label : \"Pays of continent\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"### Variables quantitatives\n#### Dépendance par qualité","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"qualite = {\n let map = new Map()\n map.set(\"Espérance de vie\", \"lifeExp\")\n map.set(\"Population\", \"pop\")\n map.set(\"GDP per Capita\", \"gdpPercap\")\n return map\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"qualite_selected = (sel) => qualite.get(sel)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"viewof qualites = Inputs.select(d3.map(Array.from(qualite), d => d[0]), {label: \"Variable qualitatives\" ,width: '50%'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"viewof qualites1 = Inputs.select(d3.map(Array.from(qualite), d => d[0]), {label: \"Variable qualitatives MAP\" ,width: '50%'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"qualites","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"qualites1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"#### Dépendance par année","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":857,"value":"annees = d3.map(Array.from(d3.group(raw, d=> d.year)), d=>d[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"years_range = [annees[annees.length-1], annees[0]] //assumes data is sorted","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"viewof annees_slider = Inputs.range([1952,2007], {label: \"Années\", step: 5, width: '50%'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"annees_slider","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"data_ofyear = Array.from(g_yeCou.get(annees_slider)).map(d => d[1]).map(d=>d[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"## 2. Visualisation exploratoire","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"lc1 = linechart(raw, \n Array.from(d3.group(raw, d=> d.country)),\n \"Evolution des '\"+ qualites +\"' par pays\",\n \"year\",\n qualite_selected(qualites),\n \"country\",\n 450,\n \"Années\", \n qualites)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"html`${viewof qualites}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"Ce line Chart pourrait mieux exprimer les données avec notamment un meilleur regroupement, quelques modifications seraient nécessaires au code de base pour mieux l'adapter, nous pourrions déjà voir une amélioration en limitant le nombre de pays par continent.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"html`${viewof continent_select }` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"lc2 = linechart(raw, \n Array.from(d3.group(g_contins.get(continent_select), d=> d.country)),\n \"Evolution des '\"+ qualites +\"' par pays\",\n \"year\",\n qualite_selected(qualites),\n \"country\",\n 450,\n \"Années\", \n qualites)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"Ici encore, sans animations ni interactions *-sauf pour les pays d'Océanie-* il est difficile d'avoir une donnée précise, par exemple pour la ligne grise qui fait un pic décroissant pour l'évolution de l'espérance de vie, ce qui pourrait-être intéressant à voir à l'issu de ce graphe est la tendance mondiale, mais pour cette même variable qualitative, il y a un écart assez important qui est encore plus important sur l'année finale.\nCe type de contraintes est justement là ou, naturellement, la Geo Map prouve sa plus grande utilité.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":601,"value":"html`${viewof qualites1}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"lc3 = linechart(meanContYears, \n Array.from(d3.group(meanContYears, d=>d.continent)),\n \"Evolution des '\"+ qualites1 +\"' par pays\",\n \"year\",\n qualite_selected(qualites1),\n \"continent\",\n 450,\n \"Années\", \n qualites)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"## Histogramme\nLa visualisation par un histogramme peut être utile pour voir l'évolution des distributions de ces variables par année aussi.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"## Geo Map","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":702,"value":"geo_map()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"countries_codes = d3.csv(\"https://raw.githubusercontent.com/lukes/ISO-3166-Countries-with-Regional-Codes/master/all/all.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"countries = topojson.feature(world,world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"countries_hash = new Map(countries_codes.map(d => [d['country-code'], d.name]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"countries_hash_arr = Array.from(countries_hash)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"countriesObj = {return { \n gdpPercap : new Map(data_ofyear.map(d => [d['country'], d.gdpPercap])),\n pop : new Map(data_ofyear.map(d => [d['country'], d.pop])),\n lifeExp : new Map(data_ofyear.map(d => [d['country'], d.lifeExp])),\n } \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"features = topojson.feature(world, world.objects.countries).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"countriesObj_byCode = new Map(countries_hash_arr.map((n => [n[0], countriesObj[qualite_selected(qualites1)].get(n[1])])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"## Dashboard\n\nVeuillez décommenter la ligne suivante, les *viewof* du dashboard empêchent l'apparition des graphiques et inputs dans le reste du Notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":773,"value":"// dashboard()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"dashboard = () => html`\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Carte géographique
${geo_map(550)}	${lc3}
\n ${viewof qualites1}\n ${viewof annees_slider}\n		\n
${lc1}	${lc2}
\n ${viewof qualites}\n \n ${viewof continent_select}\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"raw = d3.csv(\"https://raw.githubusercontent.com/romsson/visualisation-interactive/main/datasets/gapminder.csv\",d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`\n### Line Chart\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"import {linechart} from \"@zidane-dev/tp2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"### Geo Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"topojson = require (\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"d3geo = require(\"d3-geo-projection\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"world = d3.json(\"https://unpkg.com/world-atlas@1/world/50m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"