36:["$","title",null,{"children":"Q3: Does work bring happiness? | alexntougias | Observable"}] 3e:Tde6,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 - margin.bottom})`) .call(d3.axisBottom(x)) .append('text') .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '12px') .attr('font-weight', 'bold') .attr('x', width - margin.right) .attr('y', -10) .text('Average working hours'); svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)) .append('text') .attr('transform', `translate(20, ${margin.top}) rotate(-90)`) .attr('text-anchor', 'end') .attr('fill', 'black') .attr('font-size', '12px') .attr('font-weight', 'bold') .text('Happiness index'); const yearLabel = svg.append('text') .attr('class', 'year') .attr('x', 40) .attr('y', height - margin.bottom - 20) .attr('fill', '#ccc') .attr('font-family', 'Helvetica Neue, Arial') .attr('font-weight', 500) .attr('font-size', 80) .text(years[0]); // Add and position the legend; place in the upper right corner. svg.append('g') .attr('transform', `translate(${width - margin.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(dataInitial, d => d.Region) .join('circle') .sort((a, b) => b.Happiness - a.Happiness) .attr('class', 'Region') .attr('opacity', 0.75) .attr('fill', d => color(d.Region)) .attr('cx', d => x(d.AVGWH)) .attr('cy', d => y(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(year) { // Update the year label by simply setting it to the new value. yearLabel.text(year); // Update countries and animate the transition: // 1. Change the data to filter to the given year, keyed by country // 2. Re-sort elements to ensure smallest remain on top, as pop values may have changed // 3. Update position and radius, interpolated across a 1 sec (1000ms) animation countries .data(gapminder.filter(d => d.Year === year), d => d.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 => x(d.AVGWH)) .attr('cy', d => y(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) ? color(d.Region) : '#ccc'); }); return Object.assign(svg.node(), { setYear }); }3f:T568,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 => color(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); }40:T699,// 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('x', 0) .attr('y', 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('cx', entryRadius) .attr('r', entryRadius) .attr('fill', d => color(d.index)); const labels = entries.append('text') .attr('x', 2 * entryRadius + labelOffset) .attr('y', 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'); }); }41:[{"id":"b640f29a92b2e68483587c92b8d3cb3c51ac98954fd8d289e62e0e36f9aaf413a238ff578d4d9f5dca9a3d1665427604c7f3ee079e757c2a4340eb07268cc680","href":"https://static.observableusercontent.com/files/b640f29a92b2e68483587c92b8d3cb3c51ac98954fd8d289e62e0e36f9aaf413a238ff578d4d9f5dca9a3d1665427604c7f3ee079e757c2a4340eb07268cc680","name":"t1@1.csv","type":"text/csv","lastModified":1621965218074.568,"size":2052}] 3a:{"id":"06a671eec080b137","slug":"untitled/3","title":"Q3: Does work bring happiness?","thumbnail":"115c9a7f16f14019c8fed18fc72ead6d57bde30ec6721dab3bc121b999996817","access_level":"public","create_time":"$D2021-05-25T17:45:36.251Z","update_time":"$D2021-05-27T05:58:55.864Z","view_time":null,"first_public_time":"$D2021-05-25T18:10:58.083Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"20654bf494d46279","login":"alexntougias","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c4b636b5713d419d05423edbcdac5555c722eb8aaf34c62c21cbfc4c686944cd","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":130,"publish_version":130,"role":null,"authored":false,"authors":[{"type":"individual","id":"970cddec9aefb6e2","login":"alexntougias","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c4b636b5713d419d05423edbcdac5555c722eb8aaf34c62c21cbfc4c686944cd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"970cddec9aefb6e2","login":"alexntougias","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c4b636b5713d419d05423edbcdac5555c722eb8aaf34c62c21cbfc4c686944cd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Q3: Does work bring happiness?","cells":[{"id":0,"value":"md`# Q3: Does work bring happiness?`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md ` We always thought that work makes a person happy and complete. But is it really the case? If we were taught something from Covid-19 is that people seemed to really enjoy teleworking. Is it because it was more convenient? Is it because they did not have to go to the office? That raised the question. Does working really brings joy to people?` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md ` As we can see from the graph below, there s seems to be a correlation with happiness and working hours. It seems that is an important factor but not the catalyst. It is apparent that countries with more working hours on average score less on the happiness rating. We can notice that people in North America, score a higher Happiness ranking than Western Europe, even if they work more hours. We assume that the reason for that is the fact that they have a bigger salary. Another example that strengthens our hypothesis is Oceania and the fall it has in the Happiness ladder from 2015 until 2017 as the working hours increase. ` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof yearLegend = Scrubber(\n d3.range(years[0], years[1]+1 , 1),\n { autoplay: false, delay: 1000, loop: false }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {aq, op} from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"gapminder = d3.csvParse(await FileAttachment(\"t1@1.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"years = d3.extent(gapminder, d => d.Year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"dataInitial = gapminder.filter(d => d.Year === years[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"margin = ({top: 10, right: 10, bottom: 20, left: 20})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(gapminder, d => d.AVGWH)])\n .range([margin.left, width - margin.right])\n .nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(gapminder, d => d.Happiness)])\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"color = d3.scaleOrdinal()\n .domain(gapminder.map(d => d.cluster))\n .range(d3.schemeTableau10) // try other schemes, too!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"size = d3.scaleSqrt()\n .domain(d3.extent(gapminder, d => d.Happiness))\n .range([4, 35]) // output radii range from 4 to 35 pixels","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"regions = [\n { index: 0, label: 'Central and Eastern Europe' },\n { index: 1, label: 'East Asia' },\n { index: 2, label: 'Latin America and Caribbean' },\n { index: 3, label: 'Middle East and North Africa' },\n { index: 4, label: 'North America' },\n { index: 5, label: 'Oceania'},\n { index: 6, label: 'South Asia'},\n { index: 7, label: 'Southeast Asia'},\n { index: 8, label: 'Sub-Saharan Africa'},\n { index: 9, label: 'Western Europe'}\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"{\n const svg = d3.create('svg')\n .attr('width', 200)\n .attr('height', 110);\n \n const legend = svg.append('g')\n .attr('transform', 'translate(0, 10)')\n .call(colorLegend); // <-- our legend helper is invoked just like an axis generator\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"// Our selection model wraps two components:\n// - A JavaScript Set for tracking the selected elements\n// - A D3 dispatch helper for registering and invoking listener callbacks upon changes\nfunction SelectionModel(values) {\n const dispatch = d3.dispatch('change');\n const state = new Set(values);\n \n const api = {\n on: (type, fn) => (dispatch.on(type, fn), api),\n clear: () => (clear(), api),\n has: value => !state.size || state.has(value),\n set: value => (update(value, true), api),\n toggle: value => (update(value, !state.has(value)), api)\n };\n \n function clear() {\n if (state.size) {\n state.clear();\n dispatch.call('change', api, api);\n }\n }\n \n function update(value, add) {\n if (add && !state.has(value)) {\n state.add(value);\n dispatch.call('change', api, api);\n } else if (!add && state.has(value)) {\n state.delete(value);\n dispatch.call('change', api, api);\n }\n }\n\n return api;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"chartLegend.setYear(yearLegend)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W41","stdlib":"1"}} 35:null