UNIVERSIDAD MARIANO GALVEZ DE GUATEMALA

INGENIERIA EN SISTEMAS DE INFORMACION Y CIENCIAS DE LA

COMPUTACION
ADMINISTRACIÓN DE TECNOLOGIAS DE INFORMACION
ING. HERIBERTO ANTONIO ESCOBAR

INVESTIGACIÓN DE LA HERRAMIENTA D3JS (GRUPO 2) Y POWERBI

JUAN LESTER OMAR CHAVAJAY 2290 -14-6724

WALTER ALFREDO CANU CHICOJ 2290-16-7226
DANNY ELIEZER IXCAYÁ XAJIL 2290-18-18781
DIEGO SAMUEL PÉREZ CHAVAJAY 2290-14-11283
KEVIN ABRAHAM COROXÓN CAN 2290-18-21552

SOLOLA 12 DE MAYO DE 2023

 OBJETIVOS

General
 Analizar el uso de las herramientas D3.js y Power Bi para la visualización de datos
en modelo documentos mediante diferentes bases de datos

 Power BI es una herramienta poderosa y versátil para el análisis y la visualización de datos

que ofrece una amplia gama de capacidades y opciones de personalización para satisfacer
las necesidades de los diferentes usuarios y organizaciones.

Específicos
 Conocimiento acerca de la biblioteca de JavaScript para el uso de D3.Js.
 Conocimiento y uso de datos mediante representación HTML, SVG y CSS.
 Conocimiento para el correcto enfoque de datos y visualización.

Algunas de las principales conclusiones sobre Power BI son:

 Es una herramienta potente y versátil que se adapta a una amplia variedad de casos
de uso, desde análisis de negocios hasta análisis de datos científicos.

 Ofrece una amplia gama de capacidades de visualización de datos y

personalización, lo que permite a los usuarios crear visualizaciones atractivas y
personalizadas para sus necesidades específicas.
 La capacidad de conectarse a una amplia variedad de fuentes de datos y combinar
datos de diferentes orígenes es una de las principales fortalezas de Power BI.
 INTRODUCCION

En la actualidad podemos observar el gran crecimiento y salto que ha dado la

tecnología y el enorme crecimiento de las herramientas que se han desarrollado, para una
empresa, organización o institución es importante tener control de los procesos, resultados
o avances que se están realizando o han realizado, para pode observar todos estos
indicadores de forma resumida y ver un estado es indispensable de herramientas que
puedan hacer todo esto posible, sin duda son herramientas robustas por la cantidad de datos
que tiene que procesar de diferentes bases de datos, en este documento veremos como las
herramientas de D3.js y Power Bi pueden procesar grandes cantidades de información para
poder convertirlos en documentos dinámicos o estáticos.

Estas herramientas son servicios de análisis de datos orientados a proporcionar

información visual interactivas y con la capacidad de inteligencia empresarial con una
interfaz lo suficientemente simple para que los usuarios que puedan hacer uso de ellas
puedan ser capaces de crear por si mismo sus propios informes y paneles, estas
herramientas en la actualidad son bastante importantes para visualizar el estado de una
empresa o los indicadores de rentabilidad, con ellos se puede comparar la situación actual
con los resultados pasados, todo esto para una mejor toma de decisiones y como resultados
mejores indicadores.
 D3.JS EN LA VISUALIZACIÓN DE DATOS
D3.js (también llamado Data Driven Documents o simplemente D3) es una de las
librerías de JavaScript más populares que permite la creación de gráficos y Visualización
de Datos (visualizaciones interactivas), así como la posibilidad de añadirlas en un
navegador utilizando JavaScript, HTML5, SVG (gráficos vectoriales) y CSS. Esta librería
es sucesora de la librería Protovis y a diferencia de muchas otras librerías, D3.js permite
tener el control completo sobre el resultado final.

Creación de D3.js

