Funciones y Comandos para Visualización Web

Funciones, Comandos y Código para Visualización Web

• HTML define la estructura y el contenido de una página web.
• CSS define el estilo visual de una página web, incluyendo colores y tipografías.
• JavaScript añade interactividad y efectos dinámicos a una página web.
• <style> define CSS interno.
• <script> define JavaScript interno.
• document representa la página HTML en JavaScript.
• getElementById() selecciona un elemento HTML por su ID.
• innerHTML modifica el contenido HTML de un elemento.
• Date() devuelve la fecha y hora actual.

Google Chart

• <script type="text/javascript" src="URL_de_la_librería_de_Google_Charts"></script> incluye la librería de Google Charts en el documento HTML, utilizando la URL correcta para acceder a la librería.
• google.charts.load('current', {packages: ['...']}); carga los paquetes de gráficos necesarios, como 'corechart' o 'geochart', definiendo los tipos de gráficos a utilizar en la página.
• google.setOnLoadCallback(drawChart); especifica la función drawChart que se ejecutará una vez que la librería de Google Charts esté cargada.
• google.visualization.DataTable(); crea una nueva tabla de datos para alimentar el gráfico.
• data.addColumn('tipo', 'Nombre'); añade una columna a la tabla de datos, especificando su tipo ('string', 'number', 'boolean') y su nombre.
• data.addRows([['Fila1', valor1], ['Fila2', valor2]]); agrega filas de datos a la tabla; cada fila es un array con los valores para cada columna.
• var options = {title:'Título', width:400, height:300}; define opciones de configuración para el gráfico, como título, ancho y alto.
• new google.visualization.TipoGrafico(document.getElementById('ID')); crea una instancia del tipo de gráfico deseado (PieChart, BarChart), especificando el elemento HTML donde se mostrará.
• chart.draw(data, options); dibuja el gráfico en el elemento HTML, utilizando los datos y las opciones especificadas.
• google.visualization.GeoChart(document.getElementById('ID')); crea un gráfico geográfico (GeoChart) para mostrar datos en un mapa.
• google.visualization.Query('URL'); realiza una consulta a una hoja de cálculo de Google Spreadsheets para obtener los datos.
• query.send(handleQueryResponse); envía la consulta a la hoja de cálculo y especifica la función handleQueryResponse que procesará los resultados.
• $.get('URL', function(csvString){... }); (Con jQuery) realiza una petición HTTP para obtener los datos de un archivo CSV.
• $.csv.toArrays(csvString); (Con jQuery) convierte una cadena CSV en un array bidimensional.
• google.visualization.events.addListener(table, 'sort', function(event) {... }); añade un "listener" que escucha eventos específicos (ej. 'sort') en un elemento y ejecuta una función en respuesta.
• data.sort([{column: event.column, desc: !event.ascending}]); ordena los datos de la tabla basándose en la columna y el orden especificados en el evento.

Introducción y Funcionalidades D3.js

• D3.js es una librería de JavaScript para diseñar gráficos detallados y visualizaciones interactivas basadas en datos.
• Data-Driven Documents permite reutilizar visualizaciones adaptando los datos o la forma en que D3 los lee.
• Documentos orientados a datos facilita la adaptación de datos para un control total sobre la visualización.
• Scalable Vector Graphics (SVG) permite que la visualización se adapte a diferentes resoluciones de pantalla.
• Loading carga información en la memoria del navegador para su uso.
• Binding añade información a elementos HTML, vinculando los datos con los objetos HTML.
• Transforming transforma los datos en una respuesta visual, modificando el código HTML para mostrar la visualización.
• Transitioning reacciona a la entrada del usuario, proporcionando una respuesta visual diferente.
• <script src="URL_del_CDN_de_D3"></script> es el código para incluir la librería D3 desde un CDN en un proyecto.
• d3.select(element) selecciona un elemento específico del DOM para manipularlo.
• element.append(element) añade un nuevo elemento HTML al final de un elemento existente.
• element.text("texto") define el texto que se mostrará dentro de un elemento HTML.
• element.attr("atributo", "valor") modifica los atributos de los elementos HTML, como id o class.
• element.style("estilo", "valor") modifica los estilos CSS de un elemento HTML para cambiar su apariencia.
• d3.selectAll("div") selecciona todos los elementos div en el documento para aplicarles cambios.
• element.each(function (d, i) {... }) itera sobre cada elemento seleccionado, permitiendo realizar acciones individuales en cada uno. this se refiere al elemento actual.
• d3.select("#section1 > div") selecciona un subelemento HTML utilizando el identificador del elemento padre.
• d3.select("#section2").select("div") selecciona un subelemento utilizando la función select dos veces.
• Chaining es un concepto de la sintaxis de D3 que permite concatenar varias funciones en una sola línea de código.

