25:["$","title",null,{"children":"The Plate and the Planet 🌎 | FHOÖ Information Visualization | Observable"}] 49:T412,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") .text("a simple tooltip"); const circle = svg.append("g") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .attr("fill", d => z(d.value)) .attr("r", 2.5); circle .on("mouseover", (event, d) => { tooltip.style("visibility", "visible").text(`Temperature: ${d.value}°C`); }) .on("mousemove", (event) => { const [x, y] = d3.pointer(event); tooltip.style("top", (y + 350) + "px").style("left", (x - 70) + "px"); }) .on("mouseout", (event, d) => { tooltip.style("visibility", "hidden"); }); return svg.node(); } 4a:T7d8,chart_actual = { const margin = {top: 20, right: 120, bottom: 30, left: 60}, height = 400; const keys = csv.columns.slice(3,7); const series = d3.stack().keys(keys)(data1); const x = d3.scaleLinear() .domain([d3.min(csv, d => d.year), d3.max(csv, d => d.year)]) .range([margin.left, width - margin.right]) const y = d3.scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice() .range([height - margin.bottom, margin.top]) const area = d3.area() .x(d => x(d.data.year)) .y0(d => y(d[0])) .y1(d => y(d[1])) const color = d3.scaleOrdinal() .domain(csv.columns.slice(3,7)) .range(d3.schemeSet3) const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(10, ".0f")) .append('text') .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '14px') .attr('font-weight', 'bold') .attr('x', width - margin.right) .attr('y', 30) .text('Year') const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .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") .attr('font-size', '14px') .text('Meat Consumption (kg/capita)')) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .selectAll("path") .data(series) .join("path") .attr("fill", ({key}) => color(key)) .attr("d", area) .append("title") .text(({key}) => key); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append('g') .attr('transform', `translate(${width - 0.9 * margin.right}, ${height/10})`) .call(colorLegend); // <-- our legend helper is invoked just like an axis generato return svg.node() }4b:T418,viewof meat_individual = { const container = Inputs.form({ beef: Inputs.range([0, 2000], {label: "Beef", step: 10}), mutton: Inputs.range([0, 2000], {label: "Mutton", step: 10}), poultry: Inputs.range([0, 2000], {label: "Poultry", step: 10}), pork: Inputs.range([0, 2000], {label: "Pork", step: 10}), }); const labels = container.querySelectorAll("label"); const additionalLabels = ["grams/week", "grams/week", "grams/week", "grams/week"]; labels.forEach((label, index) => { const additionalLabel = document.createElement("label"); additionalLabel.textContent = additionalLabels[index]; additionalLabel.style.marginLeft = "10px"; // Adjust the margin as needed const inputContainer = label.parentNode; inputContainer.style.display = "flex"; inputContainer.style.alignItems = "center"; const inputField = inputContainer.querySelector("input"); inputField.style.width = "200px"; // Adjust the width as needed inputContainer.appendChild(additionalLabel); }); return container; } 4c:T518,function colorLegend(container) { const titlePadding = 14; // padding between title and entries const entrySpacing = 16; // spacing between legend entries const entryRadius = 5; // radius of legend entry marks const labelOffset = 4; // additional horizontal offset of text labels const baselineOffset = 4; // text baseline offset, depends on radius and font size const keys = csv.columns.slice(3,7) const color = d3.scaleOrdinal() .domain(meat.map(d => d.label)) .range(d3.schemeSet3) // try other schemes, too! const entries = container.selectAll('g') .data(meat) .join('g') .attr('transform', d => `translate(0, ${titlePadding + d.index * entrySpacing})`); const symbols = entries.append('circle') .attr('cx', entryRadius) // <-- offset symbol x-position by radius .attr('r', entryRadius) .attr('fill', d => color(d.label)); const labels = entries.append('text') .attr('x', 2 * entryRadius + labelOffset) // <-- place labels to the left of symbols .attr('y', baselineOffset) // <-- adjust label y-position for proper alignment .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-size', '11px') .style('user-select', 'none') // <-- disallow selectable text .text(d => d.label); }4d:[{"id":"fba002a8bd9f0037bd33ac3a0c21117e35fa0468e358861ad9775ea1678b2833c87f3b87bb682a66661d7fc90e0f134f36a177f0825456d5aa0cb977814b382d","href":"https://static.observableusercontent.com/files/fba002a8bd9f0037bd33ac3a0c21117e35fa0468e358861ad9775ea1678b2833c87f3b87bb682a66661d7fc90e0f134f36a177f0825456d5aa0cb977814b382d","name":"meat_consumption_worldwide (1).csv","type":"text/csv","lastModified":1689923257251.967,"size":524508},{"id":"d7f5826396bd827b83b8f6b5b2e6f4f031d0c99bbb27e285769352659aa5360b44910ca8eaf36a1de51f7ef6b92c839cf0104305e7b8e3a9fa9edcac41b9dd3b","href":"https://static.observableusercontent.com/files/d7f5826396bd827b83b8f6b5b2e6f4f031d0c99bbb27e285769352659aa5360b44910ca8eaf36a1de51f7ef6b92c839cf0104305e7b8e3a9fa9edcac41b9dd3b","name":"summary_with_pop-1.csv","type":"text/csv","lastModified":1689923257251.967,"size":90378},{"id":"fe2f624c1d4bd4d9b8f6f704d3b0cf7d16d413ea76690dc978fde280a31c48f3b4e52a06c02732fa7b488e475e921890b8e532b49ee4eeb273d66705fdf283fe","href":"https://static.observableusercontent.com/files/fe2f624c1d4bd4d9b8f6f704d3b0cf7d16d413ea76690dc978fde280a31c48f3b4e52a06c02732fa7b488e475e921890b8e532b49ee4eeb273d66705fdf283fe","name":"temps.csv","type":"text/csv","lastModified":1689923257251.967,"size":12718}] 29:{"id":"ae7f6a69dac30d05","slug":null,"title":"The Plate and the Planet 🌎","thumbnail":"616da17608284e7e3be057d7ad47b4993ffb7464a8f6e2741d905bd6c7e1d890","access_level":"unlisted","create_time":"$D2023-07-21T07:07:37.251Z","update_time":"$D2023-07-21T07:07:37.251Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":1392,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"1ebb802d2c8d0ab4","slug":"hcc-infovis-prototypes","title":"HCC-InfoVis Prototypes","owner":{"id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization"}},"type":"notebook","body":{"titling":"auto","title":"The Plate and the Planet 🌎","cells":[{"id":0,"value":"\n# The Plate and the Planet 🌎\nThis project aims to show how meat consumption affects our climate and how each individual can help reduce CO2 emissions. Furthermore, it will be illustrated how much CO2 certain types of meat produce. If you are curious, scroll down to learn more about the project.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"## Climate Change over the Years\nThis illustrates how much the temperature on the earth's surface has risen. The most current data from NASA were evaluated. Each point represents a month since the year 1880 up to the current year 2023. It can be observed that there was a peak in the surface temperature for the first time around 1940. Since about 1970, the surface temperature has been rising steadily and has now reached maximum values of 1.2-1.4°C.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"## Rising Meat consumption\nBetween 1990 and 2018, global meat consumption underwent a significant rise. According to the Food and Agriculture Organization of the United Nations, per capita meat consumption increased from roughly 27.9 kilograms per year in 1990 to approximately 34.4 kilograms per year in 2018, a rise of around 23%. This growth was fueled largely by rising incomes, particularly in emerging economies, along with a global population increase.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":526,"value":"viewof yearChg = Scrubber(d3.range(1990, 2019, 0.2), {format: Math.floor, loop: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"**Select the country **","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":531,"value":"viewof order = {\n const options = csv.filter(d => d.year === 1990).map(d => d.country);\n const form = html`