El creador de D3.js, Mike Bostock, antes del comienzo de este proyecto, ayudó al
desarrollo de la biblioteca de Visualización de Datos, Protovis, así como también
Polymaps, una biblioteca de JavaScript con capacidad de mapeo vectorial y de mosaicos de
forma ligera. Ambos desarrollos, condujeron a la creación de D3.js, que se centra en
estándares y navegadores modernos. Bostock la evalúa de la siguiente manera: “D3.js evita
la representación de la propiedad y ofrece una flexibilidad extraordinaria, exponiendo todas
las capacidades de los estándares web como CSS3, HTML5 y SVG”.

Cómo funciona D3.js

Para poder entender el funcionamiento de D3.js, se visualizará la figura 2 en la que se

puede ver un mapa de cómo usar D3 para el procesamiento y la representación de los datos,
así como agregar interactividad u optimizar la Visualización de Datos.

Se puede pensar que la Visualización de Datos queda limitada únicamente a gráficos de

líneas, circulares y variedad de métodos gráficos, sin embargo, es una equivocación, puesto
que uno de los puntos fuertes que presenta D3.js es que permite la creación de vectores
gráficos para gráficos tradicionales, así como también la creación de visualizaciones
geoespaciales y de red, incluyendo elementos HTML tradicionales como tablas, listas o
párrafos.
Ejemplo:
algunos de las posibilidades que ofrece este software

Como ya se ha dicho anteriormente, uno de los puntos fuertes de D3.js es la capacidad de

crear gráficos variados, sin embargo, lo más importante para el desarrollo web es la
incorporación de un alto nivel de interactividad, es por ello que cada elemento de cada
gráfico de D3.js presenta esta interactividad. La decisión de Bostock de crear una biblioteca
con la capacidad de representar mapas con tanta facilidad como gráficos, implica que el
desarrollador no tiene que tratar de entender la sintaxis de una biblioteca para mapas, otra
para contenido de texto dinámico y una última para la Visualización de Datos. Además, el
código para la ejecución de una red interactiva se encuentra muy cerca de JavaScript puro y
también es muy parecido al código que presenta los puntos de interés dinámico en un mapa
D3.js, pues no sólo los métodos son los mismos, sino que los mismos datos pueden ser los
mismos, formulados de una manera para listas, párrafos y tramos, y de otra para la
representación geoespacial.

Selección y vinculación
Se analizarán fragmentos de código que pueden ser empleados en el navegador para
realizar cambios en la apariencia gráfica de los elementos en su sitio web.
En el caso de que se tuviese un conjunto de datos, como por ejemplo los precios de un
conjunto de artículos, y un conjunto de elementos de la página web, y se quiere representar
dicho conjunto de datos, con texto o por formato de tamaño y color, en este caso, una
opción es realizar la selección de todos ellos juntos y efectuar distintas acciones sobre los
elementos seleccionados, como moverlos, cambiar el color o actualizar los valores de los
datos.
Ejemplo de selección sin ningún dato:
d3.selectAll("circle.a").style("fill", "red").attr("cx", 100);
Esto implica que se coge cada círculo de la página web con la clase de “a”, lo transforma a
color rojo, y lo mueve de forma que su centro esté a 100 pixeles a la derecha del lado
izquierdo del lienzo.
d3. selectAll("div"). style ("background", "red"). attr("class", "b");
En este otro ejemplo, el código convierte cada div de la página web a color rojo y
transforma su clase a “b”.
Si se analiza detalladamente el primer código, d3. selectAll (), hace referencia a la
selección anteriormente mencionada, aunque también se puede realizar la selección
haciendo uso de d3. select (). Las selecciones son un grupo de uno o más elementos de
página web que pueden asociarse con un conjunto de datos.
d3. selectAll("div.market").data([1,5,11,3])
Este código, vincula los elementos en la matriz ‘[1,5,11,3] a elementos con la clase de
“market”. Esta asociación es conocida como “datos vinculantes”, los cuales permiten
pensar en una selección como un conjunto de elementos de página web y un conjunto de
datos asociados

