Skip to content

Instantly share code, notes, and snippets.

@rgdonohue

rgdonohue/README.md

Last active February 12, 2021 10:27
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save rgdonohue/9280446 to your computer and use it in GitHub Desktop.
Save rgdonohue/9280446 to your computer and use it in GitHub Desktop.
Download ZIP
Yet another animated choropleth map ...
Raw
README.md

Map demonstrates using D3.js to draw a world choropleth map and sequence through data of hypothetical timestamps.

Raw
countriesRandom.csv
id 2008 2009 2010 2011 2012 2013
AFG 14487.21683 3613.37333 3117.170779 14868.71643 14749.04527 10205.1549
AGO 2014.401013 9924.408216 154.4986071 4416.138856 8589.60028 759.9324391
ALB 4079.154455 16582.25541 3377.846283 7167.111603 10284.48004 5556.694056
ARE 13798.98219 10222.43894 14935.56198 6066.466767 9957.120604 9459.331641
ARG 16823.42243 4667.990667 14900.90889 9125.736618 13885.41512 19570.4245
ARM 2436.276018 19398.35665 18885.26967 6986.911192 1466.134249 1203.916336
ATA 5845.194475 9251.656697 1907.88602 638.4472333 3154.345874 8613.475995
ATF 15779.29588 14510.62051 1302.627971 4031.733517 14104.13283 14097.84287
AUS 10484.06253 18478.85348 7907.745898 11925.65764 4040.560921 15782.71156
AUT 17066.56821 7743.586063 16997.07113 19867.93998 2477.20594 2205.007675
AZE 4256.856558 13886.89549 10090.79102 18556.02752 5097.328302 16801.19175
BDI 16340.6175 12452.59964 19868.56921 19763.04628 3744.818519 9728.353457
BEL 775.5729879 14255.32836 3131.610093 7820.439748 13736.2555 7269.737397
BEN 10398.38265 12632.81533 2454.351843 6543.050047 5856.980355 3952.46377
BFA 4597.819966 19947.96714 11986.41875 17584.80791 7717.327633 8583.892123
BGD 3994.420411 8059.495403 9522.204349 1586.905903 7246.98164 30.88814383
BGR 17824.69086 5734.779583 17176.1038 18668.76988 7888.000389 5753.752527
BHS 2984.739909 5013.861927 9667.645687 11994.5669 12843.0455 13141.63628
BIH 2846.568185 4908.104228 11318.23774 5851.562727 16485.46519 1003.776644
BLR 16490.11889 7566.019193 9696.218036 16139.4359 9661.942589 14946.55684
BLZ 8333.282205 19803.26864 9990.767462 2004.959728 12580.8413 3371.097849
BOL 9803.513257 12824.64509 19892.99565 2721.581067 16457.71772 14409.29553
BRA 13315.39592 12016.32813 480.0115084 15071.24855 5371.735149 9407.906701
BRN 7005.155233 17225.74567 19312.61198 15361.34715 15952.09084 2070.771005
BTN 10069.94365 7951.042073 7342.375091 5063.202768 12606.80119 11058.22457
BWA 8726.898481 15757.27074 4943.828707 19233.47988 9320.18554 10754.00287
CAF 10335.70282 15074.39992 14174.12738 19059.61237 11382.17834 17613.01408
CAN 14811.00495 12595.6823 4263.275538 6687.602095 2065.366568 7101.037581
CHE 1735.98672 2285.864879 17653.75125 7069.708129 9824.403849 1028.259568
CHL 17381.4514 18629.49618 7332.258057 12020.56119 13317.56001 1387.810527
CHN 5847.876464 12941.48795 16366.76591 12620.44459 1586.108852 6997.718625
CIV 8957.069708 17722.1972 18306.85729 9449.071577 4583.688015 3624.759346
CMR 17743.12612 13531.23255 10421.16615 14304.2261 14068.71576 4358.96641
COD 10732.96074 15147.62208 19738.39865 13742.37724 11561.59313 4958.751711
COG 11766.0148 16516.07238 9792.59683 13704.87311 9490.58191 10045.48849
COL 13282.77457 8790.457925 3071.0143 5434.507205 2036.741814 13548.39666
CPV 19976.5244 19900.78518 7320.668097 3688.03301 1640.657537 12651.3606
CRI 5077.425151 13011.35486 18107.20896 612.0987809 10756.36 12343.03869
CUB 17934.50954 4509.322912 3550.659733 1375.651374 7151.74885 3672.791167
CYN 16239.82995 3511.225695 18089.16954 2612.909205 10063.0438 16247.78682
CYP 4583.292961 15571.80082 11345.29785 3614.577627 17627.00307 14290.6945
CZE 15376.17632 6751.313855 18862.68729 6065.262982 8186.788809 16103.55122
DEU 19688.81644 2874.953862 3383.707205 5482.373903 19446.68454 14192.12874
DJI 17895.91252 10929.07567 1215.507635 6090.266611 4566.634856 11610.53969
DMA 13268.11667 1493.580585 5594.453104 18595.733 19881.06939 5173.032519
DNK 14557.91363 17750.51856 1852.96199 13700.32074 18472.62673 9300.689423
DOM 18785.90385 1974.166353 4825.583246 10737.00771 12494.38744 2128.619519
DZA 10444.71218 17457.48131 4382.624354 19128.07111 11148.87144 3850.491777
ECU 14454.33638 14391.91031 15582.593 1791.744196 11517.19776 15501.81859
EGY 1410.029169 13210.26452 19920.15013 15623.45682 5444.826343 14642.63689
ERI 1062.505243 778.0636135 17049.33807 11159.36766 18766.56675 6705.472327
ESP 10753.85641 14501.34045 12525.06351 1163.441849 7059.222893 5249.749088
EST 19232.41801 6946.598789 13509.55559 11913.76196 10434.44145 4269.0704
ETH 10637.0143 12652.00101 6291.363888 15194.42265 11243.18923 4540.242954
FIN 10654.93428 13665.78289 15399.28507 6378.025056 17321.5473 19578.83087
FJI 4133.350713 7347.93265 6549.897127 7908.00004 16930.23434 17512.28454
FLK 15923.5381 2926.766849 9951.142813 11352.93372 3099.40514 9442.121419
FRA 8178.235884 10760.7944 1193.641793 19129.52716 10843.89455 12775.7963
GAB 16469.58808 17366.74405 3593.785638 14065.12751 15540.82247 19639.14784
GBR 6949.687339 1469.165432 8160.592468 12710.92244 13486.47404 6981.702571
GEO 17491.86005 96.07411272 6179.680735 3945.248104 8816.455811 15371.05576
GHA 7219.2286 4855.551621 17919.41057 17083.88412 18066.94855 18985.36273
GIN 4750.468719 4265.214193 11751.73605 16226.51355 17418.05407 7328.172409
GMB 3313.519901 13345.00546 5588.889689 19886.66899 3648.920874 3792.726465
GNB 8840.248201 14055.80858 11518.34108 17782.69601 13336.34335 12608.17881
GNQ 11410.31142 19870.56355 4202.750873 4155.180082 5684.578886 2113.400486
GRC 12242.2115 136.1528598 12742.62466 1426.378939 2766.134529 8201.159017
GRL 281.7098118 11366.44139 3298.992142 18778.25146 14390.72785 5205.563719
GTM 17378.84407 5807.328505 8840.966635 6382.637167 561.6723364 10529.59176
GUY 17720.18118 205.3172843 14874.01886 19000.81955 8607.969834 10586.16493
HND 8778.615177 18523.96197 11298.35173 12195.14225 15792.94363 5284.913613
HRV 33.73833097 2019.656088 9572.233349 18501.85145 16107.13665 12866.25799
HTI 4083.689377 19724.02408 8384.281682 19080.69705 10771.65871 18929.47662
HUN 9278.854967 15811.12543 3659.474766 4144.408559 11404.64494 6843.905531
IDN 3840.203079 7306.681509 7611.117128 13436.28842 965.2531243 14789.37614
IND 15372.33315 18309.68541 12615.6425 16281.62132 695.2693475 715.0353174
IRL 2050.579342 5288.196532 2721.646449 10246.16741 10673.18275 13570.39961
IRN 3830.812599 9896.029164 4802.482313 1355.569908 8212.72861 6151.949704
IRQ 16102.78646 7840.037781 11748.69494 7214.635132 11608.24063 12953.17172
ISL 15129.458 14776.24142 15653.40869 6368.489847 13744.35838 12882.64558
ISR 3765.997707 9598.76433 18413.6595 11345.2482 1735.143493 19492.82638
ITA 5177.353053 13801.75886 339.9096447 18849.25053 14483.03607 17821.15396
JAM 18877.334 3763.847953 15212.95292 3923.341328 281.5850086 14492.8446
JOR 6297.835217 963.9872859 5327.104079 6434.118977 6081.664636 19986.16701
JPN 7528.631052 6893.817051 17767.39681 796.5316554 8240.473759 3764.558729
KAS 16496.97037 4634.268936 14172.99856 13228.74418 1201.512466 16126.92666
KAZ 16870.05812 6428.769146 5787.983183 11553.49341 15296.39018 3927.25738
KEN 8904.533777 11136.95752 11349.82096 3387.289479 6395.395438 4467.055898
KGZ 3848.665687 14851.69139 14073.23057 4723.865148 3348.87141 8493.330463
KHM 1172.420243 4082.687219 15285.05103 15355.64317 7377.763734 13210.22095
KOR 1147.865379 17911.86517 19481.70088 3068.73574 31.25764682 16019.13149
KOS 16210.97905 7866.321191 7293.817038 5484.230574 13057.7147 12629.97981
KWT 11756.3585 14253.87167 10669.26715 12500.77965 10708.87892 12970.59357
LAO 16002.99132 6235.292571 12065.40287 5385.42472 1850.487176 14216.11454
LBN 2029.609487 5647.710925 19397.34149 7052.49245 12040.38929 6780.64019
LBR 3497.454243 2291.116555 10529.57621 7426.533994 13137.52441 17012.15569
LBY 14600.67225 15649.99402 10782.69708 18536.67894 16523.44029 11164.07648
LKA 19009.47739 2135.163878 19652.11079 8253.731366 19347.93126 18320.04809
LSO 12266.33876 2785.925983 15115.98111 3015.172878 7322.6482 12186.11833
LTU 7127.699146 17005.99016 16311.69195 7095.004555 19622.79408 7113.710031
LUX 5577.214286 10398.4601 18755.31381 6522.824263 5723.249966 13631.23499
LVA 8824.232629 10598.40484 7950.494343 13493.70096 7162.501431 11607.12864
MAR 19992.79195 9332.412981 9864.374016 15238.20144 1079.343238 6142.704657
MDA 18437.17553 16803.3875 9944.562633 16138.01239 18583.12924 5570.498358
MDG 8464.213054 8956.701787 14341.72164 4572.585132 5292.041987 702.6767478
MEX 345.6597693 16184.7819 16805.14101 1232.249472 18614.23405 5948.215084
MKD 5552.474977 1494.322252 16155.66724 10669.50855 3318.02843 3838.949164
MLI 12126.70843 14387.49218 3458.162791 2652.827965 16805.69659 19098.61773
MMR 13717.9159 15396.05624 6342.687204 13061.83347 11093.39981 16650.9357
MNE 5474.927086 16943.1769 13195.054 16282.35962 4341.524332 9465.758373
MNG 3796.088247 10197.43682 931.4267776 5988.874394 15064.44866 18904.82709
MOZ 18971.23508 15566.4889 16005.62239 61.67357918 15515.25866 5880.312017
MRT 3366.775086 12388.93361 17851.19783 18758.30021 18685.49542 13153.66068
MUS 8107.633284 1670.679801 2506.258682 16046.76996 13729.25313 17135.97783
MWI 15076.81203 2565.16755 18940.48316 11932.085 4089.271991 6918.548511
MYS 15513.6965 18138.31688 9282.736746 17823.14625 3768.763391 19144.96234
NAM 18695.62599 2535.261939 6013.631193 856.7228919 10750.94133 12767.40795
NCL 2346.21282 11077.5195 1687.640162 1455.960728 14406.7606 272.4763184
NER 426.1373982 15731.08877 10189.97817 11421.31435 3439.03793 8961.984929
NGA 8863.111806 10694.35579 15332.4933 12259.06346 1634.77318 9277.003634
NIC 7175.103834 18457.92764 6954.167308 539.4683855 8936.68505 8328.547567
NLD 7785.66463 2440.097399 9419.871782 9875.862339 10734.29784 1429.272098
NOR 4990.796595 11209.51079 4246.539765 11957.78232 1707.054603 9309.595346
NPL 5389.031648 1615.725399 14346.73393 13408.3426 18891.6603 3510.675304
NZL 18919.24463 1911.640754 9212.627661 940.3854648 9995.775688 3448.374491
OMN 16082.97631 9436.789173 17780.80504 15661.74207 8232.241538 4184.736407
PAK 16013.51641 13289.87351 4332.680377 11703.02031 6771.549106 19055.09066
PAN 13625.09084 2021.600318 2737.298367 2252.918948 18131.61333 3748.62621
PER 3324.78871 2597.299151 3701.719134 4346.236231 9442.242235 18556.83691
PHL 14966.34753 15204.92941 4644.68194 4048.026378 19185.58893 12410.41807
PNG 11220.58507 1870.365761 11923.77031 13246.68102 5872.060401 2139.351392
POL 13353.77076 1416.110099 7621.118955 17516.19778 13332.13109 5631.785156
PRI 13529.28037 19246.15548 976.1886694 11032.55799 12453.05288 2235.86389
PRK 13319.62761 1.971695692 10620.08626 480.3266904 18087.4541 2725.589657
PRT 13320.69315 15951.03311 12572.88586 14342.08904 11097.67407 16436.19181
PRY 15119.28843 6590.303377 9162.893414 3051.358431 1485.424175 11496.3669
PSX 13971.75179 13251.25378 517.1202695 1739.51199 14164.36912 5233.684984
QAT 14648.43955 4825.61846 18125.74206 9261.05656 18643.57649 6326.530855
ROU 1963.512703 4061.486013 9086.130195 4494.808969 10220.08934 17508.28929
RUS 10708.01976 6115.343104 5473.798308 6880.500148 17231.22627 11329.66011
RWA 13895.18502 14252.53648 16682.17639 8211.718155 18183.26165 14732.28879
SAH 2083.756481 9765.587895 19001.24094 16153.34365 5109.709375 11229.4799
SAU 11038.71785 2664.390872 18159.879 8110.339259 8140.655901 11076.37147
SDN 4253.80772 19832.62758 18499.21954 7103.051593 15120.51814 18180.88351
SDS 755.8580192 17908.24076 16310.68463 13439.23835 2393.817343 10672.04087
SEN 16576.71782 16657.56176 8298.802676 4463.484685 12276.55048 10733.49227
SGS 19144.07423 17192.24075 8617.588285 5025.625476 15634.20072 6897.222159
SLB 6240.155728 313.8092346 14442.16987 3025.497246 16.67468921 10526.91993
SLE 10949.66621 159.2738907 8515.549391 4469.092356 11176.23235 11838.01665
SLV 15038.82616 10212.86961 2291.098036 1471.367176 1577.387456 16232.97793
SOL 13080.02514 14055.22134 3092.545912 6399.755506 19980.92162 13472.11898
SOM 10894.70012 11775.94998 18560.03551 9603.480972 5385.043755 6439.293598
SRB 4103.237586 16354.24589 10247.72788 8575.411128 18766.9011 2832.790018
SUR 4996.170106 14529.85163 19441.46028 7105.100152 14768.39203 15292.40568
SVK 2766.885481 11528.28301 14835.9743 14618.8089 8488.769099 19089.08181
SVN 2732.338641 16044.82152 1875.919681 10956.4697 19121.76176 19766.4467
SWE 19703.40227 15995.71103 14648.44373 8102.752216 2101.135833 6459.087164
SWZ 14141.93363 16279.48301 4549.781275 14934.35538 17842.30581 9837.85134
SYR 13835.02807 5543.802318 18520.64639 1817.339428 16795.11623 14757.04686
TCD 12052.53849 16533.84747 18563.58518 17309.63686 6911.827275 30.49373854
TGO 12303.30892 17715.03529 1977.35285 16742.6321 7432.045673 14712.30728
THA 7875.223307 15612.85223 9362.599587 1851.944507 8455.48722 17681.7775
TJK 5260.634112 10202.81165 11670.49343 15299.1005 1113.105548 4808.864716
TKM 36.82429309 6385.9522 16802.38158 19458.51089 15987.77808 17279.60867
TLS 2472.024157 7560.102345 11558.93927 9215.899564 7232.78934 13255.67626
TTO 10207.70187 6162.293243 666.3092065 8402.098142 16748.08774 7904.153102
TUN 16373.10283 9373.428945 9776.190526 4488.822359 8585.369525 10438.44208
TUR 9003.389232 12422.57429 15875.93795 14380.94464 8563.557552 13937.22444
TWN 10029.40771 16599.08466 1890.62101 5660.872647 3221.987818 3138.632444
TZA 3946.128729 19896.48145 10857.9445 7538.787216 11861.40375 8528.627252
UGA 15032.41246 7476.741004 4127.248743 11894.68116 6764.931624 1748.831617
UKR 10066.92969 13846.35793 16922.57654 13385.05726 2766.251657 370.6226511
URY 14386.16209 11145.53489 14565.34332 8749.251963 974.5361925 1323.667056
USA 13707.04781 19466.85762 2605.145184 16092.48798 18402.70894 1333.232678
UZB 1849.809819 304.9619679 10737.36051 10466.21771 4229.220401 8052.644789
VEN 19498.09282 17205.93464 657.1228011 6695.824021 17558.48885 19702.82368
VNM 15072.06218 11407.81894 5009.802106 17856.61185 17084.58307 11450.72388
VUT 6867.237629 2764.461662 4119.185003 12035.63296 12498.01044 15715.36729
WSM 17661.38009 2161.827392 17689.41467 19769.30498 3614.00117 7671.102839
YEM 16876.32243 8079.15268 7624.139422 14034.93883 15188.35578 16284.61897
ZAF 7668.367338 9079.837405 9933.795641 8108.278643 13110.61733 15325.78807
ZMB 6525.825803 1204.283077 13712.1034 1737.75031 12088.05796 11135.87716
ZWE 17759.38977 6840.720799 2081.941848 17817.19662 859.3514122 16086.87378
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 choropleth map</title>
<style>
#wrapper {
width: 960px;
margin: -30px auto 0;
}
#map {
width: 960px;
height: 580px;
position: relative;
}
.stroke {
fill: none;
stroke: #888;
stroke-width: 2px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
.country {
fill: steelblue;
stroke: white;
}
#play, #clock {
position: absolute;
top: 15px;
}
#play {
left: 15px;
}
#clock {
left: 65px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="map"></div>
<button id="play">play</button>
<span id="clock">year</span>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
//globals
var width, height, projection, path, graticule, svg, attributeArray = [], currentAttribute = 0, playing = false;
function init() {
setMap();
animateMap();
}
function setMap() {
width = 960, height = 580; // map width and height, matches
projection = d3.geo.eckert5() // define our projection with parameters
.scale(170)
.translate([width / 2, height / 2])
.precision(.1);
path = d3.geo.path() // create path generator function
.projection(projection); // add our define projection to it
graticule = d3.geo.graticule(); // create a graticule
svg = d3.select("#map").append("svg") // append a svg to our html div to hold our map
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path") // prepare some svg for outer container of svg elements
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use") // use that svg to style with css
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("path") // use path generator to draw a graticule
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
loadData(); // let's load our data next
}
function loadData() {
queue() // queue function loads all external data files asynchronously
.defer(d3.json, "world-topo.json") // our geometries
.defer(d3.csv, "countriesRandom.csv") // and associated data in csv file
.await(processData); // once all files are loaded, call the processData function passing
// the loaded objects as arguments
}
function processData(error,world,countryData) {
// function accepts any errors from the queue function as first argument, then
// each data object in the order of chained defer() methods above
var countries = world.objects.countries.geometries; // store the path in variable for ease
for (var i in countries) { // for each geometry object
for (var j in countryData) { // for each row in the CSV
if(countries[i].properties.id == countryData[j].id) { // if they match
for(var k in countryData[i]) { // for each column in the a row within the CSV
if(k != 'name' && k != 'id') { // let's not add the name or id as props since we already have them
if(attributeArray.indexOf(k) == -1) {
attributeArray.push(k); // add new column headings to our array for later
}
countries[i].properties[k] = Number(countryData[j][k]) // add each CSV column key/value to geometry object
}
}
break; // stop looking through the CSV since we made our match
}
}
}
d3.select('#clock').html(attributeArray[currentAttribute]); // populate the clock initially with the current year
drawMap(world); // let's mug the map now with our newly populated data object
}
function drawMap(world) {
svg.selectAll(".country") // select country objects (which don't exist yet)
.data(topojson.feature(world, world.objects.countries).features) // bind data to these non-existent objects
.enter().append("path") // prepare data to be appended to paths
.attr("class", "country") // give them a class for styling and access later
.attr("id", function(d) { return "code_" + d.properties.id; }, true) // give each a unique id for access later
.attr("d", path); // create them using the svg path generator defined above
var dataRange = getDataRange(); // get the min/max values from the current year's range of data values
d3.selectAll('.country') // select all the countries
.attr('fill-opacity', function(d) {
return getColor(d.properties[attributeArray[currentAttribute]], dataRange); // give them an opacity value based on their current value
});
}
function sequenceMap() {
var dataRange = getDataRange(); // get the min/max values from the current year's range of data values
d3.selectAll('.country').transition() //select all the countries and prepare for a transition to new values
.duration(750) // give it a smooth time period for the transition
.attr('fill-opacity', function(d) {
return getColor(d.properties[attributeArray[currentAttribute]], dataRange); // the end color value
})
}
function getColor(valueIn, valuesIn) {
var color = d3.scale.linear() // create a linear scale
.domain([valuesIn[0],valuesIn[1]]) // input uses min and max values
.range([.3,1]); // output for opacity between .3 and 1 %
return color(valueIn); // return that number to the caller
}
function getDataRange() {
// function loops through all the data values from the current data attribute
// and returns the min and max values
var min = Infinity, max = -Infinity;
d3.selectAll('.country')
.each(function(d,i) {
var currentValue = d.properties[attributeArray[currentAttribute]];
if(currentValue <= min && currentValue != -99 && currentValue != 'undefined') {
min = currentValue;
}
if(currentValue >= max && currentValue != -99 && currentValue != 'undefined') {
max = currentValue;
}
});
return [min,max]; //boomsauce
}
function animateMap() {
var timer; // create timer object
d3.select('#play')
.on('click', function() { // when user clicks the play button
if(playing == false) { // if the map is currently playing
timer = setInterval(function(){ // set a JS interval
if(currentAttribute < attributeArray.length-1) {
currentAttribute +=1; // increment the current attribute counter
} else {
currentAttribute = 0; // or reset it to zero
}
sequenceMap(); // update the representation of the map
d3.select('#clock').html(attributeArray[currentAttribute]); // update the clock
}, 2000);
d3.select(this).html('stop'); // change the button label to stop
playing = true; // change the status of the animation
} else { // else if is currently playing
clearInterval(timer); // stop the animation by clearing the interval
d3.select(this).html('play'); // change the button label to play
playing = false; // change the status again
}
});
}
window.onload = init(); // magic starts here
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
world-topo.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@davidherasp
Copy link

davidherasp commented Feb 16, 2017 •
edited

I think that I noticed an "error" in the code. In the processData() function the iterations of the third for loop are made through every column of a row of the CSV file. The problem is that you iterate over the columns of the row number i for(var k in countryData[i]), and i is the variable that counts the iterations of the countries in the JSON file and not the countries in the CSV file. It might be ok if both files have the same number of objects and are sorted the same way but when you have different number of objects and the items are not sorted it just don't work as it should.

I just replaced i for j being j the actual counter of the countries in the CSV file. It looks like is working as intended now!

for(var k in countryData[j])

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment