2b:null 2c:["$","title",null,{"children":"Tendance de la production des déchets en Union Européenne | Mathieu Roszak | Observable"}] 31:T797,## Conceptualisation et Exploration Le but de cette visualisation est de permettre de découvrir le panorama de la production de déchet pour les pays de l'union européenne. Nous voulions pouvoir visualiser de manière intuitive la quantité et le type de déchet produit par chaque pays, selon les années afin de pouvoir aussi observer l'évolution. La première idée que nous avions été de permettre en plus de comparer la quantité de déchet produite avec la quantité qu'il était possible pour chaque pays de traiter. Cependant les données que nous avons pu trouver ne nous l'a pas permis, et avons donc choisi de permettre plutôt de comparer ces données entre les différents pays. Pour l'exploration et l'utilisation, cette dernière se fait tout d'abord à l'aide de curseurs et checkboxes, permettant de sélectionner les données que l'on souhaite voir, à savoir les types de déchets ainsi que l'année de leur production. On verra alors sur la carte que la couleur des pays change. Les pays en noir sont ceux pour lesquels les données ne sont pas disponibles, et les autres sont coloré sur une échelle du jaune au rouge, représentant la quantité totale de déchet produits, du moins au plus. Une fois cette sélection faite, il est alors possible de déplacer son curseur sur la carte, où va alors apparaître un tooltip lors du passage de ce dernier sur un pays pour lequel des données sont disponibles (ceux en couleur). Ce tooltip contient un pie chart représentant la quantité produite de chaque type de déchet, ainsi que des informations plus détaillé sur les quatre principaux. De plus, il est possible en cliquant sur un pays de le selectionner afin de faire apparaître ces mêmes données sur un barchart, sur lequel il est ensuite de rajouter autant de pays que souhaité en refaisant cette même manipulation. Pour désélectionner un pays il suffit alors de cliquer une seconde fois dessus.32:Ta54,DASHBOARD

${scaleprojec}

${centerx}

${centery}

${viewof hr}

${viewof mode}

${viewof bgcmode}

${viewof maplegend_toggle}

Selected countries : ${selected_country.length}

${viewof scaleprojec}

${viewof centerx}

${viewof centery}

${viewof mode}

${viewof maplegend_toggle}

Selected countries : ${selected_country.length}

${viewof pieform}

${selected_country.length} Selected countries.

${pieform.list.length} Selected Waste types.

${viewof refreshButton} ${viewof refreshN}

${linechart(selected_line_chart_data, "year", "TOTAL" , "Année", "Total waste" , feature_year_liste, 800, 370)}

${geomap(geojson, projection())}

${Inputs.table(newWasteLabels.map(item => ({ label: item.code, value: item.label })))}