Obtención de la apariencia de los elementos de página web

Una vez realizada la selección, D3.js permite la modificación de la apariencia de los
elementos de una página web para mostrar las diferencias en los datos a partir de datos
encuadernados. Esto implica, que puede hacer que la longitud de una línea sea igual al
valor de los datos, o el cambio de un color a otro particular que corresponda a una clase de
datos.
También se puede realizar la modificación de la apariencia de los elementos utilizando
selecciones para hacer referencia a datos vinculados a un elemento de la selección, esto es
debido, a que D3.js itera a través de los elementos en su selección y realiza el mismo
proceso empleando datos encuadernados, obteniendo como resultado “gráficos efectos”.

Proceso que sufren los datos

A continuación, se analizará el proceso que emplea D3.js, para dar respuesta a la
interacción de un usuario, con el fin de crear, eliminar o cambiar elementos del DOM
(modelo de objetos del documento).
 Ejemplo:

El primer paso de toda página web que emplea D3.js consiste en la construcción, de forma
que la página web carga diferentes datos, estilos y contenido. A continuación, le sigue la
visualización inicial empleando selecciones D3.js de elementos HTML. Posteriormente, por
lo general se suele producir el enlace de los datos, aunque no siempre es necesario, para
llegar al cuarto paso, el cual permite la modificación de la estructura y apariencia de la
página web. Finalmente, el último paso, en el cual los cambios en la estructura solicitan la
interacción del usuario, lo que conduce a nuevas selecciones con o sin visualizaciones de
datos. Cabe destacar, que el primer paso solo sucede una única vez (cuando el usuario carga
la página web), sin embargo, los cuatro pasos restantes pueden ocurrir varias veces, en
función de la interacción del usuario.

Flujo de datos en la Visualización de Datos

Los datos que van a ser empleados por D3.js al igual que en muchas otras herramientas
destinadas a la Visualización de Datos, provendrán de una API o de un archivo externo, que
tendrá que ser cargado, formateado y transformado antes de empezar a crear elementos web
basados en esos datos.
Las estructuras básicas que son empleadas en D3.js son: cargar datos desde una fuente
externa, formatear dichos datos y crear representaciones gráficas con estos datos, como
bien puede verse en la figura siguiente

Carga de datos
Como ya se ha dicho anteriormente, los datos que van a ser empleados necesitan ser
formateados antes de ser utilizados, para ello independientemente de la fuente de datos,
generalmente se formateará como archivos de datos de documento único en formato XML,
CSV o JSON.
Una de las principales diferencias entre estos formatos, se encuentra en la forma en que se
modelan los datos. Los formatos JSON y XML proporcionan la capacidad de codificar
relaciones anidadas, a diferencia de otros formatos delimitados como CSV que no lo hacen.
Otra diferencia es que d3.csv () y d3. json () pueden producir una matriz de objetos JSON,
mientras que d3.xml () crea un documento XML al que es necesario acceder de un modo
diferente.

las cinco funciones que se emplean para cargar los datos, que corresponden a
los cinco tipos de archivos con mayor probabilidad de ser usados: d3.text (),
d3.xml (), d3.json (), d3.csv () y por último, d3.html ().

El primer paso para crear una Visualización de Datos es la obtención de los datos. Para ello,
se puede cargar el archivo de forma asincrónica haciendo uso de una de las diversas
funciones d3.xhr o a través de la importación o inclusión de datos. Si los datos son
correctos, cualquiera de las tres formas mencionadas es correcta, sin embargo, si se va a
reemplazar la fuente de datos con una llamada API dinámica, entonces, en este caso una
solicitud XHR es la mejor opción
Datos de formato
Una vez que se han cargado los conjuntos de datos, es necesario definir los métodos para
que los atributos de los datos se relacionen directamente con la configuración de los
elementos gráficos de color, tamaño y posición. Si bien por lo general, será necesario
formatear datos cuantitativos (segundo paso en el proceso de la Visualización de Datos)
para que estos puedan ser utilizados para la creación de gráficos. En la figura 7 se pueden
ver diferentes colores asignados a las escalas, estos hacen referencia a la cantidad, o
contenedores para anidar los datos visualmente.

A continuación, se describirán los diferentes tipos de datos que pueden ser utilizados en la
Visualización de Datos:

Cuantitativo
Los datos numéricos o categóricos son los más comunes. Este tipo de datos se pueden
representar de un modo efectivo con tamaño, posición o color. Un ejemplo utilizado muy a
menudo puede ser las cifras de población empleados en tablas.

Categórico
Los datos categóricos son aquellos que pertenecen a grupos discretos, por lo general,
representados por texto, nacionalidad o género. Es muy común, representar este tipo de
datos con forma o color, pudiendo asignar las categorías a distintos colores o formas para
identificar el patrón de los grupos de elementos posicionados de acuerdo con otros tributos.

Topológico
Los datos topológicos describen la relación de una pieza de datos con otra, que también
puede ser otra forma de datos de ubicación. Además, los atributos topológicos se pueden
representar con texto que hace referencia a valores únicos de ID o con punteros a otros
objetos.

Geométrico
Los datos geométricos se asocian por lo general con los límites y las pistas de datos
geográficos, como países, ríos, ciudades o carreteras. Es muy común, representar este tipo
de datos con forma y tamaño, pero también se pueden transformar en otros datos, por
ejemplo, en datos cuantitativos midiendo el área y el perímetro.

Temporal
Los datos temporales como las fechas y el tiempo se pueden representar empleando
números durante días, meses o años, o a través de la codificación de fecha y hora específica
para cálculos más complejos. El formato más común es el ISO 8601, y si sus datos se
formatean como una cadena, es simple convertirlo en un tipo de fecha en JavaScript.

Crudo
Los datos crudos, libres o no estructurados, también denominados datos fuente o datos
atomizados, suelen ser datos e imágenes. Este tipo de datos pueden ser transformados
midiéndolos o utilizando sofisticados análisis de texto e imágenes para derivar atributos
más adecuados para la Visualización de Datos.
Microsoft Power BI Vs D3js: comparación en profundidad

¿No está seguro de si Microsoft Power BI o D3js es la mejor opción para sus necesidades? ¡Ningún
problema! La comparación de 6sense te ayuda a tomar la mejor decisión. Eche un vistazo a las
categorías en las que compiten Microsoft Power BI y D3js, los clientes actuales, la cuota de
mercado, la clasificación de categoría. ¿Todavía incierto? Compare las similitudes y diferencias
entre los clientes de Microsoft Power BI y D3js por industria, geografía y patrones de compra.

Microsoft Power BI
Microsoft Power BI convierte los datos en visualizaciones interactivas enriquecidas, utilizando
herramientas de análisis empresarial para compartir información basada en paneles en todos los
dispositivos.

Principales competidores y alternativas de Microsoft Power BI

Los tres principales competidores de Microsoft Power BI en la categoría de visualización de datos
son Tableau Software con un 17,16 %, Tableau Desktop con un 4,14 % y HeapAnalytics con una
cuota de mercado del 4,11 %.

Clientes de Microsoft Power BI

En todo el mundo en 2023, más de 61503 empresas han comenzado a utilizar Microsoft Power BI
como herramienta de visualización de datos.

Clientes de Microsoft Power BI por industria

Las tres principales industrias que utilizan Microsoft Power BI para la visualización de datos son
Business Intelligence (1923), Tecnología (1212), Consultoría (1208).
Clientes de Microsoft Power BI por tamaño de empleado

La mayoría de los clientes de Microsoft Power BI para la categoría de visualización de datos tienen
un tamaño de empresa de 100 a 249 empleados (11967 empresas), de 1000 a 4999 empleados
(11090 empresas), de 20 a 49 empleados (10989 empresas).

Clientes de Microsoft Power BI por geografía

