Skip to content

Instantly share code, notes, and snippets.

@VictorVelarde
Last active January 28, 2016 17:10
Show Gist options
  • Save VictorVelarde/e3cae70a4fe644b030e9 to your computer and use it in GitHub Desktop.
Save VictorVelarde/e3cae70a4fe644b030e9 to your computer and use it in GitHub Desktop.
D3 - Pirámide de graduados
height: 800
scrolling: yes

Una pirámide hecha con D3, mostrando el número de graduados hombres / mujeres por carrera, en la Universidad de Cantabria

1. Preparación

  • Origen de los datos: fichero pdf en la Web de UNICAN
  • Conversión, de .pdf a .xls, con https://pdftables.com
  • Conversión .xls a .csv con Excel
  • Pruebas de visualización rapida (en el propio Excel)

2. Visualización web, con D3

  • Uso simple de escala lineal y valores negativos, para efecto 'piramide'
  • Ordenación de elementos SVG mediante función seleccionable (total | hombres | mujeres)
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<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>
Ranking Carrera Hombres Mujeres Categoria
25 Ingeniería Eléctrica 4 0 INGENIERÍA Y ARQUITECTURA
24 Ingeniería Electrónica Industrial y Automática 3 1 INGENIERÍA Y ARQUITECTURA
23 Ingeniería Marina 4 1 INGENIERÍA Y ARQUITECTURA
22 Matemáticas 2 5 CIENCIAS
21 Ingeniería Mecánica 8 0 INGENIERÍA Y ARQUITECTURA
20 Ingeniería Marítima 7 4 INGENIERÍA Y ARQUITECTURA
19 Geografía y Ordenación del Territorio 5 7 CIENCIAS SOCIALES Y JURÍDICAS
18 Ingeniería de los Recursos Mineros 11 4 INGENIERÍA Y ARQUITECTURA
17 Física 11 6 CIENCIAS
16 Ingeniería Náutica y Transporte Marítimo 15 2 INGENIERÍA Y ARQUITECTURA
15 Ingeniería Informática 13 5 INGENIERÍA Y ARQUITECTURA
14 Historia 10 11 ARTE Y HUMANIDADES
13 Ingeniería de los Recursos Energéticos 15 6 INGENIERÍA Y ARQUITECTURA
12 Relaciones Laborales 9 20 CIENCIAS SOCIALES Y JURÍDICAS
11 Economía 16 16 CIENCIAS SOCIALES Y JURÍDICAS
10 Ingeniería en Tecnologías Industriales 28 9 INGENIERÍA Y ARQUITECTURA
9 Ingeniería de Tecnologías de Telecomunicación 32 6 INGENIERÍA Y ARQUITECTURA
8 Ingeniería Química 14 27 INGENIERÍA Y ARQUITECTURA
7 Derecho 12 40 CIENCIAS SOCIALES Y JURÍDICAS
6 Enfermería 11 62 CIENCIAS DE LA SALUD
5 Medicina 36 53 CIENCIAS DE LA SALUD
4 Magisterio de Educación Infantil 7 94 CIENCIAS SOCIALES Y JURÍDICAS
3 Administración y Dirección de Empresas 54 62 CIENCIAS SOCIALES Y JURÍDICAS
2 Ingeniería Civil 97 43 INGENIERÍA Y ARQUITECTURA
1 Magisterio de Educación Primaria 45 121 CIENCIAS SOCIALES Y JURÍDICAS
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment