nsonnad · July 18, 2022 14:49 · wulucxy · Mar 8, 2018
diff --git a/.block b/.block
 license: gpl-3.0
diff --git a/README.md b/README.md
diff --git a/brics-mist.csv b/brics-mist.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Mist vs Brics</title>
    <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
 <style type="text/css">

 body {
  font: 12px sans-serif;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 .x.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 .line {
  fill: none;
  stroke-width: 7px;
 }

 .country {opacity: 0.3;}
 .country:hover {opacity:1;}

 </style>
 </head>
 <body>
  <div>
      <input type="checkbox" id="bric" onclick="briclight()">BRICs</input>
      <input type="checkbox" id="mist" onclick="mistlight()">MIST</input>
  </div>
  <p id="menu"><b>MIST vs BRICS</b><br>Select series: <select>
    <option value="GDPPC">GDP per capita (current US$)</option>
    <option value="GDPG">GDP growth (annual %)</option>
    <option value="URBPOP">Urban population (% of total)</option>
    <option value="POPTOT">Population, total (,000,000)</option>
    <option value="INFMORT">Mortality rate, infant (per 1,000 live births)</option>
    <option value="LIFEEXP">Life expectancy at birth, total (years)</option>
    <option value="ENEUSE">Energy use (kg of oil equivalent per capita)</option></select>

  <script type="text/javascript">
 // set the stage for the visualization
    var margin = {top: 20, right: 80, bottom: 30, left: 50},
        w = 660 - margin.left - margin.right,
        h = 400 - margin.top - margin.bottom,
        x = d3.time.scale().range([0, w]),
        y = d3.scale.linear().range([h, 0]);
        parseDate = d3.time.format("%Y").parse;
        
    var color = d3.scale.category10(); // to generate a different color for each line
    
    // to be used later
    var countries,
        filtered,
        transpose;
    
    // where the line gets its properties, how it will be interpolated
    var line = d3.svg.line()
       .interpolate("basis")
       .x(function(d) { return x(d.year); })
       .y(function(d) { return y(d.stat); });
    
    // add svg box where viz will go    
    var svg = d3.select("body").append("svg")
        .attr("width", w + margin.left + margin.right)
        .attr("height", h + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // define the x axis and its class, append it to svg 
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
       svg.append("svg:g")
        .attr("class", "x axis");

    // define the y axis and its class, append it to svg
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        svg.append("svg:g")
        .attr("class", "y axis");
    
    // force data to update when menu is changed    
    var menu = d3.select("#menu select")
    .on("change", change);    
 			    
 // put data from csv into countries variable
 //run redraw function that will refresh whenever a new data series is selected 
 d3.csv("brics-mist.csv", function(csv) {
 		countries = csv;
        redraw();
    });

 d3.select(window)
    .on("keydown", function() { altKey = d3.event.altKey; })
    .on("keyup", function() { altKey = false; });

 var altKey;

 // set terms of transition that will take place
 // when a new economic indicator is chosen   
 function change() {
  clearTimeout(timeout);

  d3.transition()
      .duration(altKey ? 7500 : 1500)
      .each(redraw);
 }

 // all the meat goes in the redraw function
 function redraw() {
    
    // create data nests based on economic indicator (series)
    var nested = d3.nest()
 		.key(function(d) { return d.indicatorCode; })
 		.map(countries)
    
    // get value from menu selection
    // the option values are set in HTML and correspond
    //to the [indicatorCode] value we used to nest the data  
    var series = menu.property("value");
    
    // only retrieve data from the selected series, using the nest we just created
    var data = nested[series];
    
    // for object constancy we will need to set "keys", one for each country.
    // the keyring variable contains only the names of the countries
    var keyring = d3.keys(data[0]).filter(function(key) { 
     	    return (key !== "indicatorName" && key !== "yearCode" && key !== "indicatorCode" && key !== "year");
     	});
    
    // get the year and related statistics, map them to each country separately 
    var transpose = keyring.map(function(name) {
            return {
              name: name,
              values: data.map(function(d) {
                return {year: parseDate(d.year), stat: +d[name]};
              })
            };
        });

    // set the x and y domains as the max and min
    // of the related year and statistics, respectively
    x.domain([
    d3.min(transpose, function(c) { return d3.min(c.values, function(v) { return v.year; }); }),
    d3.max(transpose, function(c) { return d3.max(c.values, function(v) { return v.year; }); })
  ]);

    y.domain([
    d3.min(transpose, function(c) { return d3.min(c.values, function(v) { return v.stat; }); }),
    d3.max(transpose, function(c) { return d3.max(c.values, function(v) { return v.stat; }); })
  ]);

    // announce to d3 that we will be using something called
    // "country" that makes use of the transposed data 
    var country = svg.selectAll(".country")
      .data(transpose);
     
    // create separate groups for each country
    // assign them a class and individual IDs (for styling) 
    var countryEnter = country.enter().append("g")
      .attr("class", "country")
      .attr("id", function(d) { return d.name; });
    
    // draw the lines and color them according to their names
    countryEnter.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });

    // create lables for each country
    // set their position to that of the last year and stat
    countryEnter.append("text")
     .attr("class", "names")
     .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
     .attr("transform", function(d) { return "translate(" + x(d.value.year) + "," + y(d.value.stat) + ")"; })
     .attr("x", 4)
     .attr("dy", ".35em")
     .text(function(d) { return d.name; });

    // set variable for updating visualization
    var countryUpdate = d3.transition(country);
    
    // change values of path to those of the new series
    countryUpdate.select("path")
      .attr("d", function(d) { return line(d.values); });
    
    // change position of text alongside the moving path  
    countryUpdate.select("text")
       .attr("transform", function(d) { return "translate(" + x(d.values[d.values.length - 1].year) + "," + y(d.values[d.values.length - 1].stat) + ")"; });
  
  // update the axes, though only the y axis will change    
      d3.transition(svg).select(".y.axis")
          .call(yAxis);   
          
      d3.transition(svg).select(".x.axis")
            .attr("transform", "translate(0," + h + ")")
          .call(xAxis);
          
 // that concludes redraw()
 }

 // automatically change value after a few seconds
 var timeout = setTimeout(function() {
  menu.property("value", "ENEUSE").node().focus();
  change();
 }, 7000);

 // ugly javascript for highlighting the two groups of countries
 function briclight() {
    var chkbox = document.getElementById("bric");
    if (chkbox.checked) {
        document.getElementById("China").style.cssText = "opacity:1;",
        document.getElementById("Brazil").style.cssText = "opacity:1;",
        document.getElementById("India").style.cssText = "opacity:1;",
        document.getElementById("Russia").style.cssText = "opacity:1;"
    } else { 
        document.getElementById("China").style.cssText = "",
        document.getElementById("Brazil").style.cssText = "",
        document.getElementById("India").style.cssText = "",
        document.getElementById("Russia").style.cssText = "";
    }};
    
 function mistlight() {
    var chkbox = document.getElementById("mist")
    if (chkbox.checked) {
        document.getElementById("Mexico").style.cssText = "opacity:1;",
        document.getElementById("Indonesia").style.cssText = "opacity:1;",
        document.getElementById("S Korea").style.cssText = "opacity:1;",
        document.getElementById("Turkey").style.cssText = "opacity:1;"
    } else { 
        document.getElementById("Mexico").style.cssText = "",
        document.getElementById("Indonesia").style.cssText = "",
        document.getElementById("S Korea").style.cssText = "",
        document.getElementById("Turkey").style.cssText = "";
    }};

 // done!
 	</script>
  </body>
 </html>