Datos SVG y Gráficas

• d3.csv("archivo.csv", callback) carga y analiza un archivo CSV y luego ejecuta la función callback con los datos. Es importante asegurarse de que la ruta sea correcta.
• d3.json("archivo.json", callback) carga y analiza un archivo JSON, similar a d3.csv, utilizando una función callback para manejar los datos.
• d3.select("selector") selecciona el primer elemento que coincida con el selector CSS (ej., "body", ".bar").
• d3.selectAll("selector") selecciona todos los elementos que coincidan con el selector CSS.
• .data(dataset)enlaza el array dataset a los elementos seleccionados.
• .enter() crea placeholders para nuevos elementos que no existían en el DOM pero están en el dataset.
• .append("elemento") añade un nuevo elemento al DOM (ej., "div", "svg", "circle").
• .attr("atributo", valor) establece el valor de un atributo HTML o SVG (ej., "class", "width", "height", "cx", "cy", "r", "fill", "stroke").
• .style("propiedad", valor) establece una propiedad CSS (ej., "height", "background-color").
• function(d) {... } es una función anónima que recibe cada elemento d del dataset.
• i * (w / dataset.length) calcula la posición x para barras en un Bar Chart, distribuyéndolas uniformemente en el ancho w.
• h - d calcula la posición y para invertir las barras en un Bar Chart (h es la altura menos el valor del dato d).
• rgba(r, g, b, a) define un color con transparencia, especificando rojo, verde, azul y alfa.
• <svg width="w" height="h"></svg> define un contenedor SVG con ancho w y alto h.

Escalas en D3 para visualización de datos

• d3.scale.linear() crea una escala lineal que relaciona un dominio de entrada continuo a un rango de salida continuo.
• scale.domain([min, max]) define el dominio de entrada de la escala, especificando los valores mínimo y máximo.
• scale.range([inicio, fin]) define el rango de salida de la escala, estableciendo los valores de inicio y fin.
• d3.min(dataset) calcula el valor mínimo en un conjunto de datos.
• d3.max(dataset) calcula el valor máximo en un conjunto de datos.
• d3.svg.axis() crea un nuevo eje.
• xAxis.scale(xScale) asigna una escala a un eje, determinando cómo se mapean los datos al eje.
• .orient("bottom") establece la orientación del eje en la parte inferior.
• svg.append("g").call(xAxis) agrega un elemento 'g' (grupo) al SVG y llama a la función del eje para dibujarlo.
• .attr("class", "axis") asigna la clase "axis" a un elemento para aplicar estilos CSS.
• .attr("transform", "translate(x, y)") traslada un elemento a la posición (x, y).
• .ticks(5) define el número de divisiones (ticks) en el eje.
• d3.scale.ordinal() crea una escala ordinal que mapea un dominio de categorías a un rango de salida discreto.
• .domain(array) define el dominio de entrada de la escala ordinal utilizando un array de categorías.
• .rangeRoundBands([inicio, fin], padding) divide el rango de salida en bandas para gráficos de barras, con un padding entre las bandas.
• xScale.rangeBand() devuelve el ancho de cada banda en una escala ordinal.

Gráficos de diseño de fuerza D3

