2f:T12a5,{ const container = d3.create("div"); const svg = container .append("svg") .attr("width", width) .attr("height", height); const opac = 0.26; const thisLayout = selectedData.length === 4 ? layout4 : selectedData.length === 5 ? layout5 : layout8; const selectedCountry = svg .append("text") .text("Korea") .attr("x", width / 2) .attr("y", height / 2 - 17) .attr("class", "country"); const paths = []; const avgCircles = []; const avgTexts = []; const scaleNums = []; const angleScale = []; /// Adding each indicator's data selectedData.map((eachData, index) => { scaleNums[index] = d3 .scaleLinear() .domain([0, d3.max(eachData.data, (d) => d.value)]) .range([0, maxValue]); angleScale[index] = d3 .scaleLinear() .domain([0, eachData.data.length]) .range([0, 360]); paths[index] = svg .selectAll("paths") .data(eachData.data) .enter() .append("path") .attr( "transform", (d, i) => `translate(${thisLayout[index].x} ${ thisLayout[index].y }) rotate(${angleScale[index](i)}) scale(0)` ) // .attr("transform", (d, i) => `translate(${thisLayout[index].x} ${thisLayout[index].y}) rotate(${angleScale[index](i)}) scale(${scaleNums[index](d.value)})`) .attr("d", leafSVG) .attr("fill", mainColor) // 6c6ade, 68e0ca .style("opacity", opac) .on("mouseover", function (event, d) { // tooltip // .html(` //

Country ${d.country}

Value ${d.value.toFixed(2)}

// `) // .style('visibility', 'visible'); d3.select(this).style("opacity", 1); showSameCountry(d.country); }); // .on("mousemove", function(event, d) { // tooltip // .style('top', event.pageY - 10 + 'px') // .style('left', event.pageX + 24 + 'px'); // }) // .on("mouseout", function() { // // tooltip.style("visibility", "hidden"); // d3.select(this).style('opacity', opac) // hideSameCountry() // }); // svg.append('text') // .text(eachData.indicator) // .attr('x', thisLayout[index].x) // .attr('y', thisLayout[index].y - 110) // .attr('class', 'labels') container .append("div") .html(`${eachData.indicator}`) .style("left", thisLayout[index].x - maxValue + "px") .style("top", thisLayout[index].y - 123 + "px") .attr("class", "labels"); const avg = d3.mean(eachData.data, (d) => d.value); avgCircles[index] = svg .append("circle") .attr("cx", thisLayout[index].x) .attr("cy", thisLayout[index].y) .attr("r", scaleNums[index](avg)) .style("stroke-dasharray", "2, 2") .attr("stroke", "#5071ab") .attr("class", "avg") .style("opacity", 0); avgTexts[index] = svg .append("text") .text(avg.toFixed(2) + getUnit(eachData.indicator)) .attr("x", thisLayout[index].x + scaleNums[index](avg) + 6) .attr("y", thisLayout[index].y) .attr("fill", "#2b4d8a") .attr("class", "avg_text") .style("opacity", 0); }); //// Animation onloading paths.map((path, index) => { path .transition() .duration(1600) .attr( "transform", (d, i) => `translate(${thisLayout[index].x} ${ thisLayout[index].y }) rotate(${angleScale[index](i)}) scale(${scaleNums[index]( d.value )})` ); }); // avgCircles.map((circle) => { // circle.transition().duration(1600).delay(1000).style("opacity", 1); // }); // avgTexts.map((text) => { // text.transition().duration(1600).delay(1000).style("opacity", 1); // }); // selectedCountry.transition().duration(1600).delay(1000) // .style('opacity', 1) //// Highlighting same countries const showSameCountry = (country) => { selectedCountry.text(country).style("opacity", 1); paths.map((path, index) => { path // .transition().duration(200) .style("opacity", (d) => (d.country === country ? 1 : opac)); }); }; const hideSameCountry = (country) => { selectedCountry.text(country).style("opacity", 0); paths.map((path, index) => { path // .transition().duration(200) .style("opacity", opac); }); }; const initCountry = selectedData[0].data[ parseInt(Math.random() * [selectedData[0].data.length - 1]) ].country; showSameCountry(initCountry); return container.node(); }30:T521,indicators = [ {indicator: 'Protected areas – terrestrial', unit: '%'}, {indicator: 'Protected areas –marine', unit: '%'}, {indicator: 'Threatened species(Red List Index)', unit: ' out of 1 (0: extinct)'}, {indicator: 'Renewable energy', unit: '%'}, {indicator: 'Educational attainment among young adults', unit: '%'}, {indicator: 'Labour underutilisation rate', unit: '%'}, {indicator: 'Smoking prevalence', unit: '%'}, {indicator: 'Obesity prevalence', unit: '%'}, {indicator: 'Trust in others', unit: ' out of 10'}, {indicator: 'Trust in government', unit: ''}, {indicator: 'Government stakeholder engagement', unit: ''}, {indicator: 'Gender parity in politics', unit: '% of women'}, {indicator: 'Corruption', unit: ' (100: clean)'}, {indicator: 'Produced fixed assets', unit: ' USD per capita'}, {indicator: 'Intellectual property assets', unit: ' USD per capita'}, {indicator: 'Gross fixed capital formation', unit: ''}, {indicator: 'Investment in R&D', unit: ' % of GDP'}, {indicator: 'Financial net worth of the total economy', unit: ' USD per capita'}, {indicator: 'Household debt', unit: '% of income'}, {indicator: 'Financial net worth of government', unit: ' USD per capita'}, {indicator: 'Leverage of the banking sector', unit: '%'} ]31:T56c,categories = [ { group: 'Natural Capital', desc: 'Natural Capital consists of naturally occurring assets and ecosystems, from tradable items such as minerals and timber through to oceans and the atmosphere.', indicators: ['Protected areas – terrestrial', 'Protected areas –marine', 'Threatened species(Red List Index)', 'Renewable energy']}, { group: 'Human Capital', desc: 'Human Capital refers to the knowledge, competencies, skills and health status of individuals, which are viewed here from the perspective of their contribution to future well-being.', indicators: ['Educational attainment among young adults', 'Labour underutilisation rate', 'Smoking prevalence', 'Obesity prevalence']}, { group: 'Social Capital', desc: 'Social Capital is about the social norms, shared values and institutional arrangements that foster co-operation among population groups.', indicators: ['Trust in others', 'Trust in government', 'Government stakeholder engagement', 'Gender parity in politics', 'Corruption']}, { group: 'Economic Capital', desc: 'Economic capital includes both produced (man-made) and financial assets.', indicators: ['Produced fixed assets', 'Intellectual property assets', 'Gross fixed capital formation', 'Investment in R&D', 'Financial net worth of the total economy', 'Household debt', 'Financial net worth of government', 'Leverage of the banking sector'] } ]32:T5af,html` `33:[{"id":"2bc6e8bd53a4dce089adf4407d14da31de9e5cebd4350d94340576cb4ec54eeac28de177420bf35cb4a6825d39969708cd78a9374d015333f27195214e57b47b","href":"https://static.observableusercontent.com/files/2bc6e8bd53a4dce089adf4407d14da31de9e5cebd4350d94340576cb4ec54eeac28de177420bf35cb4a6825d39969708cd78a9374d015333f27195214e57b47b","name":"HSL_05032023061412245.csv","type":"text/csv","lastModified":1677994551354.471,"size":3218208}] 2d:{"title":"Resources for future well-being","cells":[{"id":0,"value":"# Resources for future well-being","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"- From OECD's [How's Life? Well-Being](https://stats.oecd.org/Index.aspx?DataSetCode=HSL) data\n- The most data is from 2021. Some data is older than 2021.\n- SVG path from this site (https://yqnn.github.io/svg-path-editor/)\n- Description of indicators (https://www.oecd-ilibrary.org/economics/how-s-life_23089679)","pinned":false,"hidden":false,"mode":"md"},{"id":507,"value":"

${selectedGroup}

","pinned":false,"hidden":false,"mode":"html"},{"id":133,"value":"viewof selectedGroup = select({\n options: categories.map((d) => d.group),\n value: \"Human Capital\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":816,"value":"

${categories.filter(d => d.group === selectedGroup)[0].desc}

","pinned":false,"hidden":false,"mode":"html"},{"id":966,"value":"leafSVG = 'M 0 0 C 0.3232 -0.077 0.7387 -0.1231 1 0 C 0.7079 0.1154 0.354 0.0616 0 0 Z'","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"selectedCategories = categories.filter(d => d.group === selectedGroup)[0].indicators","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"selectedData = data.filter(d => selectedCategories.includes(d.indicator))","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"## Setup","pinned":false,"hidden":false,"mode":"md"},{"id":842,"value":"mainColor = '#5956da'","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'tooltip')\n .text('a simple tooltip');","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"getUnit = (indicator) => {\n return indicators.filter(d => d.indicator === indicator)[0].unit\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"height = 570","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"- Filtering only relevant data\n- Get country's most recent value for each indicator (using group)","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"data = d3.groups(raw_data, d => d.indicator, d => d.country).map(d => {\n // const thisData = d[1]\n const thisData = d[1].map(d2 => {\n const len = d2[1].length\n return d2[1][len - 1]\n })\n \n const obj = {\n indicator: d[0],\n data: thisData\n }\n return obj\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"raw_data = d3.csvParse(await FileAttachment(\"HSL_05032023061412245.csv\").text(), d3.autoType).map(d => {\n const obj = {\n country: d.Country,\n indicator: d.Indicator,\n time: d.Time,\n value: d.Value,\n flags: d['Flag Codes']\n }\n return obj\n})\n.filter(d => d.value >= 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"layout4 = [\n {x: 1.2/4 * width, y: 1/4 * height}, {x: 2.8/4 * width, y: 1/4 * height}, {x: 1.2/4 * width, y: 3/4 * height}, {x: 2.8/4 * width, y: 3/4 * height}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"layout5 = [\n {x: 2/6 * width, y: 1/4 * height}, {x: 4/6 * width, y: 1/4 * height}, {x: 1/6 * width, y: 3/4 * height}, {x: 3/6 * width, y: 3/4 * height}, {x: 5/6 * width, y: 3/4 * height}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"layout8 = [\n {x: 1/8 * width, y: 1/4 * height}, {x: 3/8 * width, y: 1/4 * height}, {x: 5/8 * width, y: 1/4 * height}, {x: 7/8 * width, y: 1/4 * height}, \n {x: 1/8 * width, y: 3/4 * height}, {x: 3/8 * width, y: 3/4 * height}, {x: 5/8 * width, y: 3/4 * height}, {x: 7/8 * width, y: 3/4 * height}, \n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"maxValue = width > 600 ? 120 : 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}