indicatorName	indicatorCode	year	yearCode	Brazil	Russia	India	Indonesia	China	Mexico	S Korea	Turkey
GDP per capita (current US$)	GDPPC	1992	YR1992	2526.596184	3095.08716	322.243454	730.2214455	362.808414	4154.426906	7555.272527	2840.368021
GDP per capita (current US$)	GDPPC	1993	YR1993	2791.968684	2929.303282	306.1686498	816.464647	373.8000229	4524.709377	8219.896199	3167.52691
GDP per capita (current US$)	GDPPC	1994	YR1994	3426.840162	2663.456988	351.8848828	900.2674297	469.2131942	4650.114233	9525.43563	2256.731126
GDP per capita (current US$)	GDPPC	1995	YR1995	4751.065263	2669.946123	380.0984013	1013.699545	604.2280606	3107.073918	11467.81385	2879.248308
GDP per capita (current US$)	GDPPC	1996	YR1996	5109.348611	2651.442018	406.8857207	1124.16197	703.1207994	3546.928961	12249.17315	3033.593361
GDP per capita (current US$)	GDPPC	1997	YR1997	5220.856542	2748.917437	422.9243667	1052.107705	774.467161	4206.564036	11234.777	3123.142513
GDP per capita (current US$)	GDPPC	1998	YR1998	4980.980645	1844.485782	420.9653204	459.2276532	820.8630768	4342.334118	7462.838645	4361.442138
GDP per capita (current US$)	GDPPC	1999	YR1999	3413.259971	1338.986444	448.0969889	664.7397402	864.7303144	4884.625014	9554.439443	3983.746202
GDP per capita (current US$)	GDPPC	2000	YR2000	3696.146772	1775.141291	450.4151061	773.3109699	949.1780621	5816.614481	11346.66499	4189.478062
GDP per capita (current US$)	GDPPC	2001	YR2001	3129.755456	2100.743786	459.5766355	742.1107816	1041.637704	6139.301715	10654.93555	3036.72709
GDP per capita (current US$)	GDPPC	2002	YR2002	2812.334223	2375.162934	480.2069446	893.3199025	1135.44795	6324.167505	12093.7573	3553.066261
GDP per capita (current US$)	GDPPC	2003	YR2003	3041.677796	2976.137049	558.4416044	1058.299984	1273.640743	6740.20548	13451.22942	4567.499135
GDP per capita (current US$)	GDPPC	2004	YR2004	3609.875507	4108.574488	642.556503	1143.496951	1490.380056	7223.869614	15028.94015	5832.689345
GDP per capita (current US$)	GDPPC	2005	YR2005	4743.264112	5337.065324	731.7417369	1257.653396	1731.125235	7972.553641	17550.85389	7087.720249
GDP per capita (current US$)	GDPPC	2006	YR2006	5793.400957	6946.880998	820.2983339	1585.650791	2069.343631	8830.844748	19676.12418	7687.125651
GDP per capita (current US$)	GDPPC	2007	YR2007	7197.031306	9146.41636	1055.136489	1859.302639	2651.260121	9484.731556	21590.10558	9246.030405
GDP per capita (current US$)	GDPPC	2008	YR2008	8628.952841	11700.22112	1027.906574	2171.7048	3413.588661	9893.414594	19028.01293	10297.50544
GDP per capita (current US$)	GDPPC	2009	YR2009	8391.668592	8615.658757	1126.945129	2272.733849	3748.934494	7875.820872	16958.65239	8553.741453
GDP growth (annual %)	GDPG	1992	YR1992	-0.466914924	-14.53107377	5.482396022	7.220501604	14.2	3.628658714	5.875692913	5.035634937
GDP growth (annual %)	GDPG	1993	YR1993	4.665150948	-8.668540342	4.75077622	7.254075412	14	1.950524635	6.133784559	7.651265191
GDP growth (annual %)	GDPG	1994	YR1994	5.334359877	-12.56975598	6.658924067	7.540066679	13.1	4.45825813	8.536515143	-4.668147359
GDP growth (annual %)	GDPG	1995	YR1995	4.416831993	-4.143528407	7.57449184	8.396358045	10.9	-6.21798676	9.168945016	7.878266876
GDP growth (annual %)	GDPG	1996	YR1996	2.15	-3.6	7.549522249	7.642786284	10	5.139827628	6.998620422	7.379664476
GDP growth (annual %)	GDPG	1997	YR1997	3.374938815	1.4	4.049820849	4.699872542	9.3	6.77554931	4.650956192	7.577663648
GDP growth (annual %)	GDPG	1998	YR1998	0.037879685	-5.3	6.184415821	-13.12672393	7.8	4.90652571	-6.854459178	2.308214655
GDP growth (annual %)	GDPG	1999	YR1999	0.250857887	6.4	8.463070837	0.791129836	7.6	3.873255441	9.486322915	-3.365344813
GDP growth (annual %)	GDPG	2000	YR2000	4.308208022	10	3.975052681	4.920064597	8.4	6.601984351	8.486194114	6.774455167
GDP growth (annual %)	GDPG	2001	YR2001	1.3103698	5.091984231	4.944226371	3.643466447	8.3	-0.156984194	3.973478758	-5.697476762
GDP growth (annual %)	GDPG	2002	YR2002	2.658326818	4.743669897	3.90753397	4.499475391	9.1	0.826684579	7.150017515	6.163839762
GDP growth (annual %)	GDPG	2003	YR2003	1.149135078	7.295854331	7.943994604	4.780369122	10	1.35152863	2.802775924	5.265264614
GDP growth (annual %)	GDPG	2004	YR2004	5.712292376	7.175949193	7.848801189	5.030873945	10.1	4.05343933	4.619020379	9.362808855
GDP growth (annual %)	GDPG	2005	YR2005	3.159673613	6.376187027	9.284873369	5.692571304	11.3	3.205432102	3.957153703	8.401617472
GDP growth (annual %)	GDPG	2006	YR2006	3.95536037	8.153431973	9.263968273	5.500951785	12.7	5.150152031	5.178684919	6.893488998
GDP growth (annual %)	GDPG	2007	YR2007	6.09154395	8.535080209	9.801345167	6.345022245	14.2	3.260246799	5.105823972	4.668579111
GDP growth (annual %)	GDPG	2008	YR2008	5.171269363	5.247953532	3.890968295	6.013702503	9.6	1.190604448	2.298376031	0.658839041
GDP growth (annual %)	GDPG	2009	YR2009	-0.32824804	-7.832127463	8.238228401	4.628874078	9.2	-6.24059748	0.319499625	-4.825875295
Urban population (% of total)	URBPOP	1992	YR1992	75.3972	73.3852	25.971	32.572	28.2496	72.1986	75.602	60.371
Urban population (% of total)	URBPOP	1993	YR1993	76.1348	73.3808	26.183	33.566	29.1534	72.5884	76.481	60.955
Urban population (% of total)	URBPOP	1994	YR1994	76.8724	73.3764	26.395	34.56	30.0572	72.9782	77.36	61.539
Urban population (% of total)	URBPOP	1995	YR1995	77.61	73.372	26.607	35.554	30.961	73.368	78.239	62.123
Urban population (% of total)	URBPOP	1996	YR1996	78.3264	73.3676	26.819	36.8436	31.9442	73.6388	78.5154	62.6466
Urban population (% of total)	URBPOP	1997	YR1997	79.0428	73.3632	27.031	38.1332	32.9274	73.9096	78.7918	63.1702
Urban population (% of total)	URBPOP	1998	YR1998	79.7592	73.3588	27.243	39.4228	33.9106	74.1804	79.0682	63.6938
Urban population (% of total)	URBPOP	1999	YR1999	80.4756	73.3544	27.455	40.7124	34.8938	74.4512	79.3446	64.2174
Urban population (% of total)	URBPOP	2000	YR2000	81.192	73.35	27.667	42.002	35.877	74.722	79.621	64.741
Urban population (% of total)	URBPOP	2001	YR2001	81.5204	73.266	27.9806	42.789	37.206	75.0392	79.9658	65.161
Urban population (% of total)	URBPOP	2002	YR2002	81.8488	73.182	28.2942	43.576	38.535	75.3564	80.3106	65.581
Urban population (% of total)	URBPOP	2003	YR2003	82.1772	73.098	28.6078	44.363	39.864	75.6736	80.6554	66.001
Urban population (% of total)	URBPOP	2004	YR2004	82.5056	73.014	28.9214	45.15	41.193	75.9908	81.0002	66.421
Urban population (% of total)	URBPOP	2005	YR2005	82.834	72.93	29.235	45.937	42.522	76.308	81.345	66.841
Urban population (% of total)	URBPOP	2006	YR2006	83.1342	73.0744	29.574	46.7344	43.8628	76.6114	81.6626	67.5702
Urban population (% of total)	URBPOP	2007	YR2007	83.4344	73.2188	29.913	47.5318	45.2036	76.9148	81.9802	68.2994
Urban population (% of total)	URBPOP	2008	YR2008	83.7346	73.3632	30.252	48.3292	46.5444	77.2182	82.2978	69.0286
Urban population (% of total)	URBPOP	2009	YR2009	84.0348	73.5076	30.591	49.1266	47.8852	77.5216	82.6154	69.7578
Population, total (1 million)	POPTOT	1992	YR1992	154.582103	148.689	910.064576	190.512441	1164.97	87.523328	43.663	56.012109
Population, total (1 million)	POPTOT	1993	YR1993	156.985824	148.52	928.226051	193.525648	1178.44	89.109703	44.056	56.959988
Population, total (1 million)	POPTOT	1994	YR1994	159.398558	148.336	946.373316	196.488446	1191.835	90.691331	44.453	57.911273
Population, total (1 million)	POPTOT	1995	YR1995	161.848162	148.141	964.486155	199.400339	1204.855	92.272749	45.093	58.864649
Population, total (1 million)	POPTOT	1996	YR1996	164.342524	147.739	982.553253	202.257039	1217.55	93.858373	45.525	59.821978
Population, total (1 million)	POPTOT	1997	YR1997	166.869168	147.304	1000.558144	205.063468	1230.075	95.441345	45.954	60.783217
Population, total (1 million)	POPTOT	1998	YR1998	169.409713	146.899	1018.471141	207.839287	1241.935	97.001933	46.287	61.742674
Population, total (1 million)	POPTOT	1999	YR1999	171.936271	146.309	1036.258683	210.610776	1252.735	98.51369	46.617	62.692616
Population, total (1 million)	POPTOT	2000	YR2000	174.425387	146.303	1053.898107	213.395411	1262.645	99.959594	47.008	63.627862
Population, total (1 million)	POPTOT	2001	YR2001	176.877135	145.9495803	1071.374264	216.203499	1271.85	101.329543	47.357	64.544914
Population, total (1 million)	POPTOT	2002	YR2002	179.289227	145.2996903	1088.69408	219.026365	1280.4	102.634153	47.622	65.446165
Population, total (1 million)	POPTOT	2003	YR2003	181.633074	144.5994467	1105.885689	221.839235	1288.4	103.902569	47.859	66.339433
Population, total (1 million)	POPTOT	2004	YR2004	183.873377	143.8495742	1122.991192	224.606531	1296.075	105.175967	48.039	67.235927
Population, total (1 million)	POPTOT	2005	YR2005	185.986964	143.15	1140.042863	227.303175	1303.72	106.483757	48.138	68.143186
Population, total (1 million)	POPTOT	2006	YR2006	187.958211	142.5	1157.038539	229.918547	1311.02	107.835259	48.372	69.063538
Population, total (1 million)	POPTOT	2007	YR2007	189.79807	142.1	1173.971629	232.461746	1317.885	109.220753	48.598	69.992754
Population, total (1 million)	POPTOT	2008	YR2008	191.543237	141.95	1190.863679	234.951154	1324.655	110.627158	48.949	70.92373
Population, total (1 million)	POPTOT	2009	YR2009	193.24661	141.91	1207.740408	237.414495	1331.38	112.033369	49.182	71.846212
Mortality rate, infant (per 1,000 live births)	INFMORT	1992	YR1992	45.9	22.3	77.7	50.1	38.4	35.5	5.7	53.4
Mortality rate, infant (per 1,000 live births)	INFMORT	1993	YR1993	44.4	22	76.2	48.1	38.1	34.2	5.5	50.4
Mortality rate, infant (per 1,000 live births)	INFMORT	1994	YR1994	42.8	21.6	74.5	46.5	37.5	32.7	5.4	46.8
Mortality rate, infant (per 1,000 live births)	INFMORT	1995	YR1995	41	21.2	72.9	44.9	36.3	31.1	5.3	42.9
Mortality rate, infant (per 1,000 live births)	INFMORT	1996	YR1996	39.1	20.6	71	43.4	35.2	29.7	5.2	39.4
Mortality rate, infant (per 1,000 live births)	INFMORT	1997	YR1997	36.9	20	69.3	41.5	33.8	28.3	5.1	36.2
Mortality rate, infant (per 1,000 live births)	INFMORT	1998	YR1998	34.9	19.4	67.6	40	32.1	26.9	5	33.3
Mortality rate, infant (per 1,000 live births)	INFMORT	1999	YR1999	33	18.7	65.9	38.7	30.3	25.5	5	30.7
Mortality rate, infant (per 1,000 live births)	INFMORT	2000	YR2000	31.2	17.8	64.2	37.6	28.8	24.1	4.9	28.4
Mortality rate, infant (per 1,000 live births)	INFMORT	2001	YR2001	29.4	16.9	62.4	36.4	27.1	22.8	4.9	26.1
Mortality rate, infant (per 1,000 live births)	INFMORT	2002	YR2002	27.7	16.1	60.8	35.1	25.2	21.6	4.8	24.2
Mortality rate, infant (per 1,000 live births)	INFMORT	2003	YR2003	25.7	15.2	59	33.8	23.5	20.4	4.7	22.3
Mortality rate, infant (per 1,000 live births)	INFMORT	2004	YR2004	23.8	14.4	57.5	32.5	21.8	19.4	4.6	20.5
Mortality rate, infant (per 1,000 live births)	INFMORT	2005	YR2005	22	13.7	55.8	31.4	20.3	18.4	4.5	18.9
Mortality rate, infant (per 1,000 live births)	INFMORT	2006	YR2006	20.4	12.9	54.3	30.2	18.7	17.4	4.4	17.4
Mortality rate, infant (per 1,000 live births)	INFMORT	2007	YR2007	18.9	12.3	52.9	29	17.4	16.5	4.4	15.9
Mortality rate, infant (per 1,000 live births)	INFMORT	2008	YR2008	17.5	11.6	51.4	28.1	16.1	15.7	4.3	14.7
Mortality rate, infant (per 1,000 live births)	INFMORT	2009	YR2009	16.2	10.9	50	26.8	14.9	14.8	4.2	13.6
Life expectancy at birth, total (years)	LIFEEXP	1992	YR1992	67.13341463	66.87317073	58.8925122	62.88046341	69.86182927	71.58170732	72.20609756	64.2007561
Life expectancy at birth, total (years)	LIFEEXP	1993	YR1993	67.53680488	64.93585366	59.1864878	63.25453659	70.05463415	71.97419512	72.68195122	64.80021951
Life expectancy at birth, total (years)	LIFEEXP	1994	YR1994	67.94087805	64.46707317	59.49917073	63.62060976	70.24292683	72.36221951	73.03817073	65.42365854
Life expectancy at birth, total (years)	LIFEEXP	1995	YR1995	68.34063415	65.22121951	59.83156098	63.97770732	70.42473171	72.73763415	73.39439024	66.07309756
Life expectancy at birth, total (years)	LIFEEXP	1996	YR1996	68.73156098	66.19414634	60.17860976	64.32780488	70.59902439	73.09429268	73.82109756	66.74597561
Life expectancy at birth, total (years)	LIFEEXP	1997	YR1997	69.10909756	66.95073171	60.53573171	64.66943902	70.76631707	73.42604878	74.24780488	67.43280488
Life expectancy at birth, total (years)	LIFEEXP	1998	YR1998	69.4712439	66.78390244	60.89534146	65.00356098	70.92709756	73.73187805	74.81060976	68.11904878
Life expectancy at birth, total (years)	LIFEEXP	1999	YR1999	69.81446341	66.04365854	61.25587805	65.33070732	71.08339024	74.0132439	75.37341463	68.79473171
Life expectancy at birth, total (years)	LIFEEXP	2000	YR2000	70.13826829	65.34146341	61.61387805	65.64636585	71.24170732	74.2742439	75.8554878	69.44687805
Life expectancy at birth, total (years)	LIFEEXP	2001	YR2001	70.43963415	65.48780488	61.96878049	65.94907317	71.40553659	74.52046341	76.33756098	70.064
Life expectancy at birth, total (years)	LIFEEXP	2002	YR2002	70.72409756	65.08536585	62.32112195	66.23780488	71.57943902	74.76207317	76.82390244	70.63914634
Life expectancy at birth, total (years)	LIFEEXP	2003	YR2003	70.99614634	65.00756098	62.67095122	66.51653659	71.76487805	75.00473171	77.2602439	71.16831707
Life expectancy at birth, total (years)	LIFEEXP	2004	YR2004	71.26178049	65.42121951	63.01931707	66.7912439	71.96234146	75.25	77.84658537	71.64804878
Life expectancy at birth, total (years)	LIFEEXP	2005	YR2005	71.52953659	65.47	63.3672439	67.07336585	72.17131707	75.49890244	78.43268293	72.07785366
Life expectancy at birth, total (years)	LIFEEXP	2006	YR2006	71.81092683	66.64317073	63.71680488	67.37682927	72.38973171	75.74997561	78.96926829	72.46273171
Life expectancy at birth, total (years)	LIFEEXP	2007	YR2007	72.10995122	67.49756098	64.06853659	67.70958537	72.61258537	75.99714634	79.3495122	72.81065854
Life expectancy at birth, total (years)	LIFEEXP	2008	YR2008	72.42709756	67.84878049	64.42295122	68.07514634	72.83534146	76.23634146	79.83268293	73.12963415
Life expectancy at birth, total (years)	LIFEEXP	2009	YR2009	72.75980488	68.60487805	64.77856098	68.47097561	73.0565122	76.46556098	80.29731707	73.42463415
Energy use (kg of oil equivalent per capita)	ENEUSE	1992	YR1992	934.0138489	5351.216324	376.4849441	579.9141118	760.3535756	1478.04166	2540.155509	958.422169
Energy use (kg of oil equivalent per capita)	ENEUSE	1993	YR1993	942.6597016	5057.920455	377.5613792	626.5156441	795.3873129	1458.316318	2823.759987	998.7847961
Energy use (kg of oil equivalent per capita)	ENEUSE	1994	YR1994	977.3280948	4428.889427	384.6793552	620.4335496	822.4925397	1480.394361	2971.523924	970.4461513
Energy use (kg of oil equivalent per capita)	ENEUSE	1995	YR1995	995.4832604	4297.570241	398.4347313	676.8837389	869.1880044	1406.742645	3210.160069	1045.536125
Energy use (kg of oil equivalent per capita)	ENEUSE	1996	YR1996	1032.487118	4264.848347	403.723171	692.8955486	891.0069295	1415.434721	3454.733048	1118.913219
Energy use (kg of oil equivalent per capita)	ENEUSE	1997	YR1997	1068.571775	4086.636907	411.9770565	704.951113	883.9906998	1433.742882	3726.082626	1159.549255
Energy use (kg of oil equivalent per capita)	ENEUSE	1998	YR1998	1077.933111	4002.407293	414.5993372	679.5953933	874.0635251	1456.609777	3377.524229	1160.97871
Energy use (kg of oil equivalent per capita)	ENEUSE	1999	YR1999	1086.143772	4162.338175	432.6554888	725.9250875	866.7249059	1490.07477	3708.670785	1122.559776
Energy use (kg of oil equivalent per capita)	ENEUSE	2000	YR2000	1084.47502	4232.75414	433.831508	729.5918561	867.1253131	1451.820252	4000.918801	1199.917938
Energy use (kg of oil equivalent per capita)	ENEUSE	2001	YR2001	1075.757989	4289.249641	433.5588651	740.0554651	858.1086685	1441.75856	4032.392001	1090.739713
Energy use (kg of oil equivalent per capita)	ENEUSE	2002	YR2002	1092.311218	4288.36168	438.6033752	760.1756391	922.915171	1468.158041	4170.091764	1134.488033
Energy use (kg of oil equivalent per capita)	ENEUSE	2003	YR2003	1096.129007	4462.829855	442.6284243	752.1439974	1043.965857	1478.163548	4234.041601	1173.257556
Energy use (kg of oil equivalent per capita)	ENEUSE	2004	YR2004	1140.613875	4500.479474	461.8333275	795.1435081	1209.740628	1512.300163	4334.04946	1202.59685
Energy use (kg of oil equivalent per capita)	ENEUSE	2005	YR2005	1158.386111	4552.64846	471.831885	797.969936	1301.191587	1597.933401	4364.577797	1238.261636
Energy use (kg of oil equivalent per capita)	ENEUSE	2006	YR2006	1186.26776	4706.475782	488.3157034	816.5305559	1414.146777	1589.588365	4414.197552	1347.092702
Energy use (kg of oil equivalent per capita)	ENEUSE	2007	YR2007	1240.222406	4733.220844	508.1531617	810.0785882	1490.260435	1610.838263	4571.102864	1428.791115
Energy use (kg of oil equivalent per capita)	ENEUSE	2008	YR2008	1297.910085	4850.177591	519.8111681	816.3527939	1598.516237	1636.928249	4636.384686	1388.840195
Energy use (kg of oil equivalent per capita)	ENEUSE	2009	YR2009	1242.772704	4558.628603	559.5820025	850.8267197	1695.309284	1558.820515	4659.794132	1359.301796
	<!DOCTYPE html>
	<html>
	<head>
	<title>Mist vs Brics</title>
	<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
	<style type="text/css">

	body {
	font: 12px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.line {
	fill: none;
	stroke-width: 7px;
	}

	.country {opacity: 0.3;}
	.country:hover {opacity:1;}

	</style>
	</head>
	<body>
	<div>
	<input type="checkbox" id="bric" onclick="briclight()">BRICs</input>
	<input type="checkbox" id="mist" onclick="mistlight()">MIST</input>
	</div>
	<p id="menu"><b>MIST vs BRICS</b><br>Select series: <select>
	<option value="GDPPC">GDP per capita (current US$)</option>
	<option value="GDPG">GDP growth (annual %)</option>
	<option value="URBPOP">Urban population (% of total)</option>
	<option value="POPTOT">Population, total (,000,000)</option>
	<option value="INFMORT">Mortality rate, infant (per 1,000 live births)</option>
	<option value="LIFEEXP">Life expectancy at birth, total (years)</option>
	<option value="ENEUSE">Energy use (kg of oil equivalent per capita)</option></select>

	<script type="text/javascript">
	// set the stage for the visualization
	var margin = {top: 20, right: 80, bottom: 30, left: 50},
	w = 660 - margin.left - margin.right,
	h = 400 - margin.top - margin.bottom,
	x = d3.time.scale().range([0, w]),
	y = d3.scale.linear().range([h, 0]);
	parseDate = d3.time.format("%Y").parse;

	var color = d3.scale.category10(); // to generate a different color for each line

	// to be used later
	var countries,
	filtered,
	transpose;

	// where the line gets its properties, how it will be interpolated
	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.year); })
	.y(function(d) { return y(d.stat); });

	// add svg box where viz will go
	var svg = d3.select("body").append("svg")
	.attr("width", w + margin.left + margin.right)
	.attr("height", h + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// define the x axis and its class, append it to svg
	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	svg.append("svg:g")
	.attr("class", "x axis");

	// define the y axis and its class, append it to svg
	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	svg.append("svg:g")
	.attr("class", "y axis");

	// force data to update when menu is changed
	var menu = d3.select("#menu select")
	.on("change", change);

	// put data from csv into countries variable
	//run redraw function that will refresh whenever a new data series is selected
	d3.csv("brics-mist.csv", function(csv) {
	countries = csv;
	redraw();
	});

	d3.select(window)
	.on("keydown", function() { altKey = d3.event.altKey; })
	.on("keyup", function() { altKey = false; });

	var altKey;

	// set terms of transition that will take place
	// when a new economic indicator is chosen
	function change() {
	clearTimeout(timeout);

	d3.transition()
	.duration(altKey ? 7500 : 1500)
	.each(redraw);
	}

	// all the meat goes in the redraw function
	function redraw() {

	// create data nests based on economic indicator (series)
	var nested = d3.nest()
	.key(function(d) { return d.indicatorCode; })
	.map(countries)

	// get value from menu selection
	// the option values are set in HTML and correspond
	//to the [indicatorCode] value we used to nest the data
	var series = menu.property("value");

	// only retrieve data from the selected series, using the nest we just created
	var data = nested[series];

	// for object constancy we will need to set "keys", one for each country.
	// the keyring variable contains only the names of the countries
	var keyring = d3.keys(data[0]).filter(function(key) {
	return (key !== "indicatorName" && key !== "yearCode" && key !== "indicatorCode" && key !== "year");
	});

	// get the year and related statistics, map them to each country separately
	var transpose = keyring.map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {year: parseDate(d.year), stat: +d[name]};
	})
	};
	});

	// set the x and y domains as the max and min
	// of the related year and statistics, respectively
	x.domain([
	d3.min(transpose, function(c) { return d3.min(c.values, function(v) { return v.year; }); }),
	d3.max(transpose, function(c) { return d3.max(c.values, function(v) { return v.year; }); })
	]);

	y.domain([
	d3.min(transpose, function(c) { return d3.min(c.values, function(v) { return v.stat; }); }),
	d3.max(transpose, function(c) { return d3.max(c.values, function(v) { return v.stat; }); })
	]);

	// announce to d3 that we will be using something called
	// "country" that makes use of the transposed data
	var country = svg.selectAll(".country")
	.data(transpose);

	// create separate groups for each country
	// assign them a class and individual IDs (for styling)
	var countryEnter = country.enter().append("g")
	.attr("class", "country")
	.attr("id", function(d) { return d.name; });

	// draw the lines and color them according to their names
	countryEnter.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return line(d.values); })
	.style("stroke", function(d) { return color(d.name); });

	// create lables for each country
	// set their position to that of the last year and stat
	countryEnter.append("text")
	.attr("class", "names")
	.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
	.attr("transform", function(d) { return "translate(" + x(d.value.year) + "," + y(d.value.stat) + ")"; })
	.attr("x", 4)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });

	// set variable for updating visualization
	var countryUpdate = d3.transition(country);

	// change values of path to those of the new series
	countryUpdate.select("path")
	.attr("d", function(d) { return line(d.values); });

	// change position of text alongside the moving path
	countryUpdate.select("text")
	.attr("transform", function(d) { return "translate(" + x(d.values[d.values.length - 1].year) + "," + y(d.values[d.values.length - 1].stat) + ")"; });

	// update the axes, though only the y axis will change
	d3.transition(svg).select(".y.axis")
	.call(yAxis);

	d3.transition(svg).select(".x.axis")
	.attr("transform", "translate(0," + h + ")")
	.call(xAxis);

	// that concludes redraw()
	}

	// automatically change value after a few seconds
	var timeout = setTimeout(function() {
	menu.property("value", "ENEUSE").node().focus();
	change();
	}, 7000);

	// ugly javascript for highlighting the two groups of countries
	function briclight() {
	var chkbox = document.getElementById("bric");
	if (chkbox.checked) {
	document.getElementById("China").style.cssText = "opacity:1;",
	document.getElementById("Brazil").style.cssText = "opacity:1;",
	document.getElementById("India").style.cssText = "opacity:1;",
	document.getElementById("Russia").style.cssText = "opacity:1;"
	} else {
	document.getElementById("China").style.cssText = "",
	document.getElementById("Brazil").style.cssText = "",
	document.getElementById("India").style.cssText = "",
	document.getElementById("Russia").style.cssText = "";
	}};

	function mistlight() {
	var chkbox = document.getElementById("mist")
	if (chkbox.checked) {
	document.getElementById("Mexico").style.cssText = "opacity:1;",
	document.getElementById("Indonesia").style.cssText = "opacity:1;",
	document.getElementById("S Korea").style.cssText = "opacity:1;",
	document.getElementById("Turkey").style.cssText = "opacity:1;"
	} else {
	document.getElementById("Mexico").style.cssText = "",
	document.getElementById("Indonesia").style.cssText = "",
	document.getElementById("S Korea").style.cssText = "",
	document.getElementById("Turkey").style.cssText = "";
	}};

	// done!
	</script>
	</body>
	</html>