• d3.select("body") selecciona el elemento body del documento HTML.
• .append("p") añade un párrafo al elemento seleccionado.
• .text("Pulsa aquí") establece el texto del elemento seleccionado como "Pulsa aquí".
• .on("click", function() {... }) define una acción a realizar cuando se hace clic en el elemento.
• alert("Mensaje") muestra una ventana emergente con un mensaje.
• svg.selectAll("rect") selecciona todos los elementos rect (rectángulos) dentro de un SVG.
• .data(dataset) enlaza los datos del dataset a los elementos seleccionados.
• .attr("y", function(d) {... }) establece el atributo y de un elemento basado en los datos.
• .attr("height", function(d) {... }) establece el atributo height (altura) de un elemento basado en los datos.
• svg.selectAll("text") selecciona todos los elementos de texto dentro de un SVG.
• .text(function(d) { return d; }) establece el texto de cada elemento de texto basado en los datos.
• d3.select(this).remove() elimina el elemento actual que ha sido seleccionado.
• .transition() inicia una transición suave en los elementos seleccionados.
• .duration(3000) establece la duración de la transición en milisegundos (3000 ms = 3 segundos).
• .ease("linear") define el tipo deProgression de la transición, en este caso, lineal (velocidad constante).
• .delay(3000) retrasa el inicio de la transición por un número de milisegundos (3000 ms = 3 segundos).
• .on("mouseover", function(d) {... }) define una acción a realizar cuando el cursor del ratón pasa sobre el elemento.
• d3.select(this).style("fill", "red") cambia el color de relleno del elemento seleccionado a rojo.
• .on("mouseout", function() {... }) define una acción a realizar cuando el cursor del ratón sale del elemento.
• svg.selectAll("circle.node") selecciona todos los elementos de círculo con la clase "node" dentro de un SVG.
• .data(data.nodes) enlaza los datos de los nodos del archivo JSON a los elementos seleccionados.
• .enter().append("circle") añade un círculo para cada elemento de datos que no tiene un círculo existente.
• .attr("class", "node") aplica la clase "node" a los elementos de círculo.
• .attr("r", 12) establece el radio del círculo a 12 píxeles.
• svg.selectAll("line.link") selecciona todos los elementos de línea con la clase "link" dentro de un SVG.
• .data(data.links) enlaza los datos de los enlaces del archivo JSON a los elementos de línea.
• .style("stroke","black") establece el color de la línea a negro.
• d3.layout.force() crea un nuevo diseño de fuerza (Force Layout) para simular interacciones físicas entre nodos.
• .charge(-120) establece la fuerza de repulsión entre los nodos (valor negativo para repulsión).
• .linkDistance(30) establece la distancia deseada entre los nodos conectados.
• .size([width, height]) establece el tamaño del área de visualización.
• .nodes(data.nodes) asigna los nodos del archivo JSON al diseño de fuerza.
• .links(data.links) asigna los enlaces del archivo JSON al diseño de fuerza.
• .start() inicia la simulación del diseño de fuerza.
• force.on("tick", function() {... }) define una función que se ejecuta en cada "tick" de la simulación para actualizar la posición de los nodos y enlaces.
• link.attr("x1", function(d) { return d.source.x; }) establece la coordenada x del punto de inicio de cada línea (enlace) basada en la posición del nodo de origen.
• link.attr("y1", function(d) { return d.source.y; }) establece la coordenada y del punto de inicio de cada línea (enlace) basada en la posición del nodo de origen.
• link.attr("x2", function(d) { return d.target.x; }) establece la coordenada x del punto final de cada línea (enlace) basada en la posición del nodo de destino.
• link.attr("y2", function(d) { return d.target.y; }) establece la coordenada y del punto final de cada línea (enlace) basada en la posición del nodo de destino.
• node.attr("cx", function(d) { return d.x; }) establece la coordenada x del centro de cada nodo basada en la posición calculada por la simulación.
• node.attr("cy", function(d) { return d.y; }) establece la coordenada y del centro de cada nodo basada en la posición calculada por la simulación.
• node.call(force.drag) permite arrastrar los nodos con el ratón para interactuar con la simulación.

Introducción e Instalación de Power BI

