25:["$","title",null,{"children":"Study on World Happiness Score | DataVisualisation | Observable"}] 49:T434,md`

We retrieved the dataset of the happiness score in 2015 to 2020 from [kaggle](kaggle.com) where the World Happiness Report post their dataset as [csv](https://www.kaggle.com/unsdsn/world-happiness?select=2019.csv). The data represents the happiness levels of 155 different countries from 2015 to 2020. There are six factors used to measure happiness in different countries, where you can see how it varies by region, GDP, social support, health expectancy, freedom, perception of corruption, and generosity. And the whole world is divided into 11 regions based on geographical location: Central and Eastern Europe, Commonwealth of Independent States, East Asia, Latin America and Caribbean, Middle East and North Africa, North America, Oceania, South Asia, Southeast Asia, Sub-Saharan Africa, Western Europe. For analysis question 4, we use the data of the Here we use the data of the Average Annual Hours Actually Worked per Worker in each country from the OECD stat. in each country from the [OECD stat](https://stats.oecd.org/Index.aspx?DataSetCode=ANHRS). `4a:T422,chart2 = { const isDark = options1.theme === "dark"; /* // Simplified sample const chart = new ClusteredChart() .size([width, height]) .options({font: helvetiker}) .column({x:"territory", y:"profit", z:"quarter"}) .data(data) .render(); */ const chart = new ClusteredChart() .size([width, 650]) .options({ animation: options1.animation, font: helvetiker, backgroundColor: isDark ? 0x333333 : 0xffffff, textColor: isDark ? 0xffffff : 0x333333 }) .bar({palette: d3[`scheme${options1.scheme}`]}) .wall({ visible: options1.wall, color: isDark ? 0xffffff : 0xeeeeee, showTicks: options1.wallTicks }) .floor({ visible: options1.floor, color: isDark ? 0xffffff : 0xeeeeee, showTicks: options1.floorTicks }) .column({ x: "Region", y: "Happiness.Score", z: "Year" }) .data(data1) .render(); invalidation.then(() => chart.dispose()); return chart.renderer.domElement; }4b:T442,plot1 = { const hover = vl.selectPoint('hover') .encodings('x').on('mouseover') .toggle(false).nearest(true); const ishov = hover.empty(false); const line = vl.markLine().encode( vl.x().fieldT('Year').title('Year').timeUnit('year'), vl.y().fieldQ('Contribution to Happiness').title('Contribution to Happiness'), vl.color().fieldN('Factor').title('Factor') ); const base = line.transform(vl.filter(ishov)); const label = {align: 'right', dx: -4, dy: -8}; const w = {stroke: 'black', strokeWidth: 1}; const mr = vl.markRule() .transform(vl.filter(ishov)) .encode(vl.x().fieldT('Year')); const mc = line.markCircle() .params(hover) .encode(vl.opacity().if(ishov, vl.value(1)).value(0.8)); const text1 = base.markText(label, w).encode(vl.text().fieldQ('Contribution to Happiness')); const text2 = base.markText(label).encode(vl.text().fieldQ('Contribution to Happiness')); return vl .data(happyFactor) .layer(line,mr,mc,text1, text2) .width(400) .height(300) .render(); }4c:T7b2,viewof options = form(html``)4d:T56a,{ const selection = vl.selectPoint().fields('Year').bind('legend'); const selection2 = vl.selectPoint('Year') .fields('Year') .bind(vl.slider(2015, 2020, 1).name('Year')) .init({Year: 2020}); const selections = vl.and(selection, selection2); const scatterplot = vl.markCircle() .data(happyFull) .params(selection, selection2) .transform(vl.calculate('year(datum.Year)').as('Year')) .encode( vl.x().fieldQ('GDP per capita'), vl.y().fieldQ('Happiness Score'), vl.color().fieldN('Year').if(selections, vl.fieldO('Year')).legend(null), vl.opacity().if(selections, vl.value(0.8)).value(0.0).legend(null), vl.tooltip(['Country', 'Happiness Score', 'Happiness Rank']) ) .width(330).height(330) const heatmap = vl.markBar() .data(happyFull) .params(selection, selection2) .transform(vl.calculate('year(datum.Year)').as('Year')) .encode( vl.x().fieldQ('GDP per capita').bin({maxbins: 20}), vl.y().fieldQ('Happiness Score').bin({maxbins: 20}), vl.opacity().if(selections, vl.fieldQ('Happiness Rank')).bin({maxbins: 20}).value(0.0).legend(null), vl.color().fieldN('Year').if(selections, vl.fieldO('Year')).legend(null), vl.tooltip(['Country', 'Happiness Score', 'Happiness Rank']) ) .width(330).height(330) return vl.hconcat(scatterplot, heatmap) .render(); }4e:T920,{ const brushing = vl.selectInterval() .resolve('global'); const click = vl.selectPoint().encodings('color'); const leg = vl.selectPoint() .fields('Region') .bind('legend'); const bl = vl.and(brushing, leg); const plot1 = vl.markPoint({filled: true}) .encode( vl.color().value('lightgray') .if(bl, vl.color().fieldN('Region').title('Region')), vl.opacity().if(bl, vl.value(0.8)).value(0.1), vl.size().fieldQ('Logged GDP per capita').scale({domain: [6, 12], range: [10, 500]}), vl.order().fieldQ('Logged GDP per capita').sort('descending'), vl.y().fieldQ('Happiness Score').scale({domain: [2, 8]}), vl.x().fieldQ('Social support (Family)'), vl.tooltip(['Country', 'Happiness Score', 'Social support (Family)', 'Logged GDP per capita']) ) .width(400) .height(300) .params(brushing, leg) .transform(vl.filter(click)); const plot2 = vl.markBar() .encode( vl.color().if(click, vl.color().fieldN('Region')).value('lightgray'), vl.x().average('Freedom'), vl.y().fieldN('Region'), vl.tooltip(['Freedom']) ) .width(400) .height(100) .params(click) .transform(vl.filter(brushing,leg)); const plot3 = vl.markBar() .encode( vl.color().if(click, vl.color().fieldN('Region')).value('lightgray'), vl.x().average('Generosity'), vl.y().fieldN('Region'), vl.tooltip(['Generosity']) ) .width(400) .height(100) .params(click) .transform(vl.filter(brushing)); const plot4 = vl.markBar() .encode( vl.color().if(click, vl.color().fieldN('Region')).value('lightgray'), vl.x().average('Health Expectancy'), vl.y().fieldN('Region'), vl.tooltip(['Health Expectancy']) ) .width(400) .height(100) .params(click) .transform(vl.filter(brushing)); const plot5 = vl.markBar() .encode( vl.color().if(click, vl.color().fieldN('Region')).value('lightgray'), vl.x().average('Perceptions of corruption'), vl.y().fieldN('Region'), vl.tooltip(['Perceptions of corruption']) ) .width(400) .height(100) .params(click) .transform(vl.filter(brushing)); return vl.vconcat(plot1, plot2, plot3, plot4, plot5) .data(data2020) .render(); }4f:Te02,chartLegend = { const selmodel = SelectionModel(); // <-- Instantiate a selection model const svg = d3.create('svg') .attr('width', width) .attr('height', height); svg.append('g') .attr('transform', `translate(0, ${height - margin1.bottom})`) .call(d3.axisBottom(x1)) .append('text') .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '12px') .attr('font-weight', 'bold') .attr('x1', width - margin1.right) .attr('y1', -10) .text('Average working hours'); svg.append('g') .attr('transform', `translate(${margin1.left}, 0)`) .call(d3.axisLeft(y1)) .append('text') .attr('transform', `translate(20, ${margin1.top}) rotate(-90)`) .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '12px') .attr('font-weight', 'bold') .text('Happiness index'); const yearLabel = svg.append('text') .attr('class', 'year') .attr('x1', 40) .attr('y1', height - margin1.bottom - 20) .attr('fill', '#ccc') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 500) .attr('font-size', 80) .text(years[0]); // Add and position the legend; place in the upper right corner. //svg.append('g') //.attr('transform', `translate(${width - margin1.left - 150}, 250)`) // Add legend content; call with both container element and selection model. // .call(container => legend(container, selmodel)); // <-- invoke legend helper const countries = svg .selectAll('circle.Region') .data(dataInitial1, d => d.Region) .join('circle') .sort((a, b) => b.Happiness - a.Happiness) .attr('class', 'Region') .attr('opacity', 0.75) .attr('fill', d => color1(d.Region)) .attr('cx', d => x1(d.AVGWH)) .attr('cy', d => y1(d.Happiness)) .attr('r', d => size(d.Happiness)); countries .append('title') .text(d => d.Region); 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(year1) { // Update the year label by simply setting it to the new value. yearLabel.text(year1); // 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 === year1), d => d.Region) // <-- 🔑 .sort((a, b) => b.Happiness - a.Happiness) .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 => x1(d.AVGWH)) .attr('cy', d => y1(d.Happiness)) .attr('r', d => size(d.Happiness)); } // Add a selection model listener that updates country colors // We name the event 'change.chart' as this is the chart's own internal listener. // We do not want the name to collide with the listener defined in the legend component. selmodel.on('change.chart', () => { countries.attr('fill', d => selmodel.has(d.cluster) ? color1(d.Region) : '#ccc'); }); return Object.assign(svg.node(), { setYear }); }50: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); } }51:T4f6,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.3em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", +40) .attr("dy", "0em")), 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)))); }52:T57a9,// https://github.com/analyzer2004/clusteredchart // Copyright 2021 Eric Lo class ClusteredChart { constructor(container) { this._container = container; this._width = 0; this._height = 0; this._dims = { width: 5, height: 2, depth: 5 }; this._tickPadding = 0.1; this._options = { animation: true, font: null, backgroundColor: 0xffffff, textColor: 0x666666, lineColor: 0xcccccc }; this._column = { x: "", y: "", z: "" }; this._bar = { scale: { x: 0.65, z: 0.65 }, opacity: 0.85, isOrdinal: true, palette: d3.schemeTableau10 }; this._wall = { visible: true, color: 0xeeeeee, opacity: 0.9, showTicks: true, tickFormat: "~s" }; this._floor = { visible: true, color: 0xeeeeee, opacity: 0.9, showTicks: true }; this._tooltip = { textColor: "black", fillColor: "rgba(255,255,255,0.75)", scale: 0.4 }, // three.js objects this._raycaster = null; this._scene = null; this._sceneOrtho = null; this._camera = null; this._cameraOrtho = null; this._renderer = null; this._controls = null; this._font = null; this._pool = null; // interaction this._mouseScene = null; this._mouseScreen = null; this._hint = null; this._focus = null; this._request = null; this._bars = null; // data this._data = null; this._chartData = null; this._keysX = null; this._keysZ = null; // scales this._x = null; this._y = null; this._z = null; this._color = null // delegates this._docmousemove = e => this._mousemove(e); this._controlschange = () => this._render(); // 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]; } dimensions(_) { return arguments.length ? (this._dims = Object.assign(this._dims, _), this) : this._dims; } options(_) { return arguments.length ? (this._options = Object.assign(this._options, _), this) : this._options; } bar(_) { return arguments.length ? (this._bar = Object.assign(this._bar, _), this) : this._bar; } wall(_) { return arguments.length ? (this._wall = Object.assign(this._wall, _), this) : this._wall; } floor(_) { return arguments.length ? (this._floor = Object.assign(this._floor, _), this) : this._floor; } tooltip(_) { return arguments.length ? (this._tooltip = Object.assign(this._tooltip, _), this) : this._tooltip; } column(_) { return arguments.length ? (this._column = Object.assign(this._column, _), this) : this._column; } 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(); const values = this._chartData.flatMap(d => this._keysZ.map(key => +d[key])) this._initScales(values); this._initPool(values); this._renderChart(); return this; } dispose() { const that = this; if (this._request) cancelAnimationFrame(this._request); cleanup(); this._hint.dispose(); this._detachEvents(); checkMemory(); this._renderer.dispose(); this._controls.dispose(); return this; function cleanup() { const scene = that._scene; for (let i = scene.children.length - 1; i >= 0; i--) { let obj = scene.children[i]; scene.remove(obj); if (obj instanceof THREE.Mesh || obj instanceof THREE.Line) { obj.geometry.dispose(); obj.material.dispose(); if (obj.frame) { obj.frame.geometry.dispose(); obj.frame.material.dispose(); } } } } function checkMemory() { const memory = that._renderer.info.memory; if (memory.geometries > 0 || memory.textures > 0) console.log(memory); } } get renderer() { return this._renderer; } _init() { this._raycaster = new THREE.Raycaster(); this._scene = new THREE.Scene(); this._sceneOrtho = new THREE.Scene(); this._renderer = new THREE.WebGLRenderer({ antialias: true }); this._mouseScene = new THREE.Vector2(); this._mouseScreen = new THREE.Vector2(); this._camera = new THREE.PerspectiveCamera(75, this._width / this._height, 0.5, 500); this._cameraOrtho = new THREE.OrthographicCamera(-this._width / 2, this._width / 2, this._height / 2, -this._height / 2, 1, 10); this._cameraOrtho.position.z = 10; if (this._container) this._container.appendChild(this._renderer.domElement); this._renderer.setPixelRatio(window.devicePixelRatio); this._renderer.setSize(this._width, this._height); this._renderer.autoClear = false; this._camera.aspect = this._width / this._height; this._camera.updateProjectionMatrix(); this._camera.position.x = -2.5; this._camera.position.y = 5; this._camera.position.z = 5; this._scene.position.x = -this._dims.width / 2; this._scene.position.y = this._dims.height / 2; this._scene.position.z = -this._dims.depth / 2; this._scene.background = new THREE.Color(this._options.backgroundColor); this._render(); this._hint = this._createHint(); } _process() { const column = this._column; if (this._data === null || this._data.length === 0) throw "No data to display."; if (column.x === "" && column.y === "" && column.z === "") throw "Please specify the column names."; const keys = Object.keys(this._data[0]); if (column.x !== "" && column.z !== "") { if (!keys.includes(column.x) || !keys.includes(column.y) || !keys.includes(column.z)) throw "Please verify if the specified column names are correct." const xmap = new Map(); this._data.forEach(d => { const key = d[column.x]; let x = xmap.get(key); if (!x) { x = new Object(); x[column.x] = key; xmap.set(key, x); } if (x) x[d[column.z]] = +d[column.y]; }); this._chartData = [...xmap.values()]; } else { if (!keys.includes(column.x)) throw "Please verify if the specified column.x is correct." this._chartData = this._data; } this._keysX = this._chartData.map(d => d[column.x]); let max = 0, mindex = 0; this._chartData.forEach((d, i) => { const len = Object.keys(d).length; if (len > max) { max = len; mindex = i; } }) this._keysZ = Object.keys(this._chartData[mindex]).filter(d => d !== column.x); } _initPool(values) { const that = this; this._pool = { boxGeometry: new THREE.BoxBufferGeometry(1, 1, 1), boxMaterials: this._bar.isOrdinal ? generateByKeys() : generateByValues(), textMaterial: new THREE.MeshBasicMaterial({ color: this._options.textColor }), lineMaterial: new THREE.LineBasicMaterial({ color: this._options.lineColor }), dispose: function () { this.boxGeometry.dispose(); this.boxMaterials.forEach(m => m.dispose()); this.textMaterial.dispose(); this.lineMaterial.dispose(); } } function generateByKeys() { return new Map(that._keysX.map(d => [ d, new THREE.MeshBasicMaterial({ color: that._color(d), opacity: that._bar.opacity, transparent: true }) ])); } function generateByValues() { return new Map( values .filter((value, index, self) => self.indexOf(value) === index) .map(v => [ v, new THREE.MeshBasicMaterial({ color: that._color(v), opacity: that._bar.opacity, transparent: true }) ])); } } _initScales(values) { const ext = d3.extent(values); this._x = d3.scaleBand().domain(this._keysX).range([0, this._dims.width]); this._y = d3.scaleLinear().domain(ext).range([0, this._dims.height]); this._z = d3.scaleBand().domain(this._keysZ).range([this._dims.depth, 0]); this._color = this._bar.isOrdinal ? d3.scaleOrdinal().domain(this._keysX).range(this._bar.palette) : d3.scaleSequential(this._bar.palette).domain(ext); } _renderChart() { const f = this._options.font; if (typeof f === "string") this._loadThenDraw(); else if (typeof f === "object") { if (f.type && f.type === "Font" && f.data) this._font = f; else if (f.glyphs) this._font = new THREE.FontLoader().parse(f); this._drawChart(); } } _loadThenDraw() { const manager = new THREE.LoadingManager(); manager.onLoad = () => { this._drawChart(); } new THREE.FontLoader(manager).load(this._options.font, f => this._font = f); } _drawChart() { const that = this; this._drawElements(); this._initControls(); if (this._options.animation) animate(); this._attachEvents(); that._render(); function animate() { that._request = requestAnimationFrame(animate); if (that._bars.length > 0) that._growBars(); else { // exit the animation loop after finished cancelAnimationFrame(that._request); that._request = null; return; } that._render(); } } _render() { this._renderer.clear(); this._renderer.render(this._scene, this._camera); this._renderer.clearDepth(); this._renderer.render(this._sceneOrtho, this._cameraOrtho); } _growBars() { for (let i = this._bars.length - 1; i >= 0; i--) { const bar = this._bars[i]; if (bar.scale.y <= bar.targetHeight) { bar.scale.y += 0.05; bar.position.y = bar.scale.y / 2; if (bar.scale.y >= bar.targetHeight) { bar.scale.y = bar.targetHeight; bar.position.y = bar.targetHeight / 2; this._bars.splice(i, 1); } } } } _drawElements() { // floor margin const margin = this._floor.visible ? { x: this._dims.width / 20, z: this._dims.depth / 20 } : { x: 0, z: 0 }; this._drawBars(margin); this._drawFloorAndWalls(margin); } _drawBars(margin) { const sx = this._x.bandwidth() * this._bar.scale.x, sz = this._z.bandwidth() * this._bar.scale.z, hsx = sx / 2, hsz = sz / 2, qsx = sx / 4, qsz = sz / 4, halfPI = Math.PI / 2; this._bars = []; this._chartData.forEach((row, i) => { const tx = row[this._column.x], x = this._x(tx) + margin.x / 2; if (this._floor.showTicks) { const t = this._addText(tx, hsx, 0, x + hsx + qsx, 0, 0, halfPI, Math.PI, -halfPI); t.position.z = this._calcTextWidth(t) + this._dims.depth + margin.z + this._tickPadding; } this._keysZ.forEach(key => { const value = row[key], h = this._y(value), z = this._z(key) + margin.z / 2; if (i === 0 && this._floor.showTicks) this._addText(key, hsz, 0, -this._tickPadding, 0, z + qsz, halfPI, Math.PI, 0); const bar = this._addBar(sx, h, sz, x, 0, z, this._bar.isOrdinal ? tx : value); bar.info = { keyX: tx, keyZ: key, value }; }); }); } _drawFloorAndWalls(margin) { const thickness = 0.025; const floor = { width: this._dims.width + margin.x, depth: this._dims.depth + margin.z, x: 0, z: 0 }; const backWall = { x: floor.x, y: 0, z: 0 }, sideWall = { x: floor.x + floor.width, y: 0, z: floor.z }; if (this._floor.visible) this._addWall(floor.width, thickness, floor.depth, floor.x, 0, floor.z, this._floor.color, this._floor.opacity); if (this._wall.visible) { // backwall this._addWall(floor.width, this._dims.height, thickness, backWall.x, backWall.y, backWall.z, this._wall.color, this._wall.opacity); // sidewall this._addWall(thickness, this._dims.height, floor.depth, sideWall.x, sideWall.y, sideWall.z, this._wall.color, this._wall.opacity); } if (this._wall.showTicks) { let ticks, th, fmtr; if (this._wall.showTicks) { ticks = this._y.ticks(); th = this._dims.height / ticks.length * 0.5; fmtr = d3.format(this._wall.tickFormat); } // backwall ticks (x wall) ticks.forEach(tick => { const y = this._y(tick); const t = this._addText(fmtr(tick), th, 0, 0, y, backWall.z, 0, 0, 0); t.position.x = -this._calcTextWidth(t) - this._tickPadding; this._addLine( new THREE.Vector3(backWall.x, y, backWall.z + thickness), new THREE.Vector3(sideWall.x - thickness, y, backWall.z + thickness) ); }); // sidewall ticks (z wall) ticks.forEach(tick => { const y = this._y(tick); const t = this._addText(fmtr(tick), th, 0, sideWall.x, y, 0, 0, -Math.PI / 2, 0); t.position.z = floor.depth + this._tickPadding; this._addLine( new THREE.Vector3(sideWall.x - thickness, y, backWall.z + thickness), new THREE.Vector3(sideWall.x - thickness, y, floor.depth) ); }); } } _calcTextWidth(text) { if (!text.geometry.boundingBox) text.geometry.computeBoundingBox(); return text.geometry.boundingBox.max.x; } _createHint() { const that = this, size = 36, canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"); ctx.font = `${size}px tahoma`; const texture = new THREE.CanvasTexture(canvas); texture.needsUpdate = true; const material = new THREE.SpriteMaterial({ map: texture }); const sprite = new THREE.Sprite(material); this._sceneOrtho.add(sprite); return { sprite, update: function (target) { const texts = [target.info.keyX, target.info.keyZ, target.info.value], w = Math.max(...texts.map(d => ctx.measureText(d).width)), dim = { w: w + 40, h: size * 3 + 10 }; ctx.clearRect(0, 0, 1000, 1000); ctx.fillStyle = that._tooltip.fillColor; ctx.fillRect(0, 0, dim.w, dim.h); ctx.fillStyle = that._tooltip.textColor; texts.forEach((t, i) => ctx.fillText(t, 10, size * (i + 1))); texture.needsUpdate = true; sprite.center.set(0.5, 0.5); sprite.scale.set(300 * that._tooltip.scale, 200 * that._tooltip.scale, 1); // 3:2 scale sprite.position.set(that._mouseScreen.x - that._width / 2, -that._mouseScreen.y + that._height / 2, 1); }, clear: function () { ctx.clearRect(0, 0, 1000, 1000); texture.needsUpdate = true; }, dispose: function () { that._sceneOrtho.remove(this.sprite); this.sprite.geometry.dispose(); this.sprite.material.map.dispose(); this.sprite.material.dispose(); } } } _addFrame(target) { const geometry = new THREE.EdgesGeometry(target.geometry); const material = new THREE.LineBasicMaterial({ color: 0x0, linewidth: 1 }); const frame = new THREE.LineSegments(geometry, material); frame.renderOrder = 1; target.frame = frame; target.add(frame); } _addText(text, size, h, x, y, z, rx, ry, rz) { const geometry = new THREE.TextBufferGeometry( text, {font: this._font, size: size, height: h} ); geometry.computeBoundingSphere(); geometry.computeVertexNormals(); const mesh = new THREE.Mesh(geometry, this._pool.textMaterial); mesh.position.set(x, y, z); mesh.rotation.set(rx, ry, rz); this._scene.add(mesh); return mesh; } _addBar(w, h, d, x, y, z, key) { const mesh = this._createMesh( this._pool.boxGeometry, this._pool.boxMaterials.get(key), w, h, d, x, y, z ); if (this._options.animation) { mesh.scale.set(w, 0, d); mesh.targetHeight = h; this._bars.push(mesh); } else mesh.scale.set(w, h, d); return mesh; } _addWall(w, h, d, x, y, z, color, opacity) { const geometry = new THREE.BoxBufferGeometry(w, h, d); const material = new THREE.MeshBasicMaterial({ color: color, opacity: opacity, transparent: true }); return this._createMesh(geometry, material, w, h, d, x, y, z); } _createMesh(geometry, material, w, h, d, x, y, z) { const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x + w / 2, y + h / 2, z + d / 2); this._scene.add(mesh); return mesh; } _addLine(f, t) { const geometry = new THREE.BufferGeometry().setFromPoints([f, t]); const line = new THREE.Line(geometry, this._pool.lineMaterial); this._scene.add(line); return line; } _attachEvents() { document.addEventListener("mousemove", this._docmousemove, false); this._controls.addEventListener("change", this._controlschange); } _detachEvents() { document.removeEventListener("mousemove", this._docmousemove); this._controls.removeEventListener("change", this._controlschange); } _mousemove(e) { e.preventDefault(); if (e.target instanceof HTMLCanvasElement) { this._mouseScreen.x = e.offsetX; this._mouseScreen.y = e.offsetY; this._mouseScene.x = (e.offsetX / this._width) * 2 - 1; this._mouseScene.y = -(e.offsetY / this._height) * 2 + 1; this._intersect(); } } _intersect() { const that = this; this._camera.updateMatrixWorld(); this._cameraOrtho.updateMatrixWorld(); this._raycaster.setFromCamera(this._mouseScene, this._camera); const intersects = this._raycaster.intersectObjects(this._scene.children); if (intersects.length > 0) { let target; for (let i = 0; i < intersects.length; i++) { if (intersects[i].object.info) { target = intersects[i].object; break; } } if (target) { if (this._focus !== target) { cancelFocus(); this._focus = target; this._addFrame(this._focus); this._hint.update(this._focus); this._render(); } } else cancelFocus(); } else cancelFocus(); function cancelFocus() { const f = that._focus; if (f) { if (f.frame) { f.remove(f.frame); f.frame.geometry.dispose(); f.frame.material.dispose(); f.frame = null; } that._focus = null; that._hint.clear(); that._render(); } } } _initControls() { this._controls = new OrbitControls(this._camera, this._renderer.domElement); this._controls.screenSpacePanning = false; this._controls.maxPolarAngle = Math.PI / 2.5; this._controls.minDistance = 1.12; this._controls.maxDistance = 10; } }53:T569,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 title = container.append('text') .attr('x', 0) .attr('y', 0) .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 'bold') .attr('font-size', '12px') .text('Region'); const entries = container.selectAll('g') .data(regions) .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 => color1(d.index)); 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); }54:T69e,// container is a d3 selection for the container group () element // selmodel is a selection model instance for tracking selected legend entries function legend(container, selmodel) { const titlePadding = 14; const entrySpacing = 16; const entryRadius = 5; const labelOffset = 4; const baselineOffset = 4; const title = container.append('text') .attr('x1', 0) .attr('y1', 0) .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 'bold') .attr('font-size', '12px') .text('Region'); // The "on" method registers event listeners // We update the selection model in response const entries = container.selectAll('g') .data(regions) .join('g') .attr('transform', d => `translate(0, ${titlePadding + d.index * entrySpacing})`) .on('click', (e, d) => selmodel.toggle(d.index)) // <-- respond to clicks .on('dblclick', () => selmodel.clear()); // <-- respond to double clicks const symbols = entries.append('circle') .attr('cx1', entryRadius) .attr('r', entryRadius) .attr('fill', d => color(d.index)); const labels = entries.append('text') .attr('x1', 2 * entryRadius + labelOffset) .attr('y1', baselineOffset) .attr('fill', 'black') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-size', '11px') .style('user-select', 'none') .text(d => d.label); // Listen to selection model, update symbol and labels upon changes selmodel.on('change.legend', () => { symbols.attr('fill', d => selmodel.has(d.index) ? color(d.index) : '#ccc'); labels.attr('fill', d => selmodel.has(d.index) ? 'black' : '#bbb'); }); }55:[{"id":"b640f29a92b2e68483587c92b8d3cb3c51ac98954fd8d289e62e0e36f9aaf413a238ff578d4d9f5dca9a3d1665427604c7f3ee079e757c2a4340eb07268cc680","href":"https://static.observableusercontent.com/files/b640f29a92b2e68483587c92b8d3cb3c51ac98954fd8d289e62e0e36f9aaf413a238ff578d4d9f5dca9a3d1665427604c7f3ee079e757c2a4340eb07268cc680","name":"t1-1.csv","type":"text/csv","lastModified":1687622550386.785,"size":2052},{"id":"6dfb7c55943972c0870fd059f0224ee0c916357259f4c41f40fcc50347767a3a07b139e246b6dbc44e51537f49d4d78ffa17df93cdd962c4873c5bf7acbe17c8","href":"https://static.observableusercontent.com/files/6dfb7c55943972c0870fd059f0224ee0c916357259f4c41f40fcc50347767a3a07b139e246b6dbc44e51537f49d4d78ffa17df93cdd962c4873c5bf7acbe17c8","name":"image.png","type":"image/png","lastModified":1687622550386.785,"size":473626},{"id":"f9ee391fd2eb2780b25706569fbab60c949f0bf0023af111378e38047015574d160e8e60370eb695b1bcbcfc0b71dc1dd89682385e590381c4789548ceef309d","href":"https://static.observableusercontent.com/files/f9ee391fd2eb2780b25706569fbab60c949f0bf0023af111378e38047015574d160e8e60370eb695b1bcbcfc0b71dc1dd89682385e590381c4789548ceef309d","name":"happy by factor 1.csv","type":"text/csv","lastModified":1687622550386.785,"size":1116},{"id":"0660591908d2b5d38cc66b49bc5092d83b90dd23ba8d2e150ea5d2f055a572a51146418ab7958ec1a2035e039999c5904132b604ad1b765031ebd261569a2d8e","href":"https://static.observableusercontent.com/files/0660591908d2b5d38cc66b49bc5092d83b90dd23ba8d2e150ea5d2f055a572a51146418ab7958ec1a2035e039999c5904132b604ad1b765031ebd261569a2d8e","name":"happinessFull.csv","type":"text/csv","lastModified":1687622550386.785,"size":93003},{"id":"44538645352a03eadc638a502c07bbdcc80d4223e7b503f3d66f8da4297d68ff17b77fb7fe1a485447314e8f5d38b2e9438af5d743a7cad4a13d9f01f80211de","href":"https://static.observableusercontent.com/files/44538645352a03eadc638a502c07bbdcc80d4223e7b503f3d66f8da4297d68ff17b77fb7fe1a485447314e8f5d38b2e9438af5d743a7cad4a13d9f01f80211de","name":"2020Full.csv","type":"text/csv","lastModified":1687622550386.785,"size":20096},{"id":"26741e1b4545bfecae1a49939263c82f962b06a150a81a1357a7b2ab0e5d57d1f840145351ec7dc5b281d60f0b966c44270b3c69d992325e3a50c58443ea0651","href":"https://static.observableusercontent.com/files/26741e1b4545bfecae1a49939263c82f962b06a150a81a1357a7b2ab0e5d57d1f840145351ec7dc5b281d60f0b966c44270b3c69d992325e3a50c58443ea0651","name":"2020 by region.csv","type":"text/csv","lastModified":1687622550386.785,"size":1118},{"id":"927df93c3275f99f4fd82b74ec0c8c603458e81675b83f08f75d8642e3e061da9fcb806ca86ce3bc4ab3dd7bdc97339fdf08fbed7235ef5524e29f11095f43bc","href":"https://static.observableusercontent.com/files/927df93c3275f99f4fd82b74ec0c8c603458e81675b83f08f75d8642e3e061da9fcb806ca86ce3bc4ab3dd7bdc97339fdf08fbed7235ef5524e29f11095f43bc","name":"2018 by region.csv","type":"text/csv","lastModified":1687622550386.785,"size":978},{"id":"b23b7cb9f42119c7115b5c4c8d7cee81c398e4f9c1c62caea01e221577de4fd3ac6726bc2e850586eea120afa9b9f520d126355957a3ec1b6eec3361e933a2ca","href":"https://static.observableusercontent.com/files/b23b7cb9f42119c7115b5c4c8d7cee81c398e4f9c1c62caea01e221577de4fd3ac6726bc2e850586eea120afa9b9f520d126355957a3ec1b6eec3361e933a2ca","name":"2019 by region.csv","type":"text/csv","lastModified":1687622550386.785,"size":1002},{"id":"a6a1971f300b74100bbad143636a7927077f4524e9d184027eefaace8760400dfac4d49cfc661720bfe5cb0621956540d8a208bd670e167d377eaae8c38cde0b","href":"https://static.observableusercontent.com/files/a6a1971f300b74100bbad143636a7927077f4524e9d184027eefaace8760400dfac4d49cfc661720bfe5cb0621956540d8a208bd670e167d377eaae8c38cde0b","name":"2017 by region.csv","type":"text/csv","lastModified":1687622550386.785,"size":1117},{"id":"fc5541a2cddfb6e6e0b10613a90d48581a35fb7d60dbac085ff96750e41fca6eb06b73e9fe821524c155f64cbf09df8ec17a192cc9935671bf3e0d38b399fe57","href":"https://static.observableusercontent.com/files/fc5541a2cddfb6e6e0b10613a90d48581a35fb7d60dbac085ff96750e41fca6eb06b73e9fe821524c155f64cbf09df8ec17a192cc9935671bf3e0d38b399fe57","name":"2016 by region.csv","type":"text/csv","lastModified":1687622550386.785,"size":1053},{"id":"218b4d3b01f63d81c98eeefb0dbf377cccde2854ba412344e6826d2181b0f24679c0b65c4eb04a9e3334aba28aacab7e666300630d6ece830c482da516fa9c1d","href":"https://static.observableusercontent.com/files/218b4d3b01f63d81c98eeefb0dbf377cccde2854ba412344e6826d2181b0f24679c0b65c4eb04a9e3334aba28aacab7e666300630d6ece830c482da516fa9c1d","name":"2015 by region.csv","type":"text/csv","lastModified":1687622550386.785,"size":1017},{"id":"62373c5f3177dc78164b08827a9efeb91ef507f52eb78340f58bd66dff4e53b760ec5dae5c7f5f45f109c70a2723bf1c4dad3eb2ff542a8674350aa8589f11e7","href":"https://static.observableusercontent.com/files/62373c5f3177dc78164b08827a9efeb91ef507f52eb78340f58bd66dff4e53b760ec5dae5c7f5f45f109c70a2723bf1c4dad3eb2ff542a8674350aa8589f11e7","name":"score1.csv","type":"text/csv","lastModified":1687622550386.785,"size":2408},{"id":"96de168b4636f1225057fcc51889a0cadac9fe2396cecb9b1e24c16496cbd15cb8475297e15122cf9f7b3d40eef8e7ccd9d521f249a2573620470f1cb6d33315","href":"https://static.observableusercontent.com/files/96de168b4636f1225057fcc51889a0cadac9fe2396cecb9b1e24c16496cbd15cb8475297e15122cf9f7b3d40eef8e7ccd9d521f249a2573620470f1cb6d33315","name":"helvetiker_regular.typeface.json","type":"application/json","lastModified":1687622550386.785,"size":63181},{"id":"b94309f0dda38b36ba1fda4a7fdcbbc65173db9e69ae86232ef41844294119bfdda89d61f465e77809708212f0d406b52b1c89e97bf89b95636ce2e2986f594a","href":"https://static.observableusercontent.com/files/b94309f0dda38b36ba1fda4a7fdcbbc65173db9e69ae86232ef41844294119bfdda89d61f465e77809708212f0d406b52b1c89e97bf89b95636ce2e2986f594a","name":"happiness bar chart racing@1.csv","type":"text/csv","lastModified":1687622550386.785,"size":51468}] 29:{"id":"d99f1ec6b481e171","slug":null,"title":"Study on World Happiness Score","thumbnail":"167eb9c70f39d283f8fb67a3eded7cf1b0af4980a148e08b543978d93dc14b6c","access_level":"public","create_time":"$D2023-06-24T16:02:30.386Z","update_time":"$D2023-06-24T16:02:30.386Z","view_time":null,"first_public_time":"$D2023-06-24T16:02:30.386Z","has_unpublished_edits":null,"fork":{"id":"f4bb953058449f36","slug":"study-on-world-happiness-score","title":"Study on World Happiness Score","owner":{"id":"20654bf494d46279","login":"alexntougias","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"ec13578901841fab","login":"datavisualisationhcc","name":"DataVisualisation","avatar_url":"https://avatars-next.observableusercontent.com/8fd2535c3602746f6c614fd7a49d4c6c114a7e2755c379ef25712238b10cc196","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3813,"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":"ec13578901841fab","login":"datavisualisationhcc","name":"DataVisualisation","avatar_url":"https://avatars-next.observableusercontent.com/8fd2535c3602746f6c614fd7a49d4c6c114a7e2755c379ef25712238b10cc196","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ff0b12eb699e53d7","login":"rudolfhofm","name":"Rudolf","avatar_url":"https://avatars-next.observableusercontent.com/5a2ec29fba9baa715dd6eb21ab6d2077d62ee7239530e07b30a9448e6543e6e5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Study on World Happiness Score","cells":[{"id":3530,"value":"md`\n# Study on World Happiness Score\n\nThe page you’re viewing right now is a **notebook**, an interactive, editable document defined by chunks of code called **cells**. Each cell has a displayed *value* defined by its JavaScript [*source code*](https://observablehq.com/@observablehq/introduction-to-code?collection=@observablehq/ordered-introduction).\n\n👈 You can view or hide the source code of a cell by clicking the left-hand margin. Try it now!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3779,"value":"md`

\n## Introduction\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3773,"value":"md`\nHappiness has a great influence on our lives. A happy life will make you full of energy rather than full of stress. So, what factors can affect happiness? From an individual perspective, it may be economic status, social status, etc. From the perspective of the country, is the national happiness index closely related to factors such as economic development, social welfare, and environmental quality? In 2011, the United Nation adopted a novel measure known as the gross national happiness (GNH) and invited its member nations to measure the level of subjective happiness of its citizens. Since the adoption of GNH, the Gallup World Poll began to collect happiness data starting from 2012 and continued to do so every year thereafter. We are interested in having a deeper understanding of the happiness index.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3758,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3535,"value":"md`\n## Analysis Questions\n\n** Exploration of Happiness Trend (Time & Region)**\n\n** What makes people in a country happy?**\n\n** Can money buy happiness? **\n\n** Does work bring happiness?**\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3566,"value":"md`

To start with the data exploration, we made a world map visualisation on [Tableau](https://public.tableau.com/views/HappinessofWorldInteractiveMapwithBarChart/Dashboard?:language=en&:display_count=n&:origin=viz_share_link). \n\nThis visualization can be interacted with in the link above.\n\nWe can select the year and the regions we are interested in. And the bar chart is linked to the selection and showing the average contribution score of six factors. \n\nTo view detailed information about a certain country, hover the mouse over any country.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3573,"value":"FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3148,"value":"md`

\n## Q1 Happiness Trend (Time - region)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3165,"value":"md`### 1.1 World Happiness Score of the top 20 countries in 2015 to 2020 (Bar Chart Race - D3)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`This chart animates the Happiness Score for the top 20 countries in the world from 2015 to 2020. Colour indicates regions. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3380,"value":"data = FileAttachment(\"happiness bar chart racing@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"viewof replay = html`