3e:null 3f:["$","title",null,{"children":"TP 4 – Geo map | elmai mohamed | Observable"}] 45:T931,{ let chosenDate = datePickerValueParsed raw_departement.features.forEach(d => { Array.from(filterCovidData).forEach(e => { if(d.properties.code == e.dep & e.jour.getDate() == chosenDate.getDate()) d.properties.value = e.hosp }) }) const width = 1000, height = 580; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); var g = svg.append("g"); var projection = d3.geoConicConformal() .center([2.454071, 46.279229]) .scale(2800) const color =d3.scaleLinear() .domain([0, 200]) .range(["white", "purple"]) var path = d3.geoPath().projection(projection); // create a tooltip var tooltip = d3.select('body').append('div') .attr('class', 'hidden tooltip'); // this function that change the tooltip when user hover a cell var mouseover = function(d) { tooltip .style("opacity", 1) d3.select(this) .style("stroke", "black") .style("opacity", 1) } g.selectAll("path") .data(raw_departement.features) .join("path") .attr("class","path") .attr("d", path) .attr("fill", d => color(d.properties.value)) .on("mouseover", mouseover) .on('mousemove', function(e, d) { // on recupere la position de la souris, // e est l'object event d var mousePosition = [e.x, e.y]; console.log(mousePosition); // on affiche le toolip tooltip.classed('hidden', false) // on positionne le tooltip en fonction // de la position de la souris .attr('style', 'left:' + (mousePosition[0] + 15) + 'px; top:' + (mousePosition[1] - 35) + 'px') // on recupere le nom de l'etat .text(d.properties.nom + ":" +d.properties.value) }) .on('mouseout', function() { // on cache le toolip tooltip.classed('hidden', true); tooltip .style("opacity", 0) d3.select(this) .style("stroke", "none") .style("opacity", 0.8) }); return svg.node() }46:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1675644753403.523,"size":13506},{"id":"bc6a0b2ac4f30de04ad12b79777a54abb318080277bb9a5b54e7f4b62b9a4f0eeeb19153cce09eda3f148a58300faf34d9a296b0e4cb91dc90b87c4b8c1ebfc9","href":"https://static.observableusercontent.com/files/bc6a0b2ac4f30de04ad12b79777a54abb318080277bb9a5b54e7f4b62b9a4f0eeeb19153cce09eda3f148a58300faf34d9a296b0e4cb91dc90b87c4b8c1ebfc9","name":"departements-version-simplifiee.geojson.txt","type":"text/plain","lastModified":1675645789473.874,"size":569299},{"id":"2f0a03b1432fe972d7c4628597260d26940f8f6982066868f33e5e10199265e5dba19f7dac6f631bbee7f733be4c846a9f0bae337562b42dda30a5711ffbf621","href":"https://static.observableusercontent.com/files/2f0a03b1432fe972d7c4628597260d26940f8f6982066868f33e5e10199265e5dba19f7dac6f631bbee7f733be4c846a9f0bae337562b42dda30a5711ffbf621","name":"covid-06-11-2021.csv","type":"text/csv","lastModified":1675645813643.548,"size":2934101}] 43:{"id":"d447a963346994b5","slug":null,"title":"TP 4 – Geo map","thumbnail":"45e0da76450b54aadbd1beab3754611c19b8f553f24435d515970d6a281c586c","access_level":"public","create_time":"$D2023-02-06T00:52:33.403Z","update_time":"$D2023-02-06T07:07:49.044Z","view_time":null,"first_public_time":"$D2023-02-06T00:52:33.403Z","has_unpublished_edits":null,"fork":{"id":"7dcef0ebff4028d9","slug":"input-chart","title":"Input + Chart","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c5cc7f8378954558","login":"elmaimohamed638","name":"elmai mohamed","avatar_url":"https://avatars-next.observableusercontent.com/98e3d71f648d9a13751658776e1f0bc7c90d39f627d117a6bd96809901e6dc8e","tier":"starter_2024","bio":"","following":false},"version":130,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b02e82c7ff423f22","login":"elmaimohamed638","name":"elmai mohamed","avatar_url":"https://avatars-next.observableusercontent.com/98e3d71f648d9a13751658776e1f0bc7c90d39f627d117a6bd96809901e6dc8e","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b02e82c7ff423f22","login":"elmaimohamed638","name":"elmai mohamed","avatar_url":"https://avatars-next.observableusercontent.com/98e3d71f648d9a13751658776e1f0bc7c90d39f627d117a6bd96809901e6dc8e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"TP 4 – Geo map","cells":[{"id":4,"value":"# TP 4 – Geo map\n# Visualisation Interactive de Données\n

