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
}
.axis path,
.axis line{
fill:none;
stroke:black;
shape-rendering:crispEdges;
}
.axis text{
font-family: sans-serif;
font-size: 11px;
}
rect{
fill:steelblue;
}
rect:hover{
fill:orange;
}
.y.axis path {
stroke:none;
}
.y.axis line {
stroke:none;
}
.x.axis {
stroke-width:2;
}
</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 widthBars = d3.scale.linear().range([0,anchografico])
var heightBars = d3.scale.ordinal().rangeBands([paddingObjet.top,paddingObjet.top+alturagrafico],0.4)
var xAxisFunction = d3.svg.axis().scale(widthBars).orient("bottom")
var yAxisFunction = d3.svg.axis().scale(heightBars).orient("left")
d3.csv("IndividualsInternet_0014b.csv", function(datafromCSV){
datafromCSV.sort(function(a,b){
return d3.descending(+a.y2000,+b.y2000);
});
widthBars.domain([0,d3.max(datafromCSV,function(d,i) {return parseFloat(d.y2000)})])
heightBars.domain(datafromCSV.map(function(d,i){ return d.Paises}))
var item = d3.select("svg").selectAll("rect").data(datafromCSV)
item.enter().append("rect")
.attr("x",paddingObjet.left)
.attr("y",function(d,i) {
return heightBars(d.Paises)
})
.attr("width", function (d) {
return widthBars(d.y2000)
})
.attr("height",heightBars.rangeBand())
.append("title")
.text(function(d){
return d.Paises+" tiene "+ d.y2000+" 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)+",0)")
.call(yAxisFunction)
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js