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 {
position: relative;
width: 960px;
}
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;
}
.y.axis text{
font-family: sans-serif;
font-size: 11px;
}
.2.axis text{
font-family: sans-serif;
font-size: 15px;
}
.item-line{
stroke:steelblue;
stroke-width:2;
fill:none;
}
.item-line :hover{
stroke:black;
stroke-width:10;
}
.x.axis {
stroke-width:2;
}
</style>
</head>
<body>
<H1>Porcentajes, suscriptores de internet en el mundo</H1>
<p>
Esta información es un total de 222 paises, entre el año 2000 y el año 2014. 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 width = 800
var height = 600
var paddingObjet = {
top:20,
left:90,
bottom:60,
right:30
}
var svg = d3.select("body")
.append("svg")
.attr("width", width+paddingObjet.left+paddingObjet.right)
.attr("height", height+paddingObjet.top+paddingObjet.bottom)
var dateFormat =d3.time.format("%Y")
var xScale = d3.time.scale().range([0,width])
var yScale = d3.scale.linear().range([height,0])
var xAxisFunction = d3.svg.axis().scale(xScale).orient("bottom").ticks(15).tickFormat(function(d){return dateFormat(d)});
var xAxisBFunction = d3.svg.axis().scale(xScale).orient("top").ticks(15).tickFormat(function(d){return dateFormat(d)});
var yAxisFunction = d3.svg.axis().scale(yScale).orient("left").ticks(15).tickFormat(function(d){return d+"%"});
var yAxisBFunction = d3.svg.axis().scale(yScale).orient("right").ticks(15).tickFormat(function(d){return d+"%"});
var linea= d3.svg.line()
//.interpolate("step-after")
.x(function(d){ return paddingObjet.left+xScale(dateFormat.parse(d.year))})
.y(function(d){ return paddingObjet.top+yScale(d.value)})
var colorScale=d3.scale.ordinal()
d3.csv("IndividualsInternet_2000-2014datosmúltipleshorizontal.csv", function(source){
console.log("1. Fuentes de datos original: ", source);
var datasetObject={}
var dataForDomainX=[]
var dataForDomainY=[]
dataset = source.forEach(function(sourceItem){
dataForDomainX.push(sourceItem["Anos"])
for(var countryCandidate in sourceItem)
if (countryCandidate !="Anos") {
if (datasetObject[countryCandidate]==undefined) {
datasetObject[countryCandidate]= []
}
dataForDomainY.push(sourceItem[countryCandidate])
datasetObject[countryCandidate].push({year:sourceItem["Anos"],value:sourceItem[countryCandidate]})
}
})
console.log("2. Objetos con atribustos por país y matriz con duplas valores año ",datasetObject)
var dataset=[]
for(var datasetKey in datasetObject) {
dataset.push({id:datasetKey,values:datasetObject[datasetKey]})
}
console.log("3. Matriz con la dupla por país id y Matriz por valores", dataset);
xScale.domain(d3.extent(dataForDomainX,function(d,i) {return dateFormat.parse(d)}))
yScale.domain([0,d3.max(dataForDomainY,function(d,i) {return +d})])
colorScale= d3.scale.category20c();
itemlines=d3.select("svg").selectAll(".item-line").data(dataset,function(d){return d.id})
itemlinesenter=itemlines.enter().append("g").attr("class","item-line")
itemlinesenter
.append("path")
.attr("stroke",function(d){return colorScale(d.id)})
.attr("d",function(d){
return linea(d.values);
})
.append("title")
.text(function(d,i){
return d.id
})
svg.append("g")
.attr("class","x axis")
.attr("transform","translate("+paddingObjet.left+","+(paddingObjet.top+height)+")")
.call(xAxisFunction)
svg.append("g")
.attr("class","y axis")
.attr("transform","translate("+(paddingObjet.left)+","+paddingObjet.top+")")
.call(yAxisFunction)
svg.append("g")
.attr("class","x axis")
.attr("transform","translate("+(paddingObjet.left)+","+paddingObjet.top+")")
.call(xAxisBFunction)
svg.append("g")
.attr("class","y axis")
.attr("transform","translate("+(paddingObjet.right+width+60)+","+paddingObjet.top+")")
.call(yAxisBFunction)
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js