25:["$","title",null,{"children":"Happiness Data Story | FHOÖ Information Visualization | Observable"}] 49:T545,Unter den unglücklichsten Ländern finden sich Afghanistan, Libanon und Simbabwe wieder. Ihr durchschnittlicher Glücksindex bewegt sich zwischen 2 und 3, während der allgemeine Durchschnitt zwischen 5 und 6 liegt. Betrachten wir die nachfolgende Grafik, wird deutlich, dass diese unglücklichen Länder von Krisen gezeichnet sind im Vergleich zu den glücklichen Ländern (laut dem Happiness-Report zählen Dänemark, Finnland und die Schweiz zu den glücklichsten Ländern). Der Happiness-Faktor in den unglücklichen Ländern ist niedrig und schwankt stark im unteren Bereich. Hingegen scheint er bei den glücklichen Ländern stabiler zu sein. Es fällt auf, dass unglückliche Länder oft mit schwachem Bruttoinlandsprodukt, sozialen Problemen, politischen Unruhen und einer höheren Wahrnehmung von Korruption verbunden sind. Diese Faktoren wirken sich negativ auf das Wohlbefinden der Bevölkerung aus und tragen zu ihrer Unglücklichsein bei. Ein kleiner Tipp: Wenn du über die blauen Linien in der Grafik fährst, werden die Namen der jeweiligen Länder sichtbar. Dies ermöglicht es dir, die spezifischen Länder genauer zu erkunden und ihre individuellen Merkmale im Happiness-Report zu erfahren. Wenn du noch mehr Einflussfaktoren untersuchen möchtest, hast du am Ende die Möglichkeit, beim Happiness-Barometer zu experimentieren. 4a:T526,"Geld regiert die Welt" - oder ein anderes Sprichwort lautet "Mit Geld kann man sich kein Glück kaufen". Beim Happiness Score hat sich gezeigt, dass das GDP (Bruttoinlandsprodukt) einen wesentlichen Einfluss auf das wahrgenommene Glücksgefühl der Bewohner eines Landes hat. Das GDP wird oft als Maßstab für den wirtschaftlichen Erfolg eines Landes betrachtet. Ein höheres GDP geht in der Regel mit einer besseren Infrastruktur, verbesserten Bildungssystemen, einer hochwertigen Gesundheitsversorgung und einem stabilen sozialen Sicherheitsnetz einher. Diese Faktoren können das allgemeine Wohlbefinden und die Lebensqualität der Menschen verbessern und somit zu einem höheren Glücksniveau beitragen. Trotz der wichtigen Stelung sollte man nicht vergessen, dass Glück weit mehr ist als nur materieller Reichtum. Andere nicht-materielle Aspekte des Lebens spielen eine entscheidende Rolle. Soziale Beziehungen, persönliche Erfüllung, emotionale Bindungen, kulturelle Werte und der Zugang zu Freizeitaktivitäten sind ebenso bedeutsam für das individuelle Glücksempfinden. Daher ist es wichtig, sowohl die ökonomischen als auch die nicht-ökonomischen Elemente des Glücks zu berücksichtigen, um ein umfassendes Verständnis dessen zu erlangen, was Menschen auf der ganzen Welt wirklich glücklich macht.4b:T129d,Glück ist ein komplexes Phänomen, das von einer Vielzahl von Faktoren beeinflusst wird. Lineare Regressionen haben gezeigt, dass das Bruttoinlandsprodukt (GDP), sozialer Support, Lebenserwartung und Korruption zu den wichtigsten Faktoren gehören. Generosity, im Kontext des Happiness Reports, bezieht sich auf die Bereitschaft einer Gesellschaft, anderen zu helfen und Ressourcen zu teilen. Es ist ein wichtiger Faktor, der das Glücksniveau beeinflusst. Länder, in denen Großzügigkeit eine hohe Bedeutung hat und Menschen bereit sind, anderen zu helfen und zu unterstützen, zeigen in der Regel höhere Glückswerte. Großzügigkeit schafft ein Gefühl der Verbundenheit und des sozialen Zusammenhalts, weshalb Menschen, die in einer großzügigen Gesellschaft leben, häufig ein Gefühl der Erfüllung und Zufriedenheit haben. Freedom to make life choices bezieht sich auf die individuelle Freiheit, Entscheidungen über das eigene Leben zu treffen, sei es in Bezug auf die berufliche Laufbahn, die persönlichen Beziehungen, die Wohnsituation oder die allgemeine Lebensgestaltung. Länder, in denen Menschen ein hohes Maß an Freiheit haben, um ihre eigenen Entscheidungen treffen und ihr Leben nach ihren individuellen Vorstellungen gestalten können, zeigen tendenziell höhere Glückswerte. Wenn man eigene Entscheidungen treffen kann, schafft das ein Gefühl der Autonomie und Selbstbestimmung, das wiederum Wohlbefinden und Zufriedenheit steigern kann. Diese Dimension umfasst verschiedene Aspekte wie politische und rechtliche Rahmenbedingungen, die die individuellen Rechte und Freiheiten schützen, sowie den Zugang zu Bildung, Informationen und Chancengleichheit. Der soziale Support bezieht sich auf das Vorhandensein von unterstützenden Beziehungen in einer Gesellschaft. Familie, Freunde, Gemeinschaften und ein starkes soziales Netzwerk tragen dazu bei, dass Menschen sich geborgen und unterstützt fühlen. Ein guter sozialer Support ist mit einem höheren Glücksniveau verbunden, da er das Gefühl der Verbundenheit und des Wohlbefindens fördert. Wenn man sich die Grafik über die Jahre hinweg ansieht, kann man gut erkennen, dass vor allem Social Support einen zentralen Punkt einnimmt. Die Linien, die den "Social Support" repräsentieren, deuten darauf hin, dass zwischenmenschliche Beziehungen und das Gefühl der Verbundenheit einen starken Einfluss auf das Glück der Menschen haben. Dieses Phänomen spiegelt sich über die Jahre hinweg wider, und es wird deutlich, dass sozialer Rückhalt und Unterstützung von großer Bedeutung sind. Die Lebenserwartung ist ein weiterer bedeutender Faktor für das Glück. Länder mit einer höheren Lebenserwartung tendieren dazu, höhere Glückswerte aufzuweisen. Eine gute Gesundheitsversorgung, der Zugang zu Bildung, eine gesunde Umwelt und ein aktiver Lebensstil sind einige der Faktoren, die die Lebenserwartung beeinflussen können. Wenn Menschen die Gewissheit haben, dass sie die Aussicht auf ein langes und gesundes Leben haben, fühlen sie sich erfüllter und zufrieden. Die Verbindung zwischen Lebenserwartung und Glücksniveau sollte dazu ermutigen, die eigene Gesundheit und Lebensweise bewusst zu gestalten, aber auch die Bedeutung eines umfassenden Gesundheitssystems und Bildungswesens für das Glück der Gesellschaft zu erkennen. Korruption ist der Spielverderber des Glücks - der wichtigste negative Einflussfaktor auf das Glücksniveau einer Gesellschaft. Die Auswirkungen der Korruption sind vielschichtig. Sie führt zu Ungleichheit, da einige wenige privilegierte Individuen unverhältnismäßig von den Ressourcen des Landes profitieren, während die Mehrheit benachteiligt wird. Korruption erzeugt ein Klima der Unsicherheit, in dem die Menschen besorgt um ihre Rechte und ihr Wohlsein sind. Das Vertrauen in Regierung und öffentliche Institutionen schwindet, da Korruption die Integrität und das Verantwortungsbewusstseins schwinden lässt. Länder mit geringer Korruption weisen in der Regel höhere Glückswerte auf, da sie ein stabileres Umfeld bieten und das Vertrauen der Menschen in die Regierung und die öffentlichen Institutionen stärken. Ein ausgewogenes Verhältnis zwischen wirtschaftlichem Wohlstand, sozialem Support, guter Gesundheit und einem korruptionsfreien Umfeld trägt dazu bei, dass Menschen glücklicher sind. Es ist wichtig, dass Regierungen und Gesellschaften diese Faktoren berücksichtigen und Maßnahmen ergreifen, um das Glück und das Wohlbefinden ihrer Bürgerinnen und Bürger zu fördern. **Zur Interpretation des Charts: Da einerseits nicht jedes Land einem Kontinenten zuordenbar war und das Chart mindestens neun Achsen benötigt, entstanden so zwei "none" -Achsen. Diese können beim Erkunden ignoriert werden ** 4c:T89c,viewof options = form(html``)4d:T4f5,Korruption hat einen deutlichen Einfluss auf das Glücksniveau einer Gesellschaft. Länder, in denen Korruption weit verbreitet ist, tendieren dazu, niedrigere Werte auf der "Life Ladder" zu haben. Korruption untergräbt das Vertrauen der Menschen in ihre Regierung und öffentliche Institutionen, was zu einer allgemeinen Unzufriedenheit und einem Gefühl der Ungerechtigkeit führen kann. Darüber hinaus wirkt sich Korruption negativ auf die wirtschaftliche Entwicklung aus. Investitionen werden abgeschreckt, da das Risiko von Bestechung und unfairen Praktiken hoch ist. Dadurch werden wirtschaftliche Chancen begrenzt und das Wachstumspotenzial eines Landes gehemmt. Wie in der Grafik zu sehen, sinkt der Wert der LifeLadder, also des Glückindexes, mit jedem Schritt auf der x-Achse weiter nach rechts. Je höher die wahrgenommene Korruption, desto unglücklicher ist ein Land. Um das Glücksniveau einer Gesellschaft zu steigern, ist es daher von entscheidender Bedeutung, gegen Korruption vorzugehen. Mögliche Schritte wären zum Beispiel transparente und rechenschaftspflichtige Regierungssysteme, eine starke Infrastruktur und ein Klima, das Korruption nicht toleriert. Wie massiv der Einfluss ist, kannst du weiter unten im Happiness-Barometer erforschen!4e:T18d4,p5(sketch => { let sel, sel2, year, button, slider1, slider2, slider3, slider4; sketch.setup = function() { sketch.createCanvas(900, 400); //Create the first slider slider1 = sketch.createSlider(6.635, 11.648, 9.1415, 0.1); slider1.position(300, 175); slider1.style('transform: scale(' + (1.2) + ') rotate(' + (270) + 'deg);'); // Create the second slider slider2 = sketch.createSlider(0.290, 0.987, 0.6385, 0.01); slider2.position(375, 175); slider2.style('transform: scale(' + (1.2) + ') rotate(' + (270) + 'deg);'); // Create the third slider slider3 = sketch.createSlider(32.3, 77.10, 54.7, 0.1); slider3.position(450, 175); slider3.style('transform: scale(' + (1.2) + ') rotate(' + (270) + 'deg);'); // Create the fourth slider. slider4 = sketch.createSlider(0.035, 0.983, 0.509, 0.01).position(525, 175); slider4.position(525, 175); slider4.style('transform: scale(' + (1.2) + ') rotate(' + (270) + 'deg);'); //create dropdown menu for year sel = sketch.createSelect().style('transform: scale(' + (1.2) + ');' ); sel.position(408,10); for(let year = 2005; year <=2020; year++){ sel.option(year); } sel.changed(sketch.changeYear); //create dropdown menu for countries sketch.textAlign(sketch.CENTER); sel2 = sketch.createSelect().style('transform: scale(' + (1.2) + ');' ); sel2.position(640,10); //populate the countries dropdown menu for 2005 let countries = df.filter(function(entry){return entry.year === 2005}).map(obj => obj['Country name']); for(let i in countries){ sel2.option(countries[i]); } //create button to search the selected inputs. button = sketch.createButton('Enter'); button.position(850, 10); button.mousePressed(sketch.inputValues); }; sketch.draw = function(){ sketch.background(255); //add labels to the slider bars sketch.strokeWeight(0); sketch.textSize(12) let s1 = 'Log of GDP Per Capita'; let s2 = 'Social\nSupport'; let s3 = 'Life\nExpectancy'; let s4 = 'Corruption'; sketch.fill(0); sketch.textAlign(sketch.CENTER); sketch.text(s1, 387, 345, 70, 30); sketch.text(s2, 462, 345, 70, 30); sketch.text(s3, 537, 345, 70, 30); sketch.text(s4, 612, 345, 70, 30); sketch.textSize(16) let text =" Happiness Score for " sketch.text(text, 543, 25); //calculate happiness score //let happiness_prediction = -0.998808 + 0.298835 * slider1.value() + 2.871018 * slider2.value() + 0.035179 * slider3.value() - 1.186201 * //slider4.value(); let happiness_prediction = -0.998808 + 0.308835 * slider1.value() + 2.971018 * slider2.value() + 0.05878 * slider3.value() - 3.8 * slider4.value(); //display happiness score sketch.textAlign(sketch.LEFT); sketch.textSize(16); sketch.text("Happiness Score: " + sketch.round(happiness_prediction,3), 0, 0, 250, 30); sketch.strokeWeight(1); sketch.textAlign(sketch.CENTER); //happiness score bar sketch.fill(102,255, 0); sketch.noStroke(); sketch.rect(25,40,25,90); sketch.fill(255,234,23); sketch.rect(25,130,25,90); sketch.fill(255,0,0); sketch.rect(25, 220, 25, 120) sketch.noFill(); sketch.stroke(0); sketch.rect(25, 40, 25, 300); sketch.fill(0); sketch.strokeWeight(0); sketch.textSize(12); sketch.text("10", 2, 35, 30, 30); sketch.text("7", 4, 125, 30, 30); sketch.text("4", 4, 215, 30, 30); sketch.text("0", 4, 335, 30, 30); //happiness score bar pointer sketch.triangle(51,340 - 30*happiness_prediction,60,340-30*happiness_prediction+10,60, 340-30*happiness_prediction-10); sketch.strokeWeight(1); sketch.textSize(32); if (happiness_prediction >= 7) { //Display happiness category sketch.text('Thriving',235, 75); //Draw the face sketch.fill(102,255, 0); sketch.circle(235,200, 200); // Draw the eyes sketch.fill(0) sketch.circle(235 - 40, 200 - 30, 20); sketch.circle(235 + 40, 200 - 30, 20); // Draw the mouth sketch.noFill(); sketch.strokeWeight(7); sketch.arc(235, 200 + 12, 80, 80, 0, sketch.PI); } else if(happiness_prediction < 7 && happiness_prediction > 4) { //Display happiness category sketch.text('Struggling',235, 75); //Draw the face sketch.fill(255,234,23); sketch.circle(235, 200, 200); // Draw the eyes sketch.fill(0); sketch.circle(235 - 40, 200 - 30, 20); sketch.circle(235 + 40, 200 - 30, 20); // Draw the mouth sketch.noFill(); sketch.strokeWeight(7); sketch.line(235 - 40, 200 +30, 235 +40, 200 +30); } else{ //Display happiness category sketch.text('Suffering',235, 75); //Draw the face sketch.fill(255,0,0); sketch.circle(235, 200, 200); // Draw the eyes sketch.fill(0); sketch.circle(235 - 40, 200 - 30, 20); sketch.circle(235 + 40, 200 - 30, 20); // Draw the mouth sketch.noFill(); sketch.strokeWeight(7); sketch.arc(235, 200 + 50, 80, 80, sketch.PI, 2*sketch.PI); } }; //updates dropdown menu to include relavant countries based on selected year. sketch.changeYear = function(){ sel2.remove(); sel2 = sketch.createSelect().style('transform: scale(' + (1.2) + ');' ); sel2.position(640,10); let countries = df.filter(function(entry){return entry.year === eval(sel.value())}).map(obj => obj['Country name']); for(let i in countries){ sel2.option(countries[i]); } }; //updates sliders and visualization based on selected country and year. sketch.inputValues = function(){ slider1.value(df.filter(function(entry){return entry.year === eval(sel.value()) & entry['Country name'] === sel2.value()})[0]['Log GDP per capita']); slider2.value(df.filter(function(entry){return entry.year === eval(sel.value()) & entry['Country name'] === sel2.value()})[0]['Social support']); slider3.value(df.filter(function(entry){return entry.year === eval(sel.value()) & entry['Country name'] === sel2.value()})[0]['Healthy life expectancy at birth']); slider4.value(df.filter(function(entry){return entry.year === eval(sel.value()) & entry['Country name'] === sel2.value()})[0]['Perceptions of corruption']); }; }) 4f:T4a73,// https://github.com/analyzer2004/ringchart // Copyright 2020 Eric Lo class RingChart { constructor(container) { this._container = container; this._width = 0; this._height = 0; this._diameter = 0; this._radius = { inner: 50, outer: 0, node: 0, max: 0 }; this._palette = d3.schemeTableau10; // options this._options = { order: "asc", nodeStyle: "arc", chartType: "rankmap", clickAction: "highlight", stickyNodes: true, showZeros: true, alwaysShowLines: false, fixedNodeRadius: 0 }; this._legend = { enabled: true, centered: true, fontSize: "9pt", format: ".2s", labelColor: "#666", num: 7 } // elements this._g = null; this._lines = null; this._dots = null; this._yTicks = null; this._legendBox = null; this._legendItems = null; // data this._tick = { name: "", isDate: false, format: "", fontSize: "9pt", color: "#666" }; this._data = null; this._chartData = null; this._min = 0; this._max = 0; this._keys = null; this._sortedKeys = null; this._ranks = null; // scales this._xl = null; this._xb = null; this._y = null; this._color = null; this._bandwidth = { x: 0, y: 0 }; this._isArc = false; this._isSeq = false; this._focus = null; this._uniqueId = new String(Date.now() * Math.random()).replace(".", ""); // events this._onhover = null; this._onclick = null; this._oncancel = null; } size(_) { return arguments.length ? (this._width = _[0], this._height = _[1], this) : [this._width, this._height]; } innerRadius(_) { return arguments.length ? (this._radius.inner = _, this) : this._radius.inner; } palette(_) { return arguments.length ? (this._palette = _, this) : this._palette; } options(_) { return arguments.length ? (this._options = Object.assign(this._options, _), this) : this._options; } legend(_) { return arguments.length ? (this._legend = Object.assign(this._legend, _), this) : this._legend; } tick(_) { return arguments.length ? (this._tick = Object.assign(this._tick, _), this) : this._tick; } data(_) { return arguments.length ? (this._data = _, this) : this._data; } onhover(_) { return arguments.length ? (this._onhover = _, this) : this._onhover; } onclick(_) { return arguments.length ? (this._onclick = _, this) : this._onclick; } oncancel(_) { return arguments.length ? (this._oncancel = _, this) : this._oncancel; } render() { this._init(); this._process(); this._initScales(); this._renderChart(); if (this._legend.enabled) this._renderLegend(); return this; } _init() { this._isArc = this._options.nodeStyle === "arc"; this._isSeq = this._options.chartType === "heatmap"; const cb = this._getCharBox(this._tick.fontSize); this._radius.outer = Math.min(this._width, this._height) - (cb.height + 10); // dy of ticks = 10 } _process() { const op = this._options, ascending = op.order === "asc"; this._processKeys(); const cd = this._data.map(d => { const tick = d[this._tick.name]; const row = { tick: tick, values: this._keys.map(key => { const value = +d[key]; if (value < this._min) this._min = value; else if (value > this._max) this._max = value; return { tick, key, value }; }) }; const sorting = op.chartType === "rankmap" ? row.values : row.values.map(r => r); if (ascending) sorting.sort((a, b) => a.value - b.value); else sorting.sort((a, b) => b.value - a.value); const len = sorting.length; sorting.forEach((d, i) => d.rank = ascending ? len - i : i + 1); return row; }); if (op.chartType === "rankmap") { this._sortedKeys = cd[0].values.map(d => d.key); this._ranks = this._sortedKeys.map(key => ({ key: key, series: cd.map(row => { var index = row.values.findIndex(_ => _.key === key); if (!op.showZeros && row.values[index].value === 0) index = -1; return { tick: row.tick, index: index } }) })); } this._chartData = cd; } _processKeys() { const keys = Object.keys(this._data[0]); if (this._tick.name === "") { this._tick.name = keys[0]; this._keys = keys.slice(1); } else { const index = keys.indexOf(this._tick.name); if (index > -1) { keys.splice(index, 1); this._keys = keys; } else throw "Invalid tick field."; } } _initScales() { const op = this._options, radius = this._calculateRadius(); this._xl = d3.scaleLinear().domain([0, this._chartData.length]).range([0, 360]); this._xb = d3.scaleBand().domain(this._seq(0, this._chartData.length)).range([0, 2 * Math.PI]); radius.max = this._isArc || !op.stickyNodes ? radius.outer / 2 : radius.inner + radius.node * 2 * this._keys.length; if (op.showZeros) { this._y = d3.scaleBand().domain(this._seq(0, this._keys.length)).range([radius.inner, radius.max]); } else { // y scale is from -1 to keys.length, -1 is for zero nodes const u = (radius.max - radius.inner) / (this._keys.length + 1); this._y = d3.scaleBand().domain(this._seq(-1, this._keys.length + 1)).range([radius.inner - u, radius.max]); } if (op.chartType === "rankmap") this._color = d3.scaleOrdinal().domain(this._keys).range(this._palette); else this._color = d3.scaleSequential(this._palette).domain([this._min, this._max]).nice(); this._bandwidth.x = this._xb.bandwidth(); this._bandwidth.y = this._y.bandwidth(); } _calculateRadius() { const radius = this._radius; if (this._options.fixedNodeRadius) radius.node = this._options.fixedNodeRadius; else { const r1 = 2 * Math.PI * radius.inner / this._chartData.length / 2, r2 = (radius.outer / 2 - radius.inner) / (this._keys.length * 2); radius.node = Math.min(r1, r2); } return radius; } _renderChart() { const op = this._options; this._g = this._container.append("g") .attr("transform", `translate(${this._width / 2},${(this._height / 2)})`); if (op.chartType === "rankmap") this._renderLines(); if (this._isArc) this._renderArcs(); else this._renderDots(); this._dots.append("title") .text(d => `${d.tick} - ${d.key}\nRank: ${d.rank}\nValue: ${d.value}`); this._attachEvents(this._dots); this._renderAxis(); if (op.chartType === "heatmap") this._renderAxisY(); } _renderLines() { var a = 0, r = 0; if (this._isArc) { a = this._bandwidth.x / 2; r = this._bandwidth.y / 2; } const line = d3.lineRadial() .curve(d3.curveLinearClosed) .angle((d, i) => this._xb(i) + a) .radius(d => this._y(d.index) + r); const opacity = this._options.alwaysShowLines ? 1 : 0; this._lines = this._g.selectAll(".line") .data(this._ranks) .join("path") .attr("class", "line") .attr("fill", "none") .attr("opacity", opacity) .attr("stroke", (d, i) => this._color(this._sortedKeys[i])) .attr("stroke-width", 2) .attr("d", d => line(d.series)); } _renderArcs() { const arc = d3.arc() .innerRadius((d, i) => this._y(i)) .outerRadius((d, i) => this._y(i) + this._bandwidth.y) .startAngle(d => this._xb(d.index)) .endAngle(d => this._xb(d.index) + this._bandwidth.x); this._dots = this._g.append("g") .selectAll("g") .data(this._chartData) .join("g") .selectAll("path") .data((d, i) => d.values.map(v => Object.assign({ index: i }, v))) .join("path") .attr("fill", d => this._getColor(d)) .attr("d", arc); } _renderDots() { const op = this._options, radius = this._radius, x = 2 * radius.node; const g = this._g.append("g") .selectAll("g") .data(this._chartData) .join("g") .attr("transform", (d, i) => `rotate(${this._xl(i) - 90})`); if (op.nodeStyle === "circle") { this._dots = g.selectAll("circle") .data(d => d.values) .join("circle") .attr("fill", d => this._getColor(d)) .attr("cx", (d, i) => op.stickyNodes ? i * x + radius.inner : this._y(i)) .attr("r", radius.node); } else { const w = radius.node * 2, hb = this._bandwidth.y / 2; this._dots = g.selectAll("rect") .data(d => d.values) .join("rect") .attr("fill", d => this._getColor(d)) .attr("x", (d, i) => (op.stickyNodes ? i * x + radius.inner : this._y(i)) - hb) .attr("y", op.stickyNodes ? -radius.node : -hb) .attr("width", w).attr("height", w); } } _renderAxis() { const radius = this._radius, id = "axis_" + this._uniqueId, scale = d3.scaleLinear() .domain([0, this._chartData.length - 1]) .range([0, 100 - (100 / this._chartData.length)]); this._drawCircle(id, radius.max); const ticks = scale.ticks(); this._g.selectAll(".tick") .data(ticks) .join("g") .style("font-size", this._tick.fontSize) .attr("class", "tick") .attr("transform", "rotate(90)") .call(g => g.append("line") .attr("stroke", this._tick.color) .attr("stroke-dasharray", "1,2") .attr("x1", -radius.inner) .attr("x2", -radius.max - 10) .attr("transform", d => `rotate(${360 * scale(d) / 100})`)) .call(g => g.append("text") .attr("dx", 3) .attr("dy", -5) .attr("fill", this._tick.color) .append("textPath") .attr("xlink:href", "#" + id) .attr("startOffset", d => scale(d) + "%") .text((d, i) => { const s = this._chartData[d].tick; if (this._tick.isDate) { const date = this._tick.format !== "" ? d3.timeParse(s) : new Date(s); return date.toLocaleDateString(); } else return s; })); } _drawCircle(id, radius) { this._g.append("path") .attr("id", id) .attr("fill", "none") .attr("stroke", "none") .attr("d", "M 0, 0 " + "m " + -radius + ",0 " + "a " + radius + "," + radius + " 0 0,1 " + radius * 2 + ",0 " + "a " + radius + "," + radius + " 0 0,1 " + (-radius * 2) + ",0 " ); } _renderAxisY() { this._keys.forEach((d, i) => { const id = `axisY${i}_${this._uniqueId}`; this._drawCircle(id, this._y(i)); }); this._yTicks = this._g.append("g") .style("font-size", this._tick.fontSize) .attr("transform", "rotate(90)") .selectAll("text") .data(this._keys) .join("g") .style("visibility", "hidden") .call(g => { g.append("text") .attr("dx", "0.5em") .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill", "none") .call(t => { t.append("textPath") .attr("xlink:href", (d, i) => `#axisY${i}_${this._uniqueId}`) .text(d => d) }) .clone(true) .attr("stroke", "none") .attr("fill", this._tick.color); }); } _renderLegend() { const w = 15, spacing = 2.5, format = d3.format(this._legend.format), h = this._getCharBox(this._legend.fontSize).height; this._legendBox = this._container.append("g") .style("font-size", this._legend.fontSize); const items = this._processLegend(); const legend = this._legendItems = this._legendBox.selectAll("g") .data(items) .join("g") .attr("transform", (d, i) => `translate(0,${i * (h + spacing)})`) .call(g => g.append("rect") .attr("fill", d => this._isSeq ? this._color(d.f) : this._color(d.key)) .attr("rx", 4).attr("ry", 4) .attr("width", w).attr("height", h)) .call(g => g.append("text") .attr("dy", "1em") .attr("fill", this._legend.labelColor) .attr("transform", `translate(${w + spacing},0)`) .text((d, i) => { if (this._isSeq) return i < items.length - 1 ? `${format(d.f)} - ${format(d.c)}` : `> ${format(d.f)}`; else return d.key; })); this._attachEvents(legend); var centered = this._legend.centered; const box = this._legendBox.node().getBBox(), threshold = this._radius.inner - this._radius.node; if (box.width / 2 >= threshold || box.height / 2 >= threshold) centered = false; if (centered) this._legendBox.attr("transform", `translate(${(this._width - box.width) / 2},${(this._height - box.height) / 2})`); else { const left = (this._width / 2) + this._y.range()[1] + h + 15, top = (this._height / 2) - this._y.range()[1]; this._legendBox.attr("transform", `translate(${left},${top})`); } } _processLegend() { if (this._options.chartType === "rankmap") return this._keys.map(d => ({ key: d })); else { const ranges = [], ticks = this._color.ticks(this._legend.num); for (let i = 0; i < ticks.length - 1; i++) { ranges.push({ f: ticks[i], c: ticks[i + 1] }); } return ranges; } } _attachEvents(selections) { const op = this._options; selections.attr("opacity", 1) .on("click", (e, d) => { if (op.clickAction === "none") return; const f = this._focus; if (f && (f === d || f.key && f.key === d.key)) { this._focus = null; this._cancel(); if (this._oncancel) this._oncancel(d); } else { this._focus = d; this._highlight(d); if (this._onclick) this._onclick(d); } e.stopPropagation(); }) .on("mouseenter", (e, d) => { if (!this._focus) { this._highlight(d); if (this._onhover) this._onhover(d); } }) .on("mouseleave", (e, d) => { if (!this._focus) this._cancel(); }); this._container.on("click.eric.ringchart." + this._uniqueId, () => { if (op.clickAction === "none") return; this._focus = null; this._cancel(); }) } _highlight(d) { if (this._isSeq) { const t = this._dots.transition().duration(500); if (d.key) { t.attr("opacity", _ => _.key === d.key ? 1 : 0.2); this._yTicks.style("visibility", _ => _ === d.key ? "visible" : "hidden"); } else t.attr("opacity", _ => _.value >= d.f && _.value < d.c ? 1 : 0.2); } else { this._dots.transition().duration(500).attr("opacity", _ => _.key === d.key ? 1 : 0.2); if (this._lines) { const opacity = this._options.alwaysShowLines ? 0.2 : 0; this._lines.transition().duration(250).attr("opacity", _ => _.key === d.key ? 1 : opacity); } if (this._yTicks) this._yTicks.style("visibility", _ => _ === d.key ? "visible" : "hidden"); if (this._legendItems) this._legendItems.style("font-weight", _ => _.key === d.key ? "bold" : ""); } } _cancel() { this._dots.transition().duration(500).attr("opacity", 1); if (this._lines) { const opacity = this._options.alwaysShowLines ? 1 : 0; this._lines.transition().duration(250).attr("opacity", opacity); } if (this._yTicks) this._yTicks.style("visibility", "hidden"); if (this._legendItems) this._legendItems.style("font-weight", ""); } _getColor(d) { return !this._options.showZeros && d.value === 0 ? "none" : this._color(this._isSeq ? d.value : d.key); } _getCharBox(fontSize) { var text; try { text = this._container.append("text") .attr("font-size", fontSize) .text("M"); return text.node().getBBox(); } finally { if (text) text.remove(); } } _seq(start, length) { return Array.from({ length: length }).map((d, i) => start + i); } }50:T741,// Normalize data function normalizedData(source) { var lifArr = []; var gdpArr = []; var socArr = []; var heaArr = []; var freArr = []; var genArr = []; var perArr = []; var posArr = []; var negArr = []; var conArr = []; // collect feature values for (let i = 0; i < source.length; ++i) { // get max values of each feature var obj = source[i]; lifArr.push(obj["LifeLadder"]); gdpArr.push(obj["LogGDPpercapita"]); socArr.push(obj["Socialsupport"]); heaArr.push(obj["Healthylifeexpectancyatbirth"]); freArr.push(obj["Freedomtomakelifechoices"]); genArr.push(obj["Generosity"]); perArr.push(obj["Perceptionsofcorruption"]); posArr.push(obj["Positiveaffect"]); negArr.push(obj["Negativeaffect"]); conArr.push(obj["Confidenceinnationalgovernment"]); } // normalize data var resultArr = []; for (let j = 0; j < source.length; ++j) { var newObj = { Country: source[j]["Country"], Year: source[j]["Year"], LifeLadder: source[j]["LifeLadder"] / d3.max(lifArr), LogGDPpercapita: source[j]["LogGDPpercapita"] / d3.max(gdpArr), Socialsupport: source[j]["Socialsupport"] / d3.max(socArr), Healthylifeexpectancyatbirth: source[j]["Healthylifeexpectancyatbirth"] / d3.max(heaArr), Freedomtomakelifechoices: source[j]["Freedomtomakelifechoices"] / d3.max(freArr), Generosity: source[j]["Generosity"] / d3.max(genArr), Perceptionsofcorruption: source[j]["Perceptionsofcorruption"] / d3.max(perArr), Positiveaffect: source[j]["Positiveaffect"] / d3.max(posArr), Negativeaffect: source[j]["Negativeaffect"] / d3.max(negArr), Confidenceinnationalgovernment: source[j]["Confidenceinnationalgovernment"] / d3.max(conArr), Continent: source[j]["Continent"] } resultArr.push(newObj); } return resultArr; }51:T464,// rebuild our data to structure of Data2 function createCustomData(source) { var customDiagramm = new Object(); for (let [key, value] of source) { // iterate over continents var valMap = value; var valArr = Array(valMap); var innerMap = valArr[0]; var val = Array.from(innerMap); for (let i = 0; i < val.length; ++i) { var obj = { Region: val[i][0], }; val[i] = { ...obj, ...val[i][1] }; } var columnsArr = ["Region", "Life Ladder", "Social Support", "Healthy Life Expectancy At Birth", "Freedom To Make Life Choices", "Perceptions Of Corruption", "Generosity"]; //val.push(columnsArr); val.push(val[6]); // it seems this radar chart needs a minimum of continents, so I copy the none continent for reaching the minimum val["columns"] = columnsArr; var newArr = []; newArr[0] = value; var o = { ["year" + key.toString()]: val }; Object.assign(customDiagramm, o); } return customDiagramm; }52:T563,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em") .attr("stroke","black") // change 3 .style("stroke-width", .4)), // changed 2 update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value))) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value)))); }53:[{"id":"a51825d850fcbd3210dde8e76bc90c9125793f41fce7d08085bb5cee10f006504b847d8dd72b5ea142468b8756736870d633b7940e5eea0da843036865f984dc","href":"https://static.observableusercontent.com/files/a51825d850fcbd3210dde8e76bc90c9125793f41fce7d08085bb5cee10f006504b847d8dd72b5ea142468b8756736870d633b7940e5eea0da843036865f984dc","name":"World Happiness Report 2005-2021.csv","type":"text/csv","lastModified":1687617142796.368,"size":273626},{"id":"2ca7710e5a5912fd0f9b4731a80caecd624440506f1d10b8f2839f56d1e989e2de3d8691fe7f1a041e37c57361aaa3e3040aa93a7c30026c9a8ef79643233646","href":"https://static.observableusercontent.com/files/2ca7710e5a5912fd0f9b4731a80caecd624440506f1d10b8f2839f56d1e989e2de3d8691fe7f1a041e37c57361aaa3e3040aa93a7c30026c9a8ef79643233646","name":"World Happiness Report 2005-2021 (2)@1.csv","type":"text/csv","lastModified":1687625338907.096,"size":273581},{"id":"cb454e9c3e3071e8793fb1af7d2962c36b77fccf3d1e27531fab994435561e9bdb5da59fada4b6f20c39b9c4e914e2b512d586aeb1c615a327d0a42267f0a828","href":"https://static.observableusercontent.com/files/cb454e9c3e3071e8793fb1af7d2962c36b77fccf3d1e27531fab994435561e9bdb5da59fada4b6f20c39b9c4e914e2b512d586aeb1c615a327d0a42267f0a828","name":"World Happiness Report 2005-2021 trimmed.csv","type":"text/csv","lastModified":1687684182903.949,"size":273605},{"id":"27f679a510ebc952efc4b30d6debadca49669d8040d1a7dee62d5372d0a6f94bb7e4bb290cc77201e7a253c297f052255c8b4a13140b3ea4a01c7cf49c838c24","href":"https://static.observableusercontent.com/files/27f679a510ebc952efc4b30d6debadca49669d8040d1a7dee62d5372d0a6f94bb7e4bb290cc77201e7a253c297f052255c8b4a13140b3ea4a01c7cf49c838c24","name":"concap.csv","type":"text/csv","lastModified":1687684764248.905,"size":13672},{"id":"66a3643ca57b18236736e250ecf9d2f02cb2d47e483d49f9877bf04b42d5ba6e0542db4d1a9c7152867966f2c82d3fbf30ac8af413261d33206c38407ef28b21","href":"https://static.observableusercontent.com/files/66a3643ca57b18236736e250ecf9d2f02cb2d47e483d49f9877bf04b42d5ba6e0542db4d1a9c7152867966f2c82d3fbf30ac8af413261d33206c38407ef28b21","name":"2016 by region (1).csv","type":"text/csv","lastModified":1687712765489.386,"size":1053},{"id":"cabeef475f2e266eb8b0204b42fd8a191d78822e85229124d596445388f059b7fd128ecd6c628984139ad3232a7f8f34df0cdf452922f03b5b17de36e6acc0e4","href":"https://static.observableusercontent.com/files/cabeef475f2e266eb8b0204b42fd8a191d78822e85229124d596445388f059b7fd128ecd6c628984139ad3232a7f8f34df0cdf452922f03b5b17de36e6acc0e4","name":"2019 by region.csv","type":"text/csv","lastModified":1687712765498.599,"size":1002},{"id":"5a58b192ee151e3ad5f91bd67a93a5f6d9f98ccb912377e60840864bff5283ec959bc5f6144d01f9a5aaf9cadcd8dd59233f6ac25a3af923f6a2302769eee858","href":"https://static.observableusercontent.com/files/5a58b192ee151e3ad5f91bd67a93a5f6d9f98ccb912377e60840864bff5283ec959bc5f6144d01f9a5aaf9cadcd8dd59233f6ac25a3af923f6a2302769eee858","name":"2017 by region.csv","type":"text/csv","lastModified":1687712765498.02,"size":1117},{"id":"baa5589e62f0851a3e6c2a3073e0df062ba6a608628de17b728852d36df891c64a10a082ad9e21ad98b2bbea3117b9da8bad50e3cf0f2fa356b3714cb05f39f7","href":"https://static.observableusercontent.com/files/baa5589e62f0851a3e6c2a3073e0df062ba6a608628de17b728852d36df891c64a10a082ad9e21ad98b2bbea3117b9da8bad50e3cf0f2fa356b3714cb05f39f7","name":"2018 by region.csv","type":"text/csv","lastModified":1687712765486.106,"size":978},{"id":"ca33906d8ccc8407a33704e3247f3bba65ef6f45c24639e032135231eba34c976ee911dcac288a4f00bc8266d4d6ca9212beab0b2268dec58e1d6d393af6b4e0","href":"https://static.observableusercontent.com/files/ca33906d8ccc8407a33704e3247f3bba65ef6f45c24639e032135231eba34c976ee911dcac288a4f00bc8266d4d6ca9212beab0b2268dec58e1d6d393af6b4e0","name":"2015 by region.csv","type":"text/csv","lastModified":1687712765506.2,"size":1017},{"id":"d2b0d5806caafa3f436ea71316bf60e08f6fc3fab2445fac807945bdf7ce0f6c3bb55cfc7f6583e6badc3ae8b72ce23c63f49a4d22fa473c5a5f3e8e27bd8507","href":"https://static.observableusercontent.com/files/d2b0d5806caafa3f436ea71316bf60e08f6fc3fab2445fac807945bdf7ce0f6c3bb55cfc7f6583e6badc3ae8b72ce23c63f49a4d22fa473c5a5f3e8e27bd8507","name":"2020 by region.csv","type":"text/csv","lastModified":1687712765485.152,"size":1118},{"id":"07bd43d1fddd6bbb8ab3f6d6e96d207c749d189973023e0829aba83ed18c6782d79676747072d67f5b764d63f969c83398eddb23326dd41e88bf0104ca89f43c","href":"https://static.observableusercontent.com/files/07bd43d1fddd6bbb8ab3f6d6e96d207c749d189973023e0829aba83ed18c6782d79676747072d67f5b764d63f969c83398eddb23326dd41e88bf0104ca89f43c","name":"happy_split@1.csv","type":"text/csv","lastModified":1687864426411.879,"size":11597},{"id":"368b8d830e9b2121f2206e58e2d6acfbc5dda2adc9fe268da1c3424f5370e7c4ec03d1ff189094cfa74f6f38007974c0650e5b9f188ee194a364a0820bbf0a1f","href":"https://static.observableusercontent.com/files/368b8d830e9b2121f2206e58e2d6acfbc5dda2adc9fe268da1c3424f5370e7c4ec03d1ff189094cfa74f6f38007974c0650e5b9f188ee194a364a0820bbf0a1f","name":"cleanedData.csv","type":"text/csv","lastModified":1688464759193.263,"size":253187},{"id":"0c865d90187ebd1371fc0b18784ce99b2975abe67f7f94b7d5082e0f9c8b959d50425b2a888f78b213d19ebefe109a5b021d7292f25626057cd0345fe9b52eb8","href":"https://static.observableusercontent.com/files/0c865d90187ebd1371fc0b18784ce99b2975abe67f7f94b7d5082e0f9c8b959d50425b2a888f78b213d19ebefe109a5b021d7292f25626057cd0345fe9b52eb8","name":"null.csv","type":"text/csv","lastModified":1688494501480.501,"size":295887}] 29:{"id":"66cf6f273fbd4282","slug":null,"title":"Happiness Data Story","thumbnail":"8804b390435bfef2b4d593d9d4ada73c0cbcaf2ae914c671b1081a65fe8dcc95","access_level":"unlisted","create_time":"$D2023-06-24T13:58:16.661Z","update_time":"$D2024-06-08T14:25:12.714Z","view_time":null,"first_public_time":"$D2023-06-27T09:14:38.462Z","has_unpublished_edits":null,"fork":false,"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":1573,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ff0b12eb699e53d7","login":"rudolfhofm","name":"Rudolf","avatar_url":"https://avatars-next.observableusercontent.com/5a2ec29fba9baa715dd6eb21ab6d2077d62ee7239530e07b30a9448e6543e6e5","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","role":"editor"},{"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":2,"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":"Happiness Data Story","cells":[{"id":0,"value":"# Happiness Data Story \n## Claudia Klausgraber, Rudolf Hofmeister","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"**Wie glücklich ist die Welt?**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1164,"value":" $\"Smiley\"$ ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1239,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1230,"value":"\n## *The most important thing is to enjoy your life — to be happy. It's all that matters. *\n### Audrey Hepburn","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1241,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1157,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1237,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"Derzeit gibt es 195 Staaten auf der Welt, bei einer Bevölkerungsdichte von 8,02 Milliarden Menschen. Aber nicht allen Ländern geht es gleich gut. Der \"Happiness Report\", \"Welt-Glücks-Bericht“, erhebt in 166 Ländern eine Art Kompass darüber, wo die Menschen auf der Welt am glücklichsten mit ihrem Leben sind. Es wird ermittelt, ob die Einwohner sich glücklich fühlen, ob sie der Meinung sind, dass sie ihr Leben selbst bestimmen können und ob sie Vertrauen in ihre Regierung haben - diese Faktoren spielen eine entscheidende Rolle bei der Ermittlung des Glücklichseins-Rankings. Es zeigt sich, dass insbesondere die Länder in Nordeuropa sehr gut abschneiden, während die unteren Ränge, mit einigen Ausnahmen, von afrikanischen Ländern belegt werden.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":475,"value":"emojiiProgressBar(total,done,[\"😶\",\"☹️\",\"🙁\",\"😕\",\"😐\",\"🙂\",\"😊\",\"😀\",\"😄\",\"😁\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"## Wettrennen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1201,"value":"Willkommen in der Welt der \"besten\" Länder! Mach' eine Reise durch die Jahre 2005 bis 2021, in der die Geheimnisse des Happiness-Reports aufgedeckt werden. Mit dem Schieberegler hast du die Macht, die Anzahl der Länder zu bestimmen, die gleichzeitig miteinander konkurrieren. Entscheidest du dich dafür, dich auf die Spitzenreiter zu konzentrieren oder möchtest du den Blick auf eine größere Anzahl von Ländern werfen? Die Wahl liegt ganz bei dir. Und das ist noch nicht alles! Durch das praktische Dropdown-Menü kannst du das Thema auswählen, das du genauer beleuchten möchtest. Unsere Chart Race-Animation ermöglicht es dir, die Veränderungen über die Zeit hinweg zu verfolgen und die Entwicklung der Länder in verschiedenen Kategorien zu beobachten. Man sagt ja immer, die nordischen Länder wären die glücklichsten - stimmt das wirklich?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"viewof topn = slider({min:0, \n max:20, \n step: 1, \n description: \"select top n countries\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"viewof variable = Select(vars, {value: \"LifeLadder\", label: \"Variable Selected\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"viewof replay = html`