intento de replicar el ejercico 2 de la semana 6: plot

<!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{
        background-color: #fff
    }
    h1{
      text-align:center;
    }

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

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

.axis line{
      fill:none;
      stroke:#9A9898;
      shape-rendering:crispEdges;
    }

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

circle:hover{
      fill:orange;
    }

.x.axis {
      stroke-width:2;
    }
    .c {
      background-color:#FF6347;
    }
    .s{
      background-color:#008000;
    }
</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 al año 2000. 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 xAxisFunction = d3.svg.axis().scale(xScale).orient("bottom").ticks(15).tickFormat(function(d){return dateFormat(d)});

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

d3.csv("IndividualsInternet_2000-2014tablavertical.csv", function(datafromCSV){
            console.log("estos son mis datos: ",datafromCSV);;
            datafromCSV.sort(function(a,b){
                return d3.descending(+a.Anos,+b.Anos);
            });

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

yScale.domain(d3.extent(datafromCSV,function(d,i) {return parseFloat(d.CostaRica)}))

var item = d3.select("svg").selectAll("circle").data(datafromCSV)

item.enter().append("circle")
                .attr("cx",function(d,i){ return paddingObjet.left+xScale(dateFormat.parse(d.Anos))})
                .attr("cy",function(d,i){return paddingObjet.top+yScale(d.CostaRica)})
                .attr("r", "4px")
                .attr("fill","#0000CD")
                .append("title")
                .text(function(d){
                  return "En el año "+d.Anos+" Costa Rica tiene "+ d.CostaRica+" porciento de suscriptores."
                });;

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

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

</script>
    <h2>Orden ascendente</h2>
    <p class="c">
      2000
    </p>
    <p class="s">
      2014
    </p>
</body>
</html>

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