UNIVERSIDAD INTERNACIONAL DE LA RIOJA
MAESTRÍA EN ANÁLISIS Y VISUALIZACIÓN DE DATOS
Herramientas de Visualización
Profesor:
Dr.
Integrantes:
Elizabeth Martínez Ramírez
Nombre del trabajo
Actividad grupal: Análisis tendencias en D3.js
Enero 2023
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Orientación Universidad
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Busca documentos
Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity
Busca tu universidad
Encuentra los documentos específicos para los exámenes de tu universidad
Video Cursos
Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades
Quiz
Responde a preguntas de exámenes reales y pon a prueba tu preparación
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Comunidad
Pregúntale a la comunidad
Pide ayuda a la comunidad y resuelve tus dudas de estudio
Ebooks gratuitos
¡Nuestros e-books salva-estudiantes!
Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity
informatica y sistemas, Esquemas y mapas conceptuales de Informática
La Informática es la rama de la Ingeniería que estudia el hardware, las redes de datos y el software necesarios para tratar información de forma automática.
Tipo: Esquemas y mapas conceptuales
2022/2023
1 / 21
Esta página no es visible en la vista previa
¡No te pierdas las partes importantes!
Documentos relacionados
Vista previa parcial del texto
¡Descarga informatica y sistemas y más Esquemas y mapas conceptuales en PDF de Informática solo en Docsity!
UNIVERSIDAD INTERNACIONAL DE LA RIOJA
MAESTRÍA EN ANÁLISIS Y VISUALIZACIÓN DE DATOS
Herramientas de Visualización
Profesor:
Dr.
Integrantes:
Elizabeth Martínez Ramírez
Nombre del trabajo
Actividad grupal: Análisis tendencias en D3.js
Enero 2023
Explicación de actividad Los indicadores macroeconómicos son datos estadísticos que muestran el estado actual de la economía de un estado, de acuerdo con ciertas áreas de la economía. Con la ayuda de estos datos, es posible explorar el pulso de la economía, así como su estado permanente. Dentro de los temas de tendencia a nivel mundial podemos encontrar la deuda pública que presentan los países. La deuda pública o deuda soberana es la deuda total que mantiene un Estado con inversores particulares o con otro país. De acuerdo al Banco Mundial (2022) la deuda puede ser una herramienta útil si es transparente, se gestiona bien y se usa en el contexto de una política de crecimiento creíble. Sin embargo, con frecuencia ese no es el caso. El PIB es el indicador inicial y principal de todo el sistema de cuentas nacionales, se utiliza para analizar los problemas de circulación de dinero e inflación y es el criterio más utilizado para el nivel de desarrollo y nivel de vida de un país (CEUPE, 2022). El desempleo o el paro es uno de los problemas más graves para cualquier país y no solo por sus implicaciones económicas, es el desajuste económico con mayores consecuencias sociales y personales puesto que esto conlleva a un gran reajuste social pues en consecuencia se obtienen desequilibrios en la economía, esta circunstancia se agrava cuando esta cifra aumenta, ya que altera estándares de economía a nivel nacional y de muchas formas esta inestabilidad afecta la nivel mundial ( Padilla , Robles , & Vélez, 2019). Con el fin de llevar a cabo la visualización, los temas de interés que se eligió presentar fueron las tendencias económicas de España, graficando la evolución que ha tenido a través del tiempo los indicadores macroeconómicos de la deuda pública, la cual consiste en la suma de todas las deudas que tiene España, y la representamos como cuantía (en millones de euros). El PIB, que para la visualización está representado también como cuantía y el número de personas desempleadas. Conjuntos de datos Se utilizaron 3conjuntos de datos obtenidos de: https://www.epdata.es/
- Evolución de la deuda pública en relación al PIB
- Evolución de la deuda pública trimestral en España
- Evolución del número de parados en España HTML En el maquetado HTML se define la estructura y elementos principales del entorno en el que se hace gráfica de tendencias económicas en España. Cabe resaltar la inclusión de librería JavaScript qué contiene un interpolador de líneas con el que se consigue una transición suavizada en gráficas de línea y área que conforman la presente visualización.
Javascript Funciones de tratamiento de fechas desarrolladas con el fin de obtener objetos fecha a partir de trimestres o meses, para poder usar escaladores de tiempo. // Obtener fecha a partir de trimestre const dateQuarter = (quarter, year) => { const quarters = { "Trimestre 1": { day: 31 , month: 3 }, "Trimestre 2": { day: 30 , month: 6 }, "Trimestre 3": { day: 30 , month: 9 }, "Trimestre 4": { day: 31 , month: 12 } } return new Date(year, quarters[quarter].month - 1 , quarters[quarter].day) } // Obtener fecha a partir de mes y año const dateMonth = (month, year) => { const months = {
'Marzo': { day: 31 , month: 3 }, "Junio": { day: 30 , month: 6 }, "Septiembre": { day: 30 , month: 9 }, "Diciembre": { day: 31 , month: 12 } } return new Date(year, months[month].month - 1 , months[month].day) } Función principal donde se concentran las operaciones de graficación La grafica en la que se muestran tendencias económicas de España, PIB, Deuda pública y desempleo, está compuesta por una figura de área y una línea que resalta el borde superior. Se usan tres distintos escaladores, un escalador lineal con el que se obtiene la altura de cada punto de la gráfica de área con borde, un escalador de tiempo para obtener la posición en el eje horizontal a partir de una fecha y un escalador ordinal con el que se asigna un color distinto a la gráfica de acuerdo a la métrica elegida. Se incluyen puntos a los que se asocian eventos para mostrar y ocultar tooltip en el que se muestra valor especifico correspondiente al punto sobre el que se está posicionado y el año. Fue necesario incluir una función de interpolación personalizada de tercero con el que se consigue una transición suave al cambiar los puntos de los objetos líneas y área que componente la visualización. // Dibujar gráfica de lineal const areaChart = (graf, data, yAccessor, xAccessor, metric, xText, yText) => { //Marges entre grafica y contenedor const margins = { top: 70 , right: 30 , bottom: 60 , left: 100 , }
// Grupo principal let g = svg.select('#plot') if (g.empty()) { g = svg .append("g") .attr('id', 'plot') .attr("transform", translate(${margins.left}, ${margins.top})) } // Escaladores const y = d .scaleLinear() .domain([ 0 , d3.max(data, yAccessor)]) .range([alto, 0 ]) const x = d .scaleTime() .domain(d3.extent(data, xAccessor)) .range([ 0 , ancho]) // Duracion de transiones const durationTransition = 2000 // Escala de colores para que sean distintos por metrica const color = d .scaleOrdinal() .domain(d3.selectAll('#metric option').nodes().map(o => o.value)) .range(['#1982c4', '#FF595E', '#6a4c93']) // Linea const line = g.selectAll('.line').data([data]) line .enter() .append("path") .attr('class', 'line') .merge(line) .attr("fill", "none") .attr("stroke-width", 2 ) .transition() .attr("stroke", color(metric.value)) .duration(durationTransition) .attrTween('d', function (data) { let previous = d3.select(this).attr('d') let current = d3.line()
.x( (d) => x(xAccessor(d)) ) .y( (d) => y(yAccessor(d)) ) (data) return d3.interpolatePath(previous, current) }) // Area const area = g.selectAll('.area').data([data], xAccessor) area .enter() .append('path') .attr('class', 'area') .merge(area) .transition() .duration(durationTransition) .attr('fill', color(metric.value)) .attr('opacity', '0.1') .attrTween('d', function (data) { let previous = d3.select(this).attr('d') let current = d3.area() .x( (d) => x(xAccessor(d)) ) .y0( alto ) .y1( (d) => y(yAccessor(d)) ) (data) let excludeSegment = (a, b) => a.x === b.x && a.x === ancho; return d3.interpolatePath(previous, current, excludeSegment) }) // Puntos con tooltip g .selectAll("circle") .data(data) .join('circle') .on("mouseover", function (event, d) { let tooltip = d3.select('#tooltip') tooltip .transition() .duration( 200 ) .style("opacity", 1 ); tooltip .html('Año: ' + xAccessor(d).getFullYear() +'Valor: ' + new Intl.NumberFormat().format(yAccessor(d).toFixed( 0 )))
if (xLegend.empty()) { xLegend = svg.append("text") .attr('id', 'xLegend') } xLegend .text(xText) .attr('y', altoTotal - 10 ) .transition() .duration(durationTransition) .attr('x', margins.left + (ancho / 2 )) // Etiquetas de eje y let yAxisGroup = g.select('#yAxisGroup') if (yAxisGroup.empty()) { yAxisGroup = g .append('g') .attr('id', 'yAxisGroup') } yAxisGroup .transition() .duration( 2000 ) .call(d3.axisLeft(y).ticks( 8 )) let yLegend = svg.select('#yLegend') if (yLegend.empty()) { yLegend = svg.append("text") .attr('id', 'yLegend') .attr('x', 25 ) } yLegend .text(yText) .transition() .duration(durationTransition) .attr('y', margins.top + (alto / 2 )) .style('transform-origin', ${ 25 }px ${margins.top + (alto / 2 )}px) .style('transform', 'rotate(-90deg)') } Función de dibujado
En el que de acuerdo a la métrica seleccionada se carga y dibuja una u otro conjunto de datos. const draw = async () => { // Opcion seleccionada const metric = { value: d3.select('#metric').property('value'), text: d3.select('#metric option:checked').text() } // Definiciones const graf = d3.select("#graf") let yAccessor = (d) => d['Valor'] let xAccessor = (d) => d['Fecha'] let data let xtext = "Año" let yText switch (metric.value) { case 'PIB': // Cargar informacion PIB let pib = await d3.json("data/deuda_en_relacion_al_pib.json") pib = pib.Respuesta.Datos.Metricas[ 1 ] yText = ${pib.Escala} de ${pib.Unidad.split(" ")[ 0 ]} data = pib.Datos // Cambiar trimestres a fecha data.forEach((d) => { d.Fecha = dateQuarter(d['Periodo'], d['Agno']) }) break case 'DEU': // Cargar informacion Deuda let deuda = await d3.json("data/deuda_en_relacion_al_pib.json") deuda = deuda.Respuesta.Datos.Metricas[ 0 ] yText = ${deuda.Escala} de ${deuda.Unidad.split(" ")[ 0 ]} data = deuda.Datos // Cambiar trimestres a fecha data.forEach((d) => { d.Fecha = dateMonth(d['Periodo'], d['Agno']) }) break case 'DES': // Cargar informacion PIB
.append('option') .attr('value', (d) => d.value) .text((d) => d.text) metric .on('change', (event) => { event.preventDefault() draw() }) // Adaptar grafica al redimensionar navegador let resizeTimer; d3.select(window) .on('resize', () => { clearTimeout(resizeTimer) resizeTimer = setTimeout(() => { draw() }, 250 ) }) } Disparadores de dibujado inicial init() draw() CSS Archivo en el que se definen estilos varios de los distintos elementos integrados en visualización #logo { filter: invert(100%) } #title { font-size: 18pt; font-weight: bold; text-anchor: middle; } #xAxisGroup text, #yAxisGroup text { font-size: 10pt; }
#xLegend { font-weight: bold; } #yLegend { font-weight: bold; text-anchor: middle; } #tooltip { position: absolute; max-width: 200px; padding: 5px; background-color: white; border: solid; border-width: 2px; border-radius: 5px; pointer-events: none; opacity: 0 ; } Graficas Al correr el código, se despliega la gráfica de área con la evolución del PIB. El PIB (Producto Interno Bruno) mide el valor monetario de la producción de bienes y servicios en la Zona Euro a lo largo del periodo determinado, se puede visualizar en la gráfica la medida del crecimiento económico. PIB per cápita la Zona Euro = PIB / el número de habitantes, la variación porcentual del Producto Interno Bruto en la Zona Euro en un periodo determinado, esto es la tasa de crecimiento del PIB. Se puede observar en la parte superior la evolución del PIB en la Zona Euro. Esta evolución se observa desde antes del 2000 hasta el 2020.
En la parte superior encontramos un cuadro de selección, el cual al se encuentran las opciones de PIB, deuda pública y desempleados. En año anteriores al 2000, es decreciente, pero va al alza el PIB en años subsecuentes, esto se muestra en la gráfica. Al seleccionar deuda púbica la visualización despliega la gráfica con la evolución que ha tenido a través de los años, podemos observar que a partir del 2010 el incremento ha sido muy elevado, en l Zona Euro.
Al igual que la gráfica del PIB, al pasar el mouse sobre la línea el tooltip despliega el año y el valor correspondiente. La deuda en la zona euro, es constante desde el año de 1995, se ve un alza a partir del 2010, y revela un incremento en el endeudamiento en el 2020.
La tasa de desempleo es consecutiva, se sitúa antes del 2004 como se puede visualizar el nivel de desempleo incrementa a partir del 2010, teniendo su máximo pico entre loa años 2012 y 2014, a esto se le puede llamar un alza histórica, este indicador se ve en decremento después del año 2014. Aunque se puede observar un repunte debido a la pandemia en el año 2019.
Se puede observar mayor actividad económica en el año 2022 y disminución en el desempleo. Hoja de control de participación Integrantes del Equipo Participación Aportación Elizabeth Martínez Ramírez X Código, gráficas, referencias, explicación de gráficas, etc. Fuente de datos
- Evolución de la deuda pública en relación al PIB https://www.epdata.es/evolucion-deuda-publica-relacion-pib/014eb993-0b14-4695-a46c- 4c79da49f6c
- Evolución de la deuda pública trimestral en España https://www.epdata.es/evolucion-deuda-publica-trimestral-espana/abc4e201-1ddf-4092-93de- e722f1e686b
- Evolución del número de parados en España https://www.epdata.es/datos/paro-espana-hoy-epa-ine/10/espana/