31:T502,viewof countryIndicator = { const domSvg = DOM.svg(width, height) const svg = d3.select(domSvg) .attr('width', width) .attr('height', height) .attr('style', 'display: block') svg.append('path') .attr('d', `${path(outline)}`) .attr('stroke', '#b4b9c1') .attr('fill', '#e4e9f1') svg.selectAll('path') .data(data) .enter() .append("path") .attr('d', path) .attr('class', 'tooltip') .attr('stroke', 'transparent') .attr('fill', colourLand) .on('mouseover', function() { d3.select(this) .attr('fill', d => d.hasData ? '#FFD53E' : `url(#stripe-pattern)`) tipMouseover(d3.select(this), tip) }) .on('mousemove', (e, d) => { tipMousemove(d, tip, d3.pointer(e)) domSvg.value = d domSvg.dispatchEvent(new CustomEvent('input')) }) .on('mouseout', function() { d3.select(this).attr('fill', colourLand) tipMouseout(d3.select(this), tip) domSvg.value = {} domSvg.dispatchEvent(new CustomEvent('input')) }) svg.select('#loading') .style('visibility', 'hidden') const tip = addTooltip(svg) yield domSvg }32:T4c1,// adapted from https://observablehq.com/@mkfreeman/plot-tooltip tipMousemove = (d, tip, e) => { const q0 = e[0] < width / 2 ? -1 : 1 const q1 = e[1] < height / 2 ? -1 : 1 const cs = getCountryStats(d) tip.selectAll('*').remove() tip.style('text-anchor', 'middle') .style('pointer-events', 'none') .selectAll('text') .data(cs) .join('text') .attr('text-anchor', 'middle') .attr('font-weight', (d, i) => years.indexOf(year) === i - 1 ? 'bold' : 'normal') .attr('dx', (d, i) => `0`) .attr('dy', (d, i) => `${1.5 * i}em`) .style('dominant-baseline', 'ideographic') .text((d) => d) const bbox = tip.node().getBBox() tip.append('rect') .attr('x', bbox.x - tipMargins.h) .attr('y', bbox.y - tipMargins.v) .attr('rx', 5) .attr('width', bbox.width + tipMargins.h * 2) .attr('height', bbox.height + tipMargins.v * 2) .style('fill', 'white') .style('stroke', '#d3d3d377') .style('stroke-width', '2') .lower() tip.attr('transform', `translate(${e[0] + (e[0] > width / 2 ? -50 : 50)}, ${e[1] + (e[1] > height / 2 ? -bbox.height : 50)})`) }33:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1630648353534.77,"size":756420},{"id":"2af4f835b7506447f6a0c5122eba62d47c60725e2267b894b8344bac57630f75efd2c2a223651c700af247003d17b5564fe6599676d4b97a5eff5ccf21c37164","href":"https://static.observableusercontent.com/files/2af4f835b7506447f6a0c5122eba62d47c60725e2267b894b8344bac57630f75efd2c2a223651c700af247003d17b5564fe6599676d4b97a5eff5ccf21c37164","name":"country_codes.json","type":"application/json","lastModified":1630967417009.274,"size":3384},{"id":"ec53e3ba3e8bb1747050bcb5bdc811d29b2913bdcb616492da5c894d3d1ac7677ff7ff604927fbaaba0415843754152c0b175a104488cd8c16fbfdae7cdcfde0","href":"https://static.observableusercontent.com/files/ec53e3ba3e8bb1747050bcb5bdc811d29b2913bdcb616492da5c894d3d1ac7677ff7ff604927fbaaba0415843754152c0b175a104488cd8c16fbfdae7cdcfde0","name":"footnotes.json","type":"application/json","lastModified":1630964567870.67,"size":8490045},{"id":"6b0d17de02f54ddd4be1426bb1c78ae82e2ed82b350ac286ffabe7d1269387c001e5b02a1d16b5fbbbf531845aa56f79b366d2bded51b180137b3e736281e3bf","href":"https://static.observableusercontent.com/files/6b0d17de02f54ddd4be1426bb1c78ae82e2ed82b350ac286ffabe7d1269387c001e5b02a1d16b5fbbbf531845aa56f79b366d2bded51b180137b3e736281e3bf","name":"series.json","type":"application/json","lastModified":1630964566583.228,"size":704597},{"id":"ab2c31585e40bb7a236411c6b419a294b9dddfefdcae5a789d7300322c7fddaf767fd53972ce29e1e356ce15cefe5104c33c0311c14cc77283b1c7c2c7b9c194","href":"https://static.observableusercontent.com/files/ab2c31585e40bb7a236411c6b419a294b9dddfefdcae5a789d7300322c7fddaf767fd53972ce29e1e356ce15cefe5104c33c0311c14cc77283b1c7c2c7b9c194","name":"indicator_tree@1.json","type":"application/json","lastModified":1631811256236.759,"size":13944},{"id":"52b1384ece6d04ae1fcc829b32e4a854c5a35a8178ea2183e77d2f1bae31b921e0dce1ba4f59d1127bfa999ecfc206787ba5efd79c49f7481427195afb128209","href":"https://static.observableusercontent.com/files/52b1384ece6d04ae1fcc829b32e4a854c5a35a8178ea2183e77d2f1bae31b921e0dce1ba4f59d1127bfa999ecfc206787ba5efd79c49f7481427195afb128209","name":"indicators@1.json","type":"application/json","lastModified":1631811185491.429,"size":72299}] 2f:{"title":"Global access to finance (World Bank Findex)","cells":[{"id":0,"value":"# Global access to finance (World Bank Findex)\n## An interactive explorer for the World Bank's Global Findex, the most comprehensive data source we have for measuring [financial inclusion](https://www.worldbank.org/en/topic/financialinclusion/overview).","pinned":false,"hidden":false,"mode":"md"},{"id":552,"value":"### Overview of the Global Findex\nThe World Bank created this dataset using information collected in 2011, 2014, 2017 and 2021 to help achieve their goal of [Universal Financial Access 2020](https://www.worldbank.org/en/topic/financialinclusion/brief/achieving-universal-financial-access-by-2020). The same dataset can also be analysed using the World Banks' [DataBank](https://databank.worldbank.org/source/global-financial-inclusion).\n\nThe 2021 Findex project used survey data collected from ~125,000 participants across ~123 economies during the pandemic.\n\nYou can find more resources about the Global Findex project [here](https://www.worldbank.org/en/publication/globalfindex).\n\n### How to use this page\n\n${!data0 ? `# LOADING DATA`: ``}\n\nFilter data points using the ***Indicator statistic*** and ***Sub-statistic*** dropdowns below.\n\nHover over countries to see information specific to that population.","pinned":false,"hidden":false,"mode":"md"},{"id":682,"value":"---\n## Choose a statistic","pinned":false,"hidden":false,"mode":"md"},{"id":1122,"value":"Hover over countries in the choropleth map below to see nation-specific statistics.","pinned":false,"hidden":false,"mode":"md"},{"id":542,"value":"viewof topLevelIndicator = Inputs.select(topLevelIndicators, {label: \"Indicator statistic\", format: indicator => indicatorLookup[indicator]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1000,"value":"viewof subIndicator = Inputs.select(subIndicators, {label: \"Sub-statistic\", format: subInd => indicatorLookup[subInd.name], disabled: subIndicators.length === 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"viewof year = Inputs.radio(years, {label: \"Year\", value: \"2021\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"Global average for **${indicatorLookup[indicator.name]}**.","pinned":false,"hidden":false,"mode":"md"},{"id":1933,"value":"Inputs.table([globalAverages])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"---\n## Interactive map","pinned":false,"hidden":false,"mode":"md"},{"id":824,"value":"Statistic: **${indicatorLookup[indicator.name]}**","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"legend({\n color: interColour,\n title: \"Percentage of population (%)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1513,"value":"$${footnote ? '\\\\* ' : ''}${footnote}","pinned":false,"hidden":false,"mode":"md"},{"id":2574,"value":"## Tables","pinned":false,"hidden":false,"mode":"md"},{"id":1321,"value":"$${data.filter(d => d.hasData).length > 0 ? `### Average: *${indicatorLookup[subIndicator.name]}* in *${year}* by country`: ``}","pinned":false,"hidden":false,"mode":"md"},{"id":843,"value":"viewof countryIndicators = data.filter(d => d.hasData).length > 0 ? Inputs.table(data.filter(d => d.hasData).map(d => {d['Percentage (%)'] = d[year]; return d}), {\n columns: ['Country Name', 'Percentage (%)'],\n sort: 'Country Name',\n format: {'Percentage (%)': sparkbar(1)}\n}) : \"no data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1873,"value":"### Global averages: *${indicatorLookup[indicator.name]}* by year, broken down into sub-statistics","pinned":false,"hidden":false,"mode":"md"},{"id":1871,"value":"Inputs.table(subStatisticAvgs, {\n columns: ['sub-statistic', ...years.filter(y => subStatisticAvgs.some(ssa => !isNaN(ssa[y])))],\n format: years.reduce((o, y) => {\n o[y] = sparkbar(1)\n return o\n }, {})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"## Appendix (code)","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"### Variables","pinned":false,"hidden":false,"mode":"md"},{"id":617,"value":"Pattern displayed where data isn't available.","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"stripePattern = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"tipMargins = ({h: 10, v: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"projection = d3.geoEqualEarth()\n// for rectangular map, switch to `projection = d3.geoEquirectangular()`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"years = ['2011', '2014', '2017', '2021']","pinned":false,"hidden":false,"mode":"ojs"},{"id":1903,"value":"globalAverages = {\n return years.map(y => {\n const ns = getData(indicator)\n .map(d => d[y])\n .filter(n => Number.isFinite(n))\n\n return [y, ns.reduce((a, b) => a + b, 0) / ns.length]\n })\n .reduce((o, n) => {\n o[n[0]] = Number.isFinite(n[1]) ? n[1].toFixed(2) : \"-\"\n return o\n }, {})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"subStatisticAvgs = {\n return subIndicators.map(ind => {\n const subIndData = getData(ind)\n const c = countryCodeLookup[subIndData.id]\n const res = years.map(y => subIndData.map(d => d[y])\n .filter(n => Number.isFinite(n))\n )\n const o = {'sub-statistic': indicatorLookup[ind.name], code: ind}\n years.forEach((y, i) => {\n o[y] = res[i] ? res[i].reduce((a,b) => a + b, 0) / res[i].length : \"No data\"\n })\n return o\n }) \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"#### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"interColour = d3.scaleLinear().domain(interpolate(0, 100, 5)).range(d3.schemeSpectral[5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"interpolate = (a, b, n) => {\n return Array.from({length: n}, (_, i) => a + i * (b - a) / (n - 1))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"colourLand = d => d['hasData'] ? interColour(d[year]) : `url(#stripe-pattern)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"addTooltip = svg => {\n\n return svg.selectAll('.tip').data([\"\"])\n .join(\"g\")\n .attr(\"class\", \"hover\")\n .style(\"pointer-events\", \"none\")\n .style(\"text-anchor\", \"middle\")\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"tipMouseover = (o, tooltip) => {\n return tooltip.style('visibility', 'visible')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"tipMouseout = (o, tooltip) => tooltip.style('visibility', 'hidden')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2327,"value":"xPadded = (x, dist) => {\n const v = dist ?? 10\n const l = x < width / 2\n return x + (l ? v : -v)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2329,"value":"yPadded = (y, dist) => {\n const v = dist ?? 20\n const l = y < height / 2\n return y + (l ? v : -v)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"getCountryStats = (d) => {\n\n const asCount = (countryCode, year) =>\n `${Math.round(population(countryCode, year) * d[year] / 100).toLocaleString()}`\n const asPercentage = (year) =>`${Math.round(parseFloat((d[year])))}%`\n const displayValue = (countryCode, year) => \n `${year}: ${asCount(countryCode, year)} (${asPercentage(year)})`\n \n const l0 = d['Country Name'] ? d['Country Name'] : d.properties.name\n const yearData = years.map(y => d[y] ? displayValue(d['Country Alpha'], y) : 'No data')\n return [l0, ...yearData]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"getData = indicator => {\n return land.features\n .map(f => {\n const country = countryCodeLookup[f.id]\n const d = data0[`${country}:${indicator.name}`]\n const res = d ? interColour(d[year] / 100) : `url(#stripe-pattern)`\n f.hasData = d && d[year]\n f.colour = res\n f['Country Alpha'] = country\n return {\n ...f,\n ...d\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1520,"value":"getFootnote = d => {\n const k = `${d['Country Alpha']}:${indicator}`\n return footnotes[k] ? footnotes[k].FootNote : \"\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2188,"value":"sparkbar = (max) => {\n return x => htl.html`

