rgdonohue · February 12, 2021 10:27 · davidherasp · Feb 16, 2017
diff --git a/README.md b/README.md
diff --git a/countriesRandom.csv b/countriesRandom.csv
diff --git a/index.html b/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>
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/world-topo.json b/world-topo.json
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
	<!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>