DATOS PERSONALES FIRMA

Nombre: DNI:
Apellidos:

ESTUDIO ASIGNATURA CONVOCATORIA

MÁSTER UNIVERSITARIO EN ANÁLISIS Y 4160102007.- HERRAMIENTAS
VISUALIZACIÓN DE DATOS MASIVOS / VISUAL Ordinaria
ANALYTICS AND BIG DATA (PLAN 2016) DE VISUALIZACIÓN
FECHA MODELO CIUDAD DEL EXAMEN
10-12/07/2020 Modelo - A

Etiqueta identificativa

INSTRUCCIONES GENERALES
1. La duración del examen es de 2 horas.
2. Escribe únicamente con bolígrafo/esfero azul o negro.
3. No está permitido utilizar más hojas de las que te facilita la UNIR (puedes utilizar folios para hacerte
esquemas u organizarte pero se entregarán junto al examen).
4. El examen PRESENCIAL supone el 60% de la calificación final de la asignatura. Es necesario
aprobar el examen, para tener en cuenta la evaluación continua, aunque esta última sí se guardará
para la siguiente convocatoria en caso de no aprobar.
5. No olvides rellenar EN TODAS LAS HOJAS los datos del cuadro que hay en la parte superior con
tus datos personales.
6. El DNI/NIE/PASAPORTE debe estar sobre la mesa y disponible para su posible verificación.
7. Apaga y retira del alcance los teléfonos móviles.
8. Retirar del alcance y visibilidad el smartwatch.
9. Las preguntas se contestarán en CASTELLANO.
10. El profesor tendrá muy en cuenta las faltas de ortografía en la calificación final.

Código de examen: 138272 1

 Puntuación

Preguntas tipo test

Puntuación máxima 4.00 puntos

Ejercicio práctico: D3
Puntuación máxima 4.00 puntos

Ejercicio práctico: Tableau

Puntuación máxima 2.00 puntos

NO UTILIZAR ESTA
PARTE DE LA HOJA

Código de examen: 138272 2

 DATOS PERSONALES FIRMA
Nombre: DNI:
Apellidos:

Contesta a las siguientes preguntas eligiendo la respuesta correcta.

Sólo hay una opción correcta en cada pregunta
Todas las preguntas suman un total de 4 puntos del examen sobre un total de 10.
Una respuestas errónea resta la mitad de la puntuación de una respuesta correcta.
Las preguntas sin contestar no influyen en la nota.
Utiliza la plantilla que tienes al final de las preguntas para reflejar tus respuestas.

1. svg.selectAll("rect")
.data(dataset)
.on("mouseover", function(d) { // Parte 1
d3.select(this)
.style("fill", "red");
})
.on("mouseout", function(){ // Parte 2
d3.select(this)
.style("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
})
¿Qué hace la parte 2?
A. Cuando el usuario quite el ratón de encima el objeto será más o menos azul según los datos
B. Cuando el usuario ponga el ratón de encima el objeto cambiará de color siempre
C. Cuando el usuario quite el ratón por encima el objeto será rojo

NO UTILIZAR ESTA
PARTE DE LA HOJA

Código de examen: 138272 3

2. ¿Qué tipo de gráfica dibuja este código?

svg.selectAll("circle")
.data(datos)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0];
})
.attr("cy", function(d) {
return d[1];
})
.attr("r", 5);
A. un diagrama de dispersión
B. un diagrama de tarta
C. un diagrama de barras

3. Teniendo una estructura de datos sencilla como [3,4,7,8,1] que quisieramos utilizar para hacer un
diagrama de barras con elementos div cambiando el tamaño (altura y ancho) según en valor de los números
de dicha estructura añade el código que falta:

d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
// QUÉ CÓDIGO FALTA AQUÍ
A. style("size", function(d) { return d + "px"; })
B. style("width", function(d) { return d + "px"; }).style("height", function(d) { return d + "px"; })
C. append("width", function(d) { return d + "px"; }).append("height", function(d) { return d + "px"; })

4. En una escala lineal con estos valores:

scale.domain([0,100])
.range([0,10])
A. el valor 50 en los datos correspondería al valor 5
B. el valor 0 en los datos correspondería al valor 100
C. el valor 100 en los datos correspondería al valor 10

5. El rango y dominio de una escala son respectivamente:

A. el rango ser refiere al intervalo de datos de entrada y el dominio a los de salida
B. el dominio ser refiere al intervalo de datos de entrada y el rango a los de salida
C. el rango ser refiere al intervalo de datos de entrada y el dominio a los del dataset

Código de examen: 138272 4

 DATOS PERSONALES FIRMA
Nombre: DNI:
Apellidos:

6. ¿Qué ocurre cuando ejecutas cualquiera de estos códigos? (Son iguales ambos códigos)
.attr("height", function(d) { return d.x })
.attr("height", d => d.x}
A. Poner en el atributo x el valor de height en cada elemento
B. Poner en el atributo height el valor de x de cada elemento
C. Poner en el atributo d el valor de x en cada elemento con height

7. ¿Qué hace la línea 4?

