Suscriptores de internet en líneas

<!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;
    }
    
    .item-line{
      stroke:steelblue;
      stroke-width:2;
      fill:none;
    }

.item-line :hover{
      stroke:black;
      stroke-width:10;
    }

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

</style>
</head>
<body>
<H1>Porcentajes, suscriptores de internet en el mundo</H1>
<p>
  Esta información es un total de 222 paises, 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 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")
            itemlinesenter
              .append("path")
              .attr("stroke",function(d){return colorScale(d.id)})
              .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>

</body>
</html>

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