Global Cellular Subscriptions - A visualisation using d3.js

README.md

Udacity Data Analyst Nanodegree

Data Visualisation with D3.js

Summary

Cellular communication has become an integral part of our lives now. In the year 2002, only 2 countries, Israel and Luxembourg had more than 100 cellular subscriptions per 100 people. In 2014, this count rose to 118 countries, which is over 50% of the world countries. This visualization shows the growth in celluar subscriptions from 1979 to 2014.

Design

Choice of visualisation

The intent of my visualisation is to:

• show clearly countries with over 100 subscribers per 100 people
• show the growth in number of cellular subscribers from 1979 to 2014
• show the difference in adoption rate among countries and continents

A Choropleth map is a good way to show the change in subscribers over a period of time.

Data

The first version of this visual was built using Gapminder data on cellular subscribers. The data had some missing values for intermediate years. The missing values were represented as ‘0’ in the data and there was no easy way to differentiate a ‘0’ that is a missing value from a no cellular subscriber.

I added a footnote indicating that some countries contain missing values. Still, this was a confusing aspect for users and I received feedback wondering why Netherlands had zero subscribers in 2011.

As I was looking at ways to handle this issue, I found the cellular subscription data on UN website and this was complete with no missing records. This visualisation uses the UN data.

There were some discrepancies in country names between the world_countries JSON used to draw the map and the UN data. To address this, the country names in JSON are changed to matching country names from the data in the code.

Narrative Structure

I wanted to use a Martini Glass Narrative structure for the visualisation. A martini glass narrative structure starts as an author-driven narrative and transitions to a viewer-driven narrative. This visual starts with an animation that iterates through the years and colours the map. At the end of the visual, the viewer is provided with a slider to move through freely between the years and use tooltips to investigate details.

The first version of the visual began the animation automatically on load. I understood through feedback that some users found this confusing, especially since the colours on the map are very mild at the start. Also, the animation starting off without warning did not give the user enough time to read the introductory text and get context on what to do once the animation stops.

Colors

The visual shows a sequential data in number of cellular subscribers across years.

For the choropleth map I wanted to use a sequential colour scale that stands out against the colour of the water. The first colour scale I chose was shades of green. The feedback suggested that the colour, especially in its lightest was very hard to notice and the differences between threshold ranges are not easily seen. One feedback was that they had to use tooltips often to see which colour bucket a country fell in. So I changed the colour scale to Yellow-Orange-Brown (YlOrBr) from www.colorbrewer.org.

Tooltips

I wanted tooltips to provide information on the country, year and number of subscribers. There are a handful of countries for which UN data does not contain data. These appear grey on the map. The tooltips for these countries showed NaN subscribers as they had no data. This was fixed in the final version to indicate data is not available for this country.

Legends

Legends are implemented using d3.legend.js from http://d3-legend.susielu.com/#color-threshold

I created custom legend in the first version of the visual, but I found the legend.js to be very versatile and easy to implement.

Feedback

Feedback 1: Sophia Jose

What do you notice in the visualisation?

What questions do you have about the data?

Places like Greenland show dark green. Is it also because of low density of population.?Is it average subscription for the country? Like India would ideally have different shades in cities and villages? So how helpful would this info be? Like the subscription of a developed country like Canada and developing country like India has similar subscription in the visualisation.

What relationships do you notice:

As years progressed the mobile penetration increased. The green darkened.

What do you think is the main takeaway from this visualization?

Mobile penetration is on the rise. Continents like South America/ Europe look almost saturated while Africa shows scope for more subscription.

Is there something you don’t understand in the graphic?

At first...it was little difficult to differentiate the shades..then on hover over the countries displayed the numbers which helped. Netherland showed 0 subscription??

Feedback 2: Murali Rangarajan

What do you notice in the visualisation?

The viz uses a heat map to show how cellular subscription has risen over the years across the globe. The slider gives an idea as to who the early adopters were.

