|
<html> |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans|Dosis:400,800" rel="stylesheet" type="text/css" /> |
|
<style> |
|
/* General */ |
|
|
|
h1 { |
|
font-family: 'Dosis', sans-serif; |
|
font-weight: 400; |
|
font-size: 40px; |
|
line-height: 46px; |
|
margin-bottom: 0px; |
|
color: #E50275; |
|
} |
|
|
|
h3 { |
|
font-family: 'Dosis', sans-serif; |
|
font-weight: 400; |
|
margin-top: 10px; |
|
margin-left: 30px; |
|
} |
|
|
|
body { |
|
font-family: 'Open Sans', sans-serif; |
|
background-color: #F7FBFF; |
|
} |
|
|
|
a { |
|
color: #E50275; |
|
} |
|
/* Estilos del gráfico */ |
|
|
|
.grafico text { |
|
fill: black; |
|
} |
|
|
|
.grafico .barraMujeres { |
|
fill: #C3CE31; |
|
} |
|
|
|
.grafico .barraHombres { |
|
fill: #03A1C4; |
|
} |
|
|
|
.grafico text { |
|
font-size: 12px; |
|
} |
|
|
|
.grafico .etiquetaMujeres { |
|
text-anchor: start; |
|
} |
|
|
|
.grafico .etiquetaHombres { |
|
text-anchor: end; |
|
} |
|
|
|
.grafico .etiquetaCarrera { |
|
text-anchor: start; |
|
font-size: 14px; |
|
} |
|
|
|
.claveHombres { |
|
background-color: #03A1C4; |
|
height: 18px; |
|
width: 25px; |
|
display: inline-block; |
|
margin-right: 5px; |
|
} |
|
|
|
.claveMujeres { |
|
background-color: #C3CE31; |
|
height: 18px; |
|
width: 25px; |
|
display: inline-block; |
|
margin-right: 5px; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
|
|
<h1>Titulados en Estudios de Grado</h1> |
|
<h3>Universidad de Cantabria, 2014/2015</h3> |
|
|
|
<div id="grafico"> |
|
<svg></svg> |
|
<div id="leyenda"> |
|
<div class="claveHombres"></div>Hombres |
|
<div class="claveMujeres"></div>Mujeres |
|
</div> |
|
<div id="ordenacion"> |
|
<h4 style="display:inline-block; margin-right:5px;">Ordenar por nº de estudiantes:</h4> |
|
<a href="javascript:grafico('TOTAL');">Total</a> | |
|
<a href="javascript:grafico('HOMBRES');">Hombres</a> | |
|
<a href="javascript:grafico('MUJERES');">Mujeres</a> |
|
</div> |
|
</div> |
|
|
|
|
|
</div> |
|
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script> |
|
|
|
<script> |
|
var data = []; |
|
|
|
/** Egresados en la UC en el curso 2014-2015 por carrera y sexo */ |
|
d3.csv('UC_Egresados2014_2015.csv', function (datosCSV) { |
|
datosCSV.forEach(function (carrera) { |
|
// Ranking;Carrera;Hombres;Mujeres;Categoria |
|
data.push({ |
|
r: parseInt(carrera.Ranking), |
|
c: carrera.Carrera, |
|
h: parseInt(carrera.Hombres), |
|
m: parseInt(carrera.Mujeres), |
|
t: parseInt(carrera.Hombres) + parseInt(carrera.Mujeres) |
|
}) |
|
}); |
|
grafico('TOTAL'); |
|
}); |
|
|
|
/** Pirámide de egresados */ |
|
function grafico(ordenacion) { |
|
if (ordenacion) { |
|
data = data.sort(function (a, b) { |
|
switch (ordenacion) { |
|
case "TOTAL": |
|
return d3['ascending'](a.r, b.r); |
|
case "HOMBRES": |
|
return d3['descending'](a.h, b.h); |
|
case "MUJERES": |
|
return d3['descending'](a.m, b.m); |
|
} |
|
}); |
|
} |
|
|
|
// Gráfico SVG |
|
var pixelesAncho = 900; |
|
var puntoCentral = pixelesAncho / 3; |
|
var puntoCarreras = puntoCentral * 2 - 50; |
|
var anchoBarra = 18; |
|
var offsetY = 20; |
|
var pixelesAlto = data.length * offsetY + 50; |
|
|
|
var svg = d3.select('#grafico svg') |
|
.attr('height', pixelesAlto) |
|
.attr('width', pixelesAncho) |
|
.attr('class', 'grafico'); |
|
d3.selectAll("svg > *").remove(); |
|
|
|
// Escala x para tamaño de barras |
|
var x = d3.scale |
|
.linear() |
|
.domain([0, 150]) |
|
.range([0, puntoCentral]); |
|
|
|
// Dibujado por carrera |
|
data.forEach(function (d, i) { |
|
dibujarCarrera(d, i); |
|
}); |
|
|
|
function dibujarCarrera(c, posicion) { |
|
var espacioEtiquetasX = 5; |
|
var espacioEtiquetasY = 15; |
|
|
|
// barra mujeres |
|
svg.append('rect') |
|
.attr('x', puntoCentral) |
|
.attr('y', posicion * offsetY) |
|
.attr('width', x(c.m)) |
|
.attr('height', anchoBarra) |
|
.attr('class', 'barraMujeres'); |
|
svg.append('text') |
|
.attr('x', puntoCentral + espacioEtiquetasX) |
|
.attr('y', (posicion * offsetY) + espacioEtiquetasY) |
|
.attr('class', 'etiquetaMujeres') |
|
.text(c.m); |
|
|
|
// barra hombres |
|
svg.append('rect') |
|
.attr('x', puntoCentral - x(c.h)) |
|
.attr('y', posicion * offsetY) |
|
.attr('width', x(c.h)) |
|
.attr('height', anchoBarra) |
|
.attr('class', 'barraHombres'); |
|
svg.append('text') |
|
.attr('x', puntoCentral - espacioEtiquetasX) |
|
.attr('y', (posicion * offsetY) + espacioEtiquetasY) |
|
.attr('class', 'etiquetaHombres') |
|
.text(c.h); |
|
|
|
// carrera |
|
var txt = posicion + 1 + "º. " + c.c; |
|
svg.append('text') |
|
.attr('x', puntoCarreras + espacioEtiquetasX) |
|
.attr('y', (posicion * offsetY) + espacioEtiquetasY) |
|
.attr('class', 'etiquetaCarrera') |
|
.text(txt); |
|
} |
|
|
|
} |
|
</script> |
|
</body> |
|
|
|
</html> |
