Skip to content

Instantly share code, notes, and snippets.

@Pacsangon
Last active February 26, 2016 19:53
Show Gist options
  • Save Pacsangon/8c209e0acd6aec88474a to your computer and use it in GitHub Desktop.
Save Pacsangon/8c209e0acd6aec88474a to your computer and use it in GitHub Desktop.
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="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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment