3e:null 3f:["$","title",null,{"children":"D3 further exploratory analysis - Final charts | user_55 | Observable"}] 45:T2115,taskplot = { const margin = ({top: 60, right: 250, bottom: 40, left: 60}); //margin object const width = 950; //width of SVG in pixels const height = 600; //height of SVG in pixels ////--------------------------------- Filtering data ------------------------------------------------------------------ const data = dataRename.filter(d => d[xVar] && d[yVar]) 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]) //scale the axis depending on the information for each axis const xScale = d3.scaleLog() .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) //--------------------------------- creating the circles ------------------------------------------------------------ svg.append('g') .selectAll("dot") .data(filtered) .enter() .append("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', 1) .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()}
Population: ${i.population.toLocaleString('en-US', {maximumSignificantDigits: 3})}
${[xVar]}: ${i[xVar].toLocaleString('en-US', {maximumSignificantDigits: 3})}`); }) .on("mouseout", function(d,i) { d3.select(this) .style('fill', d=> color(d.continent)) .style('stroke-width', '1') tooltip.style('visibility', 'hidden') }) //--------------------------------- add legend: continent dots ------------------------------------------------------------------ const marginRight = 150 const size = 20 const allgroups = ["Asia", "Europe", "Americas", "Africa", "Oceania"] svg.selectAll("myrect") .data(allgroups) .enter() .append("circle") .attr("cx", width-marginRight) .attr("cy", function(d,i){ return 280 + i*(size+5)}) .attr("r", 5) .style("fill", function(d){ return color(d)}) .on("click", function(i,d) { if (d3.select(this).classed('non_selected')) { //console.log('non sel') d3.select(this).classed('non_selected',false) d3.select(this).classed('selected',true) d3.selectAll(".bubbles"+d).style("opacity", .2) } else { d3.selectAll(".bubbles"+d).style("opacity", 1) d3.select(this).classed('non_selected',true) d3.select(this).classed('selected',false) } }) //Add labels beside legend dots svg.selectAll("mylabels") .data(allgroups) .enter() .append("text") .attr("x", width -marginRight + size*.8) .attr("y", function(d,i){ return 275 + i * (size + 5) + (size/2)}) .attr('class','non_selected') .style("fill", function(d){ return color(d)}) .text(function(d){ return d}) .attr("text-anchor", "left") .style("alignment-baseline", "middle") .on("click", function(i,d) { if (d3.select(this).classed('non_selected')) { //console.log('non sel') d3.select(this).classed('non_selected',false) d3.select(this).classed('selected',true) d3.selectAll(".bubbles"+d).style("opacity", .2) } else { d3.selectAll(".bubbles"+d).style("opacity", 1) d3.select(this).classed('non_selected',true) d3.select(this).classed('selected',false) } //console.warn(d3.selectAll(".bubbles"+d),".bubbles"+d) // d3.selectAll(".bubbles").style("opacity", 1) // reduce opacity of all groups // expect the one that is hovered //d3.selectAll("."+d).style("opacity", 1) }) //--------------------------------- Add legend: population circles ------------------------------------------------------------------ const valuesToShow = [10000000, 100000000, 1000000000] svg.selectAll("legend") .data(valuesToShow) .enter() .append("circle") // circles of the legend .attr("cx", width - marginRight) .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 - 100 + rScale(d) } ) .attr('x2', width -marginRight) .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 - 90) .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 - 90) .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-200) .attr("font-size", 26) .attr("font-family", "monospace") //.attr("fill", "white"); return svg.node(); } 46: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(); }47:T46e,diff_total_meat = { // Function to calculate percentage change function getPercentageChange(oldNumber, newNumber) { var value = newNumber - oldNumber; return (value / oldNumber) * 100; } // Filter the array to get only the elements of year 1991 var countriesInitialYear = dataRename.filter(function(country) { return country.year == 1991; }); // Find matches in country name between the filtered array and the original one 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) { // If there's a match, we create a new property (difference) with the percentage change var percentageChange = getPercentageChange(initialYear.agriculture_meat_consumption, country.agriculture_meat_consumption); return { ...country, difference: percentageChange }; } else { // If not, we return the original element without 'difference' property return country; } }); return data }48:Ta38,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]); total_meat_2018.sort((a, b) => b.continent.localeCompare(a.continent)).sort((a, b) => b.difference - a.difference); 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", -30) .attr("y", -20) .attr("text-anchor", "start") .text("Percentage change") ) 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(); }49: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; })4a:[{"id":"4f7f691e019a43587a4c366a9ce55ed07031a514f45c1c69a27b1814be4c3dea2b0388a7f92cfb4d95562fb29d540aa6c147924d07cd406164050487cbdf3de9","href":"https://static.observableusercontent.com/files/4f7f691e019a43587a4c366a9ce55ed07031a514f45c1c69a27b1814be4c3dea2b0388a7f92cfb4d95562fb29d540aa6c147924d07cd406164050487cbdf3de9","name":"joined@1.json","type":"application/json","lastModified":1675565836203.768,"size":3136096},{"id":"ebcedfcb3a8ee7e45f51b3f6427024eb5858a25259904872853f9b1d81e24b246fd8e675331ff0bfea89090d3c53d7c43e2f04ce82f913d5b7e54745419d75fc","href":"https://static.observableusercontent.com/files/ebcedfcb3a8ee7e45f51b3f6427024eb5858a25259904872853f9b1d81e24b246fd8e675331ff0bfea89090d3c53d7c43e2f04ce82f913d5b7e54745419d75fc","name":"joined@4.json","type":"application/json","lastModified":1675565836203.768,"size":2452136}] 43:{"id":"67c389513595fe54","slug":null,"title":"D3 further exploratory analysis - Final charts","thumbnail":"a69001c1c753dcd0071c3a89cff1ce2d751287cc17c7d1de587083b9cc79b6af","access_level":"public","create_time":"$D2023-02-05T02:57:16.203Z","update_time":"$D2023-02-05T02:57:16.203Z","view_time":null,"first_public_time":"$D2023-02-05T02:57:16.203Z","has_unpublished_edits":null,"fork":{"id":"f9b6545ddbf85d55","slug":null,"title":"D3 further exploratory analysis - Final charts","owner":{"id":"586355282c6465ba","login":"marinaroviraiboix","name":"Marina Rovira Boix"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a9b0817896a62112","login":"userr","name":"user_55","avatar_url":"https://avatars-next.observableusercontent.com/288ec4b4e0f8dcf78464e692d71e794b6ac37f7ab5c33ca643f6cfb3a1a05d94","tier":"starter_2024","bio":"","following":false},"version":983,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4bf7eaa658b9750","login":"userr","name":"user_55","avatar_url":"https://avatars-next.observableusercontent.com/288ec4b4e0f8dcf78464e692d71e794b6ac37f7ab5c33ca643f6cfb3a1a05d94","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d4bf7eaa658b9750","login":"userr","name":"user_55","avatar_url":"https://avatars-next.observableusercontent.com/288ec4b4e0f8dcf78464e692d71e794b6ac37f7ab5c33ca643f6cfb3a1a05d94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 further exploratory analysis - Final charts","cells":[{"id":0,"value":"# D3 further exploratory analysis - Final charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":779,"value":"After doing the exploration in the [previous notebook](https://observablehq.com/d/1b27b0c79547839b), these are the final charts that we will use in our story.\n[Link to final story](https://mvtec2022-final.vercel.app/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":783,"value":"### Interactive scatterplot to show the relationship between a wealth indicator and a consumption indicator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":786,"value":"The goal of this visualization is to better show the relationship between the 2 variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"viewof selectedYear= Inputs.range([1990, 2018], {label: \"Year\", step: 1})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof xVar = Inputs.select([ 'gdp',\n 'gdp_per_capita',\n 'productivity',\n 'gini' ], {label: \"Select x variable\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"viewof yVar = Inputs.select([\n 'agriculture_meat_consumption',\n 'agriculture_total_consumption',\n 'electricity_per_capita',\n 'EV_sales',\n 'consumption_per_capita'], {label: \"Select y variable\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"## Interactive line chart to focus on the evolution of wealth and consumption indicators overtime","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"viewof selectedContinent = Inputs.checkbox(continents, {label: \"Highlight continent\", value: [\"A\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"viewof selectedCountry = Inputs.select(countryNames, {multiple: true, label: \"Select one or more\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"viewof zoom = Inputs.checkbox([\"true\"], {label: \"Adjust y scale\", value: [\"A\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"viewof isLog = Inputs.checkbox([\"true\"], {label: \"Switch to Logarithmic scale\", value: [\"A\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"consumptionChart = linechart(filteredDataLine, yVarLine)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"indicatorChart = linechart(filteredDataLine, wealthIndicator)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"## Small multiple line charts to show specific meat types for selected countries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":950,"value":"The chart below is using the Plot library, and is only a first version. The final version was done directly in Svelte, using the same component as the above line chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":565,"value":"countries = [\n \"Argentina\",\n \"Switzerland\",\n \"India\",\n \"China\",\n \"United States\",\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"filteredLine = data2.filter(d => countries.includes(d.country_name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"## Bar chart: difference in meat consumption 1991-2018","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":473,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"total_meat_2018 = diff_total_meat.filter (d => d.year==2018)\n .filter (g => g.agriculture_meat_consumption)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"## Attachments and data imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data = FileAttachment(\"joined@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"Inputs.table(data2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"data2 = FileAttachment(\"joined@4.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"Inputs.table(dataRename)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"filteredData = dataRename.filter(d => d.year === selectedYear);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"filteredDataLine = dataRename.filter(d => d[yVarLine])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"grouped = d3.groups(filteredDataLine, d => d.country)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"countryNames = grouped.map(d => d[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"groupedData = d3.groups(dataRename, d => d.country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"dataRename.filter(d => d[yVarLine])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"continents = filteredDataLine.map(d => d.continent).filter((v, i, a) => a.indexOf(v) === i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"