Last active
February 26, 2016 19:53
-
-
Save Pacsangon/8c209e0acd6aec88474a to your computer and use it in GitHub Desktop.
intento de replicar el ejercico 2 de la semana 6: plot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment