Aplicación de los recursos de la última semana

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Usuarios de Internet</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style>
    body {
  position: relative;
  width: 960px;
    }
    h1{
      text-align:center;
    }

p {
      font-size: 16px;
      font-family: sans-serif;
    }

svg {
        background-color: #FFF
    }
    .axis path,
    .axis line{
      fill:none;
      stroke:black;
      shape-rendering:crispEdges;
    }

.y.axis text{
      font-family: sans-serif;
      font-size: 11px;
    }
    .2.axis text{
      font-family: sans-serif;
      font-size: 15px;
    }
    circle{
      fill:steelblue;
    }

circle:hover {
      fill:orange;
    }

.item-line{
      stroke:#8c564b;
      stroke-width:2;
      fill:none;
    }

.item-line :hover{
      stroke: #8c564b;
      stroke-width:8;
    }

.x.axis {
      stroke-width:2;
    }

.item-line.selected {
      stroke-width:15px;
      stroke:#8c564b;
    }

.item-line path.america {
      stroke: #d62728;
    }

.item-line path.asian {
      stroke: #9467bd;
    }

.item-line path.african {
      stroke: #ff7f0e;
    }

.item-line path.europan {
      stroke: #1f77b4;
    }

.item-line path.oceanian {
      stroke: #2ca02c;
    }
    ;

</style>
</head>
<body>
<H1>Porcentaje de personas que usan internet al nivel mundial</H1>
<p>
  Esta información es un total de paises:222, corresponde entre el año 2000 y el año 2014. La fuente de la información es parte de la serie de indicadores: TIME SERIES BY COUNTRY (UNTIL 2014), de la <a href="https://www.itu.int/en/ITU-D/Statistics/Pages/stat/default.aspx">ITU,</a>
</p>

var african= ["Algeria","Guinea-Bissau","Angola","Benin","Botswana","Burkina Faso","Burundi","Cameroon","Cape Verde","Chad","Comoros","Congo (Rep.)","Congo (Dem. Rep.)","Central African Rep.","Côte d'Ivoire","Djibouti","Egypt","Equatorial Guinea","Eritrea","Ethiopia","Gabon","The Gambia","Ghana","Guinea","Guinea","Kenya","Lesotho","Liberia","Libya","Madagascar","Malawi","Mali","S Tomé & Principe","Mauritania","Mauritius","Morocco","Mayotte","Mozambique","Namibia","Niger","Nigeria","Rwanda","S. Tomé & Principe","Senegal","Seychelles","Sierra Leone","Somalia","South Africa","South Sudan","Sudan","Swaziland","Tanzania","Togo","Tunisia","Uganda","Zambia","Zimbabwe"]

var american = ["Aruba","Guam","St. Kitts and Nevis","Anguilla","American Samoa","Canada","Greenland","Mexico","United States","Antigua & Barbuda","Barbados","Belize","Costa Rica","Cuba","Cayman Islands","St. Vincent and the Grenadines","British Virgin Islands","Virgin Islands (US)","Dominica","Dominican Rep.","El Salvador","Bermuda","Grenada","Guatemala","Haiti","Honduras","Jamaica","Nicaragua","Panama","Puerto Rico","St. Lucia","Montserrat","Saint Vincent and the Grenadines","Trinidad & Tobago","Argentina","Bolivia","Brazil","Chile","Colombia","Ecuador","Bahamas","French Guiana","Guyana","Paraguay","Peru","Suriname","Uruguay","St Lucia","Venezuela"]

var asian = ["Taiwan, Province of China","New Caledonia","Afghanistan","Armenia","Azerbaijan","Bahrain","Bangladesh","Macao, China","Bhutan","Brunei Darussalam","Cambodia","Hong Kong, China","China","Province of China","Taiwan","East Timor","India","Indonesia","Iran (I.R.)","Iraq","Israel","Palestine","Japan","Jordan","Kazakhstan","Kuwait","Kyrgyzstan","Lao P.D.R.","Lebanon","Malaysia","Maldives","Mongolia","Myanmar","Nepal","DPR Korea","Oman","Pakistan","Philippines","Qatar","Saudi Arabia","Singapore","Korea (Rep.)","Sri Lanka","Syria","Timor-Leste","Tajikistan","Thailand","Turkey","Turkmenistan","United Arab Emirates","Uzbekistan","Viet Nam","Yemen"]

var europan = ["Albania","Guernsey","Jersey","Andorra","Austria","Belarus","Belgium","Bosnia and Herzegovina","Falkland (Malvinas) Is.","Bulgaria","Croatia","Cyprus","Czech Republic","Denmark","Estonia","Finland","France","Georgia","Germany","Greece","Hungary","Iceland","Faroe Islands","Ireland","Italy","Latvia","Gibraltar","Liechtenstein","Lithuania","Luxembourg","TFYR Macedonia","Malta","Moldova","Monaco","Montenegro","Netherlands","Norway","Poland","Portugal","Romania","Russian Federation","San Marino","Serbia","Slovakia","Slovenia","Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom"]