• Obtención de datos permite cargar datos desde diversas fuentes como Excel, SQL Server, Facebook.
• Preparación de datos permite limpiar y estructurar los datos usando Query Manager.
• Modelado de datos permite relacionar datos de diferentes fuentes y realizar cálculos.
• Visualización de datos permite crear gráficos y tablas para analizar datos y tomar decisiones.
• Reporte de datos permite diseñar cuadros de mandos (dashboards) para comunicar informes de manera efectiva.
• El menú lateral izquierdo permite acceder a diferentes vistas de los informes.
• El menú lateral derecho permite filtrar, visualizar y gestionar campos de datos.
• La barra de herramientas superior permite acceder a opciones generales como Archivo, Abrir, Guardar y Exportar.
• Obtener datos > Excel permite importar datos desde un archivo de Excel.
• Transformar datos permite abrir Query Manager para limpiar y modelar datos.
• Cerrar y aplicar permite guardar los cambios realizados en Query Manager.
• Vista Informe permite arrastrar campos para crear visualizaciones.
• Gráfico de líneas (Line Chart) permite mostrar tendencias de datos a lo largo del tiempo.
• Gráfico circular (Pie Chart) permite mostrar la distribución de un todo en partes proporcionales.
• Segmentación de datos permite crear filtros interactivos basados en un campo determinado.
• Mapa permite mostrar la distribución geográfica de los datos.

Qlik Sense

• Qlik Sense es una plataforma para descubrir información en los datos, con capacidades de Business Intelligence.
• Business es la versión de Qlik Sense orientada a pequeñas y medianas empresas.
• Enterprise es la versión de Qlik Sense con funcionalidades avanzadas como Qlik Nprinting y Qlik Associative Big Data Index.
• Arrastrar y soltar es un modo para facilitar la creación de gráficos visualmente.
• "Crear nueva app" es un botón para iniciar la creación de una nueva aplicación.
• Se puede utilizar un fichero de datos local para la visualización.
• Se puede utilizar datos de fuentes externas a través de conectores.
• Qlik Datamarket es un repositorio de datos reales para usar como ejemplos.
• "Cargar datos" es el proceso para incorporar los datos seleccionados a la app.
• "Editar hoja" es el área donde se elige el tipo de gráfico, dimensión y medida.
• Dimensión es una característica del dato para agrupar la medida (ej: fecha, ciudad, edad).
• Medida es un cálculo que decide qué parte de los datos mostrar (ej: suma de ventas, media de productos).
• Filtros permite refinar la visualización agregando criterios específicos.
• Gestor de datos permite ver la estructura de las tablas y sus relaciones.
• Campos clave son campos comunes que permiten asociar tablas entre sí.
• Editor carga de datos permite trabajar con el código utilizado para cargar los datos.
• Visor del modelo de datos permite observar las relaciones entre las tablas y sus dependencias.
• Tablas pivotantes permite un análisis flexible de datos, para identificar problemas.
• Marcadores permite almacenar el resultado de aplicar filtros para reutilizarlos.
• Etiquetas permite modificar los nombres de los ejes en un gráfico.
• Opciones de estilo permite modificar la orientación de un gráfico.
• ISO 3166 es una dimensión que se añade para representar datos en un mapa geográfico.
• Historias permite contar una historia con los datos.

Tableau

• Dimensiones son datos descriptivos, como nombres de clientes o categorías de productos, usados para segmentar y agrupar los datos.
• Medidas son datos numéricos que se pueden agregar, como ventas o ganancias, usados para realizar cálculos y análisis.
• Páginas permite dividir una vista en una serie de páginas para analizar cómo un campo específico afecta al resto de los datos en una vista.
• Filtro define qué datos excluir o incluir en la visualización, creando vistas personalizadas y enfocadas.
• Marcas permite estructurar, visualizar y dar forma a los datos, añadiendo dimensiones a través de opciones como color, tamaño, etiqueta, detalle y descripción emergente.
• Color discrimina el contenido del gráfico mediante colores, basándose en los campos arrastrados a esta opción.
• Tamaño modifica el tamaño de los objetos en la visualización para destacar elementos importantes y dar proporcionalidad.
• Etiqueta asigna etiquetas a los objetos de la visualización, permitiendo especificar criterios de visualización y personalizar el contenido de las etiquetas.
• Detalle permite incluir nuevas vistas en la visualización sin que formen parte de los estantes Columna o Fila, incorporando el nivel de detalle marcado por el campo.
• Descripción emergente edita el texto que aparece al pasar el ratón sobre los elementos del gráfico, personalizando la información mostrada.
• VizQL (Visual Query Language) es un lenguaje de consulta estructurado para bases de datos con un lenguaje descriptivo para renderizar gráficos.

Tableau (continuación)

• Filtros permiten analizar datos y encontrar información relevante, facilitando la exploración gráfica.
• "Mostrar filtro" activa un filtro definido para que aparezca en el lateral derecho y esté listo para su uso.
• Páginas permite recorrer la visualización y observar cómo un campo afecta al resto de los datos, ideal para análisis temporal.
• "Arrastrar campo a Páginas" permite ver la evolución de las ventas a lo largo de los años, utilizando el campo "Order date".
• La función "play" en Páginas muestra secuencialmente la visualización, personalizando los beneficios por categoría y subcategoría para cada año.
• Dashboard combina varias gráficas en un mismo espacio, vinculando datos para un análisis eficaz.
• "Arrastrar hojas al Dashboard" permite componer un dashboard arrastrando hojas de trabajo existentes al área de trabajo del dashboard.
• "Clic en el embudo" vincula los datos entre dos hojas en un dashboard.
• Dashboard → Acciones vincula datos en un dashboard y añade un filtro.
• Historias permite navegar de forma lineal entre varias hojas o dashboards para construir un storytelling.
• "Arrastrar hojas a la Historia" permite agregar hojas de trabajo y dashboards a la parte superior de la historia.

CARTO Sistemas de Información Geográfica

• Sistemas de Información Geográfica (GIS) permiten visualizar, analizar e interpretar datos espaciales para entender patrones y tendencias.
• Proporciona un flujo de trabajo rápido desde la información hasta el conocimiento.
• Los datos de ubicación impactan la forma en que las empresas hacen negocios.
• Inteligencia de Ubicación (LI) es la disciplina que convierte datos de ubicación en resultados comerciales a través del enriquecimiento, la visualización y el análisis iterativo.
• Sistemas de Posicionamiento Global (GPS) fueron un punto de inflexión en el mundo de la Inteligencia de Ubicación al incorporarse en smartphones en 2008.
• El mapeo de recursos fue de los primeros usos modernos de los datos de ubicación para ayudar a los gobiernos en la toma de decisiones.
• La disponibilidad en la nube facilita el acceso a datos de ubicación gracias a Internet.
• Mashups son combinaciones de datasets discretos que se unen para crear nuevas aplicaciones.
• Las empresas exitosas buscan obtener información real sobre la sociedad y los servicios analizando datos de ubicación.
• Big Data contribuye al análisis de datos de ubicación ofreciendo mayores oportunidades para usar datos en la resolución de problemas.
• La información de dispositivos móviles proporciona información valiosa sobre la ubicación y dirección de los clientes.
• La computación en la nube permite acceder a grandes cantidades de información sin necesidad de un hardware costoso.
• El Internet de las Cosas (IoT) optimiza la gestión de recursos urbanos como las rutas de recolección de basura.
• "On the cloud" es un servicio online totalmente gestionado por CARTO en la nube.
• "On-premises" significa que CARTO se despliega en la propia infraestructura de la empresa.
• "Drag and Drop" son herramientas que ofrece la versión online de CARTO para el análisis de datos.
• Cargar, Editar, Ver o Eliminar Datos son acciones que pueden realizar los usuarios en la pestaña de 'Datos' en CARTO.
• Las Consultas SQL permiten seleccionar partes específicas del conjunto de datos.
• BaseMap es una opción para modificar la apariencia del mapa cambiando el fondo.
• Widgets permiten explorar el mapa seleccionado diferentes tipos de filtros.
• CARTO puede manejar diferentes capas o layers, permitiendo solapar diferentes fuentes de información sobre un mismo mapa.