2c:null 2d:["$","title",null,{"children":"Rendu TP4 | Neirouz | Observable"}] 32:T5da,function map_data (d3 ,departements, path, data){ const svg = d3.create("svg") .attr("viewBox", [0, 0, width , 500]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); let jourChoisi = "2021-09-12"; let cleanData = data.filter(d => d.sexe === 0 && d.jour === jourChoisi); // Filtre sexe == 0 (ce qui correspond à tous les genres, plutôt que 1 ou 2 / homme ou femme). //let color = d3.scaleSequential(d3.interpolateOrRd).domain([0, 2000]); // échelle de couleur basée sur les hospitalisations. let color = d3.scaleSequential(d3.interpolateOrRd).domain([0, 2000]); for (let j = 0; j < departements.features.length; j++) { let depCode = departements.features[j].properties.code; let jourDepChoisi = cleanData.find(row => row.dep === depCode); // Associe les hospitalisations à chaque département. departements.features[j].properties.value = jourDepChoisi ? jourDepChoisi.hosp : 0; } svg.append("g") .selectAll("path") .data(departements.features) .join("path") .attr("d", path) .style("fill", d => { let value = d.properties.value; return value ? color(value) : "#ccc"; // gérer les départements sans données en leur assignant une couleur grise }) .style("stroke", "white") .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.6); return svg.node(); }33:T971,function map_interactive(d3, calendrier, france, covid, width, height) { const mapWidth = width; const mapHeight = height; const hospValues = Array.from(new Set(covid.map(item => item.hosp))); const sexes = Array.from(new Set(covid.map(d => d.sexe))); const colorScale = d3.scaleSequential(d3.interpolateOrRd).domain(d3.extent(hospValues)); var sexs = sexes.indexOf(sex0); const svgElement = d3.create("svg") .attr("viewBox", [0, 0, width, mapHeight]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); for (var i = 0; i < france.features.length; i++) { let departement = france.features[i].properties.code; let data = covid.filter(d => d.dep == departement && d.jour == calendrier.toISOString().split('T')[0] && d.sexe == sexs); france.features[i].properties.data = data; } const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("padding", "5px") .style("display", "none"); const mapGroup = svgElement.append('g').attr("class", "topg"); mapGroup.selectAll('path') .data(france.features) .enter().append('path') .attr('d', path) .style('fill', d => { if (d.properties.data && d.properties.data.length > 0) { return colorScale(+d.properties.data[0].hosp); } else { return '#ccc'; } }) .style('stroke', 'white') .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.6) .on("mouseover", function (event, d) { tooltip.style("display", "block") .html(`${d.properties.nom}: ${d.properties.data.length ? d.properties.data[0].hosp : 0} hospitalisations`); d3.select(this).style("stroke", "black"); }) .on("mousemove", function (event) { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function () { tooltip.style("display", "none"); d3.select(this).style("stroke", "none"); }); const zoomBehavior = d3.zoom() .scaleExtent([1, 8]) .on('zoom', event => mapGroup.attr('transform', event.transform)); svgElement.call(zoomBehavior); return svgElement.node(); }34:T1211,function map_interactive2(d3, calendrierDebut, calendrierFin, france, covid, width, height) { const mapWidth = width; const mapHeight = height; const hospValues = Array.from(new Set(covid.map(item => item.hosp))); const sexes = Array.from(new Set(covid.map(d => d.sexe))); // Gestion du sexe const sexs = sexes.indexOf(sex2); // Assurez-vous que 'sex' est défini globalement ou passé en paramètre const svgElement = d3.create("svg") .attr("viewBox", [0, 0, width, mapHeight]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("display", "none"); const mapGroup = svgElement.append('g').attr("class", "topg"); const foreground = svgElement.append("g").attr("class", "foreground"); const title = foreground.append("text") .attr("x", mapWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "18px") .style("font-weight", "bold") .text("Carte des hospitalisations COVID par département"); mapGroup.selectAll('path') .data(france.features) .enter().append('path') .attr('d', path) .style('fill', d => { for (let i = 0; i < france.features.length; i++) { let totalHosp = 0; let departement = france.features[i].properties.code; let data = covid.filter(d => d.dep == departement && d.sexe == sexs && // Filtre par sexe new Date(d.jour) >= calendrierDebut && // Filtre date de début new Date(d.jour) <= calendrierFin // Filtre date de fin ); if (data.length > 0) { totalHosp += data.reduce((sum, item) => sum + item.hosp, 0); // Somme des hosp pour le département } france.features[i].properties.totalHosp = totalHosp // Stocke la somme pour chaque département } const maxHosp = d3.max(france.features, d => d.properties.totalHosp); const colorScale = maxHosp === undefined || maxHosp === 0 ? d3.scaleSequential(d3.interpolateOrRd).domain([0, 1]) : d3.scaleSequential(d3.interpolateOrRd).domain([0, maxHosp]); if (d.properties.totalHosp > 0) { return colorScale(d.properties.totalHosp); } else { return '#ccc'; } }) .style('stroke', 'white') .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.6) .on("mouseover", function (event, d) { tooltip.style("display", "block") .html(`${d.properties.nom}: ${d.properties.totalHosp ? d.properties.totalHosp : 0} hospitalisations`); // Affiche la somme d3.select(this).style("stroke", "black"); mapGroup.selectAll('path').style("opacity", e => e === d ? 1 : 0.5); }) .on("mousemove", function (event) { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function () { tooltip.style("display", "none"); d3.select(this).style("stroke", "none"); mapGroup.selectAll('path').style("opacity", 1); }); const maxHosp = d3.max(france.features, d => d.properties.totalHosp); const colorScale = maxHosp === undefined || maxHosp === 0 ? d3.scaleSequential(d3.interpolateOrRd).domain([0, 1]) : d3.scaleSequential(d3.interpolateOrRd).domain([0, maxHosp]); const legend = svgElement.append("g") .attr("transform", `translate(${mapWidth - 150}, ${mapHeight - 200})`); const legendScale = d3.scaleLinear() .domain(colorScale.domain()) .range([100, 0]); const legendAxis = d3.axisRight(legendScale).ticks(5); const gradient = svgElement.append("defs") .append("linearGradient") .attr("id", "legendGradient") .attr("x1", "0%").attr("y1", "0%") .attr("x2", "0%").attr("y2", "100%"); gradient.selectAll("stop") .data(d3.range(0, 1.1, 0.1)) .enter().append("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => colorScale(legendScale.invert(d * 100))); legend.append("rect") .attr("width", 15) .attr("height", 100) .style("fill", "url(#legendGradient)"); legend.append("g") .attr("transform", "translate(15,0)") .call(legendAxis); const zoomBehavior = d3.zoom() .scaleExtent([1, 8]) .on('zoom', event => mapGroup.attr('transform', event.transform)); svgElement.call(zoomBehavior); return svgElement.node(); }35:T1519,function map_interactive3(d3, calendrierDebut, calendrierFin, france, covid, width, height, sexe_select) { const mapWidth = width; const mapHeight = height; const hospValues = Array.from(new Set(covid.map(item => item.hosp))); const sexes = Array.from(new Set(covid.map(d => d.sexe))); // Gestion du sexe const sexs = sexes.indexOf(sexe_select); // Assurez-vous que 'sex' est défini globalement ou passé en paramètre const svgElement = d3.create("svg") .attr("viewBox", [0, 0, width, mapHeight]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("display", "none"); const mapGroup = svgElement.append('g').attr("class", "topg"); const foreground = svgElement.append("g").attr("class", "foreground"); const title = foreground.append("text") .attr("x", mapWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "18px") .style("font-weight", "bold") .text("Carte des hospitalisations COVID par département"); mapGroup.selectAll('path') .data(france.features) .enter().append('path') .attr('d', path) .style('fill', d => { for (let i = 0; i < france.features.length; i++) { let totalHosp = 0; let totalRea = 0; let totalConv = 0; let totalSoins = 0; let departement = france.features[i].properties.code; let data = covid.filter(d => d.dep == departement && d.sexe == sexs && // Filtre par sexe new Date(d.jour) >= calendrierDebut && // Filtre date de début new Date(d.jour) <= calendrierFin // Filtre date de fin ); if (data.length > 0) { totalHosp += data.reduce((sum, item) => sum + item.hosp, 0); // Somme des hosp pour le département totalRea += data.reduce((sum, item) => sum + item.rea, 0); totalConv += data.reduce((sum, item) => sum + item.HospConv, 0); totalSoins += data.reduce((sum, item) => sum + item.SSR_USLD, 0); } france.features[i].properties.totalHosp = totalHosp // Stocke la somme pour chaque département france.features[i].properties.totalRea = totalRea france.features[i].properties.totalConv = totalConv france.features[i].properties.totalSoins = totalSoins } const maxHosp = d3.max(france.features, d => d.properties.totalHosp); const colorScale = maxHosp === undefined || maxHosp === 0 ? d3.scaleSequential(d3.interpolateOrRd).domain([0, 1]) : d3.scaleSequential(d3.interpolateOrRd).domain([0, maxHosp]); if (d.properties.totalHosp > 0) { return colorScale(d.properties.totalHosp); } else { return '#ccc'; } }) .style('stroke', 'white') .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.6) .on("mouseover", function (event, d) { tooltip.style("display", "block") .html(`

${d.properties.nom}

` + `${d.properties.totalHosp} hospitalisations
` + `${d.properties.totalRea} individus en réanimation
` + `${d.properties.totalConv} individus en convalescence
` + `${d.properties.totalSoins} individus en soins continus et en récupération`); d3.select(this).style("stroke", "black"); mapGroup.selectAll('path').style("opacity", e => e === d ? 1 : 0.5); }) .on("mousemove", function (event) { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function () { tooltip.style("display", "none"); d3.select(this).style("stroke", "none"); mapGroup.selectAll('path').style("opacity", 1); }); const maxHosp = d3.max(france.features, d => d.properties.totalHosp); const colorScale = maxHosp === undefined || maxHosp === 0 ? d3.scaleSequential(d3.interpolateOrRd).domain([0, 1]) : d3.scaleSequential(d3.interpolateOrRd).domain([0, maxHosp]); const legend = svgElement.append("g") .attr("transform", `translate(${mapWidth - 150}, ${mapHeight - 200})`); const legendScale = d3.scaleLinear() .domain(colorScale.domain()) .range([100, 0]); const legendAxis = d3.axisRight(legendScale).ticks(5); const gradient = svgElement.append("defs") .append("linearGradient") .attr("id", "legendGradient") .attr("x1", "0%").attr("y1", "0%") .attr("x2", "0%").attr("y2", "100%"); gradient.selectAll("stop") .data(d3.range(0, 1.1, 0.1)) .enter().append("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => colorScale(legendScale.invert(d * 100))); legend.append("rect") .attr("width", 15) .attr("height", 100) .style("fill", "url(#legendGradient)"); legend.append("g") .attr("transform", "translate(15,0)") .call(legendAxis); const zoomBehavior = d3.zoom() .scaleExtent([1, 8]) .on('zoom', event => mapGroup.attr('transform', event.transform)); svgElement.call(zoomBehavior); return svgElement.node(); }36:T114d,function map_interactive4(d3, calendrierDebut, calendrierFin, france, covid, width, height, sex, path) { const mapWidth = width; const mapHeight = height; const sexes = Array.from(new Set(covid.map(item => item.sexe))); const sexIndex = sexes.indexOf(sex); const svgElement = d3.create("svg") .attr("viewBox", [0, 0, width, mapHeight]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "5px") .style("display", "none"); const mapGroup = svgElement.append('g').attr("class", "topg"); const foreground = svgElement.append("g").attr("class", "foreground"); const title = foreground.append("text") .attr("x", mapWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "18px") .style("font-weight", "bold") .text("Carte des hospitalisations COVID par département"); france.features.forEach(feature => { let departement = feature.properties.code; let data = covid.filter(c => c.dep == departement && c.sexe == sexIndex && // Use sexIndex here new Date(c.jour) >= calendrierDebut && new Date(c.jour) <= calendrierFin ); feature.properties.totalHosp = data.reduce((sum, item) => sum + item.hosp, 0); }); const maxHosp = d3.max(france.features, d => d.properties.totalHosp); const colorScale = maxHosp === undefined || maxHosp === 0 ? d3.scaleSequential(d3.interpolateOrRd).domain([0, 1]) : d3.scaleSequential(d3.interpolateOrRd).domain([0, maxHosp]); const legend = svgElement.append("g") .attr("transform", `translate(${mapWidth - 150}, ${mapHeight - 200})`); mapGroup.selectAll('path') .data(france.features) .enter().append('path') .attr('d', path) .style('fill', d => colorScale(d.properties.totalHosp)) .style('stroke', 'white') .attr("stroke-width", 0.5) .attr("stroke-opacity", 0.6) .on("mouseover", function (event, d) { tooltip.style("display", "block") .html(""); // Clear previous tooltip content let departement = d.properties.code; let graphData = covid.filter(c => c.dep === departement && c.sexe === sexIndex && // Use sexIndex here new Date(c.jour) >= calendrierDebut && new Date(c.jour) <= calendrierFin ); const scatterplotData = graphData.map(item => ({ x: new Date(item.jour), y: item.hosp })); const tooltipWidth = 250; const tooltipHeight = 150; const svg = d3.create("svg") .attr("width", tooltipWidth) .attr("height", tooltipHeight); tooltip.node().appendChild(svg.node()); create_linechart(svg, scatterplotData, tooltipWidth, tooltipHeight, "x", "y"); d3.select(this).style("stroke", "black"); mapGroup.selectAll('path').style("opacity", e => e === d ? 1 : 0.5); }) .on("mousemove", function (event) { tooltip.style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", function () { tooltip.style("display", "none"); d3.select(this).style("stroke", "white"); // Reset stroke color mapGroup.selectAll('path').style("opacity", 1); }); const legendScale = d3.scaleLinear() .domain(colorScale.domain()) .range([100, 0]); const legendAxis = d3.axisRight(legendScale).ticks(5); const gradient = svgElement.append("defs") .append("linearGradient") .attr("id", "legendGradient") .attr("x1", "0%").attr("y1", "0%") .attr("x2", "0%").attr("y2", "100%"); gradient.selectAll("stop") .data(d3.range(0, 1.1, 0.1)) .enter().append("stop") .attr("offset", d => `${d * 100}%`) .attr("stop-color", d => colorScale(legendScale.invert(d * 100))); legend.append("rect") .attr("width", 15) .attr("height", 100) .style("fill", "url(#legendGradient)"); legend.append("g") .attr("transform", "translate(15,0)") .call(legendAxis); const zoomBehavior = d3.zoom() .scaleExtent([1, 8]) .on('zoom', event => mapGroup.attr('transform', event.transform)); svgElement.call(zoomBehavior); return svgElement.node(); } 37:Tda4,function create_linechart(svg, data, width, height, xAccessor, yAccessor) { const margin = { top: 20, right: 40, bottom: 50, left: 45 }, plotWidth = width - margin.left - margin.right, plotHeight = height - margin.top - margin.bottom; const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const xScale = d3.scaleTime() .domain(d3.extent(data, d => d[xAccessor])) .range([0, plotWidth]); const yScale = d3.scaleLinear() .domain(d3.extent(data, d => d[yAccessor])) .range([plotHeight, 0]); const dateFormatter = d3.timeFormat("%d-%m-%y"); const totalHospitalizations = d3.sum(data, d => d[yAccessor]); g.append("text") .attr("x", plotWidth / 2) // Center horizontally .attr("y", 0 - margin.top / 2) // Position at the top, above the chart .attr("text-anchor", "middle") .style("font-size", "0.9rem") // Adjust font size as needed .style("font-weight", "bold") .text(`Somme: ${totalHospitalizations}`); g.append("rect") .attr("width", plotWidth) .attr("height", plotHeight) .attr("fill", "#f0f0f0"); g.append("g") .attr("transform", `translate(0,${plotHeight})`) .call(d3.axisBottom(xScale) .ticks(data.length <= 14 ? d3.timeDay.every(2) : d3.timeWeek.every(1)) .tickFormat(dateFormatter)) .selectAll("text") .attr("transform", "rotate(-45)") .style("font-size", "0.6rem") .style("text-anchor", "end"); g.append("text") .attr("transform", `translate(${plotWidth / 2},${plotHeight + margin.top + 20})`) .style("font-size", "0.7rem") .style("text-anchor", "middle") .text("Date"); g.append("g") .call(d3.axisLeft(yScale) .ticks(5) .tickFormat(d3.format("d")) .tickSize(-plotWidth) .tickPadding(10)) .selectAll("line") .style("stroke-opacity", 0.5) .style("shape-rendering", "crispEdges"); g.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left + 5) .attr("x", 0 - (plotHeight / 2)) .attr("dy", "1em") .style("font-size", "0.7rem") .style("text-anchor", "middle") .text("Hospitalisations"); // Line path g.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("d", d3.line() .x(d => xScale(d[xAccessor])) .y(d => yScale(d[yAccessor]))); // Tooltip interaction (optional, but often useful for line charts) const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0) .style("position", "absolute") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "5px") .style("pointer-events", "none"); // So tooltip doesn't block mouse events g.selectAll(".dot") // Keep dots for hover effect .data(data) .enter().append("circle") .attr("class", "dot") .attr("cx", d => xScale(d[xAccessor])) .attr("cy", d => yScale(d[yAccessor])) .attr("r", 3) .style("fill", "steelblue") .style("opacity", 0.7) .on("mouseover", (event, d) => { tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(`${dateFormatter(d[xAccessor])}: ${d[yAccessor]}`) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); }) .on("mouseout", () => { tooltip.transition() .duration(500) .style("opacity", 0); }); }38:[{"id":"8d7e045d3af310f34c00c38b0826876c4ae8ca5b3425d90497be23101a6b8c95cdc414b535c9ccf3dcf5766bd6f0f562991f4be6c7057c19221061e9d2e9b6c2","href":"https://static.observableusercontent.com/files/8d7e045d3af310f34c00c38b0826876c4ae8ca5b3425d90497be23101a6b8c95cdc414b535c9ccf3dcf5766bd6f0f562991f4be6c7057c19221061e9d2e9b6c2","name":"departements-version-simplifiee.geojson","type":"application/geo+json","lastModified":1738654094472.742,"size":569299},{"id":"1dece9866001398baa4b80cbc1a2d090e83bb2c578c0f2bfb8781e741fd99c9dbb64e94409b2a05d19471c696e55c9d226e9f88fc40ec8de8af0e855a8348f9c","href":"https://static.observableusercontent.com/files/1dece9866001398baa4b80cbc1a2d090e83bb2c578c0f2bfb8781e741fd99c9dbb64e94409b2a05d19471c696e55c9d226e9f88fc40ec8de8af0e855a8348f9c","name":"covid-06-11-2021.csv","type":"text/csv","lastModified":1738654257584.317,"size":2934101}] 30:{"id":"39dc0fe0e0a9d7c3","slug":null,"title":"Rendu TP4","thumbnail":"9c992063b7a75c726c415f64bcf4f4c4e5267c539273f5197b2b1dd28bfe5ce6","access_level":"public","create_time":"$D2025-02-04T07:20:14.457Z","update_time":"$D2025-03-08T06:54:24.931Z","view_time":null,"first_public_time":"$D2025-02-09T16:14:14.994Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6c3fbb7e8e9eb737","login":"neirouz","name":"Neirouz","avatar_url":"https://avatars-next.observableusercontent.com/8cfae7fd81e514f31fedf68291245f72a4fed42188ea511c3286fd32a1b1a352","tier":"starter_2024"},"version":374,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"db40004d6aaa4ed4","login":"qualityseine","name":"QualitySeine","avatar_url":"https://avatars-next.observableusercontent.com/d416d0bef0ffb13eae05856f2ac810de503ad8775cc502bf6c1716e9bae6167c","tier":null}],"members":[{"type":"team","id":"6c3fbb7e8e9eb737","login":"neirouz","name":"Neirouz","avatar_url":"https://avatars-next.observableusercontent.com/8cfae7fd81e514f31fedf68291245f72a4fed42188ea511c3286fd32a1b1a352","tier":"starter_2024","role":"editor"},{"type":"individual","id":"db40004d6aaa4ed4","login":"qualityseine","name":"QualitySeine","avatar_url":"https://avatars-next.observableusercontent.com/d416d0bef0ffb13eae05856f2ac810de503ad8775cc502bf6c1716e9bae6167c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Rendu TP4","cells":[{"id":0,"value":"# Rendu TP4\n\n### Auteurs: Neirouz BOUCHAIRA et Margaux DEMEILLERS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## 1- Chargement d’un fond de carte\n\n- Quelle est la projection utilisée? \nLa projection utilisée est d3.geoAlbersUsa() pour représenter les états américains.\n \n- Quel est l’élément SVG utilisé pour dessiner la carte? \nL'élément SVG utilisé pour dessiner la carte est créé avec D3.js de la manière suivante: \n\n var svg = d3\n .select(\"body\")\n .append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n // On rajoute un groupe englobant toute la visualisation pour plus tard\n var g = svg.append(\"g\");\n \n- Où sont stockées les données? \nLes données sont issues du fichier CSV \"us-ag-productivity-2004.csv\" pour les valeurs pour les couleurs et du fichier JSON \"us-states2.json\" pour les données sur les états. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"departements = FileAttachment(\"departements-version-simplifiee.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"projection = d3.geoConicConformal().center([2.454071, 46.279229]).scale(2800)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"map = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width , 500])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\")\n .style(\"background-color\", \"white\");\n\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(departements)\n .attr(\"d\", path)\n .style(\"fill\", \"black\")\n .style(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"stroke-opacity\", 0.6)\n .attr(\"fill-opacity\", 1);\n\n svg\n .append(\"g\")\n .append(\"path\")\n .attr(\"d\", path)\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"white\")\n .attr(\"stroke-width\", 1)\n .attr(\"fill-opacity\", 1);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"## 2- Chargement d’un jeu de données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"data=FileAttachment(\"covid-06-11-2021.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"Préparation des données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"data.map(d=>{\n d.sexe=parseInt(d.sexe)\n d.hosp = parseInt(d.hosp)\n d.rea = parseInt(d.rea)\n d.HospConv = parseInt(d.HospConv)\n d.SSR_USLD = parseInt(d.SSR_USLD)\n d.autres = parseInt(d.autres)\n d.rad = parseInt(d.rad)\n d.dc = parseInt(d.dc)\n return d\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"map_data(d3, departements, path, data )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"## 3- Filtrage et interactions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"parseDate = d3.timeFormat(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"viewof sex0 = Inputs.select([].concat(Array.from([...new Set(data.map(d => d.sexe))])), { label: \"Choisissez le sexe à étudier\", value: 0 });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewof calendrier = Inputs.date(\n {\n min: d3.min(Array.from(new Set(data.map(d => d.jour)))), \n max: d3.max(Array.from(new Set(data.map(d => d.jour)))),\n value: \"2021-09-12\" ,\n label: \"Sélectionnez la date\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"map_interactive(d3, calendrier, departements, data, width, height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"## 4- Bonus\n### Hospitalisations sur 1 période\n\nZoom, échelle, 2 périodes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"viewof sex2 = Inputs.select([].concat(Array.from([...new Set(data.map(d => d.sexe))])), { label: \"Choisissez le sexe à étudier\", value: 0 });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"viewof calendrier_debut_1 = Inputs.date(\n {\n min: d3.min(Array.from(new Set(data.map(d => d.jour)))), \n max: d3.max(Array.from(new Set(data.map(d => d.jour)))),\n value: \"2021-09-12\" ,\n label: \"Date de début (exemple 1)\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"viewof calendrier_fin_1 = Inputs.date({\n min: calendrier_debut_1, // Minimum is linked to debut\n max: d3.max(Array.from(new Set(data.map(d => d.jour)))),\n value: \"2021-09-19\", // Or some default value after the debut\n label: \"Date de fin (exemple 1)\"\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"map_interactive2(d3, calendrier_debut_1, calendrier_fin_1, departements, data, width, height)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"Tool Tip plus informatif","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"viewof sex3 = Inputs.select([].concat(Array.from([...new Set(data.map(d => d.sexe))])), { label: \"Choisissez le sexe à étudier\", value: 0 });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"viewof calendrier_debut_3 = Inputs.date(\n {\n min: d3.min(Array.from(new Set(data.map(d => d.jour)))), \n max: d3.max(Array.from(new Set(data.map(d => d.jour)))),\n value: \"2021-09-12\" ,\n label: \"Date de début\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"viewof calendrier_fin_3 = Inputs.date({\n min: calendrier_debut_3, // Minimum is linked to debut\n max: d3.max(Array.from(new Set(data.map(d => d.jour)))),\n value: \"2021-09-19\", // Or some default value after the debut\n label: \"Date de fin\"\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"map_interactive3(d3,calendrier_debut_3, calendrier_fin_3, departements, data, width, height, sex3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"Tool Tip graph entre 2 périodes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"viewof sex4 = Inputs.select([].concat(Array.from([...new Set(data.map(d => d.sexe))])), { label: \"Choisissez le sexe à étudier\", value: 0 });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"viewof calendrier_debut_4 = Inputs.date(\n {\n min: d3.min(Array.from(new Set(data.map(d => d.jour)))), \n max: d3.max(Array.from(new Set(data.map(d => d.jour)))),\n value: \"2021-09-12\" ,\n label: \"Date de début (exemple 4)\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"viewof calendrier_fin_4 = Inputs.date(\n {\n min: calendrier_debut_4, \n max: d3.max(Array.from(new Set(data.map(d => d.jour)))),\n value: \"2021-09-19\" ,\n label: \"Date de fin (exemple 4)\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"map_interactive4(d3, calendrier_debut_4, calendrier_fin_4, departements, data, width, height, sex4, path)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 31:"$30:body"