mirror of
https://github.com/medialab-prado/poblados-colonizacion-colonias-penitenciarias.git
synced 2024-12-27 04:51:22 +01:00
120 lines
3.3 KiB
Text
120 lines
3.3 KiB
Text
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Longitud redes hidráulicas (kms) por cuenca hidrográfica</title>
|
||
|
|
<style>
|
||
|
|
#xaxis .domain {
|
||
|
|
fill:none;
|
||
|
|
stroke:#000;
|
||
|
|
}
|
||
|
|
#xaxis text, #yaxis text {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="wrapper">
|
||
|
|
</div>
|
||
|
|
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
|
||
|
|
<script>
|
||
|
|
var categories= ['','Accessories', 'Audiophile', 'Camera & Photo', 'Cell Phones', 'Computers','eBook Readers','Gadgets','GPS & Navigation','Home Audio','Office Electronics','Portable Audio','Portable Video','Security & Surveillance','Service','Television & Video','Car & Vehicle'];
|
||
|
|
|
||
|
|
var dollars = [213,209,190,179,156,209,190,179,213,209,190,179,156,209,190,190];
|
||
|
|
|
||
|
|
var colors = ['#0000b4','#0082ca','#0094ff','#0d4bcf','#0066AE','#074285','#00187B','#285964','#405F83','#416545','#4D7069','#6E9985','#7EBC89','#0283AF','#79BCBF','#99C19E'];
|
||
|
|
|
||
|
|
var grid = d3.range(25).map(function(i){
|
||
|
|
return {'x1':0,'y1':0,'x2':0,'y2':480};
|
||
|
|
});
|
||
|
|
|
||
|
|
var tickVals = grid.map(function(d,i){
|
||
|
|
if(i>0){ return i*10; }
|
||
|
|
else if(i===0){ return "100";}
|
||
|
|
});
|
||
|
|
|
||
|
|
var xscale = d3.scale.linear()
|
||
|
|
.domain([10,250])
|
||
|
|
.range([0,722]);
|
||
|
|
|
||
|
|
var yscale = d3.scale.linear()
|
||
|
|
.domain([0,categories.length])
|
||
|
|
.range([0,480]);
|
||
|
|
|
||
|
|
var colorScale = d3.scale.quantize()
|
||
|
|
.domain([0,categories.length])
|
||
|
|
.range(colors);
|
||
|
|
|
||
|
|
var canvas = d3.select('#wrapper')
|
||
|
|
.append('svg')
|
||
|
|
.attr({'width':900,'height':550});
|
||
|
|
|
||
|
|
var grids = canvas.append('g')
|
||
|
|
.attr('id','grid')
|
||
|
|
.attr('transform','translate(150,10)')
|
||
|
|
.selectAll('line')
|
||
|
|
.data(grid)
|
||
|
|
.enter()
|
||
|
|
.append('line')
|
||
|
|
.attr({'x1':function(d,i){ return i*30; },
|
||
|
|
'y1':function(d){ return d.y1; },
|
||
|
|
'x2':function(d,i){ return i*30; },
|
||
|
|
'y2':function(d){ return d.y2; },
|
||
|
|
})
|
||
|
|
.style({'stroke':'#adadad','stroke-width':'1px'});
|
||
|
|
|
||
|
|
var xAxis = d3.svg.axis();
|
||
|
|
xAxis
|
||
|
|
.orient('bottom')
|
||
|
|
.scale(xscale)
|
||
|
|
.tickValues(tickVals);
|
||
|
|
|
||
|
|
var yAxis = d3.svg.axis();
|
||
|
|
yAxis
|
||
|
|
.orient('left')
|
||
|
|
.scale(yscale)
|
||
|
|
.tickSize(2)
|
||
|
|
.tickFormat(function(d,i){ return categories[i]; })
|
||
|
|
.tickValues(d3.range(17));
|
||
|
|
|
||
|
|
var y_xis = canvas.append('g')
|
||
|
|
.attr("transform", "translate(150,0)")
|
||
|
|
.attr('id','yaxis')
|
||
|
|
.call(yAxis);
|
||
|
|
|
||
|
|
var x_xis = canvas.append('g')
|
||
|
|
.attr("transform", "translate(150,480)")
|
||
|
|
.attr('id','xaxis')
|
||
|
|
.call(xAxis);
|
||
|
|
|
||
|
|
var chart = canvas.append('g')
|
||
|
|
.attr("transform", "translate(150,0)")
|
||
|
|
.attr('id','bars')
|
||
|
|
.selectAll('rect')
|
||
|
|
.data(dollars)
|
||
|
|
.enter()
|
||
|
|
.append('rect')
|
||
|
|
.attr('height',19)
|
||
|
|
.attr({'x':0,'y':function(d,i){ return yscale(i)+19; }})
|
||
|
|
.style('fill',function(d,i){ return colorScale(i); })
|
||
|
|
.attr('width',function(d){ return 0; });
|
||
|
|
|
||
|
|
|
||
|
|
var transit = d3.select("svg").selectAll("rect")
|
||
|
|
.data(dollars)
|
||
|
|
.transition()
|
||
|
|
.duration(1000)
|
||
|
|
.attr("width", function(d) {return xscale(d); });
|
||
|
|
|
||
|
|
var transitext = d3.select('#bars')
|
||
|
|
.selectAll('text')
|
||
|
|
.data(dollars)
|
||
|
|
.enter()
|
||
|
|
.append('text')
|
||
|
|
.attr({'x':function(d) {return xscale(d)-200; },'y':function(d,i){ return yscale(i)+35; }})
|
||
|
|
.text(function(d){ return d+"$"; }).style({'fill':'#fff','font-size':'14px'});
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|