svg.selectAll("rect")
.data(data) // línea 1
.enter() // línea 2
.append("rect") // línea 3
.attr("x", function(d, i) { // línea 4
return i * (w / dataset.length);
})
.attr("y", 0) // línea 5
.attr("width", w / dataset.length - 1) // línea 6
.attr("height", function(d) { // línea 7
return d;
});
A. Posiciona verticalmente los elementos en proporción a w
B. Posiciona horizontalmente los elementos en proporción a w
C. Hace los elementos más altos según su posición en el dataset (i)

8. ¿Cómo puedes hacer desvanecer (fade-out) un elemento?

A. .transition().style("intensity", 0)
B. .transition().style("color", "invisible")
C. .transition().style("opacity", 0)

9. La acción `d3.select("body").append("p").text("hola") necesita que en html

A. Exista la etiqueta p para añadir el texto hola
B. Exista la clase p
C. No importa si existe la clase p

Código de examen: 138272 5

10. Si se solicita que el tamaño de cada círculo se incremente de abajo hacia arriba (arriba serían más
grandes y abajo más pequeños) qué código deberías poner en la última línea

svg.selectAll("circle")
.data(datos)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0];
})
.attr("cy", function(d) {
return d[1];
})
.attr("r", 5); // SUSTITUIR ESTA LÍNEA
A. .attr("r", function(d) { return d[0] })
B. .attr("r", function(d) { return d[1] })
C. .attr("r", function(d) { return 100-d[0] })

11. ¿Qué hace el siguiente código "function (d, i) {return i * 40 + "px"; })" de D3 ?
A. Aplica una animación del 40% a todos los elementos del gráfico
B. Coloca cada elemento a 40 mm del anterior
C. Calcula el 40% de cada valor de los datos
D. Hace un cálculo dependiendo del lugar de un dato en su array

12. En este hueco: .select("circle").attr("r", _____) debe haber...

A. un color
B. un color para el borde
C. una longitud (px o similar)

13. ¿Cuáles son los dos métodos que acompañan a scale() en D3 para definir una escala?
A. domain y range
B. domain y style
C. selectall y range
D. style y range

NO UTILIZAR ESTA
PARTE DE LA HOJA

Código de examen: 138272 6

 DATOS PERSONALES FIRMA
Nombre: DNI:
Apellidos:

14. La creación del siguiente objeto Data Table en Google Spreedsheets es necesaria para...

var data = new google.visualization.DataTable();

data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
A. la visualización de una tabla con dichos datos
B. cualquier tipo de visualización
C. solo visualizaciones de tipo barra

15. El binding o join de d3 consiste en

A. en añadir/cruzar información de tu dataset con los elementos HTML
B. añadir elementos nuevos a la visualización
C. eliminar elementos antiguos de la visualización

NO UTILIZAR ESTA
PARTE DE LA HOJA

Código de examen: 138272 7

 PLANTILLA DE RESPUESTAS
Preguntas / Opciones A B C D

10

11

12

13

14

15

NO UTILIZAR ESTA
PARTE DE LA HOJA

Código de examen: 138272 8

 DATOS PERSONALES FIRMA
Nombre: DNI:
Apellidos:

Recuerda que los errores sintácticos leves (falta de comas, paréntesis inconsistentes, etc) no se tienen en
cuenta en la evaluación.
Tampoco se consideran los errores tipográficos sencillos.
Esto no quiere decir que no se tenga que respetar la sintaxis. El código javascript que se escriba debe ser
correcto y lo más completo posible.
Puedes apoyarte de comentarios si lo consideras oportuno.

1. Escribe el código necesario para crear un diagrama de barras, la altura de cada barra está calculada con
la variable x del dataset (no hace falta escala).

Cada barra representa un grupo (ver más abajo)

Cuando el usuario pulse con el ratón (o haga click) sobre uno de las barras esa barra debe cambiar de
color.

La estructura de datos es la siguiente: [{ "x": 1000, "grupo": "aguilas" }, ...]

Código de examen: 138272 9

 NO UTILIZAR ESTA
PARTE DE LA HOJA

Código de examen: 138272 10

 DATOS PERSONALES FIRMA
Nombre: DNI:
Apellidos:

Describe cómo realizarías la visualización que se propone paso a paso en Tableau.

Justifica tus acciones relacionándolo con lo que se solicita en el enunciado.

1. Explica las relaciones entre variables y propiedades visuales (tamaño, ángulo, filas, columnas….)
necesarias para realizar la siguiente gráfica en Tableau:

"Quiero un diagrama de barras en Tableau para ver la suma de ventas en el que cada barra represente una
región (Variable Region), la barra se divide en colores por la variable Tipo de Venta. De manera que las
barras quedan acumuladas (los colores están encima uno de otro) y hay una barra por cada región."

Código de examen: 138272 11

 NO UTILIZAR ESTA
PARTE DE LA HOJA

Código de examen: 138272 12

 DATOS PERSONALES FIRMA
Nombre: DNI:
Apellidos:

D ER
O R
S PON
D E
R A
AR AR
O R A P
B VÁLI D
A NO
IN
PÁG

Código de examen: 138272 13

 DE R
O R
SPON
D E
R A
A RAR
O R A P
B VÁLI D
A NO
IN
PÁG

Código de examen: 138272 14