What questions do you have about the data?

What would be interesting to know is the number of subscribers who had more than one connection. While the rise of subscriptions per 100 sheds some light on the adoption rate, it does not tell what the reach is. Another interesting data point would be the population growth rate of a country vis-a-vis the subscription growth rate.

What relationships do you notice?

Developed nations are more likely to have adopted cellular communications technology earlier than developing nations. Mid 2000 years mark the rise of cellular communications in developing nations while it was already prevalent in European countries (and well entrenched in Scandinavian). However, by 2011, the late adopters seem to have soared well past the early adopters in terms of subscriptions per 100.

What do you think is the main takeaway from this visualization?

It appears that while cellular technology was available as early as 1979, it took over two decades for world wide adoption. There seems to be an inflection point (around early 2000s) at which the technology really took off outside of Europe and North America.

Is there something you don’t understand in the graphic?

Visually, it is not very easy to differentiate between a 0 and a 30. An increase from 0 to 10 to 30 could be more obvious.

Feedback 3: Rabiya Ghouse

What do you notice in the visualisation?

As soon as I load the visualisation, it slowly changes over time dimension, showing the cellular growth over time. It also gives me the ability to look at the growth in a particular year by using the time scale slider

What questions do you have about the data?

Handling missing values in the data- could it be handled better.

What relationships do you notice?

Initial growth in Scandinavian countries ( mostly attributed to them being mobile market leaders) and in developed countries. Canada despite starting early on, have a few countries over take mobile growth soon.

What do you think is the main takeaway from this visualization?

does as says on the tin :)

Is there something you don’t understand in the graphic?

sometimes 0 subscription is color coded light green for a few countries and no color for some?

Resources

