xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>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: #EEE
}
svg {
background-color: #FFF
}
rect {
fill:green
}
</style>
</head>
<body>
<H1>Porcentaje de suscriptores a Internet en el años 2000</H1>
<svg width="2000px" height="2000px"></svg>
<script>
d3.csv("IndividualsInternet_0014b.csv", function(datafromCSV){
datafromCSV.sort(function(a,b){
return d3.descending(parseFloat(a.y2000),parseFloat(b.y2000));
});
var item = d3.select("svg").selectAll("rect").data(datafromCSV)
item.enter().append("rect")
.attr("x",5)
.attr("y",function(d,i) {
console.log("____________________________")
console.log("Este es ",this)
console.log("d es ", d)
console.log("i es ", i)
console.log("____________________________")
return i *10
})
.attr("width", function (d) {
return d.y2000 * 10
})
.attr("height", 8)
.append("title")
.text(function(d){
return d.Paises+" tiene: "+d.y2000+ "% de suscriptores en el año 2000."
});
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js