Pacsangon/IndividualsInternet_2000-2014tablavertical.csv

## index.html
<!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="http://www.itu.int/en/ITU-D/Statistics/Pages/stat/default.aspx">ITU,</a>
</p>

    <script>
        var anchografico = 500
        var alturagrafico = 300
        var paddingObjet = {
          top:100,
          left:150,
          bottom:60,
          right:20
        }
        var svg = d3.select("body")
                .append("svg")
                .attr("width", anchografico+paddingObjet.left+paddingObjet.right)
                .attr("height", alturagrafico+paddingObjet.top+paddingObjet.bottom)
        var dateFormat =d3.time.format("%Y")
        var xScale = d3.time.scale().range([0,anchografico])
        var yScale = d3.scale.linear().range([alturagrafico,0])

        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>

## IndividualsInternet_2000-2014tablavertical.csv

          
            Anos
            CostaRica

            
              2000
              5.80

            
              2001
              9.56

            
              2002
              19.89

            
              2003
              20.33

            
              2004
              20.79

            
              2005
              22.07

            
              2006
              25.10

            
              2007
              28.40

            
              2008
              32.29

            
              2009
              34.33

            
              2010
              36.50

            
              2011
              39.21

            
              2012
              47.50

            
              2013
              45.96

            
              2014
              49.41
	<!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="http://www.itu.int/en/ITU-D/Statistics/Pages/stat/default.aspx">ITU,</a>
	</p>

	<script>
	var anchografico = 500
	var alturagrafico = 300
	var paddingObjet = {
	top:100,
	left:150,
	bottom:60,
	right:20
	}
	var svg = d3.select("body")
	.append("svg")
	.attr("width", anchografico+paddingObjet.left+paddingObjet.right)
	.attr("height", alturagrafico+paddingObjet.top+paddingObjet.bottom)
	var dateFormat =d3.time.format("%Y")
	var xScale = d3.time.scale().range([0,anchografico])
	var yScale = d3.scale.linear().range([alturagrafico,0])

	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>
	Anos	CostaRica
	2000	5.80
	2001	9.56
	2002	19.89
	2003	20.33
	2004	20.79
	2005	22.07
	2006	25.10
	2007	28.40
	2008	32.29
	2009	34.33
	2010	36.50
	2011	39.21
	2012	47.50
	2013	45.96
	2014	49.41