25:["$","title",null,{"children":"Impact environnemental de la production de nourriture en France | penguinos | Observable"}] 49:T22c3,{ const width = 700 const height = 580 const svg = d3.create("svg") var last_region_selected = "" svg.attr("width", width) .attr("height", height) var tooltip = d3.select('body').append('div') .attr('class', 'hidden tooltip'); const g = svg.append("g") var projection = d3.geoConicConformal() .center([2.454071, 46.279229]) .scale(2800) var path = d3.geoPath().projection(projection) const dataArray = Object.entries(json_aggregated); const minValueObject = d3.min(dataArray, d => d[1][0]); const maxValueObject = d3.max(dataArray, d => d[1][0]); /* var color_aggregated = d3 .scaleLinear() .range(["#edf8e9", "#006d2c"]) .domain([minValueObject, maxValueObject]) .clamp(true); */ var color_aggregated = d3 .scaleLinear() .range(["#FFD267", "#FF7D67"]) .domain([minValueObject, maxValueObject]) .clamp(true); function format_emission(emission) { return emission + " tonnes de CO2/ha" } function getSelectValues(select) { var result = []; var options = select && select.options; var opt; for (var i=0, iLen=options.length; i d.region == region_name && codes_selected.includes(mapping_code_culture[d.code_culture])); var color = d3 .scaleLinear() .range(["#edf8e9", "#006d2c"]) .domain([ d3.min(data, function (d) { return d.value; }), d3.max(data, function (d) { return d.value; }) ]) .clamp(true); // Déterminer la taille de chaque sous-tableau var batchSize = Math.ceil(filtered_data.length / 100); var numBatches = Math.ceil(filtered_data.length / batchSize); // Diviser le tableau de données en sous-tableaux à l'aide de d3.group() var nestedData = Array.from(d3.group(filtered_data, (d, i) => Math.floor(i / batchSize)).values()); for (let dataBatchIndice in nestedData) { g_circles.selectAll(".production-plots-" + dataBatchIndice) .data(nestedData[dataBatchIndice]) .join("circle") .attr("cx", d => projection([d.lon, d.lat])[0]) .attr("cy", d => projection([d.lon, d.lat])[1]) .attr("r", d => { // var delta_lat = Math.sqrt((d.surface / Math.PI)) / 1105.74; // var center = projection(d.lat, d.lon) // var side = projection(d.lat - delta_lat, d.lon) // return Math.abs(center[0] - side[0]) return 0.5; }) .style("fill", function (d) { //on prend la valeur recupere plus haut var value = d.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#eee"; } }) .style("stroke", function (d) { //on prend la valeur recupere plus haut var value = d.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#eee"; } }) } } //On fusionne les donnees avec le GeoJSON for (let region in json_aggregated) { //Valeur associee a l'etat var dataValue = parseFloat(json_aggregated[region][0]); var top_3 = json_aggregated[region][1]; //Recherche de l'etat dans le GeoJSON for (var j = 0; j < json.features.length; j++) { var jsonState = json.features[j].properties.nom; if (region == jsonState) { //On injecte la valeur de l'Etat dans le json json.features[j].properties.value = dataValue; json.features[j].properties.ranks = top_3; var ranks_html = ""; for (let rank of top_3) { ranks_html += '

' + mapping_code_culture[rank[0]] + '

' + format_emission(rank[1]) + '

'; } json.features[j].properties.ranks_html = '

' + ranks_html + '

'; //Pas besoin de chercher plus loin break; } } } g.selectAll(".map") .data(json.features) .join("path") .attr("d", path) .style("fill", function (d) { //on prend la valeur recupere plus haut var value = d.properties.value; return color_aggregated(value); }) .style("stroke", "#ccc") .attr("class", "plot-region") .on('mouseenter', function(e, d) { // Hover var hoveredPath = d3.select(this); // Hist const svg_2 = d3.create("svg") var width_2 = 400 var height_2 = 300 svg_2.attr("width", width_2) .attr("height", height_2) const margin = ({top: 20, right: 20, bottom: 50, left: 100}) const y = d3.scaleLinear() .domain([0, d3.max(d.properties.ranks.map(d => d[1]))]) .nice() .range([height_2 - margin.bottom, margin.top]) const x = d3.scaleBand() .domain(d.properties.ranks.map(d => d[0])) .range([margin.left, width_2 - margin.right]) svg_2.selectAll("rect") .data(d.properties.ranks) .enter() .append("rect") .attr("x", (d, i) => x(d[0]) + 15) .attr("y", (d, i) => y(d[1])) // data[i] .attr("width", x.bandwidth() - 30) .attr("height", (d, i) => height_2 - margin.bottom - y(d[1])) .attr("fill", "#8B4513") const xAxis = g => g .attr("transform", `translate(0, ${height_2 - margin.bottom})`) .call(d3.axisBottom(x)) svg_2.append("text") .attr("font-size", '12px') .attr("text-anchor", "end") .attr("x", width_2 - margin.right) .attr("y", height_2 - 1) .text("Culture"); const yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) svg_2.append("text") .attr("font-size", '12px') .attr("text-anchor", "end") .attr("y", 6) .attr("dy", "0.3em") .attr("dx", "-2em") .attr("transform", "rotate(-90)") .text("kg de CO2 émis"); svg_2.append("g") .call(xAxis); svg_2.append("g") .call(yAxis); tooltip.selectAll("*").remove(); // Supprime tous les enfants actuels tooltip.append("h1").text(d.properties.nom); tooltip.append("p").text(format_emission(d.properties.value)); tooltip.node().appendChild(svg_2.node()); // Ajoute l'élément SVG à l'intérieur }) .on('mousemove', function(e, d) { // on recupere la position de la souris, // e est l'object event d var mousePosition = [e.x, e.y]; d3.select(this).style("cursor", "pointer"); // 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 //.html("

" + d.properties.nom + "

" + '

' + format_emission(d.properties.value) + '

' + d.properties.ranks_html) }) .on('mouseout', function() { var hoveredPath = d3.select(this); var otherPaths = d3.selectAll("path").filter(function() { return this !== hoveredPath.node(); }); otherPaths.attr('opacity', 1) // on cache le toolip d3.select(this).style("cursor", "default"); tooltip.classed('hidden', true); }) .on('click', function (e, d) { var element = document.getElementById("g_circles"); if(element) { element.remove(); } if (d.properties.nom != last_region_selected) { drawPoints(g, full_data, d.properties.nom, getSelectValues(select)); last_region_selected = d.properties.nom; console.log(last_region_selected); } else { last_region_selected = "" } }); select.addEventListener("input", function() { var element = document.getElementById("g_circles"); if(element) { element.remove(); } drawPoints(g, full_data, last_region_selected, getSelectValues(select)); }); return svg.node() }4a:Tb1e,{ const width = 700 const height = 580 const svg = d3.create("svg") svg.attr("width", width) .attr("height", height) var tooltip = d3.select('body').append('div') .attr('class', 'hidden tooltip'); const g = svg.append("g") var projection = d3.geoConicConformal() .center([2.454071, 46.279229]) .scale(2800) var path = d3.geoPath().projection(projection) const dataArray = Object.entries(json_aggregated); const minValueObject = d3.min(dataArray, d => d[1][0]); const maxValueObject = d3.max(dataArray, d => d[1][0]); var color_aggregated = d3 .scaleLinear() .range(["#edf8e9", "#006d2c"]) .domain([minValueObject, maxValueObject]) .clamp(true); function format_emission(emission) { return emission + " kg de CO₂" } //On fusionne les donnees avec le GeoJSON for (let region in json_aggregated) { //Valeur associee a l'etat var dataValue = parseFloat(json_aggregated[region][0]); var top_3 = json_aggregated[region][1]; //Recherche de l'etat dans le GeoJSON for (var j = 0; j < json.features.length; j++) { var jsonState = json.features[j].properties.nom; if (region == jsonState) { //On injecte la valeur de l'Etat dans le json json.features[j].properties.value = dataValue; json.features[j].properties.ranks = top_3; var ranks_html = ""; for (let rank of top_3) { ranks_html += '

' + mapping_code_culture[rank[0]] + '

' + format_emission(rank[1]) + '

'; } json.features[j].properties.ranks_html = '

' + ranks_html + '

" + d.properties.nom + "

" + '

' + format_emission(d.properties.value) + '

' + d.properties.ranks_html) }) .on('mouseout', function() { // on cache le toolip tooltip.classed('hidden', true); }); return svg.node() }4b:T169b,{ const width = 700 const height = 580 const svg = d3.create("svg") svg.attr("width", width) .attr("height", height) var tooltip = d3.select('body').append('div') .attr('class', 'hidden tooltip'); const g = svg.append("g") var projection = d3.geoConicConformal() .center([2.454071, 46.279229]) .scale(2800) var path = d3.geoPath().projection(projection) const dataArray = Object.entries(json_aggregated); const minValueObject = d3.min(dataArray, d => d[1][0]); const maxValueObject = d3.max(dataArray, d => d[1][0]); /* var color_aggregated = d3 .scaleLinear() .range(["#edf8e9", "#006d2c"]) .domain([minValueObject, maxValueObject]) .clamp(true); */ var color_aggregated = d3 .scaleLinear() .range(["yellow", "red"]) .domain([minValueObject, maxValueObject]) .clamp(true); function format_emission(emission) { return emission + " kg de CO₂" } function drawPoints(g, data, region_name) { var filtered_data = data.filter(d => d.region == region_name); var color = d3 .scaleLinear() .range(["#edf8e9", "#006d2c"]) .domain([ d3.min(data, function (d) { return d.value; }), d3.max(data, function (d) { return d.value; }) ]) .clamp(true); // Déterminer la taille de chaque sous-tableau var batchSize = Math.ceil(filtered_data.length / 100); var numBatches = Math.ceil(filtered_data.length / batchSize); // Diviser le tableau de données en sous-tableaux à l'aide de d3.group() var nestedData = Array.from(d3.group(filtered_data, (d, i) => Math.floor(i / batchSize)).values()); console.log(filtered_data.length) console.log(nestedData); for (let dataBatchIndice in nestedData) { g.selectAll(".production-plots-" + dataBatchIndice) .data(nestedData[dataBatchIndice]) .join("circle") .attr("cx", d => projection([d.lon, d.lat])[0]) .attr("cy", d => projection([d.lon, d.lat])[1]) .attr("r", d => { // var delta_lat = Math.sqrt((d.surface / Math.PI)) / 1105.74; // var center = projection(d.lat, d.lon) // var side = projection(d.lat - delta_lat, d.lon) // return Math.abs(center[0] - side[0]) return 0.5; }) .style("fill", function (d) { //on prend la valeur recupere plus haut var value = d.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#eee"; } }) .style("stroke", function (d) { //on prend la valeur recupere plus haut var value = d.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#eee"; } }) } } //On fusionne les donnees avec le GeoJSON for (let region in json_aggregated) { //Valeur associee a l'etat var dataValue = parseFloat(json_aggregated[region][0]); var top_3 = json_aggregated[region][1]; //Recherche de l'etat dans le GeoJSON for (var j = 0; j < json.features.length; j++) { var jsonState = json.features[j].properties.nom; if (region == jsonState) { //On injecte la valeur de l'Etat dans le json json.features[j].properties.value = dataValue; json.features[j].properties.ranks = top_3; var ranks_html = ""; for (let rank of top_3) { ranks_html += '

' + mapping_code_culture[rank[0]] + '

' + format_emission(rank[1]) + '

'; } json.features[j].properties.ranks_html = '

' + ranks_html + '

" + d.properties.nom + "

" + '

' + format_emission(d.properties.value) + '

' + d.properties.ranks_html) }) .on('mouseout', function() { // on cache le toolip tooltip.classed('hidden', true); }) .on('click', function (e, d) { // Sélectionnez tous les éléments avec la classe "maClasse" var elements = document.getElementsByTagName("circle"); // Vérifiez si les éléments ont été correctement sélectionnés console.log("Nombre d'éléments avec la classe 'maClasse' :", elements.length); while(elements[0]) { elements[0].parentNode.removeChild(elements[0]); } // Vérifiez si les éléments ont été correctement sélectionnés console.log("Nombre d'éléments avec la classe 'maClasse' après :", elements.length); drawPoints(g, full_data, d.properties.nom) }); return svg.node() }4c:T19c0,{ const width = 700 const height = 580 const svg = d3.create("svg") var last_region_selected = "" svg.attr("width", width) .attr("height", height) var tooltip = d3.select('body').append('div') .attr('class', 'hidden tooltip'); const g = svg.append("g") var projection = d3.geoConicConformal() .center([2.454071, 46.279229]) .scale(2800) var path = d3.geoPath().projection(projection) const dataArray = Object.entries(json_aggregated); const minValueObject = d3.min(dataArray, d => d[1][0]); const maxValueObject = d3.max(dataArray, d => d[1][0]); /* var color_aggregated = d3 .scaleLinear() .range(["#edf8e9", "#006d2c"]) .domain([minValueObject, maxValueObject]) .clamp(true); */ var color_aggregated = d3 .scaleLinear() .range(["yellow", "red"]) .domain([minValueObject, maxValueObject]) .clamp(true); function format_emission(emission) { return emission + " kg de CO₂" } function drawPoints(g, data, region_name, codes_selected) { console.log(codes_selected) var filtered_data = data.filter(d => d.region == region_name && codes_selected.includes(mapping_code_culture[d.code_culture])); var color = d3 .scaleLinear() .range(["#edf8e9", "#006d2c"]) .domain([ d3.min(data, function (d) { return d.value; }), d3.max(data, function (d) { return d.value; }) ]) .clamp(true); // Déterminer la taille de chaque sous-tableau var batchSize = Math.ceil(filtered_data.length / 100); var numBatches = Math.ceil(filtered_data.length / batchSize); // Diviser le tableau de données en sous-tableaux à l'aide de d3.group() var nestedData = Array.from(d3.group(filtered_data, (d, i) => Math.floor(i / batchSize)).values()); console.log(filtered_data.length) console.log(nestedData); for (let dataBatchIndice in nestedData) { g.selectAll(".production-plots-" + dataBatchIndice) .data(nestedData[dataBatchIndice]) .join("circle") .attr("cx", d => projection([d.lon, d.lat])[0]) .attr("cy", d => projection([d.lon, d.lat])[1]) .attr("r", d => { // var delta_lat = Math.sqrt((d.surface / Math.PI)) / 1105.74; // var center = projection(d.lat, d.lon) // var side = projection(d.lat - delta_lat, d.lon) // return Math.abs(center[0] - side[0]) return 0.5; }) .style("fill", function (d) { //on prend la valeur recupere plus haut var value = d.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#eee"; } }) .style("stroke", function (d) { //on prend la valeur recupere plus haut var value = d.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#eee"; } }) } } //On fusionne les donnees avec le GeoJSON for (let region in json_aggregated) { //Valeur associee a l'etat var dataValue = parseFloat(json_aggregated[region][0]); var top_3 = json_aggregated[region][1]; //Recherche de l'etat dans le GeoJSON for (var j = 0; j < json.features.length; j++) { var jsonState = json.features[j].properties.nom; if (region == jsonState) { //On injecte la valeur de l'Etat dans le json json.features[j].properties.value = dataValue; json.features[j].properties.ranks = top_3; var ranks_html = ""; for (let rank of top_3) { ranks_html += '

' + mapping_code_culture[rank[0]] + '

' + format_emission(rank[1]) + '

'; } json.features[j].properties.ranks_html = '

' + ranks_html + '

" + d.properties.nom + "

" + '

' + format_emission(d.properties.value) + '

' + d.properties.ranks_html) }) .on('mouseout', function() { // on cache le toolip tooltip.classed('hidden', true); }) .on('click', function (e, d) { console.log("dodo") // Sélectionnez tous les éléments avec la classe "maClasse" var elements = document.getElementsByTagName("circle"); // Vérifiez si les éléments ont été correctement sélectionnés console.log("Nombre d'éléments avec la classe 'maClasse' :", elements.length); while(elements[0]) { elements[0].parentNode.removeChild(elements[0]); } // Vérifiez si les éléments ont été correctement sélectionnés console.log("Nombre d'éléments avec la classe 'maClasse' après :", elements.length); console.log(d.properties.nom) if (d.properties.nom != last_region_selected) { drawPoints(g, full_data, d.properties.nom, productionCategories); last_region_selected = d.properties.nom; console.log(last_region_selected); } else { last_region_selected = "" } }); viewof productionCategories.removeEventListener("input", function() {}) viewof productionCategories.addEventListener("input", function() { var elements = document.getElementsByTagName("circle"); while(elements[0]) { elements[0].parentNode.removeChild(elements[0]); } drawPoints(g, full_data, last_region_selected, this.value); }); return svg.node() }4d:T190d,{ const width = 700 const height = 580 const svg = d3.create("svg") var last_region_selected = "" svg.attr("width", width) .attr("height", height) var tooltip = d3.select('body').append('div') .attr('class', 'hidden tooltip'); const g = svg.append("g") var projection = d3.geoConicConformal() .center([2.454071, 46.279229]) .scale(2800) var path = d3.geoPath().projection(projection) const dataArray = Object.entries(json_aggregated); const minValueObject = d3.min(dataArray, d => d[1][0]); const maxValueObject = d3.max(dataArray, d => d[1][0]); /* var color_aggregated = d3 .scaleLinear() .range(["#edf8e9", "#006d2c"]) .domain([minValueObject, maxValueObject]) .clamp(true); */ var color_aggregated = d3 .scaleLinear() .range(["yellow", "red"]) .domain([minValueObject, maxValueObject]) .clamp(true); function format_emission(emission) { return emission + " kg de CO₂" } function getSelectValues(select) { var result = []; var options = select && select.options; var opt; for (var i=0, iLen=options.length; i d.region == region_name && codes_selected.includes(mapping_code_culture[d.code_culture])); var color = d3 .scaleLinear() .range(["#edf8e9", "#006d2c"]) .domain([ d3.min(data, function (d) { return d.value; }), d3.max(data, function (d) { return d.value; }) ]) .clamp(true); // Déterminer la taille de chaque sous-tableau var batchSize = Math.ceil(filtered_data.length / 100); var numBatches = Math.ceil(filtered_data.length / batchSize); // Diviser le tableau de données en sous-tableaux à l'aide de d3.group() var nestedData = Array.from(d3.group(filtered_data, (d, i) => Math.floor(i / batchSize)).values()); console.log(filtered_data.length) console.log(nestedData); for (let dataBatchIndice in nestedData) { g_circles.selectAll(".production-plots-" + dataBatchIndice) .data(nestedData[dataBatchIndice]) .join("circle") .attr("cx", d => projection([d.lon, d.lat])[0]) .attr("cy", d => projection([d.lon, d.lat])[1]) .attr("r", d => { // var delta_lat = Math.sqrt((d.surface / Math.PI)) / 1105.74; // var center = projection(d.lat, d.lon) // var side = projection(d.lat - delta_lat, d.lon) // return Math.abs(center[0] - side[0]) return 0.5; }) .style("fill", function (d) { //on prend la valeur recupere plus haut var value = d.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#eee"; } }) .style("stroke", function (d) { //on prend la valeur recupere plus haut var value = d.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#eee"; } }) } } //On fusionne les donnees avec le GeoJSON for (let region in json_aggregated) { //Valeur associee a l'etat var dataValue = parseFloat(json_aggregated[region][0]); var top_3 = json_aggregated[region][1]; //Recherche de l'etat dans le GeoJSON for (var j = 0; j < json.features.length; j++) { var jsonState = json.features[j].properties.nom; if (region == jsonState) { //On injecte la valeur de l'Etat dans le json json.features[j].properties.value = dataValue; json.features[j].properties.ranks = top_3; var ranks_html = ""; for (let rank of top_3) { ranks_html += '

' + mapping_code_culture[rank[0]] + '

' + format_emission(rank[1]) + '

'; } json.features[j].properties.ranks_html = '

' + ranks_html + '

" + d.properties.nom + "

" + '

' + format_emission(d.properties.value) + '

' + d.properties.ranks_html) }) .on('mouseout', function() { // on cache le toolip tooltip.classed('hidden', true); }) .on('click', function (e, d) { var elements = document.getElementsByTagName("circle"); if(elements[0]) { elements[0].parentNode.remove(); } if (d.properties.nom != last_region_selected) { drawPoints(g, full_data, d.properties.nom, getSelectValues(select)); last_region_selected = d.properties.nom; console.log(last_region_selected); } else { last_region_selected = "" } }); select.addEventListener("input", function() { var elements = document.getElementsByTagName("circle"); if(elements[0]) { elements[0].parentNode.remove(); } drawPoints(g, full_data, last_region_selected, getSelectValues(select)); }); return svg.node() }4e:T25b3,{ const width = 700 const height = 580 const svg = d3.create("svg") var last_region_selected = "" svg.attr("width", width) .attr("height", height) var tooltip = d3.select('body').append('div') .attr('class', 'hidden tooltip'); const g = svg.append("g") var projection = d3.geoConicConformal() .center([2.454071, 46.279229]) .scale(2800) var path = d3.geoPath().projection(projection) const dataArray = Object.entries(json_aggregated); const minValueObject = d3.min(dataArray, d => d[1][0]); const maxValueObject = d3.max(dataArray, d => d[1][0]); /* var color_aggregated = d3 .scaleLinear() .range(["#edf8e9", "#006d2c"]) .domain([minValueObject, maxValueObject]) .clamp(true); */ var color_aggregated = d3 .scaleLinear() .range(["#FFD267", "#FF7D67"]) .domain([minValueObject, maxValueObject]) .clamp(true); function format_emission(emission) { return emission + " kg de CO₂" } function getSelectValues(select) { var result = []; var options = select && select.options; var opt; for (var i=0, iLen=options.length; i d.region == region_name && codes_selected.includes(mapping_code_culture[d.code_culture])); var color = d3 .scaleLinear() .range(["#edf8e9", "#006d2c"]) .domain([ d3.min(data, function (d) { return d.value; }), d3.max(data, function (d) { return d.value; }) ]) .clamp(true); // Déterminer la taille de chaque sous-tableau var batchSize = Math.ceil(filtered_data.length / 100); var numBatches = Math.ceil(filtered_data.length / batchSize); // Diviser le tableau de données en sous-tableaux à l'aide de d3.group() var nestedData = Array.from(d3.group(filtered_data, (d, i) => Math.floor(i / batchSize)).values()); console.log(filtered_data.length) console.log(nestedData); for (let dataBatchIndice in nestedData) { g.selectAll(".production-plots-" + dataBatchIndice) .data(nestedData[dataBatchIndice]) .join("circle") .attr("cx", d => projection([d.lon, d.lat])[0]) .attr("cy", d => projection([d.lon, d.lat])[1]) .attr("r", d => { // var delta_lat = Math.sqrt((d.surface / Math.PI)) / 1105.74; // var center = projection(d.lat, d.lon) // var side = projection(d.lat - delta_lat, d.lon) // return Math.abs(center[0] - side[0]) return 0.5; }) .style("fill", function (d) { //on prend la valeur recupere plus haut var value = d.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#eee"; } }) .style("stroke", function (d) { //on prend la valeur recupere plus haut var value = d.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#eee"; } }) } } //On fusionne les donnees avec le GeoJSON for (let region in json_aggregated) { //Valeur associee a l'etat var dataValue = parseFloat(json_aggregated[region][0]); var top_3 = json_aggregated[region][1]; //Recherche de l'etat dans le GeoJSON for (var j = 0; j < json.features.length; j++) { var jsonState = json.features[j].properties.nom; if (region == jsonState) { //On injecte la valeur de l'Etat dans le json json.features[j].properties.value = dataValue; json.features[j].properties.ranks = top_3; var ranks_html = ""; for (let rank of top_3) { ranks_html += '

' + mapping_code_culture[rank[0]] + '

' + format_emission(rank[1]) + '

'; } json.features[j].properties.ranks_html = '

' + ranks_html + '

'; //Pas besoin de chercher plus loin break; } } } g.selectAll(".map") .data(json.features) .join("path") .attr("d", path) .style("fill", function (d) { //on prend la valeur recupere plus haut var value = d.properties.value; return color_aggregated(value); }) .style("stroke", "#ccc") .attr("class", "plot-region") .on('mouseenter', function(e, d) { var hoveredPath = d3.select(this); var otherPaths = d3.selectAll("path").filter(function() { return this !== hoveredPath.node(); }); otherPaths.attr('opacity', 0.3) const svg_2 = d3.create("svg") var width_2 = 400 var height_2 = 300 svg_2.attr("width", width_2) .attr("height", height_2) const margin = ({top: 20, right: 20, bottom: 50, left: 100}) const y = d3.scaleLinear() .domain([0, d3.max(d.properties.ranks.map(d => d[1]))]) .nice() .range([height_2 - margin.bottom, margin.top]) const x = d3.scaleBand() .domain(d.properties.ranks.map(d => d[0])) .range([margin.left, width_2 - margin.right]) svg_2.selectAll("rect") .data(d.properties.ranks) .enter() .append("rect") .attr("x", (d, i) => x(d[0]) + 15) .attr("y", (d, i) => y(d[1])) // data[i] .attr("width", x.bandwidth() - 30) .attr("height", (d, i) => height_2 - margin.bottom - y(d[1])) .attr("fill", "#006400") const xAxis = g => g .attr("transform", `translate(0, ${height_2 - margin.bottom})`) .call(d3.axisBottom(x)) svg_2.append("text") .attr("font-size", '12px') .attr("text-anchor", "end") .attr("x", width_2 - margin.right) .attr("y", height_2 - 1) .text("Culture"); const yAxis = g => g .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) svg_2.append("text") .attr("font-size", '12px') .attr("text-anchor", "end") .attr("y", 6) .attr("dy", "0.3em") .attr("dx", "-2em") .attr("transform", "rotate(-90)") .text("kg de CO2 émis"); svg_2.append("g") .call(xAxis); svg_2.append("g") .call(yAxis); tooltip.selectAll("*").remove(); // Supprime tous les enfants actuels tooltip.append("h1").text(d.properties.nom); tooltip.node().appendChild(svg_2.node()); // Ajoute l'élément SVG à l'intérieur }) .on('mousemove', function(e, d) { // on recupere la position de la souris, // e est l'object event d var mousePosition = [e.x, e.y]; // 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 //.html("

" + d.properties.nom + "

" + '

' + format_emission(d.properties.value) + '

' + d.properties.ranks_html) }) .on('mouseout', function() { var hoveredPath = d3.select(this); var otherPaths = d3.selectAll("path").filter(function() { return this !== hoveredPath.node(); }); otherPaths.attr('opacity', 1) // on cache le toolip tooltip.classed('hidden', true); }) .on('click', function (e, d) { console.log("dodo") // Sélectionnez tous les éléments avec la classe "maClasse" var elements = document.getElementsByTagName("circle"); // Vérifiez si les éléments ont été correctement sélectionnés console.log("Nombre d'éléments avec la classe 'maClasse' :", elements.length); while(elements[0]) { elements[0].parentNode.removeChild(elements[0]); } // Vérifiez si les éléments ont été correctement sélectionnés console.log("Nombre d'éléments avec la classe 'maClasse' après :", elements.length); console.log(d.properties.nom) if (d.properties.nom != last_region_selected) { drawPoints(g, full_data, d.properties.nom, getSelectValues(select)); last_region_selected = d.properties.nom; console.log(last_region_selected); } else { last_region_selected = "" } // Unzoom var projection = d3.geoConicConformal() .center([4.75, 45.75]) .scale(9000); path = d3.geoPath().projection(projection) g.selectAll("path") .attr("d", path); }); select.addEventListener("input", function() { var elements = document.getElementsByTagName("circle"); while(elements[0]) { elements[0].parentNode.removeChild(elements[0]); } drawPoints(g, full_data, last_region_selected, getSelectValues(select)); }); return svg.node() }4f:[{"id":"6312ef43eeaa59e54f6ac28815f4e41eafce2e83f447fc9bfd2db9c1f6c4038b4efd54fa80e519f31e57f32634c9f76719a58a137e74a2c7972a98f694587bd6","href":"https://static.observableusercontent.com/files/6312ef43eeaa59e54f6ac28815f4e41eafce2e83f447fc9bfd2db9c1f6c4038b4efd54fa80e519f31e57f32634c9f76719a58a137e74a2c7972a98f694587bd6","name":"regions_aggregees.json","type":"application/json","lastModified":1677970366606.284,"size":4338},{"id":"bc24734606aa4fe1d2bc3fa9db9bf962458cc4601dcfaa286daa6276ea23100b0cf94c43487abd88cca072029726309375de8281d577ae177839b5cf5fe4ccd3","href":"https://static.observableusercontent.com/files/bc24734606aa4fe1d2bc3fa9db9bf962458cc4601dcfaa286daa6276ea23100b0cf94c43487abd88cca072029726309375de8281d577ae177839b5cf5fe4ccd3","name":"final_region_1.csv","type":"text/csv","lastModified":1678000419036.97,"size":49096586},{"id":"09629115f4971f49b6e496811ac11f6e916677a4e44c4277a459773ed9356d1a9ede81c1e3b67d365054453a1d19038eb23217370cc67f67602d8c70ec70a058","href":"https://static.observableusercontent.com/files/09629115f4971f49b6e496811ac11f6e916677a4e44c4277a459773ed9356d1a9ede81c1e3b67d365054453a1d19038eb23217370cc67f67602d8c70ec70a058","name":"metropole-version-simplifiee.geojson","type":"application/geo+json","lastModified":1677970367218.459,"size":1452343},{"id":"239adc7b795d1f1bb320fd6b8df7cb55a7a2775febdc4d555cdc2d77e4cbdb4a575415a2ea1391a12611f7f5204afab89d91a9f5b1ac77821a6df28a8f8cbe6c","href":"https://static.observableusercontent.com/files/239adc7b795d1f1bb320fd6b8df7cb55a7a2775febdc4d555cdc2d77e4cbdb4a575415a2ea1391a12611f7f5204afab89d91a9f5b1ac77821a6df28a8f8cbe6c","name":"code_name_mapping.json","type":"application/json","lastModified":1677997624472.407,"size":381},{"id":"fad3872cf64fbb772d49daae2bdfc51070f54993e81804f7cf3a1af046a96acb0bfcfb3c6638fd231bccea9973ef4af337fd874016635b3c77ac330f61d01d66","href":"https://static.observableusercontent.com/files/fad3872cf64fbb772d49daae2bdfc51070f54993e81804f7cf3a1af046a96acb0bfcfb3c6638fd231bccea9973ef4af337fd874016635b3c77ac330f61d01d66","name":"projet_visu.jpg","type":"image/jpeg","lastModified":1678086749016.278,"size":267988},{"id":"74b24500c680eb22e17acac1ba4a074a4fc12a966653a3e38e73b98eeccc368b75bcfdf8e1b902424d73ca73b09ab2f50d96e400a100ebfd1e3e56aa30816cb1","href":"https://static.observableusercontent.com/files/74b24500c680eb22e17acac1ba4a074a4fc12a966653a3e38e73b98eeccc368b75bcfdf8e1b902424d73ca73b09ab2f50d96e400a100ebfd1e3e56aa30816cb1","name":"regions_agg_normalisees.json","type":"application/json","lastModified":1678088981144.609,"size":1453},{"id":"93cdd98d41031b479db155dcc9f43f99aa7e9a1eeb27b5167fd1f2fadc2ea5ab45e0e4d0625d1ebf4f0e80da5091af3056f4f86cdf20c94cab884dd9ac26cc00","href":"https://static.observableusercontent.com/files/93cdd98d41031b479db155dcc9f43f99aa7e9a1eeb27b5167fd1f2fadc2ea5ab45e0e4d0625d1ebf4f0e80da5091af3056f4f86cdf20c94cab884dd9ac26cc00","name":"regions_agg_normalisees@1.json","type":"application/json","lastModified":1678089315448.271,"size":1430},{"id":"c41466b521df1307767c7037b1be73a3ff2cdd4cbed55b30a58007669b35a8bf75df271482dd79c80fb7fee45117b3ba18da4f721be7fa904d21541b9754ef0e","href":"https://static.observableusercontent.com/files/c41466b521df1307767c7037b1be73a3ff2cdd4cbed55b30a58007669b35a8bf75df271482dd79c80fb7fee45117b3ba18da4f721be7fa904d21541b9754ef0e","name":"regions_agg_normalisees@2.json","type":"application/json","lastModified":1678089413060.276,"size":1288},{"id":"4c1ae7a75debca5cd65429eff561f3aca4ee0e22f5114fb45b595a7e13cfacc95b536293bb907a60b737049c48e2b163c966f73dd931823261c5d8907a5a1b29","href":"https://static.observableusercontent.com/files/4c1ae7a75debca5cd65429eff561f3aca4ee0e22f5114fb45b595a7e13cfacc95b536293bb907a60b737049c48e2b163c966f73dd931823261c5d8907a5a1b29","name":"polygones visu.png","type":"image/png","lastModified":1678089628437.025,"size":45957}] 29:{"id":"3973223bbf21579e","slug":null,"title":"Impact environnemental de la production de nourriture en France","thumbnail":"9780a44e968e748aab5bede2ed3d9f00722a6fff59f7d00c2b6310f07ee68f93","access_level":"public","create_time":"$D2023-03-04T22:51:16.356Z","update_time":"$D2024-02-11T14:03:22.912Z","view_time":null,"first_public_time":"$D2023-03-04T22:51:16.356Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"0d200658ca1f75b0","login":"penguinos","name":"penguinos","avatar_url":"https://avatars-next.observableusercontent.com/709245e0009ff5f67973bad6d1fd6f26a9d923159051215cd1578d4f63552c39","tier":"starter_2024","bio":"","following":false},"version":303,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc052ca38022d53f","login":"penguinos","name":"penguinos","avatar_url":"https://avatars-next.observableusercontent.com/709245e0009ff5f67973bad6d1fd6f26a9d923159051215cd1578d4f63552c39","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"fc052ca38022d53f","login":"penguinos","name":"penguinos","avatar_url":"https://avatars-next.observableusercontent.com/709245e0009ff5f67973bad6d1fd6f26a9d923159051215cd1578d4f63552c39","tier":null,"role":"editor"},{"type":"individual","id":"5ec58d3e88aa2dda","login":"penguins","name":"penguins","avatar_url":"https://avatars-next.observableusercontent.com/722b713ff5e8551dc45b8c4ea4bbda2fb23d4c4117f2035d58568b6652b7fa3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Impact environnemental de la production de nourriture en France","cells":[{"id":0,"value":"# Impact environnemental de la production de nourriture en France","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"## Prototypage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"FileAttachment(\"projet_visu.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"FileAttachment(\"polygones visu.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"## Réalisation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"json = FileAttachment(\"metropole-version-simplifiee.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"json_aggregated = FileAttachment(\"regions_agg_normalisees@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"mapping_code_culture = FileAttachment(\"code_name_mapping.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"dataArray = Object.entries(json_aggregated);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"full_data = FileAttachment(\"final_region_1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"

Comparaison régionale de l'empreinte carbone agricole en France

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"## Avancées","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"

Ajout de carte de points quand on clique sur une région

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"## Ajout d'un filtre","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"cultureCategories = [\"Maïs\", \"Blé\", \"Orge\", \"Pomme de terre\", \"Légumineuses\", \"Céréales\", \"Colza\", \"Légumes\", \"Fruits\", \"Betterave\", \"Tournesol\", \"Céréales\", \"Soja\", \"Vigne\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof productionCategories = Inputs.select(\n cultureCategories\n , {label: \"Types de production\", multiple: true, value:cultureCategories})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null