2f:T553,dataRename = data.map (d=> { var newd = { alpha2: d["alpha2"], alpha3: d["alpha3"], country: d["country_name"], continent: d["continent"], year: +d["year"], variable: d["variable"], annual_working_hours_per_worker: +d["Annual working hours per worker"], productivity: +d["Productivity: output per hour worked"], agriculture_meat_consumption: +d["Agriculture activity (meat): consumption_historic"], agriculture_total_consumption: +d["Agriculture activity (total): consumption_historic"], electricity_per_capita: +d["Electricity activity (per capita)_historic"], gas_share_primary_energy: +d["Gas share in primary energy_historic"], oil_gas_production: +d["Oil and Gas activity: production_historic"], consumption_per_capita: +d["consumption_per_capita"], population: +d["Population"], gdp: +d["GDP (expenditure, multiple price benchmarks)"], consumption_households_government: +d["Consumption of households and government (single price benchmark)"], gdp_per_capita: +d["GDP per capita (expenditure, multiple price benchmarks)"], gini: +d["Gini coefficient"], EV_sales: +d["New EV sales per million capita_historic"], waste_generation_CTI: +d["Waste generation (per capita)_CTI scenario"], waste_generation: +d["Waste generation (per capita)_historic"] } return newd; })30:T1f72,taskplot = { const margin = ({top: 60, right: 200, bottom: 40, left: 40}); //margin object const width = 1000; //width of SVG in pixels const height = 600; //height of SVG in pixels ////--------------------------------- Filtering data ------------------------------------------------------------------ //filtering the data to just have rows where selected xVar and yVar exists const data = dataRename.filter(d => d[xVar] && d[yVar]) // filtering the data to just the selected year const filtered = data.filter(d => d.year === selectedYear) ////--------------------------------- circle scale depending on the variable population --------------------------------- const rScale = d3.scaleSqrt() .domain([0,d3.max(data, d => d.population)]) .range([0, 50]) //circles, la grandària en quant a rang, tenint en compte lo domini //scale the axis depending on the information for each axis const xScale = d3.scaleLog()//Log scales are similar to linear scales, except a logarithmic transform is applied to the input domain value before the output range value is computed. .domain(d3.extent(data.map(d=>d[xVar]))).nice() .range([margin.left, width - margin.right]) const yScale = d3.scaleLinear() .domain([0,d3.max(data.map(d=>d[yVar]))]).nice() .range([height-margin.bottom, margin.top]) ////--------------------------------- Axis ------------------------------------------------------------------ //X axis based on the scale calculated before const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)) //Y axis based on the scale calculated before const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) ////--------------------------------- creating chart area ------------------------------------------------------------------ const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox",[0, 0, width, height]); ////--------------------------------- text sqaure with information --------------------------------- const tooltip = d3.select('body') .append('div') .style('position', 'absolute') .style('z-index', '1') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('border-radius', '4px') .style('color', '#fff'); //creating the axis const gx = svg.append("g") .call(xAxis); const gy = svg.append("g") .call(yAxis); ////---------------------------------set color scheme ------------------------------------------------------------------ const color = d3.scaleOrdinal() .domain(data.map(d=> d.continent)) .range(d3.schemeCategory10) //--------------------------------- add legend: continent dots ------------------------------------------------------------------ const size = 20 const allgroups = ["Asia", "Europe", "Americas", "Africa", "Oceania"] svg.selectAll(".legendCircles") .data(allgroups) .join('circle') .attr("class","legendCircles") .attr("cx", width-100) .attr("cy", function(d,i){ return 280 + i*(size+5)}) .attr("r", 5) .style("fill", function(d){ return color(d)}) //.on("mouseover", highlight) //.on("mouseleave", noHighlight) //Add labels beside legend dots svg.selectAll("mylabels") .data(allgroups) .enter() .append("text") .attr("x", width -100 + size*.8) .attr("y", function(d,i){ return 275 + i * (size + 5) + (size/2)}) .style("fill", function(d){ return color(d)}) .text(function(d){ return d}) .attr("text-anchor", "left") .style("alignment-baseline", "middle") .on("click", function(e,d,i) { // reduce opacity of all groups //d3.selectAll(".bubbles").style("opacity", .05) // expect the one that is hovered //d3.selectAll("."+d).style("opacity", 1) console.log("test") }) //.on("mouseleave", noHighlight) //--------------------------------- Add legend: population circles ------------------------------------------------------------------ const valuesToShow = [10000000, 100000000, 1000000000] svg.selectAll("legend") .data(valuesToShow) .enter() .append("circle") // circles of the legend .attr("cx", width - 100) .attr("cy", function(d){ return height - 40 - rScale(d) } ) .attr("r", function(d){ return rScale(d) }) .style("fill", "none") .attr("stroke", "black") svg.selectAll("legend") .data(valuesToShow) .enter() .append("line") //lines of the legend .attr('x1', function(d){ return width - 60 + rScale(d) } ) .attr('x2', width -100) .attr('y1', function(d){ return height - 40 - rScale(d) } ) .attr('y2', function(d){ return height - 40 - rScale(d) } ) .attr('stroke', 'black') .style('stroke-dasharray', ('2,2')) svg.selectAll("legend") .data(valuesToShow) .enter() .append("text") // text of the legend .attr('x', width - 40) .attr('y', function(d){ return height - 40 - rScale(d) } ) .text( function(d){ return d/1000000 } ) .style("font-size", 10) .attr('alignment-baseline', 'middle') svg.append("text") .attr('x', width - 60) .attr("y", height - 20) .text("Population (M)") .attr("text-anchor", "middle") //--------------------------------- legend selected ywar ------------------------------------------------------------------ svg.append("text") .text("Year: "+selectedYear) .attr("y", 50) .attr("x", width-150) .attr("font-size", 26) .attr("font-family", "monospace") //.attr("fill", "white"); //--------------------------------- creating the circles ------------------------------------------------------------------ // svg.selectAll('circle') // This doesn't work because of the selection svg.selectAll('.bubbles') .data(filtered) .join('circle') .attr("class", function(d) { return "bubbles" + d.continent }) .attr('cx', d => xScale(d[xVar])) .attr('cy', d => yScale(d[yVar])) .attr('r', d => rScale(d.population)) .style('fill', d=> color(d.continent)) .style('opacity', .6) .style('stroke', "black") .style('stroke-width', '1') //interaccions en lo cursor .on("mouseover", function(d, i) { // change the selection style d3.select(this) .style('stroke-width', '4') .style('fill', "steelblue"); const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", d.pageX - tooltipWidth +'px') .style("top", d.pageY-tooltipHeight - 10+'px') //això és per controlar lo gran que és lo requadre. Distància entre la pàgina i el ratolí .style('visibility', 'visible') //aquí el fem visible, en lo fromat que li hem dit abans .html(`Country: ${i.country}
${[yVar]}: ${i[yVar].toLocaleString()}
${[xVar]}: ${i[xVar].toLocaleString()}`); }) .on("mouseout", function(d,i) { d3.select(this) .style('fill', d=> color(d.continent)) .style('stroke-width', '1') tooltip.style('visibility', 'hidden') }) // What to do when one group is hovered const highlight = function(d){ // reduce opacity of all groups d3.selectAll(".bubbles").style("opacity", .05) // expect the one that is hovered d3.selectAll("."+d).style("opacity", 1) } // And when it is not hovered anymore const noHighlight = function(d){ d3.selectAll(".bubbles").style("opacity", 1) } return svg.node(); } 31:T1810,function linechart(data, yVar) { const margin = ({top: 20, right: 120, bottom: 20, left: 40}); //margin object const width = 600; //width of SVG in pixels const height = 200; //height of SVG in pixels const groupedData = d3.groups(data, d => d.country) console.log(groupedData) const selected = selectedCountry || selectedContinent const dataForScale = zoom.length > 0 ? data.filter(d => selected ? selectedCountry.includes(d.country) || selectedContinent.includes(d.continent) : d) : data const highlighted = data.filter(d => d.year === 2018) //selectedCountry.includes(d.country) && function isSelected(d, c) { return selectedCountry.includes(d) || selectedContinent.includes(c) } const yScaleLinear = d3.scaleLinear() .domain(d3.extent(dataForScale, d => d[yVar])) .range([height - margin.bottom, margin.top]); const yScaleLog = d3.scaleLog() .domain(d3.extent(dataForScale, d => d[yVar])) .range([height - margin.bottom, margin.top]); const yScale = isLog.length > 0 ? yScaleLog : yScaleLinear; const colorScale = d3.scaleOrdinal() .domain(data.map(d => d.continent)) .range(d3.schemeTableau10) const xScale = d3.scaleLinear() .domain(d3.extent(data, d => d.year)) .range([margin.left, width - margin.right]) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) // .call(g => g.select(".domain").remove()) // .call(g => g.select(".tick:last-of-type text").clone() // .attr("x", 3) // .attr("text-anchor", "start") // .attr("font-weight", "bold") // .text(yVarLine)) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0)) const line = d3.line() .defined(d => !isNaN(d[yVar])) .x(d => xScale(d.year)) .y(d => yScale(d[yVar])); const svg = d3.create("svg") .attr("width", width) .attr("height", height); svg.append("g") .call(xAxis); svg.append("g") // .transition().duration(2000) .call(yAxis); const tooltip = d3.select('body') .append('div') .attr('id', 'linechart-tooltip') .style('position', 'absolute') .style('z-index', '1') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('border-radius', '4px') .style('color', '#fff'); console.log(groupedData); svg.selectAll('.line') .data(groupedData) .join('path') .attr("class", "line") .attr("d", d => line(d[1])) // .style("stroke-opacity", 0.5) .on("mouseover", function(e,d) { const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible') .html(`Country: ${d[0]}
`); d3.select(this).attr("stroke-opacity", 1).attr("stroke-width", 2); }) .on('mousemove', function(e) { const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') }) .on("mouseout", function(e,d) { tooltip .style('visibility', 'hidden') d3.select(this) .attr("stroke", d => colorScale(d[1][0].continent)) .attr("stroke-width", 1) .attr("stroke-opacity", d => isSelected(d[0], d[1][0].continent) ? 1 : 0.2);}) // .on("click", function(e,d) { // if(!selectedCountry.includes(d[0])) { // selectedCountry.push(d[0]) // } else { // const index = selectedCountry.indexOf(d[0]); // if (index > -1) { // selectedCountry.splice(index, 1); // } // } // d3.select(this).attr("stroke", d => { // if(selectedCountry.includes(d[0])) { // return "red" // } else { // return "lightgray" // } // }).attr("stroke-width", d => { // if(selectedCountry.includes(d[0])) { // return 2 // } else { // return 1 // } // }); // }) .attr("stroke-opacity", d => { let countryName = d[0] let continent = d[1][0].continent if(isSelected(countryName, continent)) { return 1; } else { return 0.2 } }) .attr("stroke", d => colorScale(d[1][0].continent)) .style("fill", "none") .style("stroke-width", d => { let countryName = d[0] let continent = d[1][0].continent if(isSelected(countryName, continent)) { return 2; } else { return 1; } }); svg.selectAll('.label') .data(highlighted) .join('text') .attr('class', 'label') .attr('x', width - margin.right + 5) .attr('y', d => yScale(d[yVar])) .attr('fill', d => colorScale(d.continent)) .attr('alignment-baseline', 'middle') // .attr('opacity', d => { // selectedCountry.includes(d.country) ? // "1" : // "0" // }) .text(d => { if(selectedCountry.includes(d.country)) { return d.country } else { return ""; }}) return svg.node(); }32:T485,diff_total_meat = { // Define the getPercentageChange function function getPercentageChange(oldNumber, newNumber) { var value = newNumber - oldNumber; return (value / oldNumber) * 100; } // Filter the array to get the elements with TIME equal to 1991 var countriesInitialYear = dataRename.filter(function(country) { return country.year == 1991; }); // Use the map method to transform the filtered array var data = dataRename.map(function(country) { // Find the object with the same country name and year equal to 1991 var initialYear = countriesInitialYear.find(function(initialYearCountry) { return initialYearCountry.country === country.country; }); if (initialYear) { // Calculate the percentage change in 'Agriculture activity (meat): consumption_historic' var percentageChange = getPercentageChange(initialYear.agriculture_meat_consumption, country.agriculture_meat_consumption); return { ...country, difference: percentageChange }; } else { // If there is no initial year data for this country, return the original object without the difference property return country; } }); return data }33:T9b6,barChart = { const margin = ({top: 30, right: 20, bottom: 20, left: 40}); //margin object const width = 900; //width of SVG in pixels const height = 400; //height of SVG in pixels const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox",[0, 0, width, height]); const yScale = d3.scaleLinear() .domain([d3.min(total_meat_2018, d => d.difference), d3.max(total_meat_2018, d => d.difference)]) .range([height - margin.bottom, margin.top]); const xScale = d3.scaleBand() .domain(total_meat_2018.map(d=>d.alpha3)) .range([margin.left, width - margin.right]) .padding(0.2); const selection = svg.selectAll('rect'); const colorScale = d3.scaleOrdinal() .domain(total_meat_2018.map(d => d.continent)) .range(d3.schemeCategory10); selection.data(total_meat_2018) .join('rect') .attr('x', d => xScale(d.alpha3)) .attr('y', d => d.difference < 0 ? yScale(0) : yScale(d.difference)) .attr('width', xScale.bandwidth()*0.9) .attr('height', d => Math.abs(yScale(0) - yScale(d.difference))) .style('fill', d => colorScale(d.continent)) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale) .ticks(width / 80) .tickSizeOuter(0) ) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 10) .attr("y", -20) .attr("text-anchor", "end") .text("Frequency") ) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const legend = svg.append('g') .attr('transform', `translate(${width - margin.right - 120}, ${margin.top})`); const legendItems = legend.selectAll('g') .data(colorScale.domain()) .join('g') .attr('transform', (d, i) => `translate(0, ${i * 20})`); legendItems.append('rect') .attr('width', 18) .attr('height', 18) .style('fill', colorScale); legendItems.append('text') .attr('x', 24) .attr('y', 9) .attr('dy', '0.35em') .text(d => d); legend.append('text') .attr('x', 0) .attr('y', -6) .attr('font-weight', 'bold') .text('Continent'); return svg.node(); }34:[{"id":"4f7f691e019a43587a4c366a9ce55ed07031a514f45c1c69a27b1814be4c3dea2b0388a7f92cfb4d95562fb29d540aa6c147924d07cd406164050487cbdf3de9","href":"https://static.observableusercontent.com/files/4f7f691e019a43587a4c366a9ce55ed07031a514f45c1c69a27b1814be4c3dea2b0388a7f92cfb4d95562fb29d540aa6c147924d07cd406164050487cbdf3de9","name":"joined@1.json","type":"application/json","lastModified":1672603209015.755,"size":3136096}] 2d:{"title":"D3 further explanatory analysis","cells":[{"id":0,"value":"# D3 further explanatory analysis","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"data = FileAttachment(\"joined@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"Inputs.table(dataRename)","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"console.log(xVar)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"console.log(yVar)","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"filteredData = dataRename.filter(d => d.year === selectedYear);","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof selectedYear= Inputs.range([1990, 2018], {label: \"Year\", step: 1})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof xVar = Inputs.select([ 'gdp',\n // 'annual_working_hours_per_worker',\n 'gdp_per_capita',\n 'productivity',\n 'gini' ], {label: \"Select x variable\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof yVar = Inputs.select([\n 'agriculture_meat_consumption',\n 'agriculture_total_consumption',\n 'electricity_per_capita',\n // 'gas_share_primary_energy',\n 'EV_sales',\n // 'oil_gas_production',\n // 'waste_generation_CTI',\n // 'waste_generation',\n 'consumption_per_capita'], {label: \"Select y variable\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"## Line chart","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"filteredDataLine = dataRename.filter(d => d[yVarLine])","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"grouped = d3.groups(filteredDataLine, d => d.country)","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"countryNames = grouped.map(d => d[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"groupedData = d3.groups(dataRename, d => d.country)","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"dataRename.filter(d => d[yVarLine])","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"continents = filteredDataLine.map(d => d.continent).filter((v, i, a) => a.indexOf(v) === i)","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"viewof selectedContinent = Inputs.checkbox(continents, {label: \"Highlight continent\", value: [\"A\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"viewof selectedCountry = Inputs.select(countryNames, {multiple: true, label: \"Select one or more\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"viewof zoom = Inputs.checkbox([\"true\"], {label: \"Adjust y scale\", value: [\"A\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"viewof isLog = Inputs.checkbox([\"true\"], {label: \"Switch to Logarithmic scale\", value: [\"A\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"warn = zoom.length > 0 && selectedCountry.length === 0 && selectedContinent.length === 0 ? md`Please uncheck this to display values` : md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"viewof yVarLine= Inputs.select([\n 'agriculture_meat_consumption',\n 'agriculture_total_consumption',\n 'electricity_per_capita',\n // 'gas_share_primary_energy',\n 'EV_sales',\n // 'oil_gas_production',\n // 'waste_generation_CTI',\n // 'waste_generation',\n 'consumption_per_capita'], {label: \"Select a consumption variable\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"consumptionChart = linechart(filteredDataLine, yVarLine)","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"viewof wealthIndicator = Inputs.select([ 'gdp',\n // 'annual_working_hours_per_worker',\n 'gdp_per_capita',\n 'productivity',\n 'gini' ], {label: \"Select wealth Indicator\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"indicatorChart = linechart(filteredDataLine, wealthIndicator)","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"countries = [\n \"Argentina\",\n \"Switzerland\",\n \"India\",\n \"China\",\n \"United States\",\n ];","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"filteredLine = data.filter(d => countries.includes(d.country_name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"Plot.plot({\n facet:{\n data:filteredLine,\n x: \"country_name\"\n },\n marks: [\n Plot.line(filteredLine, {\n x: \"year\", \n y: \"PIG\", \n }),\n Plot.line(filteredLine, {\n x: \"year\", \n y: \"POULTRY\", \n }),\n Plot.line(filteredLine, {\n x: \"year\", \n y: \"BEEF\", \n }),\n Plot.line(filteredLine, {\n x: \"year\", \n y: \"SHEEP\", \n }),\n // Plot.text(filteredLine.filter(d=> d.year === 2018), {\n // x: \"year\",\n // y: \"PIG\",\n // text: [\"PIG\"],\n // fill: \"#8a817c\",\n // dy: \"-0.5em\"\n // }),\n // Plot.text(travelers.slice(0, 1), {\n // x: \"date\",\n // y: \"current\",\n // text: [\"2020\"],\n // dy: \"1.2em\"\n // })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"### Bar chart: difference in meat consumption 1991-2018","pinned":false,"hidden":false,"mode":"md"},{"id":473,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"total_meat_2018 = diff_total_meat.filter (d => d.year==2018)\n .filter (g => g.agriculture_meat_consumption)","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}