33:T25cf,geomap = (data, projection) => { let map_bg = map_cbg if(bgcmode == "Light"){ map_bg = cbg_light; } if(bgcmode == "Dark"){ map_bg = cbg_dark; } const missing_data_color = "#D0D0D0" // "#231F20"; var div = d3.create('div') const svg = div.append("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("background-color", map_bg), color = d3.scaleOrdinal() .domain([0, country_with_data.length]) .range(all_colors), path = d3.geoPath() .projection(projection), bounds = path.bounds(data), margin = {top: 25, right: 35, bottom: 35, left: 45}, legend = { sym:{ width: 105, height: -7, font_size: 10, size: 8 }, caption:{ width: 90, height: 0 }, step: 25 } var color2 = d3 .scaleSequential() .interpolator(d3.interpolateYlOrRd); var max = 0, min = 1E9; var keys_country = Object.keys(filteredgetWasteByCountryYears) console.log(keys_country) for (var i = 0; i < keys_country.length; i++){ for (var j=0; j < filteredgetWasteByCountryYears[keys_country[i]].length; j++){ if (filteredgetWasteByCountryYears[keys_country[i]][j].year == pieform.year){ let total = filteredgetWasteByCountryYears[keys_country[i]][j].TOTAL if ( total> max) { max = total } else if (total != 0 && total < min) min = total } } } color2.domain([min, max]); // country label const defaultText = 'Union Européenne', infoText = svg .append('g') .attr("font-family", "EB Garamond") .attr("font-size", 30) .attr("fill", "#222") .attr('transform', 'translate(20,50)') .append('text'); infoText.text(defaultText); // Ajout du Tooltip var tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .attr("class", "tooltip") .style("border-radius", "5%") .style("z-index", "8") .style("font-family", "Lato") .style("padding", "0.7% 1%") .style("min-width", `${width_tooltip_pie-50}px`) .style("max-width", `${width_tooltip_pie+50}px`) .style("min-height", `${width_tooltip_pie/2}px`) .style("max-height", "300px") .style("height", "auto") .style("background", "lightgray") svg.selectAll("path") .data(data.features) .join("path") .attr("d", path) .attr('class', 'country') .attr("fill", "#000") .attr("stroke", d => { if (country_with_data.includes(d.id)) return "#616161" else return "#eee" }) .style("fill", (d,i) => { if (country_with_data.includes(d.id)){ for (var i = 0; i < filteredgetWasteByCountryYears[d.id].length; i++){ if (filteredgetWasteByCountryYears[d.id][i].year == pieform.year) return color2(filteredgetWasteByCountryYears[d.id][1].TOTAL) } } else return missing_data_color; //country_with_data.includes(d.id) ? color2(filteredgetWasteByCountryYears[d.id][1].TOTAL) : "black" }) .on("click", (d,e) => { tooltip.style("visibility", "hidden"); let country_name = e.id; // d3.select(d.target)._groups[0][0].attributes.fill.value = `fill: ${highlight_color}` // console.log(d3.select(d.target)._groups[0][0].attributes) // console.log(d3.select(d.target)._groups[0][0].attributes.fill.value) // console.log(d3.select(d.target)._groups[0][0].attributes.style.value) let active = country_with_data.includes(country_name) if(active){ add_country(d, color(e.id)) } }) .on('mouseover', (e,d) => showTooltip(e,d)) .on('mouseout', function(d) { d3.select('h2').text(defaultText); infoText.text(defaultText); tooltip.style("visibility", "hidden"); }); function showTooltip(event, d) { if (country_with_data.includes(d.id)){ const country_name = d.properties.name; let data_pie_chart = country_getTopXWaste(15, d.id); const values = Array.from(d3.map(data_pie_chart, d => d.value)), labels = Array.from(d3.map(data_pie_chart, d => d.code)); d3.select('h2').text(d.properties.name); infoText.text(d.properties.name); tooltip.html(`

${d.properties.Continent}

Pays: ${d.properties.name}

`) .style("left", Math.max(0, event.pageX + 20) + "px") .style("top", Math.max(0, event.pageY - 20) + "px") .style("background",'#FFFFFF') .style("visibility", "visible"); } } const graticules = svg .append("path") .attr("fill", "none") .attr("opacity", "0.3") .attr("stroke", gratsC); graticules.attr("d", path(d3.geoGraticule().step([20, 20])())); // //Labels centrés sur le pays if(maplegend_toggle == "ON"){ let hors_eu = true; svg .selectAll(".countryLabel") .data(data.features) .enter() .append("text") .attr("class", d => `countryLabel ${d.id}`) .attr("transform", d => `translate(${path.centroid(d)})`) .text(d => { if (!hors_eu) return d.id if (!country_with_data.includes(d.id)) return d.id }) .style("fill", "#000475") } const box_size = {x:40, y:25} svg.append("rect") .attr("id", "box_missing_data_box") .attr("x", margin.left) .attr("y", height - margin.bottom + legend.sym.height) .attr("width", box_size.x) .attr("height", box_size.y) .attr("fill", missing_data_color); // Append the text caption svg.append("text") .attr("class", "capt_missing_data_box") .attr("x", margin.left + legend.sym.size + 40) .attr("y", height - margin.bottom + legend.sym.height + 17) .attr("font-size", "0.8em") .attr("font-family", "GB Garamond") .attr("fill", "black") .text("Données manquantes"); // ############# const width2 = width - margin.left - margin.right const height2 = height/3 - margin.top - margin.bottom; var svg2 = div.append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height/3 + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // List of subgroups = header of the csv files = soil condition here var subgroups = selected_country // List of groups = species here = value of the first column called group -> I show them on the X axis var groups = pieform.list // Add X axis var x = d3.scaleBand() .domain(groups) .range([0, width2-50]) .padding([0.1]) svg2.append("g") .attr("transform", "translate(20," + height2 + ")") .call(d3.axisBottom(x).tickSize(0)); // Find maximum value for the selected country on the selected waste : var max_value = 0 var current_value = 0 for (var i = 0; i < selected_country.length; i++){ for (var j = 0; j < pieform.list.length; j++){ for (var k = 0; k < groupKey.length; k++){ if (data_eu_by_waste_final[k].waste == pieform.list[j]){ current_value = data_eu_by_waste_final[k][selected_country[i]] if(current_value > max_value){ max_value = current_value } } } } } // Add Y axis var y = d3.scaleLinear() .domain([0, max_value]) .range([ height2, 0 ]); svg2.append("g") .attr("transform", "translate(20,0)") .call(d3.axisLeft(y)); // Another scale for subgroup position? var xSubgroup = d3.scaleBand() .domain(subgroups) .range([0, x.bandwidth()]) .padding([0.05]) // color palette = one color per subgroup var color2 = d3.scaleOrdinal() .domain(subgroups) .range(['#e41a1c','#377eb8','#4daf4a']) // Show the bars svg2.append("g") .selectAll("g") // Enter in data = loop group per group .data(data_eu_by_waste_final) .enter() .append("g") .attr("transform", function(d) { return "translate(" + x(d.waste) + ",0)"; }) .selectAll("rect") .data(function(d) { return subgroups.map(function(key) { return {key: key, value: d[key]}; }); }) .enter().append("rect") .attr("x", function(d) {return xSubgroup(d.key) + 20; }) .attr("y", function(d) {return y(d.value) - margin.bottom - margin.top - 0.5;}) .attr("width", xSubgroup.bandwidth()) .attr("height", function(d) { return height/3 - y(d.value); }) .attr("fill", function(d) { if (d.value == 0) { return "white" } else {return color(d.key);}}); svg2.selectAll("rect2") .data(selected_country) .enter() .append("rect") .attr("id", "leg_box") .attr("x", width - legend.sym.width) .attr("y", (d,i) => margin.top +(legend.step* i)+ legend.sym.height) .attr("width", legend.sym.size) .attr("height", legend.sym.size) .attr("fill", (d,i) => { return color(d) //country_with_data.includes(d.id) ? color2(filteredgetWasteByCountryYears[d.id][1].TOTAL) : "black" }) svg2.selectAll("#text") .data(selected_country) .enter() .append("text") .attr("class", "leg_capt") .attr("x", width - legend.caption.width) .attr("y", (d,i) => margin.top + (legend.step * i) + legend.caption.height ) .attr("font-size", legend.sym.font_size) .attr("fill", "black") .text(d=>d) return div.node() }34:T432,function getWasteByCountryYearsFiltered(years, features, myArr) { let result = {}; years.forEach((year) => { const filteredFeatures = features.filter(feature => myArr.includes(feature.id)); const yearResult = []; filteredFeatures.forEach((feature) => { const country = feature.id; let waste = 0; if (feature.waste && feature.waste[year] && Object.keys(feature.waste[year]).length > 0) { waste = feature.waste[year]; } yearResult.push({ year: year, id: country, name: feature.properties.name, waste: waste, }); }); const nestedResult = d3.nest() .key(d => d.id) .entries(yearResult); nestedResult.forEach((d) => { result[d.key] = d.values; }); }); result = d3.map(result, (d) => ({ id: d.id, name: d.name, PRIM: d3.sum(d, (i) => i.PRIM), SEC: d3.sum(d, (i) => i.SEC), TOTAL: d3.sum(d, (i) => i.TOTAL), TOT_X_MIN: d3.sum(d, (i) => i.TOT_X_MIN), years: d.map(i => i.year), })) return result; }35:T562,function getWasteByCountryYears(years, features, country_list = country_with_data) { let result = {}; // Initialize the result object with an array for each country features.forEach((feature) => { const country = feature.id; result[country] = []; }); years.forEach((year) => { const filteredFeatures = features.filter(feature => country_list.includes(feature.id)); filteredFeatures.forEach((feature) => { const country = feature.id; let waste = 0; if (feature.waste && feature.waste[year] && Object.keys(feature.waste[year]).length > 0) { waste = feature.waste[year]; } // Push the waste data for this year into the corresponding country array result[country].push({ year: year, id: country, name: feature.properties.name, waste: waste, }); }); }); // Map the waste data for each country to the desired format Object.keys(result).forEach((country) => { result[country] = d3.map(result[country], (d) => ({ id: d.id, year: d.year, name: d.name, PRIM: isNaN(+d.waste.PRIM) ? 0 : +d.waste.PRIM, SEC: isNaN(+d.waste.SEC) ? 0 : +d.waste.SEC, TOTAL: isNaN(+d.waste.TOTAL) ? 0 : +d.waste.TOTAL, TOT_X_MIN: isNaN(+d.waste.TOTAL_X_MIN) ? 0 : +d.waste.TOTAL_X_MIN })); }); return result; }36:T107b,pie_chart = (data, label, type, w, top4, color=pie_chart_cschema, tooltip = true) => { // type == 0 === piechart, // Parameters const pie = d3.pie(), // width = w, width = d3.min([w, 600]), // height = width - (width/3), height = width * 0.80, OUTER = height < width ? height / 3 : width / 4, INNER = (type == 1) ? OUTER / 3 : 0, labelRadius = (INNER + OUTER) / 2, min_legend_angle = 0.25, viewBox = pie_chart_viewbox(width, height); // DOM const margin = {top: 25, right: 35, bottom: 35, left: 45}, //TODO PAS FINI LE WIDTH ET HEIGHT // note: plus simple de definir un width fixe pour le tooltip // cest grossier la mais ca marche je vais accepter pour auj gap_leg = 2, legend = { sym:{ // width: width/2 - width/20 + 40 , width : (20 - gap_leg) * width / 40 +50, height: -height/1.585 + 30, size: width/20 }, perc:{y:18 - 30, x:(20 - gap_leg) * width / 40 + 70, color: "black", size: width/18, font:"Lora"}, caption:{ width: (20 + gap_leg) * width / 40, height: -height/1.65 + 30, size: width/22, color: "black", wrap_at: 25}, step: height/4.3 }, svg = d3.create("svg") .attr("height", height) .attr("width", width) .attr("viewBox", viewBox) .style("max-width", "100%") .style("height", "intrinsic") .style("background", "#fefeee"); let g = svg.append("g") // LEGEND g.selectAll("#rect") .data(top4) .enter() .append("rect") .attr("id", "leg_box") .attr("x", (d, i)=> width - legend.sym.width - margin.right / (i+ 1.000001)) .attr("y", (d,i) => margin.top +(legend.step* i)+ legend.sym.height) .attr("width", (d,i) => legend.sym.size*1 + 40 / (i+ 1.000001) ) .attr("height", legend.sym.size*1.5) .style("color", "black") .attr("fill", d => color(d.code) ) // Percentages g.selectAll("#text") .data(top4) .enter() .append("text") .attr("x", (d, i)=> width - legend.sym.width + legend.perc.x) .attr("y", (d,i) => margin.top +(legend.step* i)+ legend.sym.height +20 + legend.perc.y) .attr("font-size", legend.perc.size) .attr("font-weight", "bolder") .attr("opacity", (d,i) => 0.6 + 0.4 * (1 - (i/4))) .attr("fill", legend.perc.color) .text(d => d.percentage + "%") g.selectAll("#text") .data(top4) .enter() .append("text") .attr("class", "leg_capt") // .attr("x", \width - margin.right - legend.caption.width) .attr("x", legend.caption.width) // .attr("y", (d,i) => margin.top + (legend.step * i) + legend.caption.height ) .attr("y", (d,i) => margin.top + (legend.step * i) + legend.caption.height + 5 ) .attr("font-size", legend.caption.size) .attr("fill", legend.caption.color) .each(function(d, c){ const lines = wordwrap(d.label, legend.caption.wrap_at); const max_lines = 3 for (let i = 0; i < max_lines; i++) { const tspan = d3.select(this).append("tspan") .attr("x", legend.caption.width) .attr("dy", i === 0 ? 0 : "1.2em") .text(i === 0 ? (d,i) => c+1 +". "+ lines[i] : lines[i]); // add line numbers for first line } }); function wordwrap(text, maxCharsPerLine) { const words = text.split(" "); const lines = []; let line = ""; words.forEach(word => { if (line.length + word.length <= maxCharsPerLine) { line += " " + word; } else { lines.push(line.trim()); line = word; } }); lines.push(line.trim()); return lines; } //// Pie code const arc = d3.arc().innerRadius(INNER).outerRadius(OUTER) let arcs = g.selectAll('arc') .data(pie(data)) .enter() .append('g') .attr('class', 'arc') arcs.append('path') .attr('fill', (d,i)=> color(label[i])) .attr('d', arc) //// Labels arcs.append("text") .attr("font-family", "sans-serif") .attr("font-size", legend.caption.size) .attr("text-anchor", "middle") .attr("transform", d => `translate(${arc.centroid(d)})`) .text((d,i) => (d.endAngle - d.startAngle) > 0.25 ? label[i] : "") .attr('fill', 'white') return svg.node(); }37:Tc85,linechart = (data, x_axis, y_axis, x_LABEL, y_LABEL, datesData, width=900, height=550) => { // svg base definitions const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) let margin = {top: 40, right: 55, bottom: 35, left: 85} // // Color scale const c = d3.scaleOrdinal() .domain(Array.from(data.keys())) .range(d3.schemeCategory10) // Legend const legend = { x : 10, y : 50, step: 25, sym:{ x: 15, y: 7, size: 8 }, cap:{ x: 0, height: 0, size: 13.5 } } svg.selectAll("#rect") .data(c.domain()) .enter() .append("rect") .attr("id", "leg_box") .attr("x", width - margin.right - legend.sym.x - legend.x) .attr("y", (d,i) => margin.top +(legend.step* i) - legend.sym.y + legend.y) .attr("width", legend.sym.size) .attr("height", legend.sym.size) .attr("fill", d=>c(d)) // Legend text svg.selectAll("#text") .data(c.domain()) .enter() .append("text") .attr("class", "leg_capt") .attr("x", width - margin.right - legend.cap.x - legend.x) .attr("y", (d,i) => margin.top + (legend.step * i) + legend.cap.height + legend.y) .attr("font-size", legend.cap.size) .attr("fill", "black") .text(d=>d) // Axes - Scales const domain = {x:{max : 7, min: 0}, y:{max:10, min:0}, attr:"x_axis"} let datesExtent = d3.extent(datesData) const x = d3.scaleLinear() .domain(datesExtent).nice() .range([margin.left, width - margin.right - (legend.x * 0.8 + legend.sym.x)]); const y = d3.scaleLinear() .domain([0, waste_TOTAL_max]).nice() .range([height - margin.bottom, margin.top]); // Axes - Axes let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))) let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) // Axes - Labels let xAxisLabel = svg.append("text") .attr("x", width - margin.right * 4) .attr("y", height - margin.bottom * 0) .text(x_LABEL.replace("_", " ").toUpperCase()) .attr("text-anchor", "right") .attr("font-size", "12px") .attr("dx", "12em") .attr("font-weight", "bold") .attr("dy", "-3.5em") let yAxisLabel = svg.append("text") .attr("x", margin.left * (-.6)) .attr("y", margin.top - margin.left/2) .attr("transform", `rotate(270, ${margin.left}, ${margin.top})`) .text(y_LABEL.replace("_", " ")) .attr("text-anchor", "end") .attr("y", 6) .attr("dy", "-3em") .attr("dx", "13em") .attr("font-size", "13px") .attr("font-weight", "bold") xAxisLabel.style("fill", "black") yAxisLabel.style("fill", "black") // Line const line = d3.line() .x(d => x(d[x_axis])) .y(d => y(d[y_axis])) .curve(d3.curveMonotoneX); data.forEach((d,k) => { //data, keys svg.append("path") .datum(d) .attr("fill", "none") .attr("stroke", c(k)) .attr("stroke-width", 1.88) .attr("d", line); }) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node() }38:[{"id":"7c6d819f1c301ca4ff6afee5eec8c75f2ed765a8fcbd4e77b60a75a266b22e5e36a4104e975a521d29edbbfb90bd7bc20c4f4e958a0884182d571daafc6830c2","href":"https://static.observableusercontent.com/files/7c6d819f1c301ca4ff6afee5eec8c75f2ed765a8fcbd4e77b60a75a266b22e5e36a4104e975a521d29edbbfb90bd7bc20c4f4e958a0884182d571daafc6830c2","name":"331708969_1363502077745524_3763034360031894557_n.jpg","type":"image/jpeg","lastModified":1678615347333.339,"size":100144},{"id":"7769d6121a708232d0952ee413bda2e0858d8f40ef6d7fa7b3aea3ad10b6379e2b0edafdf5eaa54a8a195397518fe92c9ee99ca2314935b2b42bd02904e47de8","href":"https://static.observableusercontent.com/files/7769d6121a708232d0952ee413bda2e0858d8f40ef6d7fa7b3aea3ad10b6379e2b0edafdf5eaa54a8a195397518fe92c9ee99ca2314935b2b42bd02904e47de8","name":"env_wastrt_linear.csv","type":"text/csv","lastModified":1678615347333.339,"size":35302466},{"id":"59e43e8981d54422159aa5466a1d09afa38fd88657f638191b463f4c1c5b7a92edcd40745649f4ebe780de24f51883eebf395dbf2b643a1bd8457ee1891d712b","href":"https://static.observableusercontent.com/files/59e43e8981d54422159aa5466a1d09afa38fd88657f638191b463f4c1c5b7a92edcd40745649f4ebe780de24f51883eebf395dbf2b643a1bd8457ee1891d712b","name":"env_wasgen__custom_4845435_linear.csv","type":"text/csv","lastModified":1678615347333.339,"size":7331682},{"id":"03718005bba523e36f5f2102f88cb3310f80e5dea5c3d44a18e9e1aa561e7aa55b6e9b39de0a9827ee6e8ee7bf0f19457709090ddf6bf6bc85280ce60983dba9","href":"https://static.observableusercontent.com/files/03718005bba523e36f5f2102f88cb3310f80e5dea5c3d44a18e9e1aa561e7aa55b6e9b39de0a9827ee6e8ee7bf0f19457709090ddf6bf6bc85280ce60983dba9","name":"tps00001_page_linear.csv","type":"text/csv","lastModified":1678616545302.992,"size":37922}] 2f:{"id":"b147d0f7afcfcceb","slug":null,"title":"Tendance de la production des déchets en Union Européenne","thumbnail":"a0d02a579d8c9fbbcbae9b6cc66f3f95d63da59ac3d5c888e1e547a29deae17e","access_level":"public","create_time":"$D2023-03-12T10:02:27.333Z","update_time":"$D2023-03-12T11:07:32.331Z","view_time":null,"first_public_time":"$D2023-03-12T10:02:27.333Z","has_unpublished_edits":null,"fork":{"id":"792ca34f314c89c9","slug":null,"title":"Tendance de la production des déchets en Union Européenne","owner":{"id":"dc9d160be77ea63a","login":"zidane-dev","name":"zidane"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1002327470a4e5f3","login":"opmue15","name":"Mathieu Roszak","avatar_url":"https://avatars-next.observableusercontent.com/898295f04f1eff00214cbf5ee60ad5363399efdc6b5d8e5f4d45798f05858110","tier":"starter_2024"},"version":5542,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d98f568699afd085","login":"opmue15","name":"Mathieu Roszak","avatar_url":"https://avatars-next.observableusercontent.com/898295f04f1eff00214cbf5ee60ad5363399efdc6b5d8e5f4d45798f05858110","tier":null}],"members":[{"type":"individual","id":"d98f568699afd085","login":"opmue15","name":"Mathieu Roszak","avatar_url":"https://avatars-next.observableusercontent.com/898295f04f1eff00214cbf5ee60ad5363399efdc6b5d8e5f4d45798f05858110","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Tendance de la production des déchets en Union Européenne","cells":[{"id":0,"value":"# Tendance de la production des déchets en Union Européenne","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":582,"value":"## Prototypage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1413,"value":"_1363502077745524_3763034360031894557_n = FileAttachment(\"331708969_1363502077745524_3763034360031894557_n.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2708,"value":"## BOARD","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3891,"value":"## TUNE IT","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":152,"value":" width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"viewof hr = Inputs.range([0, 10], {label: \"Height\", step: 2, value:6})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"height= parseFloat(width - width/hr).toFixed(2)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"viewof bgcmode = Inputs.radio([\"Light\", \"Dark\", \"Free\"], {group: \"mode\", label: \"Background Theme\", value: \"Light\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"viewof map_cbg = Inputs.color({label: \"Free Color Picker (check and delete)\", value: \"#eeedef\"}) \n// \"#4682b4\"\n// 002d38 dark mode","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"viewof cbg_light = Inputs.color({label: \"Map Light Background\", value: \"#EAFDF8\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"viewof cbg_dark = Inputs.color({label: \"Map Dark Background\", value: \"#225560\"}) // #225560","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"viewof gratsC = Inputs.color({label: \"Graticules\", value: \"#88A096\"}) // #88A096 769fcd","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"boxlegend_toggle = Inputs.radio([\"ON\", \"OFF\"], {group: \"mode\", label: \"Toggle Legend (box)\", value: \"ON\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"viewof maplegend_toggle = Inputs.radio([\"ON\", \"OFF\"], {group: \"mode\", label: \"Toggle Legend (map)\", value: \"OFF\"})","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"feature_year_liste = Object.keys(hardcoded_feature_reference.waste).slice(1)\n// features[7] is hard code, \n// ! is it fine ?\n// j'ai evité les années 2004, 2006 et 2008 !","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"geojson_countries = d3.map(geojson.features, d => d.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"viewof mode = Inputs.radio([\"Libre\", \"Fitted (default)\", \"Zoom sur France\"], {group: \"mode\", label: \"Select Mode\", value: \"Fitted (default)\"})","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"viewof scaleprojec = Inputs.range([100, 3000], {label: \"Scale\", step: 1, value:820})\n// range = Inputs.range([100, 3000], {label: \"Scale\", step: 1})","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"viewof centerx = Inputs.range([0, 30], {label: \"Center X\", step: 0.0001, value:27.121})\n// centerx = Inputs.range([0, 100], {label: \"Center X\", step: 0.0001})","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof centery = Inputs.range([35, 75], {label: \"Center Y\", step: 0.0001, value: 74.4784})\n// centery = Inputs.range([0, 90], {label: \"Center Y\", step: 0.0001})","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"width_tooltip_pie = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"viewof pieform = Inputs.form({\n list: Inputs.checkbox(feature_waste_liste, {label: \"Type de déchet\", value: refresh}),\n // year: Inputs.select(feature_year_liste, {label: \"Select year\"}),\n year : Inputs.range(d3.extent(feature_year_liste), {label: \"Année\", step: 2}),\n}) ","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3297,"value":"geomap(geojson, projection())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4173,"value":"`filtered waste` est liée au `pieform`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4100,"value":"filtered_waste = {\n let keysArray = waste_labels.map(obj => Object.keys(obj)[0]);\n return waste_labels.filter(obj => pieform.list.includes(Object.keys(obj)[0]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4186,"value":"total_wasteMap = getWasteByCountry(pieform.year, geojson.features)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4253,"value":"filteredgetWasteByCountryYears = Object.fromEntries(\n Object.entries(getWasteByCountryYears(feature_year_liste, geojson.features))\n .filter(([key, value]) => value.length > 0)\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4267,"value":"linechart(selected_line_chart_data, \"year\", \"TOTAL\" , \"Année\", \"Total waste\" , feature_year_liste)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"# DASHBOARD","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4354,"value":"{\n const button = html`