Las tres geografías principales de Microsoft Power BI para visualización de datos son Estados
Unidos con 23883 (35,72 %), Reino Unido con 5898 (8,82 %), India con 3492 (5,22 %) clientes,
respectivamente.
¿Qué es el Power Bi?

Power BI es una plataforma unificada y escalable de inteligencia empresarial (BI) con funciones de
autoservicio apta para grandes empresas. Conéctese a los datos, visualícelos e incorpore sin
problemas objetos visuales en las aplicaciones que usa todos los días.

Cree experiencias de datos increíbles

Conéctese a los datos, modélelos y visualícelos con facilidad, mediante la creación de informes
memorables personalizados con sus KPI y marca. Obtenga respuestas rápidas y con tecnología de
IA a sus preguntas empresariales, incluso al preguntar con lenguaje de conversación.

Obtenga conocimientos de las implementaciones de BI más grandes

Saque el máximo provecho a sus inversiones en macrodatos mediante la conexión a todos los
orígenes de datos con escala para analizar, compartir y promover los conocimientos en toda la
organización, a la vez que mantiene la precisión, la coherencia y la seguridad de los datos.

Tome decisiones con confianza.

Trabaje de forma conjunta y con facilidad en los mismos datos, colabore en los informes y
comparta conocimientos mediante las conocidas aplicaciones de Microsoft Office, como Microsoft
Teams y Excel. Proporcione a todos los usuarios de la organización los recursos necesarios para
tomar rápidas decisiones basadas en los datos que impulsen acciones estratégicas.
 CONCLUSION
La Visualización de Datos es un ámbito de conocimiento en continua evolución que
en la actualidad se ha visto impulsado debido a la gran cantidad de información que se
maneja, hasta tal punto que se podría decir que la sociedad actual vive rodeada de datos, los
cuales necesitan ser analizados, interpretados y contextualizados a través de una narrativa
que combina texto, imágenes y otros recursos interactivos. Sin embargo, uno de los
problemas más comunes respecto a la existencia de dicho volumen de información es su
falta de uso. No se trata sólo de publicar datos en la red, sino que la atención se debe
centrar en cómo deben ser interpretados, de modo que se transformen en conocimiento,
entrando en juego la Visualización de Datos, Las herramientas destinadas a la
Visualización de Datos cubren un extenso espectro de público, desde desarrolladores de
software hasta científicos de dato, los beneficios de las buenas tomas de decisiones se
deben a los resultados del buen eso de las herramientas anteriormente descritas.
Facilidad de uso: Power BI es una herramienta fácil de usar, con una interfaz intuitiva que
permite a los usuarios crear informes y visualizaciones atractivas sin necesidad de
conocimientos de programación o estadística.

Integración: Power BI se integra fácilmente con una amplia gama de fuentes de datos,
incluyendo bases de datos locales, servicios en la nube y aplicaciones de terceros.

Flexibilidad: Power BI es altamente personalizable y permite a los usuarios crear

visualizaciones y paneles a medida que satisfacen sus necesidades específicas.
Colaboración: Power BI facilita la colaboración entre usuarios, permitiendo compartir
informes y paneles con otros usuarios dentro y fuera de la organización.

Escalabilidad: Power BI es escalable, permitiendo a las empresas crecer su uso de la

herramienta y ampliar su capacidad de procesamiento de datos a medida que sus
necesidades evolucionan.

En conclusión, Power BI es una herramienta esencial para cualquier organización que

quiera tomar decisiones informadas basadas en datos. Su facilidad de uso, integración,
flexibilidad, colaboración y escalabilidad la convierten en una de las mejores opciones para
visualización y análisis de datos.
 BIBLIOGRAFIA
https://www.bigdata.uma.es/visualizacion-de-datos-con-d3-js/#:~:text=js%20(por%20sus
%20siglas%20Data,como%20HTML%2C%20SVG%20y%20CSS.

https://6sense.com/tech/data-visualization/microsoft-power-bi-market-share