most recession in the World Map

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_139":-5,"_63":16,"_140":-5,"_141":142,"_143":144},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":16,"_31":32,"_33":-5,"_34":35},"vizInfo",{"_42":73,"_118":73,"_44":119,"_120":-7,"_121":52,"_122":50,"_123":-5,"_124":125,"_126":16,"_127":128,"_129":130,"_131":43,"_132":-7,"_70":133,"_72":134,"_135":-5,"_136":69,"_137":138},"vizContent",{"_42":73,"_74":75,"_28":29},"ownerAccount",{"_42":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":16,"_64":-7,"_65":41,"_66":67,"_68":69,"_70":71,"_72":71},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz",{"_42":43,"_44":45,"_46":47,"_48":49},"runtimeVersion","license","MIT","descriptionIsAiGenerated","sourceProvenance",{"_36":37,"_38":39,"_28":29,"_40":41},"project","socialImageUrl","https://next.vizhub.com/assets/unfurl.webp","sourceType","v3","originalUrl","https://vizhub.com/ChekuriRakesh/33fe610d40ab4c51b08112c0096613a2","author","ChekuriRakesh","id","4db54b56cc5742848be9d458d3387d47","title","2015 Internet Users World Map","ownerHandle","flanagancarlie","ownerDisplayName","flanagancarlie@gmail.com","v3-user-chekurirakesh","accountType","user","email","rakeshkumarchekuri@my.unt.edu","displayName","Rakesh Kumar Chekuri","avatar","https://avatars.githubusercontent.com/u/123662696?v=4","oauthProvider","github","oauthId","123662696","isAdmin","stripeCustomerId","handle","handleNormalized","chekurirakesh","lifecycleEmailsEnabled",true,"createdAt",1791491236937,"updatedAt","33fe610d40ab4c51b08112c0096613a2","files",{"_76":77,"_78":79,"_80":81,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":93,"_94":95},"18126432",{"_96":116,"_98":117},"86202540",{"_96":114,"_98":115},"0a8c8cf8",{"_96":112,"_98":113},"29fbc049",{"_96":110,"_98":111},"30aad692",{"_96":108,"_98":109},"334b4d4f",{"_96":106,"_98":107},"6b40f9d6",{"_96":104,"_98":105},"6fb240c2",{"_96":102,"_98":103},"8dbc301e",{"_96":100,"_98":101},"e783b6db",{"_96":97,"_98":99},"name","styles.css","text","body {\n margin: 0;\n overflow: hidden;\n}\n\n.country:hover {\nfill: #0000FF !important\n}","index.html","\n\n \n most recession in the World Map\n \n \n \n

\n \n \n\n","internet_users.csv","country_name,country_code,indicator_name,2015\nAruba,ABW,Internet users (per 100 people),88.66122693\nAndorra,AND,Internet users (per 100 people),96.91\nAfghanistan,AFG,Internet users (per 100 people),8.26\nAngola,AGO,Internet users (per 100 people),12.4\nAlbania,ALB,Internet users (per 100 people),63.2529327\nArab World,ARB,Internet users (per 100 people),39.52615407\nUnited Arab Emirates,ARE,Internet users (per 100 people),91.24340578\nArgentina,ARG,Internet users (per 100 people),69.40092102\nArmenia,ARM,Internet users (per 100 people),58.24933222\nAmerican Samoa,ASM,Internet users (per 100 people),\nAntigua and Barbuda,ATG,Internet users (per 100 people),65.2\nAustralia,AUS,Internet users (per 100 people),84.56051935\nAustria,AUT,Internet users (per 100 people),83.9263\nAzerbaijan,AZE,Internet users (per 100 people),77\nBurundi,BDI,Internet users (per 100 people),4.866224464\nBelgium,BEL,Internet users (per 100 people),85.0529\nBenin,BEN,Internet users (per 100 people),6.787702956\nBurkina Faso,BFA,Internet users (per 100 people),11.38764617\nBangladesh,BGD,Internet users (per 100 people),14.4\nBulgaria,BGR,Internet users (per 100 people),56.6563\nBahrain,BHR,Internet users (per 100 people),93.47830114\n\"Bahamas, The\",BHS,Internet users (per 100 people),78\nBosnia and Herzegovina,BIH,Internet users (per 100 people),65.0655028\nBelarus,BLR,Internet users (per 100 people),62.23036091\nBelize,BLZ,Internet users (per 100 people),41.59\nBermuda,BMU,Internet users (per 100 people),98.32360965\nBolivia,BOL,Internet users (per 100 people),45.1\nBrazil,BRA,Internet users (per 100 people),59.07947791\nBarbados,BRB,Internet users (per 100 people),76.11\nBrunei Darussalam,BRN,Internet users (per 100 people),71.2\nBhutan,BTN,Internet users (per 100 people),39.8\nBotswana,BWA,Internet users (per 100 people),27.5\nCentral African Republic,CAF,Internet users (per 100 people),4.563264352\nCanada,CAN,Internet users (per 100 people),88.47\nCentral Europe and the Baltics,CEB,Internet users (per 100 people),68.15658622\nSwitzerland,CHE,Internet users (per 100 people),87.97\nChannel Islands,CHI,Internet users (per 100 people),\nChile,CHL,Internet users (per 100 people),64.289\nChina,CHN,Internet users (per 100 people),50.3\nCote d'Ivoire,CIV,Internet users (per 100 people),21\nCameroon,CMR,Internet users (per 100 people),20.68014766\n\"Congo, Rep.\",COG,Internet users (per 100 people),7.615974662\nColombia,COL,Internet users (per 100 people),55.90497251\nComoros,COM,Internet users (per 100 people),7.459161386\nCabo Verde,CPV,Internet users (per 100 people),43.01962636\nCosta Rica,CRI,Internet users (per 100 people),59.76295014\nCaribbean small states,CSS,Internet users (per 100 people),51.91699952\nCuba,CUB,Internet users (per 100 people),31.10797021\nCuracao,CUW,Internet users (per 100 people),\nCayman Islands,CYM,Internet users (per 100 people),77\nCyprus,CYP,Internet users (per 100 people),71.7159\nCzech Republic,CZE,Internet users (per 100 people),81.2986\nGermany,DEU,Internet users (per 100 people),87.5898\nDjibouti,DJI,Internet users (per 100 people),11.92243143\nDominica,DMA,Internet users (per 100 people),67.6\nDenmark,DNK,Internet users (per 100 people),96.3305\nDominican Republic,DOM,Internet users (per 100 people),51.93023274\nAlgeria,DZA,Internet users (per 100 people),38.2\nEast Asia & Pacific (excluding high income),EAP,Internet users (per 100 people),44.98204897\nEarly-demographic dividend,EAR,Internet users (per 100 people),29.79234255\nEast Asia & Pacific,EAS,Internet users (per 100 people),49.82471578\nEurope & Central Asia (excluding high income),ECA,Internet users (per 100 people),59.93206446\nEurope & Central Asia,ECS,Internet users (per 100 people),71.74412921\nEcuador,ECU,Internet users (per 100 people),48.94043379\n\"Egypt, Arab Rep.\",EGY,Internet users (per 100 people),35.9\nEuro area,EMU,Internet users (per 100 people),80.28028397\nEritrea,ERI,Internet users (per 100 people),1.083733116\nSpain,ESP,Internet users (per 100 people),78.6896\nEstonia,EST,Internet users (per 100 people),88.4066\nEthiopia,ETH,Internet users (per 100 people),11.6\nEuropean Union,EUU,Internet users (per 100 people),79.62581461\nFragile and conflict affected situations,FCS,Internet users (per 100 people),14.98630875\nFinland,FIN,Internet users (per 100 people),92.6513\nFiji,FJI,Internet users (per 100 people),46.32872895\nFrance,FRA,Internet users (per 100 people),84.6945\nFaroe Islands,FRO,Internet users (per 100 people),94.2\n\"Micronesia, Fed. Sts.\",FSM,Internet users (per 100 people),31.50108128\nGabon,GAB,Internet users (per 100 people),23.5\nUnited Kingdom,GBR,Internet users (per 100 people),92.0003\nGeorgia,GEO,Internet users (per 100 people),45.15837441\nGhana,GHA,Internet users (per 100 people),23.47812844\nGibraltar,GIB,Internet users (per 100 people),\nGuinea,GIN,Internet users (per 100 people),4.7\n\"Gambia, The\",GMB,Internet users (per 100 people),17.1198205\nGuinea-Bissau,GNB,Internet users (per 100 people),3.540706917\nEquatorial Guinea,GNQ,Internet users (per 100 people),21.31999999\nGreece,GRC,Internet users (per 100 people),66.835\nGrenada,GRD,Internet users (per 100 people),53.81\nGreenland,GRL,Internet users (per 100 people),67.60044348\nGuatemala,GTM,Internet users (per 100 people),27.1\nGuam,GUM,Internet users (per 100 people),73.13999995\nGuyana,GUY,Internet users (per 100 people),38.2\nHigh income,HIC,Internet users (per 100 people),81.01474358\n\"Hong Kong SAR, China\",HKG,Internet users (per 100 people),84.94835296\nHonduras,HND,Internet users (per 100 people),20.35686743\nHeavily indebted poor countries (HIPC),HPC,Internet users (per 100 people),12.13351837\nCroatia,HRV,Internet users (per 100 people),69.8031\nHaiti,HTI,Internet users (per 100 people),12.19776638\nHungary,HUN,Internet users (per 100 people),72.8347\nIBRD only,IBD,Internet users (per 100 people),42.56249279\nIDA & IBRD total,IBT,Internet users (per 100 people),37.11415331\nIDA total,IDA,Internet users (per 100 people),22.23873864\nIDA blend,IDB,Internet users (per 100 people),35.0408618\nIndonesia,IDN,Internet users (per 100 people),21.97606771\nIDA only,IDX,Internet users (per 100 people),15.1737595\nIsle of Man,IMN,Internet users (per 100 people),\nIndia,IND,Internet users (per 100 people),26\nNot classified,INX,Internet users (per 100 people),\nIreland,IRL,Internet users (per 100 people),80.1224\n\"Iran, Islamic Rep.\",IRN,Internet users (per 100 people),44.08287502\nIraq,IRQ,Internet users (per 100 people),17.22\nIceland,ISL,Internet users (per 100 people),98.2\nIsrael,ISR,Internet users (per 100 people),78.8851791\nItaly,ITA,Internet users (per 100 people),65.5716\nJamaica,JAM,Internet users (per 100 people),43.17589719\nJordan,JOR,Internet users (per 100 people),53.4\nJapan,JPN,Internet users (per 100 people),93.32941106\nKazakhstan,KAZ,Internet users (per 100 people),72.86601297\nKenya,KEN,Internet users (per 100 people),45.62280061\nKyrgyz Republic,KGZ,Internet users (per 100 people),30.24704278\nCambodia,KHM,Internet users (per 100 people),19\nKiribati,KIR,Internet users (per 100 people),12.99748389\nSt. Kitts and Nevis,KNA,Internet users (per 100 people),75.7\n\"Korea, Rep.\",KOR,Internet users (per 100 people),89.8962558\nKosovo,KSV,Internet users (per 100 people),\nKuwait,KWT,Internet users (per 100 people),82.07911476\nLatin America & Caribbean (excluding high income),LAC,Internet users (per 100 people),53.88393399\nLao PDR,LAO,Internet users (per 100 people),18.2\nLebanon,LBN,Internet users (per 100 people),74\nLiberia,LBR,Internet users (per 100 people),5.903867603\nLibya,LBY,Internet users (per 100 people),19.01607978\nSt. Lucia,LCA,Internet users (per 100 people),52.35\nLatin America & Caribbean,LCN,Internet users (per 100 people),54.4583843\nLeast developed countries: UN classification,LDC,Internet users (per 100 people),12.62860122\nLow income,LIC,Internet users (per 100 people),9.460342053\nLiechtenstein,LIE,Internet users (per 100 people),96.6411951\nSri Lanka,LKA,Internet users (per 100 people),29.98873755\nLower middle income,LMC,Internet users (per 100 people),28.63206153\nLow & middle income,LMY,Internet users (per 100 people),36.79864752\nLesotho,LSO,Internet users (per 100 people),16.0717077\nLate-demographic dividend,LTE,Internet users (per 100 people),54.05925577\nLithuania,LTU,Internet users (per 100 people),71.378\nLuxembourg,LUX,Internet users (per 100 people),97.3341\nLatvia,LVA,Internet users (per 100 people),79.2006\n\"Macao SAR, China\",MAC,Internet users (per 100 people),77.60013186\nSt. Martin (French part),MAF,Internet users (per 100 people),\nMorocco,MAR,Internet users (per 100 people),57.08\nMonaco,MCO,Internet users (per 100 people),93.36330202\nMoldova,MDA,Internet users (per 100 people),49.83693954\nMadagascar,MDG,Internet users (per 100 people),4.17397219\nMaldives,MDV,Internet users (per 100 people),54.46195515\nMiddle East & North Africa,MEA,Internet users (per 100 people),43.70753337\nMexico,MEX,Internet users (per 100 people),57.43104299\nMarshall Islands,MHL,Internet users (per 100 people),19.2824418\nMiddle income,MIC,Internet users (per 100 people),39.79636329\n\"Macedonia, FYR\",MKD,Internet users (per 100 people),70.3802\nMali,MLI,Internet users (per 100 people),10.33692498\nMalta,MLT,Internet users (per 100 people),76.184\nMyanmar,MMR,Internet users (per 100 people),21.8\nMiddle East & North Africa (excluding high income),MNA,Internet users (per 100 people),38.20625385\nMontenegro,MNE,Internet users (per 100 people),64.56499314\nMongolia,MNG,Internet users (per 100 people),21.43603111\nNorthern Mariana Islands,MNP,Internet users (per 100 people),\nMozambique,MOZ,Internet users (per 100 people),9\nMauritania,MRT,Internet users (per 100 people),15.19912669\nMauritius,MUS,Internet users (per 100 people),50.13931848\nMalawi,MWI,Internet users (per 100 people),9.298148347\nMalaysia,MYS,Internet users (per 100 people),71.06406781\nNorth America,NAC,Internet users (per 100 people),75.93725156\nNamibia,NAM,Internet users (per 100 people),22.30701479\nNew Caledonia,NCL,Internet users (per 100 people),74.00175279\nNiger,NER,Internet users (per 100 people),2.22016535\nNigeria,NGA,Internet users (per 100 people),47.44255029\nNicaragua,NIC,Internet users (per 100 people),19.7042915\nNetherlands,NLD,Internet users (per 100 people),93.0965\nNorway,NOR,Internet users (per 100 people),96.8103\nNepal,NPL,Internet users (per 100 people),17.58161801\nNauru,NRU,Internet users (per 100 people),\nNew Zealand,NZL,Internet users (per 100 people),88.22288882\nOECD members,OED,Internet users (per 100 people),77.24348746\nOman,OMN,Internet users (per 100 people),74.17416597\nOther small states,OSS,Internet users (per 100 people),40.39556383\nPakistan,PAK,Internet users (per 100 people),18\nPanama,PAN,Internet users (per 100 people),51.20542499\nPeru,PER,Internet users (per 100 people),40.9\nPhilippines,PHL,Internet users (per 100 people),40.7\nPalau,PLW,Internet users (per 100 people),\nPapua New Guinea,PNG,Internet users (per 100 people),7.9\nPoland,POL,Internet users (per 100 people),67.997\nPre-demographic dividend,PRE,Internet users (per 100 people),21.0710908\nPuerto Rico,PRI,Internet users (per 100 people),79.46876883\n\"Korea, Dem. People’s Rep.\",PRK,Internet users (per 100 people),\nPortugal,PRT,Internet users (per 100 people),68.6329\nParaguay,PRY,Internet users (per 100 people),44.38159692\nPacific island small states,PSS,Internet users (per 100 people),29.78284146\nPost-demographic dividend,PST,Internet users (per 100 people),79.77495336\nFrench Polynesia,PYF,Internet users (per 100 people),64.56020975\nQatar,QAT,Internet users (per 100 people),92.88482645\nRomania,ROU,Internet users (per 100 people),55.7632\nRussian Federation,RUS,Internet users (per 100 people),73.41\nRwanda,RWA,Internet users (per 100 people),18\nSouth Asia,SAS,Internet users (per 100 people),23.62794112\nSaudi Arabia,SAU,Internet users (per 100 people),69.6162358\nSudan,SDN,Internet users (per 100 people),26.61492855\nSenegal,SEN,Internet users (per 100 people),21.69026413\nSingapore,SGP,Internet users (per 100 people),82.103\nSolomon Islands,SLB,Internet users (per 100 people),10.00046498\nSierra Leone,SLE,Internet users (per 100 people),2.5\nEl Salvador,SLV,Internet users (per 100 people),26.91507533\nSan Marino,SMR,Internet users (per 100 people),\nSomalia,SOM,Internet users (per 100 people),1.76\nSerbia,SRB,Internet users (per 100 people),65.3170254\nSub-Saharan Africa (excluding high income),SSA,Internet users (per 100 people),22.38466453\nSouth Sudan,SSD,Internet users (per 100 people),17.92978723\nSub-Saharan Africa,SSF,Internet users (per 100 people),22.38805971\nSmall states,SST,Internet users (per 100 people),41.93455097\nSao Tome and Principe,STP,Internet users (per 100 people),25.8222488\nSuriname,SUR,Internet users (per 100 people),42.76382778\nSlovak Republic,SVK,Internet users (per 100 people),85.01951406\nSlovenia,SVN,Internet users (per 100 people),73.0987\nSweden,SWE,Internet users (per 100 people),90.6102\nSwaziland,SWZ,Internet users (per 100 people),30.38270066\nSint Maarten (Dutch part),SXM,Internet users (per 100 people),\nSeychelles,SYC,Internet users (per 100 people),58.11869757\nSyrian Arab Republic,SYR,Internet users (per 100 people),29.97979724\nTurks and Caicos Islands,TCA,Internet users (per 100 people),\nChad,TCD,Internet users (per 100 people),2.700000001\nEast Asia & Pacific (IDA & IBRD countries),TEA,Internet users (per 100 people),44.98204897\nEurope & Central Asia (IDA & IBRD countries),TEC,Internet users (per 100 people),60.71874648\nTogo,TGO,Internet users (per 100 people),7.12\nThailand,THA,Internet users (per 100 people),39.31612674\nTajikistan,TJK,Internet users (per 100 people),18.98\nTurkmenistan,TKM,Internet users (per 100 people),14.99677482\nLatin America & the Caribbean (IDA & IBRD countries),TLA,Internet users (per 100 people),54.70371768\nMiddle East & North Africa (IDA & IBRD countries),TMN,Internet users (per 100 people),37.95898158\nTimor-Leste,TLS,Internet users (per 100 people),13.4\nTonga,TON,Internet users (per 100 people),44.99951883\nSouth Asia (IDA & IBRD),TSA,Internet users (per 100 people),23.62794112\nSub-Saharan Africa (IDA & IBRD countries),TSS,Internet users (per 100 people),22.38805971\nTrinidad and Tobago,TTO,Internet users (per 100 people),69.19847061\nTunisia,TUN,Internet users (per 100 people),48.51983599\nTurkey,TUR,Internet users (per 100 people),53.74497914\nTuvalu,TUV,Internet users (per 100 people),42.7\nTanzania,TZA,Internet users (per 100 people),5.355144064\nUganda,UGA,Internet users (per 100 people),19.22109963\nUkraine,UKR,Internet users (per 100 people),49.26\nUpper middle income,UMC,Internet users (per 100 people),52.13786916\nUruguay,URY,Internet users (per 100 people),64.6\nUnited States,USA,Internet users (per 100 people),74.55\nUzbekistan,UZB,Internet users (per 100 people),42.8\nSt. Vincent and the Grenadines,VCT,Internet users (per 100 people),51.77\n\"Venezuela, RB\",VEN,Internet users (per 100 people),61.86924809\nBritish Virgin Islands,VGB,Internet users (per 100 people),\nVirgin Islands (U.S.),VIR,Internet users (per 100 people),54.8391373\nVietnam,VNM,Internet users (per 100 people),52.72\nVanuatu,VUT,Internet users (per 100 people),22.35140458\nWest Bank and Gaza,PSE,Internet users (per 100 people),57.42419241\nWorld,WLD,Internet users (per 100 people),43.99831479\nSamoa,WSM,Internet users (per 100 people),25.40700977\n\"Yemen, Rep.\",YEM,Internet users (per 100 people),25.0995144\nSouth Africa,ZAF,Internet users (per 100 people),51.91911572\n\"Congo, Dem. Rep.\",COD,Internet users (per 100 people),3.799999507\nZambia,ZMB,Internet users (per 100 people),21\nZimbabwe,ZWE,Internet users (per 100 people),16.36\n","index.js","import { select } from 'd3';\nimport { viz } from './viz';\nconst container = select('#app').node();\nlet state = {};\n\nconst render = () => {\n viz(container, {\n state,\n setState,\n });\n};\n\nconst setState = (next) => {\n state = next(state);\n render();\n};\n\nrender();\n","viz.js","import { csvParse, select } from 'd3';\nimport topojson from 'topojson-client';\nimport { map } from './map';\n\nconst worldAtlasURL =\n 'https://unpkg.com/visionscarto-world-atlas@0.1.0/world/110m.json';\n\nexport const viz = (\n container,\n { state, setState }\n) => {\n const width = window.innerWidth;\n const height = window.innerHeight;\n\n const svg = select(container)\n .selectAll('svg')\n .data([null])\n .join('svg')\n .attr('width', width)\n .attr('height', height);\n\n // state.data could be:\n // * undefined\n // * 'LOADING'\n // * An array of objects\n const { data } = state;\n\n if (data && data !== 'LOADING') {\n svg.call(map, {\n data,\n });\n }\n\n if (data === undefined) {\n setState((state) => ({\n ...state,\n data: 'LOADING',\n }));\n fetch(worldAtlasURL)\n .then((response) => response.json())\n .then((topoJSONData) => {\n // d3.csv(\"internet_users.csv\")\n // .then(function(csv) {\n const data = topojson.feature(\n topoJSONData,\n 'countries'\n );\n // });\n setState((state) => ({\n ...state,\n data,\n }));\n });\n }\n};\n","map.js","import {\n csvParse,\n select,\n geoNaturalEarth1,\n geoPath,\n geoGraticule,\n scaleOrdinal,\n //Imports various functions from the d3 library essential for parsing data, selecting elements.\n} from 'd3';\nimport {\n colorData,\n colorScale,\n numberScale,\n} from './color.js';\n//Imports a function to create a color legend from colorLegend.js.\n\nimport { colorLegend } from './colorLegend.js';\n//Creates a geoPath generator for rendering geographic features using the defined projection.\n\nconst projection = geoNaturalEarth1();\nconst path = geoPath(projection);\nconst graticule = geoGraticule();\n//Sets up a tooltip that appears on mouseover events on the countries, providing additional information.\n\nconst tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '5px')\n .style('color', 'white');\n\nexport const map = (selection, { data }) => {\n //Asynchronously fetches CSV data representing internet users by country, parses it, and processes it to display.\n\n fetch('internet_users.csv')\n .then((response) => response.text())\n .then((csvString) => {\n let internet = csvParse(csvString);\n\n function usersPerCountry(country) {\n let users = 'No Data';\n internet.forEach((c) => {\n if (c.country_code == country) {\n users = c['2015'];\n }\n });\n let round = Math.round(users * 100) / 100;\n if (isNaN(round)) {\n return users;\n } else return round;\n }\n\n function getColor(num) {\n let color = colorData(num);\n return color;\n }\n\n selection\n .selectAll('path.graticule')\n .data([null])\n .join('path')\n .attr('class', 'graticule')\n .attr('d', path(graticule()))\n .attr('fill', 'none')\n .attr('stroke', '#BBB')\n .attr('stroke-width', 0.5);\n\n selection\n .selectAll('path.outline')\n .data([null])\n .join('path')\n .attr('class', 'outline')\n .attr('d', path(graticule.outline()))\n .attr('fill', '#d6ebff')\n .attr('stroke', 'black')\n .attr('stroke-width', 2);\n\n selection\n .selectAll('path.country')\n .data(data.features)\n .join('path')\n .attr('d', path)\n .attr('class', 'country')\n .attr('stroke', 'black')\n .attr('fill', (d) =>\n getColor(usersPerCountry(d.properties.a3)),\n )\n .attr('stroke-width', 0.5)\n .on('mouseover', function (e, d) {\n let count = usersPerCountry(d.properties.a3);\n if (count != 'No Data') {\n count = count + '%';\n }\n tooltip\n .html(`${d.properties.name}: ${count}`)\n .style('visibility', 'visible');\n })\n .on('mousemove', function () {\n tooltip\n .style('top', event.pageY - 10 + 'px')\n .style('left', event.pageX + 10 + 'px');\n })\n .on('mouseout', function () {\n tooltip.style('visibility', 'hidden');\n });\n\n const colors = colorScale();\n const range = numberScale();\n\n const scale = scaleOrdinal()\n .domain(range)\n .range(colors);\n //Uses D3's data join to add SVG paths for the graticule lines and the countries' outlines to the selection.\n //Applies geographic data to render each country using path and sets fill colors based on the internet users' data, leveraging the colorData function.\n\n selection.call(colorLegend, {\n colorScale: scale,\n colorLegendLabel: 'Recessions percentage',\n colorLegendX: 75,\n colorLegendY: 300,\n });\n //Implements interactivity: on mouseover, a tooltip shows the specific data for that country. On mouse movement, the tooltip follows the cursor.\n\n const zoom = d3\n .zoom()\n .scaleExtent([1, 10])\n .on('zoom', zoomed);\n\n selection.call(zoom);\n //usersPerCountry(country): Looks up the percentage of internet users for a given country.\n //zoomed(event): Handles the zoom event, updating the map's transform to scale and translate according to the zoom level.\n\n function zoomed(event) {\n const { transform } = event;\n console.log(transform);\n selection.attr('transform', transform);\n selection.attr('stroke-width', 1 / transform.k);\n }\n });\n};\n","README.md","A 2015 world map of [Internet Users Dataset](https://www.kaggle.com/datasets/aehsaei/internet-users-per-100-people?select=InternetUsersDataset.csv). This iteration adds hover and [zoom](https://observablehq.com/@d3/zoom-to-bounding-box?collection=@d3/d3-zoom).\n","package.json","{\n \"dependencies\": {\n \"d3\": \"7.8.2\",\n \"topojson-client\": \"3.1.0\"\n },\n \"license\": \"MIT\",\n \"vizhub\": {\n \"libraries\": {\n \"d3\": {\n \"global\": \"d3\",\n \"path\": \"/dist/d3.min.js\"\n },\n \"topojson-client\": {\n \"global\": \"topojson\",\n \"path\": \"/dist/topojson-client.min.js\"\n }\n }\n }\n}\n","colorLegend.js","export const colorLegend = (\n selection,\n {\n colorScale,\n colorLegendLabel,\n colorLegendX,\n colorLegendY,\n tickSpacing = 15,\n tickPadding = 10,\n colorLegendLabelX = -10,\n colorLegendLabelY = -20,\n }\n) => {\n const colorLegendG = selection\n .selectAll('g.color-legend')\n .data([null])\n .join('g')\n .attr('class', 'color-legend')\n .attr(\n 'transform',\n `translate(${colorLegendX},${colorLegendY})`\n );\n\n colorLegendG\n .selectAll('text.color-legend-label')\n .data([null])\n .join('text')\n .attr('x', colorLegendLabelX)\n .attr('y', colorLegendLabelY)\n .attr('class', 'color-legend-label')\n .attr('font-family', 'sans-serif')\n .attr('font-size', 12)\n .text(colorLegendLabel);\n\n colorLegendG\n .selectAll('g.tick')\n .data(colorScale.domain())\n .join((enter) =>\n enter\n .append('g')\n .attr('class', 'tick')\n .call((selection) => {\n selection.append('circle');\n selection.append('text');\n })\n )\n .attr(\n 'transform',\n (d, i) => `translate(0, ${i * tickSpacing})`\n )\n .attr('font-size', 10)\n .attr('font-family', 'sans-serif')\n .call((selection) => {\n selection\n .select('circle')\n .attr('r', 4)\n .attr('fill', colorScale)\n .attr('stroke', '#000')\n .attr('stroke-width', .5);\n selection\n .select('text')\n .attr('dy', '0.32em')\n .attr('x', tickPadding)\n .text((d) => d);\n });\n};\n","color.js","import { schemeReds } from 'd3';\n\nexport function colorData(num) {\n switch (true) {\n case num >= 100:\n return d3.schemeReds[6][5];\n break;\n case num > 80:\n return d3.schemeReds[6][4];\n break;\n case num > 60:\n return d3.schemeReds[6][3];\n break;\n case num > 40:\n return d3.schemeReds[6][2];\n break;\n case num > 20:\n return d3.schemeReds[6][1];\n break;\n case num <= 20:\n return d3.schemeReds[6][0];\n break;\n default:\n return '#eee';\n break;\n }\n}\n\nexport function colorScale() {\n let scale = [];\n scale = scale.concat(d3.schemeReds[6][4]);\n scale = scale.concat(d3.schemeReds[6][3]);\n scale = scale.concat(d3.schemeReds[6][2]);\n scale = scale.concat(d3.schemeReds[6][1]);\n scale = scale.concat(d3.schemeReds[6][0]);\n scale = scale.concat('#eee');\n return scale;\n}\n\nexport function numberScale() {\n let scale = [];\n scale = scale.concat('80-100%');\n scale = scale.concat('60-80%');\n scale = scale.concat('40-60%');\n scale = scale.concat('20-40%');\n scale = scale.concat('0-20%');\n scale = scale.concat('No Data');\n return scale;\n}\n","slug","World Map","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","2d213014045f408786d03e08e0908717","startCommitId","1f5cb3aecc2841f2a030e139f8000cfb","forkedFrom","forkedFromVisibility",1712025367000,1712111134000,"publishedAt","isPublished","draftStatus","published","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]