2b:null 2c:["$","title",null,{"children":"International Happiness of People (IHoP) | 🪦 dis-2024-spring | Observable"}] 31:T192f,viewof map = { var container = html`

`; var content = html`

${container}

Info Panel

Year: 2015

Enable Mental Health Data

`; yield content; var year = 2015; let minHappy = min_max[year]["lifeladder"][0]; let maxHappy = min_max[year]["lifeladder"][1]; var currentSelected = world_countries_geojson_with_happiness.features[0]; var mentalData = false; mapboxgl.accessToken = "pk.eyJ1Ijoicnlhbm1hdHR0IiwiYSI6ImNsdXFxa2l0MDAxN3Iya3JyeGJieTYzajYifQ.N65Wup9Fqz-T1UuAgv2nsw"; const map = new mapboxgl.Map({ container, style: "mapbox://styles/ryanmattt/clvkng9fz01by01ph6ciw4soh", center: [-40, 0], zoom: 0.8, projection: "equalEarth", pitchWithRotate: false, touchPitch: false, touchZoomRotate: false, dragRotate: false }); let hoveredPolygonId = null; map.on("load", () => { map.addSource("states", { type: "geojson", data: world_countries_geojson_with_happiness }); map.addLayer({ id: "state-fills", type: "fill", source: "states", layout: {}, paint: { "fill-opacity": [ "case", ["boolean", ["feature-state", "hover"], false], 0.5, 1 ] } }); map.addLayer({ id: "state-borders", type: "line", source: "states", layout: {}, paint: { "line-color": "#627BC1", "line-width": 0 } }); container.dispatchEvent(new CustomEvent("input")); updateMapLayer(year); // Update the map layer initially document.getElementById("slider").addEventListener("input", function (e) { year = parseInt(e.target.value); document.getElementById("active-year").innerText = year; updateMapLayer(year); // Update the map layer when the year changes }); document .getElementById("mental-toggle") .addEventListener("change", function (e) { mentalData = e.target.checked; if (mentalData) { document.getElementById("slider").setAttribute("max", "2023"); document.getElementById("slider").setAttribute("min", "2021"); year = Math.max(year, 2021); document.getElementById("active-year").innerText = year; updateMapLayer(year); } else { document.getElementById("slider").setAttribute("max", "2022"); document.getElementById("slider").setAttribute("min", "2005"); year = Math.min(year, 2022); document.getElementById("active-year").innerText = year; updateMapLayer(year); } }); const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false, maxWidth: "auto", maxHeight: "auto" }); map.on("mousemove", "state-fills", (e) => { if (e.features.length > 0) { if (hoveredPolygonId !== null) { map.setFeatureState( { source: "states", id: hoveredPolygonId }, { hover: false } ); map.getCanvas().style.cursor = "pointer"; // } hoveredPolygonId = e.features[0].id; // console.log(hoveredPolygonId); const coordinates = e.lngLat; if ( !mentalData && e.features[0].properties.happiness_values != undefined && e.features[0].properties.happiness_values.includes(year) ) { const plot = generatePlot( e.features[0], e.features[0].properties.name_long, year ); popup .setLngLat(coordinates) .setHTML(`

${e.features[0].properties.name_long}

`) .addTo(map); } else if ( mentalData && e.features[0].properties.mentalhealth_values != undefined ) { popup .setLngLat(coordinates) .setHTML(`

${e.features[0].properties.name_long}

`) .addTo(map); } else { popup .setLngLat(coordinates) .setHTML( `

${e.features[0].properties.name_long}

No Data Available` ) .addTo(map); } map.setFeatureState( { source: "states", id: hoveredPolygonId }, { hover: true } ); } }); map.on("mouseleave", "state-fills", () => { if (hoveredPolygonId !== null) { map.setFeatureState( { source: "states", id: hoveredPolygonId }, { hover: false } ); map.getCanvas().style.cursor = ""; } hoveredPolygonId = null; popup.remove(); }); }); function updateMapLayer(year) { if (!mentalData) { let minHappy = min_max[year]["lifeladder"][0]; let maxHappy = min_max[year]["lifeladder"][1]; map.setPaintProperty("state-fills", "fill-color", [ "case", [ "all", ["has", "happiness_values"], ["has", String(year), ["get", "happiness_values"]] ], [ "interpolate", ["linear"], [ "get", "lifeladder", ["get", String(year), ["get", "happiness_values"]] ], minHappy, "#a50026", (minHappy + maxHappy) / 2, "#ffffbf", maxHappy, "#006837" ], "#FFFFFF" ]); } else { map.setPaintProperty("state-fills", "fill-color", [ "case", [ "all", ["has", "mentalhealth_values"], ["has", String(year), ["get", "mentalhealth_values"]] ], [ "interpolate", ["linear"], [ "get", "Mental_Health_Quotient", ["get", String(year), ["get", "mentalhealth_values"]] ], 0, "#a50026", 50, "#ffffbf", 100, "#006837" ], "#FFFFFF" ]); } } return container; }32:T603, function scaleObjectValues(array, country_name, year) { var minMaxYear = min_max[year]; const scalingRules = { "Log GDP per capita": [minMaxYear["Log GDP per capita"][0], minMaxYear["Log GDP per capita"][1], 0, 0.54], "Life Ladder": [minMaxYear["lifeladder"][0], minMaxYear["lifeladder"][1], 0, 0.54], "Social support": [minMaxYear["Social support"][0], minMaxYear["Social support"][1], 0, 0.54], "Healthy life expectancy at birth": [minMaxYear["Healthy life expectancy at birth"][0], minMaxYear["Healthy life expectancy at birth"][1], 0, 0.54], "Freedom to make life choices": [minMaxYear["Freedom to make life choices"][0], minMaxYear["Freedom to make life choices"][1], 0, 0.54], "Generosity": [minMaxYear["Generosity"][0], minMaxYear["Generosity"][1], 0, 0.54], "Perceptions of corruption": [minMaxYear["Perceptions of corruption"][0], minMaxYear["Perceptions of corruption"][1], 0, 0.54], "Positive affect": [minMaxYear["Positive affect"][0], minMaxYear["Positive affect"][1], 0, 0.54], "Negative affect": [minMaxYear["Negative affect"][0], minMaxYear["Negative affect"][1], 0, 0.54] }; return array.map(obj => { const key = obj.key; if (scalingRules.hasOwnProperty(key)) { const [min, max, newMin, newMax] = scalingRules[key]; return { name: country_name, key: key, value: scaleValue(obj.value, min, max, newMin, newMax) }; } else { return obj; } }); }33:Ted6,// Define a function to generate plot from data points function generatePlot(countryObject, country_name, year) { // Retrieve data points for the specified year const dataPoints = JSON.parse(countryObject.properties.happiness_values)[year]; const unscaledPoints = convertDataToPoints(dataPoints, year); const points = scaleObjectValues(unscaledPoints, country_name, year); const longitudeScale = generateLongitudeScale(points); // Ensure that the div is attached to the DOM let popupContent = document.getElementById('currentCountry'); if (!popupContent) { // If the div does not exist, create it and add it to the body popupContent = document.createElement('div'); popupContent.id = 'currentCountry'; document.body.appendChild(popupContent); } popupContent.innerHTML = ''; popupContent.innerHTML = `

${country_name}

${year} Happiness Score: ${dataPoints['lifeladder']}

`; const plot = Plot.plot({ height: 400, width: 400, projection: { type: "azimuthal-equidistant", rotate: [0, -90], domain: d3.geoCircle().center([0, 90]).radius(0.625)() }, marks: [ Plot.geo([0.5, 0.4, 0.3, 0.2, 0.1], { geometry: (r) => d3.geoCircle().center([0, 90]).radius(r)(), stroke: "black", fill: "black", strokeOpacity: 0.3, fillOpacity: 0.03, strokeWidth: 0.5 }), Plot.link(longitudeScale.domain(), { x1: longitudeScale, y1: 90 - 0.57, x2: 0, y2: 90, stroke: "white", strokeOpacity: 0.5, strokeWidth: 2.5 }), Plot.text(longitudeScale.domain(), { x: longitudeScale, y: 90 - 0.57, text: Plot.identity, fontSize: 15, lineWidth: 5, }), Plot.area(points, { x1: ({ key }) => longitudeScale(key), y1: ({ value }) => 90 - value, x2: 0, y2: 90, fill: "name", stroke: "name", curve: "cardinal-closed", fillOpacity: 0.25 }), Plot.dot(points, { x: ({ key }) => longitudeScale(key), y: ({ value }) => 90 - value, fill: "name", stroke: "white" }), Plot.text( points, Plot.pointer({ x: ({ key }) => longitudeScale(key), y: ({ value }) => 90 - value, text: (d) => { const correspondingData = points.find(item => item.key === d.key); return correspondingData ? correspondingData.value : ""; }, fontSize: 20, textAnchor: "start", dx: 4, fill: "currentColor", stroke: "white", maxRadius: 10 }), ), () => html`style> g[aria-label=area] path {fill-opacity: 0.1; transition: fill-opacity .2s;} g[aria-label=area]:hover path:not(:hover) {fill-opacity: 0.05; transition: fill-opacity .2s;} g[aria-label=area] path:hover {fill-opacity: 0.3; transition: fill-opacity .2s;} ` ] }); plot.style.width = '400px'; plot.style.height = '400px'; popupContent.appendChild(plot); } 34:T597,Styles 35:[{"id":"047a728e84183d280edda452c486ab1dec15a093318bc0180f4425976d23af257875bb5899cab841e0ed408a93e75f42a1e914de62d9c682b70e0960be22d3aa","href":"https://static.observableusercontent.com/files/047a728e84183d280edda452c486ab1dec15a093318bc0180f4425976d23af257875bb5899cab841e0ed408a93e75f42a1e914de62d9c682b70e0960be22d3aa","name":"world_countries_geojson_with_mental_health.json","type":"application/json","lastModified":1714638358437.095,"size":13427591},{"id":"b4cc6223e21569ebe165adfbf48779878876f194b0999cea985ab1c463bfacc85ebcb641a9ba6fd1f644ec5941eb2877698063277b74804d9f5125f4f31bd02e","href":"https://static.observableusercontent.com/files/b4cc6223e21569ebe165adfbf48779878876f194b0999cea985ab1c463bfacc85ebcb641a9ba6fd1f644ec5941eb2877698063277b74804d9f5125f4f31bd02e","name":"min_max.json","type":"application/json","lastModified":1714391310699.113,"size":14626},{"id":"826e108b9b70b3ffaaa7abe0f190dfb79667583452002d43ac577dd0afd4265d85dc2762185cc2404fd9e6aedd23613c08c43e70eae43588ed813e874131bd2c","href":"https://static.observableusercontent.com/files/826e108b9b70b3ffaaa7abe0f190dfb79667583452002d43ac577dd0afd4265d85dc2762185cc2404fd9e6aedd23613c08c43e70eae43588ed813e874131bd2c","name":"world_countries_geojson_with_optimized_happiness@2.json","type":"application/json","lastModified":1714264209805.329,"size":13350733},{"id":"ea8e7d2456473cd403b34c8bdd6a3537543daebf09ce528d514750f5f5737780cfd773500df1b750fbb952cc42ebddf1a7775218d4a381b1f5934cfdfd63dd0d","href":"https://static.observableusercontent.com/files/ea8e7d2456473cd403b34c8bdd6a3537543daebf09ce528d514750f5f5737780cfd773500df1b750fbb952cc42ebddf1a7775218d4a381b1f5934cfdfd63dd0d","name":"IMG_0640@1.jpg","type":"image/jpeg","lastModified":1714598627496.031,"size":745723},{"id":"e0738dd2c5355eca2cfde26710dcd0681806a1764aebecca952e1c19413427805e1ecb91bbe91a79928af1b8f6f3fd3f6e91c003273c7b2974c573645497c712","href":"https://static.observableusercontent.com/files/e0738dd2c5355eca2cfde26710dcd0681806a1764aebecca952e1c19413427805e1ecb91bbe91a79928af1b8f6f3fd3f6e91c003273c7b2974c573645497c712","name":"IMG_0645.jpg","type":"image/jpeg","lastModified":1714927545941.328,"size":743671}] 2f:{"id":"ffd3f060184c8275","slug":null,"title":"International Happiness of People (IHoP)","thumbnail":"ffb6088f0abb511317563f48892d63ed13b090ba38bb5d16c3923685f3e4260c","access_level":"public","create_time":"$D2024-04-24T11:42:26.973Z","update_time":"$D2024-05-05T20:17:51.830Z","view_time":null,"first_public_time":"$D2024-05-06T08:55:00.251Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"0e4f3bfcc8beb20b","login":"dis-2024-spring","name":"🪦 dis-2024-spring","avatar_url":"https://avatars-next.observableusercontent.com/571f3ad4cbc562b0adf72faa9035ad2c417426d363c817b87d9f486ab5607ded","tier":"pro_2024"},"version":1634,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c42a8fa9298b602f","login":"ryen","name":"Ryan","avatar_url":"https://avatars-next.observableusercontent.com/ef9fc9bd9e5880d115ace1fa1e8dfa7e47753ae9781671556eb6778e24128d73","tier":null}],"members":[{"type":"team","id":"0e4f3bfcc8beb20b","login":"dis-2024-spring","name":"🪦 dis-2024-spring","avatar_url":"https://avatars-next.observableusercontent.com/571f3ad4cbc562b0adf72faa9035ad2c417426d363c817b87d9f486ab5607ded","tier":"pro_2024","role":"editor"},{"type":"individual","id":"c42a8fa9298b602f","login":"ryen","name":"Ryan","avatar_url":"https://avatars-next.observableusercontent.com/ef9fc9bd9e5880d115ace1fa1e8dfa7e47753ae9781671556eb6778e24128d73","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"International Happiness of People (IHoP)","cells":[{"id":0,"value":"# International Happiness of People (IHoP)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1120,"value":"### Based on the World Happiness Report (WHR)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1261,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":594,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@v3.3.0\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1Ijoicnlhbm1hdHR0IiwiYSI6ImNsdXFxa2l0MDAxN3Iya3JyeGJieTYzajYifQ.N65Wup9Fqz-T1UuAgv2nsw\";\n const href = await require.resolve(\"mapbox-gl@v3.3.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"image = FileAttachment(\"IMG_0645.jpg\").image({width: 1200, height: 400})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"## Cartogram\n\n**To fully explore cartogram see [other notebook](https://observablehq.com/d/8c550e5af0dc6bff)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1582,"value":"

Life Ladder Cartogram

Hover over a country to see life ladder score (takes a few seconds).

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"world_countries_geojson_with_happiness.features.forEach((feature, index) => {\n feature.id = feature.properties.cartodb_id;\n feature.name = feature.properties.name_long;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"world_countries_geojson_with_happiness = FileAttachment(\"world_countries_geojson_with_mental_health.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1619,"value":"world_countries_geojson_with_happiness","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"## Nick's Alternate Version: https://observablehq.com/d/2eecb75f75378018","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1091,"value":"function convertDataToPoints(inputObj, year) {\n const result = [];\n for (const key in inputObj) {\n if (key !== \"year\" && key !== \"lifeladder\") {\n result.push({\n year: year,\n key: key,\n value: inputObj[key]\n });\n }\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"function generateLongitudeScale(points) {\n const keys = Array.from(new Set(points.map(point => point.key)));\n return d3.scalePoint(keys, [180, -180]).padding(0.5).align(1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":" function scaleValue(value, min, max, newMin, newMax) {\n return ((value - min) * (newMax - newMin)) / (max - min) + newMin;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"min_max = FileAttachment(\"min_max.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 30:"$2f:body"