var oceanian = ["Australia","French Polynesia","Niue","New Zealand","Fiji","Papua New Guinea","Solomon Islands","Vanuatu","Kiribati","Marshall Islands","Micronesia","Nauru","Palau","Wallis and Futuna","Cocos Keeling Islands","Samoa","Tonga","Tuvalu","Palaos","Niue","Tokelau"]

var paddingObjet = {
          top:20,
          left:90,
          bottom:60,
          right:30
        };

var svg = d3.select("body")
                .append("svg")
                .attr("width", width+paddingObjet.left+paddingObjet.right)
                .attr("height", height+paddingObjet.top+paddingObjet.bottom);

var dateFormat =d3.time.format("%Y");
        var xScale = d3.time.scale().range([0,width]);
        var yScale = d3.scale.linear().range([height,0]);

var xAxisFunction = d3.svg.axis().scale(xScale).orient("bottom").ticks(15).tickFormat(function(d){return dateFormat(d)});

var xAxisBFunction = d3.svg.axis().scale(xScale).orient("top").ticks(15).tickFormat(function(d){return dateFormat(d)});

var yAxisFunction = d3.svg.axis().scale(yScale).orient("left").ticks(15).tickFormat(function(d){return d+"%"});

var yAxisBFunction = d3.svg.axis().scale(yScale).orient("right").ticks(15).tickFormat(function(d){return d+"%"});

var linea= d3.svg.line()
            //.interpolate("step-after")
            .x(function(d){ return paddingObjet.left+xScale(dateFormat.parse(d.year))})
            .y(function(d){ return paddingObjet.top+yScale(d.value)});

var colorScale=d3.scale.ordinal();

d3.csv("IndividualsInternet_2000-2014datosmúltipleshorizontal.csv", function(source){
          console.log("1. Fuentes de datos original: ", source);

var datasetObject={};
          var dataForDomainX=[];
          var dataForDomainY=[];

dataset = source.forEach(function(sourceItem){
            dataForDomainX.push(sourceItem["Anos"])
            for(var countryCandidate in sourceItem)
              if (countryCandidate !="Anos") {
                if (datasetObject[countryCandidate]==undefined) {
                  datasetObject[countryCandidate]= []
          }
          dataForDomainY.push(sourceItem[countryCandidate])
          datasetObject[countryCandidate].push({year:sourceItem["Anos"],value:sourceItem[countryCandidate]})
          }
        });
        console.log("2. Objetos con atribustos por país y matriz con duplas valores año ",datasetObject);

var dataset=[]
        for(var datasetKey in datasetObject) {
          dataset.push({id:datasetKey,values:datasetObject[datasetKey]})
        };
        console.log("3. Matriz con la dupla por país id y Matriz por valores", dataset);

xScale.domain(d3.extent(dataForDomainX,function(d,i) {return dateFormat.parse(d)}));

yScale.domain([0,d3.max(dataForDomainY,function(d,i) {return +d})]);

//colorScale= d3.scale.category20c();

itemlines=d3.select("svg").selectAll(".item-line").data(dataset,function(d){return d.id})
            itemlinesenter=itemlines.enter().append("g").attr("class","item-line")
                 .on("click",function(d) {
                  var isSelected = !d3.select(this).classed("selected")
                  d3.select(this).classed("selected",isSelected)
                });

itemlinesenter
                  .append("path")
                  .classed("america",function(d){
                    if (american.indexOf(d.id)!=-1){
                      return true;
                    } else {
                      return false
                    }
                  })
                  .classed("african",function(d){
                    if (african.indexOf(d.id)!=-1){
                      return true;
                    } else {
                      return false
                    }
                  })
                  .classed("asian",function(d){
                    if (asian.indexOf(d.id)!=-1){
                      return true;
                    } else {
                      return false
                    }
                  })
                  .classed("europan",function(d){
                    if (europan.indexOf(d.id)!=-1){
                      return true;
                    } else {
                      return false
                    }
                  })
                  .classed("oceanian",function(d){
                    if (oceanian.indexOf(d.id)!=-1){
                      return true;
                    } else {
                      return false
                    }
                  })
                  .attr("d",function(d){
                    return linea(d.values); })
                  .append("title")
                  .text(function(d,i){
                    return d.id});

svg.append("g")
              .attr("class","x axis")
              .attr("transform","translate("+paddingObjet.left+","+(paddingObjet.top+height)+")")
              .call(xAxisFunction);

svg.append("g")
              .attr("class","y axis")
              .attr("transform","translate("+(paddingObjet.left)+","+paddingObjet.top+")")
              .call(yAxisFunction);

svg.append("g")
                .attr("class","x axis")
                .attr("transform","translate("+(paddingObjet.left)+","+paddingObjet.top+")")
                .call(xAxisBFunction);

svg.append("g")
                .attr("class","y axis")
                .attr("transform","translate("+(paddingObjet.right+width+60)+","+paddingObjet.top+")")
                .call(yAxisBFunction);
        });

</script>
<ul>
  <li style="color:#ff7f0e">África</li>
  <li style="color:#d62728">América</li>
  <li style="color:#9467bd">Asia</li>
  <li style="color:#1f77b4">Europa</li>
  <li style="color:#2ca02c">Oceanía</li>
  <li style="color:#8c564b">Territorio de ultramar</li>
</ul>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js