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
}
</style>
</head>
<body>
<H2>Generando objetos svg con d3, usando los datos</H2>
<svg width="800px" height="800px"></svg>
<script>
var widthBars = d3.scale.linear().range([0,300])
var heightBars = d3.scale.ordinal().rangeBands([0,400],0.2)
d3.csv("IndividualsInternet_0014b.csv", function(datafromCSV){
datafromCSV.sort(function(a,b){
return d3.ascending(+a.y2000,+b.y2000);
});
widthBars.domain([0,d3.max(datafromCSV,function(d,i) {return d.y2000})])
heightBars.domain(d3.range(datafromCSV.length))
var item = d3.select("svg").selectAll("rect").data(datafromCSV)
item.enter().append("rect")
.attr("x",10)
.attr("y",function(d,i) {
return heightBars(i)
})
.attr("width", function (d) {
return widthBars(d.y2000)
})
.attr("height",heightBars.rangeBand());
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js