EL MAI MOHAMED

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"Objectif du TP :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"- Charger un fond de Carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"- Visualiser un jeu de donnée sur cette carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"- Inclure des interactions de sélection, filtrage, et animation temporelle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"\n \n \n \n \n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"# 1. Chargement d’un fond de carte :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"la première étape consiste à lire les données :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"raw_departement=FileAttachment(\"departements-version-simplifiee.geojson.txt\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"{\n const width = 900, height = 500;\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n \n let data= raw_departement\n var g = svg.append(\"g\");\n\n var projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800)\n\n var path = d3.geoPath().projection(projection);\n g.selectAll(\"path\")\n .data(raw_departement.features)\n .join(\"path\")\n .attr(\"d\", path)\n .attr(\"stroke\",\"#ccc\")\n .style(\"fill\", \"blue\")\n return svg.node()\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"# 2 Chargement d’un jeu de données :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"raw1=FileAttachment(\"covid-06-11-2021.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"Inputs.table(raw1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"dataCovid=FileAttachment(\"covid-06-11-2021.csv\").csv().then((d)=>{\n\n let parseDate=d3.timeParse(\"%Y-%m-%d\");\n d.forEach(e=>{\n e.jour=parseDate(e.jour)\n })\n return d\n}\n \n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"Inputs.table(dataCovid)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"filterCovidData=dataCovid.filter(d=>d.sexe=\"0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"visualisation statique :","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"{\n let parseDate=d3.timeParse(\"%Y-%m-%d\");\n let chosenDate = parseDate(\"2021-11-01\")\n raw_departement.features.forEach(d => {\n Array.from(filterCovidData).forEach(e => {\n \n if(d.properties.code == e.dep & e.jour.getDate() == chosenDate.getDate())\n d.properties.value = e.hosp\n })\n })\n const width = 1000,\n height = 500;\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n\n var g = svg.append(\"g\");\n var projection = d3.geoConicConformal()\n .center([2.454071, 46.279229])\n .scale(2800)\n\n \n const color =d3.scaleLinear()\n .domain([0, 200])\n .range([\"white\", \"purple\"])\n var path = d3.geoPath().projection(projection);\n \n g.selectAll(\"path\")\n .data(raw_departement.features)\n .join(\"path\")\n .attr(\"d\", path)\n .attr(\"fill\", d => color(d.properties.value))\n \n\nreturn svg.node()\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"visualisation dynamique :","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"viewof datePickerValue = Inputs.date({label: \"Date picker\",min: \"2021-06-01\", max: \"2021-11-25\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"datePickerValueParsed = new Date(datePickerValue)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"{\n \n let chosenDate = datePickerValueParsed\n raw_departement.features.forEach(d => {\n Array.from(filterCovidData).forEach(e => {\n \n if(d.properties.code == e.dep & e.jour.getDate() == chosenDate.getDate())\n d.properties.value = e.hosp\n })\n })\n const width = 1000,\n height = 580;\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n\n var g = svg.append(\"g\");\n var projection = d3.geoConicConformal()\n .center([2.454071, 46.279229])\n .scale(2800)\n const color =d3.scaleLinear()\n .domain([0, 200])\n .range([\"white\", \"purple\"])\n var path = d3.geoPath().projection(projection);\n \n g.selectAll(\"path\")\n .data(raw_departement.features)\n .join(\"path\")\n .attr(\"d\", path)\n .attr(\"fill\", d => color(d.properties.value))\n \n\nreturn svg.node()\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"# 3 Filtrage et interactions :\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"Rajout d'un tooltip avec le nom et la valeur de la région ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"