xxxxxxxxxx
<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>
<script>
var anchografico = 1000
var alturagrafico = 2000
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 xScale = d3.scale.linear().range([0,anchografico])
var yScale = d3.scale.linear().range([alturagrafico,0])
var xAxisFunction = d3.svg.axis().scale(xScale).orient("bottom").ticks(15);
var yAxisFunction = d3.svg.axis().scale(yScale).orient("left").ticks(15).tickFormat(function(d){return d+"%"});
d3.csv("IndividualsInternet_0014b.csv", function(datafromCSV){
datafromCSV.sort(function(a,b){
return d3.descending(+a.y2000,+b.y2000);
});
xScale.domain(d3.extent(datafromCSV,function(d,i) {return Number.parseFloat(d.y2000)}))
yScale.domain(d3.extent(datafromCSV,function(d,i) {return Number.parseFloat(d.y2014)}))
var item = d3.select("svg").selectAll("circle").data(datafromCSV)
item.enter().append("circle")
.attr("r", "2px")
.attr("fill","#0000CD")
.attr("cx",-100)
.append("title")
.text(function(d){
return d.Paises+" tiene "+ d.y2000+"en el 2000 y "+d.y2014+ " en el 2014 porciento de suscriptores."
});
item.exit().remove()
item
.attr("cy",function(d,i) {
return paddingObjet.top+yScale(d.y2014)
})
.transition().duration(10000)
.attr("cx",function(d,i) {
return paddingObjet.left+xScale(d.y2000)
})
.attr("r","4px")
.attr("fill", "#87CEFA")
item.exit().remove()
item
.sort(function(a,b) {
return d3.ascending(+a.y2000,+b.y2000)
})
.attr("cy",function(d,i) {
return paddingObjet.top+yScale(d.y2014)
})
.attr("cx",function(d,i) {
return paddingObjet.left+xScale(d.y2000)
})
.transition()
.delay(function(d,i) {
return d.y2000*50
})
.duration(20000)
.attr("r","7px")
.attr("fill", "#FF6347")
item.exit().remove()
item
.sort(function(a,b) {
return d3.ascending(+a.y2014,+b.y2014)
})
.attr("cy",function(d,i) {
return paddingObjet.top+yScale(d.y2014)
})
.attr("cx",function(d,i) {
return paddingObjet.left+xScale(d.y2000)
})
.transition()
.delay(function(d,i) {
return d.y2000*100
})
.duration(40000)
.attr("r","9px")
.attr("fill", "#008000")
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