${x.toFixed(1)}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2515,"value":"population = (countryCode, year) => populationMapping[`${countryCode}:${year}`]","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"#### Data","pinned":false,"hidden":false,"mode":"md"},{"id":925,"value":"data = getData(subIndicator)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"land = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2284,"value":"import {populationMapping} from \"@dextersjab/global-findex-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2210,"value":"// import {data as data0} from \"@dextersjab/world-bank-global-findex\"\nimport {data as data0} from \"@dextersjab/global-findex-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1360,"value":"series = FileAttachment(\"series.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"footnotes = FileAttachment(\"footnotes.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"// indicatorTree = FileAttachment(\"indicator_tree@1.json\").json()\nimport {indicatorTree} from \"@dextersjab/global-findex-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"// indicatorLookup = FileAttachment(\"indicators@1.json\").json()\nimport {indicatorMapping as indicatorLookup} from \"@dextersjab/global-findex-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"topLevelIndicators = indicatorTree.map((o, i) => o.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"subIndicators = indicatorTree.find(ind => ind.name == topLevelIndicator).children","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"indicator = subIndicator !== '-' ? subIndicator : topLevelIndicator","pinned":false,"hidden":false,"mode":"ojs"},{"id":2534,"value":"countryCodeLookup = FileAttachment(\"country_codes.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1542,"value":"footnote = getFootnote(countryIndicator)","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}