Colors (http://colorbrewer2.org/#type=sequential&scheme=Greens&n=8)

Graticule (https://gist.github.com/gdmf/4180596)

Legend (http://d3-legend.susielu.com/#color-threshold)

Udacity forum (https://discussions.udacity.com/t/find-and-select-through-json/177759/10)

JSON countries to draw the map (https://github.com/honcheng/world.geo.json/blob/ccbedc4c5b6bdb4949244adfc2915199d566ce71/countries.geo.json)

Sample Map (http://bl.ocks.org/tomschulze/961d57bd1bbd2a9ef993f2e8645cb8d2)

Creating a gist (https://discussions.udacity.com/t/p6-sharing-how-to-make-a-gist/43772)

Cellphones_per_100.csv

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v4.min.js"></script>
  <script src="http://colorbrewer2.org/export/colorbrewer.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>

    <style>
      body {
            width: 99vw;
            height: 70vh;
            font-family: sans-serif;
      }
      #chartContainer{
            width: 100%;
            height: 100%;
            margin-left: 0 auto;
      }
      svg{
            width: 100%;
            height: 100%;
            margin: 0 auto;
      }
      .background {
            fill: #ABE3FE !important;
      }
      .legendColors {
            left: 15%;
            top: 10% ;
            font: 12px sans-serif; 	
      }
      div.tooltip {   
            position: absolute;           
            text-align: center;           
            width: 120px;                  
            height: 45px;                 
            padding: 2px;             
            font: 12px sans-serif;        
            background: #d6dfe9;   
            border: 0px;      
            border-radius: 8px;           
            pointer-events: none;         
      }
      .slider{
            
            -webkit-appearance: none;
            appearance: none;
            height: 20px; 
            background: #d3d3d3; 
            outline: none;
            position:fixed;
            top: 5%;
            right: 20%;
            width: 200px;

      }
      .slider::-webkit-slider-thumb {
            -webkit-appearance: none; 
            appearance: none;
            width: 20px; 
            height: 20px; 
            background: #008CBA; 
            cursor: pointer; 
      }
      #start {
            background-color: #008CBA;
            border: none;
            color: white;
            padding: 5px 5px;
            text-align: center;
            display: inline-block;
            font-size: 11px;
      } 
      h1 {
            text-align: left;
            text-transform: uppercase;
            font-weight: bold;
            font-size:22px; 
            margin: 3px 0;
      }
      h2 {
            font-size: 16px;
            text-align: center;
      }
      h3{
            position: absolute;
            top: 1%;
            right: 22%;
            font-size: 16px;
      }
      #source p {
            position: absolute;
            bottom: 0.8%;
            left: 1%;
            font: 12px sans-serif; 
            color : #4E4F52;
      }
      
      #intro{
            text-align: justify;
            width: 60%;
            font-size: 13px;
      }
    </style>

    <body>
      <title> The rise of cellular subscriptions</title>
      <div id = "chartContainer"></div>
      <div id="source">
          <p> <b>Source: </b><a href = http://data.un.org/Data.aspx?d=ITU&f=ind1Code%3AI911> UN Data </a> on 
		  Mobile-cellular telephone subscriptions per 100 inhabitants. 
          </p>
      </div>

    <script type="text/javascript">  
      function draw(geo_data) {
        "use strict";

          /*
            draw function initialises variables and draws a basic map
          */

          var margin = {top: 10, left: 10, bottom: 10, right: 10},
          				width = parseInt(d3.select('#chartContainer').style('width')),
						width = width - margin.left - margin.right,
						mapRatio = .5,
						height = width * mapRatio;
          var initYear = 2014;
          var heading = "Number of cellular subscriptions per 100 people ";

          // add headers, introduction text, button to the chart container div
          d3.select("#chartContainer").insert("h1").text("THE RISE OF CELLULAR SUBSCRIPTIONS (1979-2014)");
          d3.select("#chartContainer").insert("p")
            .attr("id","intro")
            .html("In the year 2002, Israel and Luxembourg became the world's first countries with more than 100 cellular subscriptions per 100 people. 2005 saw a leap in subscriptions with 20 more countries joining this club. In 2014, 118 countries in the world had more cellular subscriptions than their population.   <br><br>This animation charts the growth in number of celluar subscriptions across the world from 1979 to 2014. Please use the slider to move through the years at the end of animation." );
          
          d3.select("#chartContainer").append("button")
                                      .attr("id", "start")
                                      .text("Click to start animation");

          // create a hidden slider
          var slider = d3.select("#chartContainer").insert("p").append("input")
                  .attr("type" , "range") 
                  .attr("class", "slider")
                  .attr("showRange" , "true")
                  .attr("min", "1979")
                  .attr("max", "2014")
                  .attr("id", "year")
                  .attr("value", initYear)
                  .style("opacity", 0);

          d3.select("#chartContainer").insert("h2").text(heading);


          // create a hidden tooltip variable
          var tooltip = d3.select("#chartContainer").append("div")
                        .attr("class", "tooltip")
                        .style("opacity", 0);

          /*
            create the map with mercator projection, add water using graticule, 
	    colour the map path black
          
          */               
          var svg = d3.select("#chartContainer")
                      .append("svg")
                      .attr("width", width)
                      .attr("height", height)
                      .append('g')
                      .attr('class', 'map');

          var projection = d3.geoMercator()
                           .scale(width/9)
                           .translate([width / 2, height / 2]);

          var path = d3.geoPath()
                       .projection(projection);

          var graticule = d3.geoGraticule();

          svg.append("path")
             .datum(graticule.outline)
             .attr("class", "background")
             .attr("d", path);
        

          var map = svg.selectAll('path')
                       .data(geo_data.features)
                       .enter()
                       .append('path')
                       .attr('d', path)
                       .style('fill', 'white')
                       .style('stroke', 'black')
                       .style('stroke-width', 0.5);     
           
               
          function drawMap(csv_data){

            /*
              drawMap function defines the scale for the map, adds legends, 
	      merges the geo JSON with the data file and calls animate function 
	      on click of the start animation button.
            */


         
            // define the color scale and create legends 

            var color = d3.scaleThreshold()
                           .domain([20,40,60,80,100])
                           .range(colorbrewer.YlOrBr[6]);

            var legendColors = d3.legendColor()
                                 .shapeWidth(30)
                                 .title("Subscriptions per 100 people")
                                 .labelFormat(d3.format(".0f"))
                                 .labels(d3.legendHelpers.thresholdLabels)
                                 .scale(color);
            svg.append("g")
                        .attr("class", "legendColors")
                        .attr("transform", "translate(10,50)");


            svg.select(".legendColors")
                         .call(legendColors);

          
            // call mergeMapData to merge the year, cellphone subscriber information with the geo JSON data

            geo_data = mergeMapData(csv_data, geo_data);
            
            var years = Object.keys(geo_data.features[0].properties)
            				  .slice(0,-1);

            var yearIndex = 0;

            d3.select("#start").on("click" , function(){
              animate_map();
            });


            function animate_map(){

              /*
                animate_map function calls the shade function to color the map by count of 
		cellular subscribers for each year, calls create_slider function to enable 
		the slider at the end of the animation.
              */
              var yearInterval = setInterval(function(){
                shade(years[yearIndex]);
                yearIndex++;

                if (yearIndex >= years.length){
                  clearInterval(yearInterval);
                  create_slider();
                }
              }, 800);
            }

            function create_slider(){

              /*
                create_slider function creates a year slider and adds tooltips to the map
              */
                var year_val = years[years.length - 1];
                
                d3.select("#chartContainer").insert("h3")
                 .text("Slide to select a year");
               
                // make slider visible
                slider.style("opacity", 1);
              
                // call shade function to color the map for the selected year
                d3.select("#year").on("input", function() {
                  year_val = this.value;
                  shade(this.value);
              });

                /*
                  enable tooltip when the user hovers on the map, 
		  round the number of subscribers for the tooltip
                */
                map.on("mouseover", function(d){

                    tooltip.transition()
                    	   .delay(50)
                    	   .duration(600)
                    	   .style("opacity", 1);
                    
                    var cellphone_count = Math.round((d.properties[year_val] * 100)/100);
                    
                    if(isNaN(cellphone_count)) cellphone_count = "Data not available for ";
                    tooltip.html(d.properties.name + ", " + year_val + "<br/>"  + cellphone_count + " subscribers")
                    .style("left", (d3.event.pageX) + "px")     
                    .style("top", (d3.event.pageY) + "px");
                });
                
                map.on("mouseout", function(){
                  tooltip.transition().duration(300).style("opacity", 0.8);
                  tooltip.transition().duration(300).style("opacity", 0);
                }); 
              }

              function shade(year){
                /*
                  shade function creates the colour fill on the map using the colour legend 
		  created in the drawMap function. Zero values are coloured white and 
		  countries that do not have data available are shaded grey.
                */
                d3.select('h2')
                  .text(heading + "(" + year + ")") 
                  .style("opacity", 1);

                svg.selectAll('path') 
                   .transition()
                   .duration(400)
                   .style('fill', function(d) {
                    if(d.properties[year] > 0) {
                      return color(d.properties[year]);
                    }
                    if(d.properties[year] == 0) {
                      return 'white';
                    }
                    return '#ccc';
                  });
              }


            function mergeMapData(csv_data, geo_data) {
                /*
                  mergeMapData read the data file and adds the Year, 
		  cellular subscription numbers to the geo JSON file for each country.
                */

                var nested = d3.nest()
                                .key(function (d) {
                                  return d.year
                                })
                                .entries(csv_data)

                /*
                  Match the country names in geo JSON to reflect the ones in the data file
                */

                geo_data.features[167].properties.name = "United States"; 
                geo_data.features[57].properties.name = "United Kingdom";
                geo_data.features[33].properties.name = "Congo (Democratic Republic of the)";
                geo_data.features[34].properties.name = "Congo";
                geo_data.features[163].properties.name = "Tanzania";
                geo_data.features[31].properties.name = "Cote d'Ivoire";
                geo_data.features[62].properties.name = "Guinea-Bissau";
                geo_data.features[146].properties.name = "Serbia";
                geo_data.features[103].properties.name = "T.F.Y.R. Macedonia";
                geo_data.features[26].properties.name = "Central African Rep.";
                geo_data.features[75].properties.name = "Iran (Islamic Rep. of)";
                geo_data.features[170].properties.name = "Viet Nam";
                geo_data.features[87].properties.name = "Korea (Rep. of)";
                geo_data.features[129].properties.name = "Dem. People's Rep. of Korea";
                geo_data.features[44].properties.name = "Dominican Rep.";

                /*
                  Loop through the data file, pick a country, year and cellular subscription values, 
		  find the matching country in geo JSON and update the properties.

                */

                for (var i = 0; i < nested.length; i++) {
                  var year = nested[i].key;
                  var values = nested[i].values;

                  for (var j = 0; j < values.length; j++) {
                    var csv_country = values[j].country;
                    var csv_cellphones = values[j].cellphones;

                    for (var k = 0; k < geo_data.features.length; k++) {
                      var geo_country = geo_data.features[k].properties.name;

                      if (geo_country == csv_country) {
                        var strYear = year.toString();
                        geo_data.features[k].properties[strYear] = csv_cellphones
                      }
                    }
                  }
                }
                return geo_data;
            }
          }

      var format = d3.timeFormat("%Y");

      /*
        read the data file
      */

      d3.csv("un_cellphones_per_100.csv", function(d) {
              d["cellphones"] = +d["cellphones"];
              return d;
            }, drawMap);              
        
      };
      </script>
  </head>
<body>
  

  <script type="text/javascript">
    /*
      Use D3 to load the GeoJSON file
    */
    
d3.json("world_countries_new.json", draw);
  </script>

</body>
</html>

index_1.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/colorbrewer.v1.min.js"></script>


    <style>
      h1 {
            text-align: left;
            text-transform: uppercase;
            font-weight: bold;
            font-size:22px; 
            margin: 3px 0;

        }
      h2 {
            color : #4E4F52;
            font-size: 16px;
            margin: 0px 0px 10px 0px;
   

      }
      body {
            width: 99vw;
            height: 70vh;
            font-family: sans-serif;
      }
      #chartContainer{
            width: 100%;
            height: 100%;
            margin-left: 0 auto;
      }

      svg{
            width: 100%;
            height: 100%;
            margin: 0 auto;
      }
      .legend {
            margin-top: 15%;
            font: 12px sans-serif; 
            text-anchor: left;
      }
      div.tooltip {   
            position: absolute;           
            text-align: center;           
            width: 120px;                  
            height: 45px;                 
            padding: 2px;             
            font: 12px sans-serif;        
            background: #d6dfe9;   
            border: 0px;      
            border-radius: 8px;           
            pointer-events: none;         
      }
      .slider{
            position:fixed;
            top: 5%;
            right: 20%;
            width: 200px;

      }
      h3{
            position: absolute;
            top: 1%;
            right: 22%;
            color : #4E4F52;
            font-size: 16px;
      }
      #source p {
            position: absolute;
            bottom: 5%;
            left: 1%;
            font: 12px sans-serif; 
            color : #4E4F52;
      }
      .background {
            fill: #deebf7 !important;
      }
      
      #intro{
        text-align: left;
        width: 60%;
        font-size: 13px;
      }
     
    </style>
    <script type="text/javascript">  
      function draw(geo_data) {
        "use strict";

      var margin = {top: 10, left: 10, bottom: 10, right: 10}
                  , width = parseInt(d3.select('#chartContainer').style('width'))
                  , width = width - margin.left - margin.right
                  , mapRatio = .5
                  , height = width * mapRatio;
        
        //var margin = 80,
          //  width = 1400 - margin,
          //  height = 600 - margin;

        var initYear = 2011;
        var heading = "Number of cellular subscriptions per 100 people ";

        d3.select("#chartContainer").insert("h1").text("THE RISE OF CELLULAR SUBSCRIPTIONS (1979-2011)");
        d3.select("#chartContainer").insert("h2").text(heading + initYear);
        d3.select("#chartContainer").insert("p")
          .attr("id","intro")
          .text("European and North American countries were the first to adopt cellular communications in the 1980s. Since then, cellular communications have seen a huge growth. In 2011, there were over 90 countries with more than 100 subscribers per 100 people.")


        
        var tooltip = d3.select("#chartContainer").append("div")
                        .attr("class", "tooltip")
                        .style("opacity", 0);


        var svg = d3.select("#chartContainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append('g')
            .attr('class', 'map');

        var projection = d3.geo.mercator()
                           .scale(width/9)
                           .translate([width / 2, height / 2]);

        var path = d3.geo.path()
                  .projection(projection);

        var graticule = d3.geo.graticule();

        svg.append("path")
           .datum(graticule.outline)
           .attr("class", "background")
           .attr("d", path);
        

        var map = svg.selectAll('path')
                     .data(geo_data.features)
                     .enter()
                     .append('path')
                     .attr('d', path)
                     .style('fill', 'white')
                     .style('stroke', 'black')
                     .style('stroke-width', 0.5);
         

         var slider = d3.select("#chartContainer").insert("p").append("input")
                  .attr("type" , "range") 
                  .attr("class", "slider")
                  .attr("showRange" , "true")
                  .attr("min", "1979")
                  .attr("max", "2011")
                  .attr("id", "year")
                  .attr("value", initYear)
                  .style("opacity", 0);     
                        
        function function2(csv_data){
          var maxcellphones = d3.max(csv_data, function(d) {
            return d.cellphones;
          });

          var midcellphones = maxcellphones * 0.5;

          var mincellphones = d3.min(csv_data, function(d) {
            return d.cellphones;
          })

          //var c1 = "#fff",
              //c2 = "#7f0000";

          //var color = d3.scale.sqrt()
                     // .domain([0, midcellphones, maxcellphones])
                     // .range([c1, d3.interpolateRgb(c1,c2)(0.5), c2]);

         

         var color = d3.scale.threshold()
                    .domain([20, 40, 60, 80, 100, 150, 200, 250])
                    .range(["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"])
                    .range(colorbrewer.Greens[8]);

        var legend_labels = ["0-20", "20-40" , "40-60" , "60-80", "80-100" , "100-150", "150-200", ">200"];
          
          geo_data = function1(csv_data, geo_data);
          
          var years = Object.keys(geo_data.features[8].properties).slice(0,-1);
          var yearIndex = 0;

          d3.select('h2')
            .text("Number of cellular subscriptions per 100 people")
            .transition()
            .duration(2000)
            .style("opacity", 1)
            .each("end", animate());


          

             function animate(){
              var yearInterval = setInterval(function(){
                shade(years[yearIndex]);
                //debugger;
                yearIndex++;

                if (yearIndex >= years.length){
                  clearInterval(yearInterval);
                  create_slider();
                }
              }, 800);
              }

              function create_slider(){
                var year_val = years[years.length - 1];
                
                d3.select("#chartContainer").insert("h3")
                 .text("Slide to select a year");
               
                slider.style("opacity", 1);
              

                d3.select("#year").on("input", function() {
                  year_val = this.value;
                  shade(this.value);
                });


                map.on("mouseover", function(d){

                    tooltip.transition().delay(50).duration(600).style("opacity", 1);
                    var cellphone_count = Math.round((d.properties[year_val] * 100)/100);
                    tooltip.html(d.properties.name + ", " + year_val + "<br/>"  + cellphone_count + " subscribers")
                    .style("left", (d3.event.pageX) + "px")     
                    .style("top", (d3.event.pageY) + "px");
                });
                map.on("mouseout", function(){
                  tooltip.transition().duration(300).style("opacity", 0.8);
                  tooltip.transition().duration(300).style("opacity", 0);
                });
                

              }

             function shade(year){
              //debugger;
              d3.select('h2')
                .text(heading + "(" + year + ")") 
                .style("opacity", 1);

              svg.selectAll('path') 
                 .transition()
                 .duration(400)
                 .style('fill', function(d) {
                  if(d.properties[year] > 0) {
                    return color(d.properties[year]);
                  }
                  else if(d.properties[year] == 0) {
                    return 'white';
                  }
                  else {
                    return '#ccc';
                  }
                });

                var legendRectSize = 30;
                var legendSpacing = 10;
                var legend = d3.select('svg')
                               .append("g")
                               .selectAll("g")
                               .data(color.domain())
                               .enter()
                               .append('g')
                               .attr('class', 'legend')
                               .attr('transform', function(d, i) {
                                    var height = legendRectSize;
                                    var x = 0;
                                    var y = i * height;
                                    return 'translate(' + x + ',' + y + ')';
                                  });

              legend.append('rect')
              .attr('width', legendRectSize)
              .attr('height', legendRectSize)
              .style('fill', color)
              .style('stroke', color);

              legend.append('text')
              .attr('x', legendRectSize + legendSpacing)
              .attr('y', legendRectSize - legendSpacing)
              .text(function(d,i) { return legend_labels[i]; });
             }


            function function1(csv_data, geo_data) {
                //draw circles logic

                var nested = d3.nest()
                                .key(function (d) {
                                  return d.year
                                })
                                .entries(csv_data)

                geo_data.features[167].properties.name = "United States"; 
                geo_data.features[57].properties.name = "United Kingdom";
                geo_data.features[33].properties.name = "Congo, Dem. Rep.";
                geo_data.features[34].properties.name = "Congo, Rep.";
                geo_data.features[163].properties.name = "Tanzania";
                geo_data.features[31].properties.name = "Cote d'Ivoire";
                geo_data.features[62].properties.name = "Guinea-Bissau";
                geo_data.features[146].properties.name = "Serbia";
                geo_data.features[103].properties.name = "Macedonia, FYR";
                geo_data.features[85].properties.name = "Kyrgyz Republic";


             
                //geo_data.features[134].properties.name = "Russian Federation"; 

                for (var i = 0; i < nested.length; i++) {
                  var year = nested[i].key;
                  var values = nested[i].values;

                  for (var j = 0; j < values.length; j++) {
                    var csv_country = values[j].country;
                    var csv_cellphones = values[j].cellphones;

                    for (var k = 0; k < geo_data.features.length; k++) {
                      var geo_country = geo_data.features[k].properties.name;

                      if (geo_country == csv_country) {
                        var strYear = year.toString();
                        geo_data.features[k].properties[strYear] = csv_cellphones
                      }
                    }
                  }
                }
                return geo_data;
            }
          }

      var format = d3.time.format("%Y");

      d3.csv("Cellphones_per_100.csv", function(d) {
              d['cellphones'] = +d['cellphones'];
              return d;
            }, function2);              
        
      };
      </script>
  </head>
<body>
  <title> The rise of cellular subscriptions</title>
  <div id = "chartContainer"></div>
  <div id="source">
    <p> <b>Source: </b><a href = http://www.gapminder.org/data/> Gapminder data </a> on mobile cellular subscriptions per 100 people <br> 
      Data Collected by World Bank, includes prepaid and postpaid subscribers <br>
      Some countries contain missing data for intermediate years and these are marked as zero.
    </p>
  </div>

  <script type="text/javascript">
  /*
    Use D3 to load the GeoJSON file
    */
    
d3.json("world_countries_new.json", draw);
  </script>

</body>
</html>

un_cellphones_per_100.csv

world_countries_new.json