{"version":3,"sources":["OECD_white_EN.png","index.js","Site.module.css"],"names":["module","exports","ReactGA","initialize","pageview","window","location","search","pathname","mapboxgl","accessToken","colors","top5_list","result","regionTotal","Africa","Americas","Asia","Europe","Oceania","quantile","arr","q","sorted","sort","a","b","asc","pos","length","base","Math","floor","rest","undefined","legend","style","backgroundColor","tooltip","e","payload","className","classes","region","sciScaled","Application","props","onUpdate","ISO2","Name","Region","setState","selectedCountry","sci","sciOriginal","map","state","button","push","start","end","selected","scidata","scidataRank","scidataRankRegion","scidataRankRegionCode","countryData","Object","keys","k","slice","rank_region","v","indexOf","percentile20","sortedSCI","rank_country","top5","round","reduced","reduce","m","d","count","item","numbers","name","matchExpression","forEach","remove","addLayer","id","source","type","filter","paint","on","features","properties","iso_3166_1","getCanvas","cursor","coordinates","lngLat","lng","lat","sciPopup","rankPopup","sciColor","rankPopupRegion","regionNumber","i","popUp","setLngLat","setHTML","name_en","addTo","getElement","color","rendered","obj","removeLayer","moveRegion","activeLabel","flyTo","center","zoom","essential","this","Popup","closeButton","closeOnClick","Map","container","mapContainer","attributionControl","addControl","AttributionControl","customAttribution","addSource","url","prevProps","prevState","topleft","headwrapper","buttonwrapper","buttonActive","onClick","table","regionsel","normal","width","aspect","data","localeCompare","marginTop","dataKey","interval","textAnchor","fontFamily","fill","content","entry","index","key","icon","href","ref","el","logo","src","alt","React","Component","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.4f3270bf.chunk.js","sourcesContent":["module.exports = __webpack_public_path__ + \"static/media/OECD_white_EN.9ef51567.png\";","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport mapboxgl from 'mapbox-gl';\r\nimport sciOriginal from './sci.json';\r\nimport countryData from './country.json';\r\nimport classes from './Site.module.css';\r\nimport { BarChart, Cell, Bar, Tooltip, XAxis,ResponsiveContainer} from 'recharts';\r\nimport ReactGA from 'react-ga';\r\nimport './index.css';\r\nimport logo from './OECD_white_EN.png';\r\nimport MaterialIcon from 'material-icons-react';\r\n\r\n\r\nReactGA.initialize('UA-128268752-1');\r\nReactGA.pageview(window.location.search+window.location.pathname);\r\n\r\n//iso_3166_1_alpha_3\r\n\r\n//// Access token for Africapolis mapbox account\r\nmapboxgl.accessToken = 'pk.eyJ1IjoibWttZCIsImEiOiJjajBqYjJpY2owMDE0Mndsbml0d2V1ZXczIn0.el8wQmA-TSJp2ggX8fJ1rA';\r\n\r\n\r\nconst colors = [\"#F3F2E8\",\"#D4EBE2\",\"#B6E3DB\",\"#97DCD5\",\"#79D5CF\",\"#5ACEC9\",\"#3CC6C2\",\"#1DBFBC\",\"#333333\"]\r\n\r\n\r\n\r\n//////////////////\r\n\r\n// sort array ascending\r\nlet top5_list=[[],[],[],[],[]];\r\nlet result=[];\r\n\r\n\r\n\r\nconst regionTotal={Africa:55,Americas:40,Asia:46,Europe:42,Oceania:12}\r\n\r\nconst asc = arr => arr.sort((a, b) => a - b);\r\n\r\nconst quantile = (arr, q) => {\r\n    const sorted = asc(arr);\r\n    const pos = (sorted.length - 1) * q;\r\n    const base = Math.floor(pos);\r\n    const rest = pos - base;\r\n    if (sorted[base + 1] !== undefined) {\r\n        return sorted[base] + rest * (sorted[base + 1] - sorted[base]);\r\n    } else {\r\n        return sorted[base];\r\n    }\r\n};\r\n\r\nconst legend = (\r\n<div>\r\n  <h4>Social Connectedness</h4>\r\n<div><span style={{backgroundColor: colors[0]}}></span>{\"< 1x\"} <small>{\"(20th percentile)\"}</small></div>\r\n<div><span style={{backgroundColor: colors[1]}}></span>1-2x</div>\r\n<div><span style={{backgroundColor: colors[2]}}></span>2-3x</div>\r\n<div><span style={{backgroundColor: colors[3]}}></span>3-5x</div>\r\n<div><span style={{backgroundColor: colors[4]}}></span>5-10x</div>\r\n<div><span style={{backgroundColor: colors[5]}}></span>10-25x</div>\r\n<div><span style={{backgroundColor: colors[6]}}></span>25-100x</div>\r\n<div><span style={{backgroundColor: colors[7]}}></span>{\">= 100x\"}</div>\r\n<div><span style={{backgroundColor: colors[8]}}></span>{\"Data not available\"}</div>\r\n</div>\r\n);\r\n\r\nconst tooltip = e => {\r\n  if (e.payload[0]) {\r\n  return ( <div className={classes.tooltip}> {e.payload[0].payload.region} <br/>SCI {e.payload[0].payload.sciScaled}x</div> ) }\r\n}\r\n\r\n\r\n//// Basic setting of the map\r\nclass Application extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      lng: 40,\r\n      lat: 30,\r\n      zoom: 2,\r\n      selectedCountry: \"NG\",\r\n      name: \"\",\r\n      region: \"Africa\",\r\n      button: \"From\",\r\n      rendered: \"\"\r\n    };\r\n  }\r\n\r\ncomponentDidMount() {\r\n//// Initial map setting\r\n\r\nlet sci=[];\r\nsciOriginal.map(e=>this.state.button===\"From\"? sci.push({start:e.start,end:e.end,sci:e.sci}) : sci.push({end:e.start,start:e.end,sci:e.sci}))\r\n\r\nlet selected = [];\r\nlet scidata= [];\r\nlet scidataRank = [];\r\nlet scidataRankRegion = {Africa:[],Americas:[],Asia:[],Europe:[],Oceania:[]}\r\nlet scidataRankRegionCode = {Africa:[],Americas:[],Asia:[],Europe:[],Oceania:[]}\r\nsci.map(e => e.start===this.state.selectedCountry? selected.push(e) : null)\r\nselected.map(e => {\r\n  scidata.push(e.sci)\r\n  scidataRank.push(e.sci)\r\n  scidataRankRegion[countryData[e.end][1]].push(e.sci)\r\n  scidataRankRegionCode[countryData[e.end][1]].push(e.end)\r\n})\r\n\r\n\r\nObject.keys(scidataRankRegion).map(\r\n  k => {\r\n    let sorted = scidataRankRegion[k].slice().sort((a,b) => b-a);\r\n    let rank_region=scidataRankRegion[k].map(v => sorted.indexOf(v)+1);\r\n    scidataRankRegion[k]=rank_region\r\n  }\r\n )\r\n\r\n     this.popUp = new mapboxgl.Popup({\r\n              closeButton: false,\r\n              closeOnClick: false\r\n          });\r\n\r\n     this.map = new mapboxgl.Map({\r\n      container: this.mapContainer,\r\n      style: 'mapbox://styles/mkmd/ckguwdhux0j7719p9rz2hpmpi', /// Select mapstyle from mapbox studio\r\n      center: [this.state.lng, this.state.lat],\r\n      zoom: this.state.zoom,\r\n      attributionControl: false\r\n    });\r\n                  let top5=scidata.sort((a,b) => b-a).slice(0,5);\r\n                  let sortedSCI=scidata.sort((a,b) => b-a);\r\n                  let rank_country=scidataRank.map(v => sortedSCI.indexOf(v)+1 );\r\n\r\n                  let percentile20 = quantile(scidata, .20)\r\n                  selected.map(e => {\r\n                    e.region=countryData[e.end][1]\r\n                    e.sciScaled= Math.round(e.sci/percentile20)\r\n                    if(e.sci===top5[0]) {top5_list[0]=e}\r\n                    else if(e.sci===top5[1]) {top5_list[1]=e}\r\n                    else if(e.sci===top5[2]) {top5_list[2]=e}\r\n                    else if(e.sci===top5[3]) {top5_list[3]=e}\r\n                    else if(e.sci===top5[4]) {top5_list[4]=e}\r\n                  })\r\n                                // Calculate the sums and group data (while tracking count)\r\n                  const reduced = selected.reduce(function(m, d){\r\n                      if(!m[d.region]){\r\n                        m[d.region] = {...d, count: 1};\r\n                        return m;\r\n                      }\r\n                      m[d.region].sciScaled += d.sciScaled;\r\n                      m[d.region].count += 1;\r\n                      return m;\r\n                   },{});\r\n\r\n                   // Create new array from grouped data and compute the average\r\n                      result = Object.keys(reduced).map(function(k){\r\n                       const item  = reduced[k];\r\n                       return {\r\n                           region: item.region,\r\n                           sciScaled: Math.round(item.sciScaled/item.count*100)/100,\r\n                       }\r\n                   })\r\n\r\n                   let matchExpression = ['match', ['get', 'iso_3166_1']];\r\n\r\n                   // Calculate color values for each country based on 'hdi' value\r\n                   selected.forEach( e => {\r\n                   if(e.sci/percentile20 < 1) {matchExpression.push(e['end'], \"#F3F2E8\");}\r\n                   else if (e.sci/percentile20 < 2) {matchExpression.push(e['end'], \"#D4EBE2\");}\r\n                   else if (e.sci/percentile20 < 3) {matchExpression.push(e['end'], \"#B6E3DB\");}\r\n                   else if (e.sci/percentile20 < 5) {matchExpression.push(e['end'], \"#97DCD5\");}\r\n                   else if (e.sci/percentile20 < 10) {matchExpression.push(e['end'], \"#79D5CF\");}\r\n                   else if (e.sci/percentile20 < 25) {matchExpression.push(e['end'], \"#5ACEC9\");}\r\n                   else if (e.sci/percentile20 < 100) {matchExpression.push(e['end'], \"#3CC6C2\");}\r\n                   else {matchExpression.push(e['end'], \"#1DBFBC\");}\r\n                   });\r\n\r\n                   matchExpression.push(this.state.selectedCountry, '#e8ae40');\r\n                   // Last value is the default, used where there is no data\r\n                   matchExpression.push('rgba(0, 0, 0, 0)');\r\n                   // //console.log(this.state.selectedOption, prevState.selectedOption);\r\n\r\n                       this.map.on('load', () => {\r\n\r\n                         this.map.addControl(new mapboxgl.AttributionControl({customAttribution: \"Africapolis\"}));\r\n                   // Add Country shape\r\n                         this.map.addSource('africapolis_country', { type: 'vector', url: 'mapbox://mapbox.country-boundaries-v1'});\r\n\r\n                   // Add Country layer\r\n                         this.map.addLayer({\r\n                           id: 'country',\r\n                           source:'africapolis_country',\r\n                           type: 'fill',\r\n                           'source-layer':'country_boundaries',\r\n                           filter: [ \"match\", [\"get\", \"iso_3166_1\"], [\"TJ\",\"IR\",\"CN\", \"GL\", \"SJ\", \"TM\", \"EH\", \"KP\" ], false, true ],\r\n                           paint: {\r\n                             'fill-color': matchExpression,\r\n                             'fill-opacity': 0.9\r\n                           }\r\n                         });\r\n\r\n                           this.map.on('click', 'country', e =>  {\r\n                              this.popUp.remove()\r\n                              this.onUpdate(e.features[0].properties.iso_3166_1,e.features[0].properties.name_en,e.features[0].properties.region)\r\n                               });\r\n\r\n                           this.map.on('mousemove', 'country', e =>  {\r\n                              if(this.state.selectedCountry!==e.features[0].properties.iso_3166_1) {\r\n                              this.map.getCanvas().style.cursor = 'pointer';\r\n                              let coordinates = [e.lngLat.lng, e.lngLat.lat];\r\n                              let sciPopup=[];\r\n                              let rankPopup=[];\r\n                              let sciColor=[];\r\n                              let rankPopupRegion=[];\r\n                              let regionNumber=regionTotal[e.features[0].properties.region];\r\n\r\n                              selected.forEach( (d,i) => {\r\n                              if(d.end===e.features[0].properties.iso_3166_1) {\r\n                                sciPopup=Math.round(d.sci/percentile20)\r\n                                rankPopup=rank_country[i]\r\n\r\n                                if(d.sci/percentile20 < 1) {sciColor.push(\"#F3F2E8\");}\r\n                                else if (d.sci/percentile20 < 2) {sciColor.push(\"#D4EBE2\");}\r\n                                else if (d.sci/percentile20 < 3) {sciColor.push(\"#B6E3DB\");}\r\n                                else if (d.sci/percentile20 < 5) {sciColor.push(\"#97DCD5\");}\r\n                                else if (d.sci/percentile20 < 10) {sciColor.push(\"#79D5CF\");}\r\n                                else if (d.sci/percentile20 < 25) {sciColor.push(\"#5ACEC9\");}\r\n                                else if (d.sci/percentile20 < 100) {sciColor.push(\"#3CC6C2\");}\r\n                                else {sciColor.push(\"#1DBFBC\");}\r\n                              }\r\n                              });\r\n\r\n                            if(scidataRankRegionCode[e.features[0].properties.region]) {\r\n                              scidataRankRegionCode[e.features[0].properties.region].map(\r\n                                (d,i)=> e.features[0].properties.iso_3166_1===d? rankPopupRegion.push(scidataRankRegion[e.features[0].properties.region][i]) : null\r\n                            )}\r\n\r\n\r\n                          \t\tthis.popUp\r\n                                .setLngLat(coordinates)\r\n                          \t\t\t.setHTML(\r\n                                `<strong>${e.features[0].properties.name_en}</strong> ${sciPopup}<little>x</little><br/>\r\n                              <span>Rank:</span><bold>${rankPopup}</bold><span>/194</span><br/>\r\n                                <small>In ${e.features[0].properties.region}:</small><bold>${rankPopupRegion}</bold><span>/${regionNumber}</span>`\r\n                                )\r\n                          \t\t\t.addTo(this.map);\r\n                                var popupElem = this.popUp.getElement();\r\n                                popupElem.style.color = sciColor[0];\r\n                              } else {this.popUp.remove()}\r\n                            });\r\n\r\n                            this.map.on('mouseleave', 'country', e =>  {\r\n                              this.map.getCanvas().style.cursor = ''\r\n                              this.popUp.remove()\r\n                            });\r\n\r\n                       });\r\n\r\n                       this.setState({name: \"Nigeria\"})\r\n\r\n}\r\n\r\ncomponentDidUpdate(prevProps, prevState){\r\n  if(prevState.button !== this.state.button)\r\n  {this.onUpdate(this.state.selectedCountry, this.state.name, this.state.region)}\r\n}\r\n\r\nonUpdate = (ISO2, Name, Region) => {\r\n\r\n              this.setState({selectedCountry:ISO2})\r\n\r\n              let sci=[];\r\n              sciOriginal.map(e=>this.state.button===\"From\"? sci.push({start:e.start,end:e.end,sci:e.sci}) : sci.push({end:e.start,start:e.end,sci:e.sci}))\r\n\r\n\r\n              let selected = [];\r\n              let scidata= [];\r\n              let scidataRank = [];\r\n              let scidataRankRegion = {Africa:[],Americas:[],Asia:[],Europe:[],Oceania:[]}\r\n              let scidataRankRegionCode = {Africa:[],Americas:[],Asia:[],Europe:[],Oceania:[]}\r\n              sci.map(e => e.start===this.state.selectedCountry? selected.push(e) : null)\r\n              selected.map(e => {\r\n                scidata.push(e.sci)\r\n                scidataRank.push(e.sci)\r\n                scidataRankRegion[countryData[e.end][1]].push(e.sci)\r\n                scidataRankRegionCode[countryData[e.end][1]].push(e.end)\r\n\r\n              })\r\n\r\n\r\n              Object.keys(scidataRankRegion).map(\r\n                k => {\r\n                  let sorted = scidataRankRegion[k].slice().sort((a,b) => b-a);\r\n                  let rank_region=scidataRankRegion[k].map(v => sorted.indexOf(v)+1);\r\n                  scidataRankRegion[k]=rank_region\r\n                }\r\n               )\r\n\r\n\r\n              let percentile20 = quantile(scidata, .20)\r\n              //selected.map(e => e.sci = e.sci/ percentile20)\r\n\r\n              let sortedSCI=scidata.sort((a,b) => b-a);\r\n              let rank_country=scidataRank.map(v => sortedSCI.indexOf(v)+1 );\r\n              let top5=scidata.sort((a,b) => b-a).slice(0,5);\r\n              selected.map(e => {\r\n                e.region=countryData[e.end][1]\r\n                e.sciScaled= Math.round(e.sci/percentile20)\r\n                if(e.sci===top5[0]) {top5_list[0]=e}\r\n                else if(e.sci===top5[1]) {top5_list[1]=e}\r\n                else if(e.sci===top5[2]) {top5_list[2]=e}\r\n                else if(e.sci===top5[3]) {top5_list[3]=e}\r\n                else if(e.sci===top5[4]) {top5_list[4]=e}\r\n              })\r\n\r\n              //top5_list.map(e => e.sciScaled= Math.round(e.sci/percentile20))\r\n\r\n                            // Calculate the sums and group data (while tracking count)\r\n              const reduced = selected.reduce(function(m, d){\r\n                  if(!m[d.region]){\r\n                    m[d.region] = {...d, count: 1};\r\n                    return m;\r\n                  }\r\n                  m[d.region].sciScaled += d.sciScaled;\r\n                  m[d.region].count += 1;\r\n                  return m;\r\n               },{});\r\n\r\n               // Create new array from grouped data and compute the average\r\n                  result = Object.keys(reduced).map(function(k){\r\n                   const item  = reduced[k];\r\n                   return {\r\n                       region: item.region,\r\n                       sciScaled: Math.round(item.sciScaled/item.count*100)/100,\r\n                       numbers:item.count\r\n                   }\r\n               })\r\n\r\n            // console.log(JSON.stringify(result,null,4));\r\n\r\n              this.setState({name:Name,region:Region})\r\n\r\n              let matchExpression = ['match', ['get', 'iso_3166_1']];\r\n\r\n              // Calculate color values for each country based on 'hdi' value\r\n              selected.forEach( e => {\r\n              if(e.sci/percentile20 < 1) {matchExpression.push(e['end'], \"#F3F2E8\");}\r\n              else if (e.sci/percentile20 < 2) {matchExpression.push(e['end'], \"#D4EBE2\");}\r\n              else if (e.sci/percentile20 < 3) {matchExpression.push(e['end'], \"#B6E3DB\");}\r\n              else if (e.sci/percentile20 < 5) {matchExpression.push(e['end'], \"#97DCD5\");}\r\n              else if (e.sci/percentile20 < 10) {matchExpression.push(e['end'], \"#79D5CF\");}\r\n              else if (e.sci/percentile20 < 25) {matchExpression.push(e['end'], \"#5ACEC9\");}\r\n              else if (e.sci/percentile20 < 100) {matchExpression.push(e['end'], \"#3CC6C2\");}\r\n              else {matchExpression.push(e['end'], \"#1DBFBC\");}\r\n              });\r\n\r\n              matchExpression.push(this.state.selectedCountry, '#e8ae40');\r\n              // Last value is the default, used where there is no data\r\n              matchExpression.push('rgba(0, 0, 0, 0)');\r\n\r\n              // //console.log(this.state.selectedOption, prevState.selectedOption);\r\n\r\n              this.remove('country');\r\n\r\n              this.map.addLayer({\r\n                id: 'country',\r\n                source:'africapolis_country',\r\n                type: 'fill',\r\n                filter: [ \"match\", [\"get\", \"iso_3166_1\"], [\"IR\",\"CN\", \"GL\", \"SJ\", \"TM\", \"EH\", \"KP\",\"TJ\" ], false, true ],\r\n                'source-layer':'country_boundaries',\r\n                paint: {\r\n                  'fill-color': matchExpression,\r\n                  'fill-opacity': 0.9\r\n                }\r\n              });\r\n              this.map.on('mousemove', 'country', e =>  {\r\n                if(this.state.selectedCountry!==e.features[0].properties.iso_3166_1) {\r\n                this.map.getCanvas().style.cursor = 'pointer';\r\n                let coordinates = [e.lngLat.lng, e.lngLat.lat];\r\n                let sciPopup=[];\r\n                let rankPopup=[];\r\n                let sciColor=[];\r\n                let rankPopupRegion=[];\r\n                let regionNumber=regionTotal[e.features[0].properties.region];\r\n\r\n                selected.forEach( (d,i) => {\r\n                if(d.end===e.features[0].properties.iso_3166_1) {\r\n                  sciPopup=Math.round(d.sci/percentile20)\r\n                  rankPopup=rank_country[i]\r\n\r\n                  if(d.sci/percentile20 < 1) {sciColor.push(\"#F3F2E8\");}\r\n                  else if (d.sci/percentile20 < 2) {sciColor.push(\"#D4EBE2\");}\r\n                  else if (d.sci/percentile20 < 3) {sciColor.push(\"#B6E3DB\");}\r\n                  else if (d.sci/percentile20 < 5) {sciColor.push(\"#97DCD5\");}\r\n                  else if (d.sci/percentile20 < 10) {sciColor.push(\"#79D5CF\");}\r\n                  else if (d.sci/percentile20 < 25) {sciColor.push(\"#5ACEC9\");}\r\n                  else if (d.sci/percentile20 < 100) {sciColor.push(\"#3CC6C2\");}\r\n                  else {sciColor.push(\"#1DBFBC\");}\r\n                }\r\n                });\r\n\r\n              if(scidataRankRegionCode[e.features[0].properties.region]) {\r\n                scidataRankRegionCode[e.features[0].properties.region].map(\r\n                  (d,i)=> e.features[0].properties.iso_3166_1===d? rankPopupRegion.push(scidataRankRegion[e.features[0].properties.region][i]) : null\r\n              )}\r\n\r\n\r\n                this.popUp\r\n                  .setLngLat(coordinates)\r\n                  .setHTML(\r\n                  `<strong>${e.features[0].properties.name_en}</strong> ${sciPopup}<little>x</little><br/>\r\n                <span>Rank:</span><bold>${rankPopup}</bold><span>/194</span><br/>\r\n                  <small>In ${e.features[0].properties.region}:</small><bold>${rankPopupRegion}</bold><span>/${regionNumber}</span>`\r\n                  )\r\n                  .addTo(this.map);\r\n                  var popupElem = this.popUp.getElement();\r\n                  popupElem.style.color = sciColor[0];\r\n                } else {this.popUp.remove()}\r\n               });\r\n               this.setState({rendered:\"Yes\"})\r\n}\r\n\r\nremove = obj => {\r\n    this.map.removeLayer(obj)\r\n}\r\n\r\nmoveRegion = e => {\r\n      if(e) {\r\n      switch(e.activeLabel){\r\n      case 'Africa':\r\n      this.map.flyTo({center: [32.259 ,2.036], zoom:3.14, essential: true }); break;\r\n      case 'Americas':\r\n      this.map.flyTo({center: [-69.390 ,22.259], zoom:1.82, essential: true }); break;\r\n      case 'Asia':\r\n      this.map.flyTo({center: [104.687 ,32.592], zoom:3.14, essential: true }); break;\r\n      case 'Europe':\r\n      this.map.flyTo({center: [27.920 ,56.907], zoom:3.19, essential: true }); break;\r\n      case 'Oceania':\r\n      this.map.flyTo({center: [155.731 ,-16.435], zoom:3.11, essential: true }); break;\r\n      default:\r\n      return null;\r\n            }}\r\n}\r\n\r\n\r\n\r\n//5 Countries with the highest SCI\r\nrender() {\r\n    return (\r\n      <div>\r\n        <div className={classes.topleft}> <div className={classes.headwrapper}> <div className={classes.buttonwrapper}>\r\n          <button className={this.state.button===\"From\"? classes.buttonActive : classes.button} onClick={() => this.state.button===\"To\"? this.setState({button:\"From\"}) : null}>{\"From\"}</button>\r\n          <button className={this.state.button===\"To\"? classes.buttonActive : classes.button} onClick={() => this.state.button===\"From\"? this.setState({button:\"To\"}) : null}>{\"To\"}</button></div>\r\n          <headtitle> {this.state.name}</headtitle></div><br/>\r\n        <span>5 Most Connected Countries</span>\r\n        <table className={classes.table}>\r\n            <thead>\r\n              <tr>\r\n                <th>Country</th><th>SCI</th><th>Region</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              {top5_list[0].end? top5_list.map((e,i)=>\r\n              <tr> <td>{countryData[top5_list[i].end][0]}</td> <td>{top5_list[i].sciScaled}x</td><td className={ countryData[top5_list[i].end][1]===this.state.region? classes.regionsel : classes.normal }>{countryData[top5_list[i].end][1]}</td></tr>\r\n              ) : null}\r\n            </tbody>\r\n          </table>\r\n        <br/> <span>Regional average</span>\r\n          <ResponsiveContainer width='100%' aspect={32.0/15.0}>\r\n            <BarChart data={result.sort((a, b) => a.region.localeCompare(b.region))} style={{marginTop: \"10px\"}}  onClick={e => this.moveRegion(e)} >\r\n              <XAxis dataKey=\"region\" interval={0} style={{ textAnchor: 'middle', fontFamily: 'Arial', fill: 'rgba(255, 255, 255, 1)' }} />\r\n              <Tooltip content={tooltip} cursor={{fill: 'rgba(255, 255, 255, 0.3)'}} />\r\n              <Bar dataKey=\"sciScaled\" fill=\"#3CC6C2\" id=\"region\">\r\n                {result.map((entry,index) => (\r\n\t\t\t\t\t\t\t\t\t\t<Cell cursor=\"pointer\" key={`cell-${index}`} fill={entry.region ===  this.state.region ? '#e8ae40' : '#3CC6C2' } />\r\n\t\t\t\t\t\t\t\t\t))}\r\n  \t\t\t\t\t\t</Bar>\r\n  \t\t\t\t\t</BarChart>\r\n          </ResponsiveContainer>\r\n              <div className=\"VariableInfoWrapper\">\r\n                  <MaterialIcon icon=\"info\"/>\r\n                  <span><strong>What is the Social Connectedness Index?</strong><br/>\r\n                  The Social Connectedness Index measures the strength of connectedness between two geographic areas as represented by Facebook friendship ties.<br/><br/>\r\n                  <strong>Methodology</strong><br/>\r\n                  We use aggregated friendship connections on Facebook to measure social connectedness between geographies. Locations are assigned to users based on information they provide, connection information, and location services they have opted into. We use these friendships to estimate the probability a pair of users in these countries are Facebook friends and map this to an index score called the Social Connectedness Index (SCI). If the SCI is twice as large between two pairs of regions, it means the users in the first region-pair are about twice as likely to be connected than the second region-pair.<br/><br/>\r\n                The figure shows a heat map of the social connectedness. For each country in our data, the colors highlight connections of the focal country, given in orange. The lightest color corresponds to the 20th percentile of the connectedness to the focal country; darker colors correspond to closer connections.\r\n                <br/><br/><color>Click the right button to check more detail and download the data on the Facebook page</color> </span>\r\n              </div>\r\n              <div className=\"FB\">\r\n              <a href=\"https://dataforgood.fb.com/tools/social-connectedness-index/#:~:text=The%20Social%20Connectedness%20Index%20measures,social%20mobility%2C%20trade%20and%20more.\">\r\n                  <MaterialIcon icon=\"facebook\"/>\r\n                  <span>Move to the Facebook Data for Good page to check detail and download the data</span>\r\n              </a>\r\n              </div>\r\n           </div>\r\n        <div ref={el => this.mapContainer = el} className={classes.mapContainer} />\r\n        <div className={classes.legend}>{legend}</div>\r\n          <a href=\"https://africapolis.org\">\r\n            <img className={classes.logo} src={logo} alt=\"Africapolis\"/>\r\n          </a>\r\n      </div>\r\n    )\r\n  }\r\n}\r\nReactDOM.render(<Application />, document.getElementById('app'));\r\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"mapContainer\":\"Site_mapContainer__3C3IK\",\"topleft\":\"Site_topleft__1XS7N\",\"legend\":\"Site_legend__3PYGy\",\"table\":\"Site_table__1kdr8\",\"tooltip\":\"Site_tooltip__1vyR7\",\"regionsel\":\"Site_regionsel__36SmX\",\"popup\":\"Site_popup__2yp2X\",\"logo\":\"Site_logo__2Srqv\",\"button\":\"Site_button__1lPcx\",\"buttonActive\":\"Site_buttonActive__13aLZ\",\"headwrapper\":\"Site_headwrapper__1rgcf\"};"],"sourceRoot":""}