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;
}
circle{
fill:steelblue;
}
circle:hover {
fill:orange;
}
.item-line{
stroke:#8c564b;
stroke-width:2;
fill:none;
}
.item-line :hover{
stroke: #8c564b;
stroke-width:8;
}
.x.axis {
stroke-width:2;
}
.item-line.selected {
stroke-width:15px;
stroke:#8c564b;
}
.item-line path.america {
stroke: #d62728;
}
.item-line path.asian {
stroke: #9467bd;
}
.item-line path.african {
stroke: #ff7f0e;
}
.item-line path.europan {
stroke: #1f77b4;
}
.item-line path.oceanian {
stroke: #2ca02c;
}
;
</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 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 african= ["Algeria","Guinea-Bissau","Angola","Benin","Botswana","Burkina Faso","Burundi","Cameroon","Cape Verde","Chad","Comoros","Congo (Rep.)","Congo (Dem. Rep.)","Central African Rep.","Côte d'Ivoire","Djibouti","Egypt","Equatorial Guinea","Eritrea","Ethiopia","Gabon","The Gambia","Ghana","Guinea","Guinea","Kenya","Lesotho","Liberia","Libya","Madagascar","Malawi","Mali","S Tomé & Principe","Mauritania","Mauritius","Morocco","Mayotte","Mozambique","Namibia","Niger","Nigeria","Rwanda","S. Tomé & Principe","Senegal","Seychelles","Sierra Leone","Somalia","South Africa","South Sudan","Sudan","Swaziland","Tanzania","Togo","Tunisia","Uganda","Zambia","Zimbabwe"]
var american = ["Aruba","Guam","St. Kitts and Nevis","Anguilla","American Samoa","Canada","Greenland","Mexico","United States","Antigua & Barbuda","Barbados","Belize","Costa Rica","Cuba","Cayman Islands","St. Vincent and the Grenadines","British Virgin Islands","Virgin Islands (US)","Dominica","Dominican Rep.","El Salvador","Bermuda","Grenada","Guatemala","Haiti","Honduras","Jamaica","Nicaragua","Panama","Puerto Rico","St. Lucia","Montserrat","Saint Vincent and the Grenadines","Trinidad & Tobago","Argentina","Bolivia","Brazil","Chile","Colombia","Ecuador","Bahamas","French Guiana","Guyana","Paraguay","Peru","Suriname","Uruguay","St Lucia","Venezuela"]
var asian = ["Taiwan, Province of China","New Caledonia","Afghanistan","Armenia","Azerbaijan","Bahrain","Bangladesh","Macao, China","Bhutan","Brunei Darussalam","Cambodia","Hong Kong, China","China","Province of China","Taiwan","East Timor","India","Indonesia","Iran (I.R.)","Iraq","Israel","Palestine","Japan","Jordan","Kazakhstan","Kuwait","Kyrgyzstan","Lao P.D.R.","Lebanon","Malaysia","Maldives","Mongolia","Myanmar","Nepal","DPR Korea","Oman","Pakistan","Philippines","Qatar","Saudi Arabia","Singapore","Korea (Rep.)","Sri Lanka","Syria","Timor-Leste","Tajikistan","Thailand","Turkey","Turkmenistan","United Arab Emirates","Uzbekistan","Viet Nam","Yemen"]
var europan = ["Albania","Guernsey","Jersey","Andorra","Austria","Belarus","Belgium","Bosnia and Herzegovina","Falkland (Malvinas) Is.","Bulgaria","Croatia","Cyprus","Czech Republic","Denmark","Estonia","Finland","France","Georgia","Germany","Greece","Hungary","Iceland","Faroe Islands","Ireland","Italy","Latvia","Gibraltar","Liechtenstein","Lithuania","Luxembourg","TFYR Macedonia","Malta","Moldova","Monaco","Montenegro","Netherlands","Norway","Poland","Portugal","Romania","Russian Federation","San Marino","Serbia","Slovakia","Slovenia","Spain","Sweden","Switzerland","Turkey","Ukraine","United Kingdom"]
var oceanian = ["Australia","French Polynesia","Niue","New Zealand","Fiji","Papua New Guinea","Solomon Islands","Vanuatu","Kiribati","Marshall Islands","Micronesia","Nauru","Palau","Wallis and Futuna","Cocos Keeling Islands","Samoa","Tonga","Tuvalu","Palaos","Niue","Tokelau"]
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")
.on("click",function(d) {
var isSelected = !d3.select(this).classed("selected")
d3.select(this).classed("selected",isSelected)
});
itemlinesenter
.append("path")
.classed("america",function(d){
if (american.indexOf(d.id)!=-1){
return true;
} else {
return false
}
})
.classed("african",function(d){
if (african.indexOf(d.id)!=-1){
return true;
} else {
return false
}
})
.classed("asian",function(d){
if (asian.indexOf(d.id)!=-1){
return true;
} else {
return false
}
})
.classed("europan",function(d){
if (europan.indexOf(d.id)!=-1){
return true;
} else {
return false
}
})
.classed("oceanian",function(d){
if (oceanian.indexOf(d.id)!=-1){
return true;
} else {
return false
}
})
.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>
<ul>
<li style="color:#ff7f0e">África</li>
<li style="color:#d62728">América</li>
<li style="color:#9467bd">Asia</li>
<li style="color:#1f77b4">Europa</li>
<li style="color:#2ca02c">Oceanía</li>
<li style="color:#8c564b">Territorio de ultramar</li>
</ul>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js