25:["$","title",null,{"children":"😁 Understanding Happiness | FHOÖ Information Visualization | Observable"}] 49:T802,imageShown = { if(ImageVariable == "Happy1"){ var image = FileAttachment("FrauImBikini.jpg").image({width: 200}) //https://unsplash.com/de/fotos/eine-frau-sitzt-lachelnd-auf-einer-weissen-bank-SWcKBBRjEIM }else if(ImageVariable == "Happy2"){ var image = FileAttachment("Freundinnen.jpg").image({width: 200}) //https://unsplash.com/de/fotos/frau-im-schwarzen-hemd-lachelt-neben-frau-im-schwarzen-hemd-exUy5KbVSm8 }else if(ImageVariable == "Happy3"){ var image = FileAttachment("KinderMitBart.jpg").image({width: 200}) //https://unsplash.com/de/fotos/madchen-in-weiss-blauem-blumenkleid-mit-schwarz-gerahmter-brille-cx3egf0OY-A }else if(ImageVariable == "Happy4"){ var image = FileAttachment("Koechin.jpg").image({width: 200}) //https://unsplash.com/de/fotos/eine-person-die-einen-teller-mit-essen-halt-voUYQjTFNWw }else if(ImageVariable == "Happy5"){ var image = FileAttachment("LachendeFreundinnen.jpg").image({width: 400}) //https://unsplash.com/de/fotos/eine-person-die-mit-einem-laptop-auf-einer-couch-sitzt-X1GZqv-F7Tw }else if(ImageVariable == "Happy6"){ var image = FileAttachment("MannAufBruecke.jpg").image({width: 400}) //https://unsplash.com/de/fotos/ein-mann-in-einer-lederjacke-schaut-nach-unten-wahrend-er-auf-einem-felsvorsprung-in-einer-stadt-sitzt-kFVmYjK6hZ8 }else if(ImageVariable == "Happy7"){ var image = FileAttachment("MannMitOhrring.jpg").image({width: 200}) //https://unsplash.com/de/fotos/mann-in-weiss-braun-gestreiftem-hemd-lachelnd-Yx4v3sWfeAo }else if(ImageVariable == "Happy8"){ var image = FileAttachment("MannMitSchal.jpg").image({width: 200}) //https://unsplash.com/de/fotos/frau-in-schwarzem-schal-lachelt-NANv7ypejC4 }else if(ImageVariable == "Happy9"){ var image = FileAttachment("MannMitBart.jpg").image({width:400}) //https://unsplash.com/de/fotos/ein-mann-mit-weissem-bart-und-schnurrbart-tragt-einen-hut-FRPbQvAwY10 }else{ var image = FileAttachment("WomenAndPhone.jpg").image({width: 400}) } return image }4a:T462,Wie wir schon in der letzten Ansicht sehen konnten, nimmt im **mittleren Osten** und **Nordafrika** die Einschätzung des persönlichen Lebensglücks in den letzten Jahren stetig ab. Wenn wir uns nun die Länder dieser Regionen genauer ansehen, dann können wir feststellen, dass es innerhalb dieser erhebliche Unterschiede zwischen den Ländern gibt: ein Abwärtstrend ist in den letzten Jahren insbesondere im **Libanon** und **Jemen** zu sein, während in der gleichen Region **Israel** einen vergleichsweise hohen Wert sehr stabil hält. In der **Sub-Sahara-Region** und in **Westeuropa** sehen wir eine breitere Bandbreite an Werten, aber keine enormen Ausreißer von der Gruppe. Während die **Sub-Sahara-Region** im Mittel bei einem niedrigeren Wert rund um 4 zu liegen scheint, liegt **Westeuropa** durchaus bei einem höheren Wert rund um 7. Die Daten haben bisher gezeigt, dass es geographische Unterschiede im **Lebensglück** gibt und dass es in manchen Ländern ein größere zeitliche Variation gibt als in anderen. Aber versuchen wir nun mehr darüber herauszufinden, **was das Lebensglück beeinflusst**!4b:Tcb0,chartAnimate = { const svg = d3.create('svg') .attr('width', width) .attr('height', height); svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x)) .append('text') .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '12px') .attr('font-weight', 'bold') .attr('x', width - margin.right) .attr('y', -10) .text('Perception Of Corruption'); svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .append('text') .attr('transform', `translate(20, ${margin.top}) rotate(-90)`) .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '12px') .attr('font-weight', 'bold') .text('Social Support'); const yearLabel = svg.append('text') .attr('class', 'year') .attr('x', 40) .attr('y', height - margin.bottom - 20) .attr('fill', '#ccc') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 500) .attr('font-size', 80) .text(years[0]); // <-- simply use the minimum year, as updates occur elsewhere const countries = svg .selectAll('circle.CountryName') // Bind to the filtered initial data, we will perform updates elsewhere // Provide a 🔑 key function for joining data to SVG elements .data(gapminder, d => d.CountryName) // <-- Add key function!! .join('circle') .sort((a, b) => 10 - 0) .attr('class', 'CountryName') .attr('opacity', 0.65) .attr('fill', d => color(d.CountryName)) .attr('cx', d => x(d.PerceptionsOfCorruption)) .attr('cy', d => y(d.SocialSupport)) .attr('r', d => symbolSize(d.LifeLadder)) .call(circle => circle.append("title") .text(d => [d.CountryName, d.LifeLadder].join("\n"))); // countries // .append('title') // .text(d => d.CountryName); countries .on('mouseover', function() { d3.select(this).attr('stroke', '#333').attr('stroke-width', 2); }) .on('mouseout', function() { d3.select(this).attr('stroke', null); }); // Update function: given a year value, update the chart. function setYear(year) { // Update the year label by simply setting it to the new value. yearLabel.text(year); // Update countries and animate the transition: // 1. Change the data to filter to the given year, keyed by country // 2. Re-sort elements to ensure smallest remain on top, as pop values may have changed // 3. Update position and radius, interpolated across a 1 sec (1000ms) animation countries .data(gapminder.filter(d => d.Year === year), d => d.CountryName) // <-- 🔑 .sort((a, b) => 10 - 0) .transition() // <-- akin to a D3 selection, but interpolates values .duration(1000) // <-- 1000 ms === 1 sec .ease(d3.easeCubic) // <-- sets pacing; cubic is the default, try some others! .attr('cx', d => x(d.PerceptionsOfCorruption)) .attr('cy', d => y(d.SocialSupport)) .attr('r', d => symbolSize(d.LifeLadder)); } // Extend SVG node, export setYear as a property thereof return Object.assign(svg.node(), { setYear }); }4c:T4a9,Dabei zeigen sich einige interessante Ergebnisse: In **Westeuropa**, einer Region mit sehr hohen Werten beim Lebensglück, findet sich in allen Ländern eine **hohe soziale Unterstützung** während gleichermaßen die Wahrnehmung der Korruption stark variiert. Pausiert man bei **2013** sieht man sehr deutlich, dass **Griechenland** das niedrigste **Lebensglück** verzeichnet, bei gleichzeitig hoher **Wahrnehmung von Korruption**. Auch z.B. **Portugal** und **Italien** weißen eine hohe **Wahrnehmung der Korruption** auf, weisen jedoch gleichzeitig auch eine höhere **soziale Unterstützung** auf und ein höheres **Lebensglück**. Die höchsten Werte des **Lebensglücks** findet man in Skandinavien, wo gleichzeitig die **soziale Unterstützung** hoch ist, und die **Wahrnehmung von Korruption** niedrig. Spannend ist auch, dass in **Südostasien** vor allem **Singapur** ein hohes **Lebensglück** aufweist, und dabei innerhalb der Gruppe (d.h. innerhalb der Region) die niedrigste **Wahrnehmung von Korruption** verzeichnet. Dieser erste Eindruck wirft neue Fragen auf: Womit hängt **Lebensglück** nun tatsächlich zusammen? Und ist diese Korrelation für jedes Land gleich?4d:T996,Plot.plot({ width: 700, height: 450, marginLeft: 100, marginRight: 0, padding: 0.5, projection: { type: "azimuthal-equidistant", rotate: [0, -90], // Note: 0.625° corresponds to max. length (here, 0.5), plus enough room for the labels domain: d3.geoCircle().center([0, 90]).radius(1.1)() }, color: { legend: true }, marks: [ // grey discs Plot.geo([1.0, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1], { geometry: (r) => d3.geoCircle().center([0, 90]).radius(r)(), stroke: "black", fill: "black", strokeOpacity: 0.3, fillOpacity: 0.03, strokeWidth: 0.5 }), // white axes Plot.link(longitude1.domain(), { x1: longitude1, y1: 90 - 1.1, x2: 0, y2: 90, stroke: "white", strokeOpacity: 0.5, strokeWidth: 2.5 }), // tick labels Plot. text([0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0], { x: 180, y: (d) => 90 - d, dx: 2, textAnchor: "start", text: (d) => `${100 * d}%`, fill: "currentColor", stroke: "white", fontSize: 8 }), // axes labels Plot.text(longitude1.domain(), { x: longitude1, y: 90 - 1.05, // text: Plot.identity, // lineWidth: 5 }), // areas Plot.area(pointsAllFiltered, { x1: ({ key }) => longitude1(key), y1: ({ value }) => 90 - value, x2: 0, y2: 90, fill: "CountryName", stroke: "CountryName", curve: "cardinal-closed" }), // points Plot.dot(pointsAllFiltered, { x: ({ key }) => longitude1(key), y: ({ value }) => 90 - value, fill: "CountryName", stroke: "white", }), // interactive labels Plot.text( pointsAllFiltered, Plot.pointer({ x: ({ key }) => longitude1(key), y: ({ value }) => 90 - value, text: (d) => `${(100 * d.value).toFixed(0)}%`, textAnchor: "start", dx: 4, fill: "currentColor", stroke: "white", maxRadius: 10 }) ), // interactive opacity on the areas () => svg``","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"## Imports\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import { toc } from \"@nebrius/indented-toc\" // This component generates the Table of Contents","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import {vl} from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"import { radio } from \"@meetamit/multiple-choice-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"import {LineChart} from \"@d3/multi-line-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"1"}} 24:null