📊
LABORATORIO DE GRÁFICAS BIG DATA CON D3 JAVASCRIPT
By Graphixx Rōninnovation | www.devmafia.org
Invita un CAFÉ a Graphixx >>> https://ko-fi.com/graphixx_roninnovation REPO CON SOURCE CODE DEL DOC: https://github.com/graphixx/BIGDATA_D3_JAVASCRIPT_LAB
¿Qué es BIG DATA ?
Su traducción literal del inglés sería GRANDES DATOS y sus siglas BD nos hacen pensar en Bases de Datos y es que es allí en esos sistemas de gestión de información en donde esta BIG DATA se almacena.
¿ Qué tan grande es grande para BIG DATA ?
What Happens in an Internet Minute in 2018?
¿ Qué tan grande puedo implementar BIG DATA en mi PC ?
Ahora es cuando debes preguntarte cuantos registros he tenido en mis manos, o mejor aún que tanta cantidad de registros he intentado cargar a mi hosting en la nube o en mi servidor local.
Los grandes hablan de 200 millones de registros, y si queremos asumir o medir eso deberíamos comenzar por decir que en 1GB de espacio caben alrededor de unos 8 millones de registros por lo que WhatsApp estaría generando unos 5 GB por minuto de información, no crees tener suficiente disco ni memoria en tu pc para emular eso verdad, y estarías en lo cierto.
¿ Dónde consigo BIG DATA o cómo genero mi propio BIG DATA ?
La información abierta suele conocerse como OPEN DATABASE ( https://www.google.com.co/search?q=open+database ) y uno de los mejores ejemplos es la de https://lite.ip2location.com/ la DB11 es la mas grande y pesa 360 MB con alrededor de 3’400.000 registros. (Excel no soporta tantos registros puedes visualizarlos con Notepad++ (https://notepad-plus-plus.org/
)).
En mi experiencia cargando bases de datos de 2 MB (15.000 registros) demora 1 minuto en una PC con i5 y 12GB de RAM.
Una base de datos de 360 MB y 3,356,235 se demoraría unas 14 horas en importar con el MYSQL WorkBench ( https://dev.mysql.com/downloads/workbench/ ) basados en una prueba que hicimos de colocar a cargar por 1h:37m el CSV el cual importo 232.290 registros.
nota: en la pagina donde esta la BD de 3 millones de registros: https://lite.ip2location.com/database/ip-country-region-city-latitude-longitude-zipcode-timezone
Hay un script de creación de la base de datos que debes ejecutar antes de poner a importar el CSV:
además al archivo: IP2LOCATION-LITE-DB11.csv debes cambiarle la extensión CSV de mayúsculas a minúsculas para poder que el MYSQL WorkBench te tome el archivo correctamente.
Anexos:
Más editores de BIG DATA:
The 010Editor on Windows will open GIANT (think 50 GB) files in binary mode and allow you to edit and search the text.
Community wiki:
Suggestions are
  • HTMLPen.com is a free online editor that can open and highlight syntax TB+ files instantly, supports UTF- 8, and can run on a modern browser in any OS. (read-only for big files)
  • Liquid Studio Large File Editor Opens and edits TB+ files instantly, supports UTF-8, Unicode, etc. It is free and covered by the community edition (Windows Only).
  • SlickEdit
  • Large Text File Viewer (read only)
  • glogg (read only, read the file directly from disk, handle multi-GB files).
  • HxD hex editor, but good for large files.
  • LogExpert (download) did a swell job for more than 6 GB log files. It is free.
  • UltraEdit can open files of more than 6 GB, but the configuration must be changed for this to be practical (menu Advanced → Configuration → File Handling → Temporary Files → "Open file without temp file...").
  • wxHexEditor can open such files instantly, working on Linux, Windows, MacOSX
  • EmEditor handles very large text files nicely, officially up to 248 GB but up to 900 GB in my experience.
Mas no se trata de almacenar el horóscopo ni información trivial y sin uso práctico, una de las mayores implicaciones que está teniendo esta BIG DATA es en el campo de la medicina donde se está orientando toda su investigación y análisis en tratar de predecir el comportamiento de las enfermedades, o adelantarse a qué afecciones o accidentes son los más comunes de entre los pacientes de determinada ubicación geográfica.
Como ya habíamos comentado la BIG DATA se almacena en bases de datos y estas pueden ser relacionales (SQL) o no relacionales (NoSQL).
La principal diferencia es lo estricto que es SQL en cuanto al tipo de datos de cada campo frente al NoSQL y que SQL es centralizado y NoSQL es descentralizado (ósea que soporta estructuras distribuidas esto es la llamada escalabilidad horizontal: son capaces de crecer en número de máquinas, en lugar de tener que residir en grandes máquinas.)
¿ Cómo está el panorama global en cuanto a BIG DATA ?
Alrededor del ecosistema giran varias comunidades dedicadas a tratar temas de esta índole, si tomamos referencia a que ha pasado este año podríamos resumir la tendencia en estos ítems de la más reciente encuesta:
Dicha encuesta la ganó el Item : Data Visualization (D3.js+Tableau) Sobre el cual nos hemos basado para elaborar este laboratorio.

LABORATORIO DE GRÁFICAS BIG DATA CON D3 JAVASCRIPT – MÓDULO 1

El análisis de grandes volúmenes de información por medio de estadísticas en las gráficas de BIG DATA se ha convertido en los últimos días en un requerimiento imprescindible a incluir en tus desarrollos de software, si es que quieres demostrar que tus niveles de habilidades profesionales están a la vanguardia.
Aunque el objeto de este curso es desarrollar el tema en torno al sector médico los apuntes y análisis en el presentados son aplicables en cualquier entorno y gremio laboral en el que te encuentres.
Y aunque no entraremos a detallar ni definir puntualmente cada concepto que puede representar el BIG DATA globalmente como disciplina, esbozamos a grandes rasgos lo que para las empresas en donde implementamos nuestras metodologías de BIG DATA representa el análisis y uso de estas tecnologías emergentes.
Los análisis estadísticos de BIG DATA de volúmenes considerables de información recolectada en base a los registros médicos de los empleados de una compañía sirven al médico laboral como base de escrutinio para predecir y elaborar tanto proyecciones como informes que actúen de manera predictiva en cuanto a cómo se visualiza la salud y los incidentes médicos dentro del ambiente laboral de una gran empresa.
Estos grandes volúmenes de información, aunque a veces son obtenidos desde bases de datos de dominio público, es más útil para las compañías cuando el análisis es reflejo de los procesos internos de la misma, los cuales se alimentan por medio de formularios que algunos o hasta cientos de usuarios de la empresa alimentan por medio de interfaces móviles o web.
En conclusión, una de las principales implementaciones del BIG DATA en el aspecto de salud en las empresas es para que el médico laboral de la compañía determine qué tipo de diagnósticos médicos están afectando en mayor medida a la empresa, y poder tomar medidas de prevención y contingencia frente a esos índices que al afectar el desempeño de las labores y representar incapacidades que deben pagarse al empleado, son en primera instancia valores económicos para la empresa, que representan pérdidas, es así como el BIG DATA dentro de la compañía ayuda a prevenir gastos y ahorrar en costos, representando un beneficio económico al ser bien implementado.

LABORATORIO DE GRÁFICAS BIG DATA CON D3 JAVASCRIPT – MÓDULO 2

En este módulo aprenderemos cómo adquirir la base de datos de muestra con que trabajar, como importarla en nuestro servidor local y además realizaremos nuestra primera consulta SQL basados en los registros de nuestra db de muestra.
Para razón de este tutorial yo ubique el portal de datos abierto de Colombia, el cual reside en la URL: https://www.datos.gov.co
Una vez ubiques el portal de datos abiertos de tu País, puedes ubicar una base de datos similar a la proporcionada en este curso, buscando por la palabra accidente en el mismo así:
Al descargar un dataset como el de accidentes de tránsito de tu País de un año en particular encontrarás una hoja de datos de aproximadamente 200 mil registros la cual es idónea para tus investigaciones y prácticas de gráficas BIG DATA.
Ahora bien, ¿ya tengo una tabla de 200 mil registros donde la pongo? para el objeto de este curso se supone que ya tienes experiencia con servidores locales de programación web y no voy a entrar en detalles de cómo instalar uno, yo suelo usar http://www.uwamp.com/en/
Una vez tengas ubicado tu servidor local, debemos importar el dataset en el , para lo cual recomiendo usar el software MYSQLFRONT http://www.mysqlfront.de/
La importación tarda aproximadamente 1 minuto.
Como podrás observar en tu localhost con el PHPMyAdmin la tabla en efecto tiene 170 mil filas.
Lo que más nos interesa a parte obviamente de los datos es la estructura con que quedaron conformados los mismos.

En el caso de la tabla que use como referencia los campos son:

identiaccidentalidad fecha codigodepartamentoalfanumerico2 departamento codigomunicipioalfanumerico5 municipio área nivelriesgoproducto tipoafectacion hora observación
Tanto la lista de campos como el nombre de la base de datos y el nombre de la tabla son cruciales para los pasos que siguen, ya que ya entraremos a realizar nuestra primera gráfica con D3.
Ahora bien, ¿qué queremos graficar ? es la pregunta del millón, para nuestra primera gráfica vamos a filtrar el número de accidentes por departamento(estado) y graficamos dicha estadística.
Para generar nuestro reporte por departamentos, y ya que tenemos nuestra tabla en MYSQL haremos uso del lenguaje SQL para diseñar la consulta que nos entregue los datos con que graficar en D3.
Para diseñar tu consulta SQL yo te recomiendo usar el editor Notepad++ e ir
organizando en un único archivo sql las distintas consultas que vamos a realizar a lo largo del curso sobre nuestra base de datos.
Tu archivo de consultas SQL en Notepad++ lucirá así:
Dicho archivo se adjunta al pack de binarios del curso.

Nuestra primer consulta SQL será entonces la siguiente:

/* Número de Accidentes de Tránsito por Departamento */ SELECT DISTINCT `departamento`, COUNT(`departamento`) FROM
`registro_nacional_de_accidentes_de_transito_formatocsv` GROUP BY `departamento` ORDER BY `departamento` ASC;
Dicha consulta la ubicamos en el apartado SQL de consultas de nuestro servidor local en PHPMyAdmin:
La consulta en lenguaje SQL lo que está haciendo es separar con el select distinct por valores únicos sin repetidos la columna departamento y la función COUNT cuenta cuántas veces está cada uno de esos valores únicos en la tabla, con lo que nos entrega cuantificados cuantos accidentes hay por departamento(estado) en dicha tabla.
La consulta tardará aproximadamente 2 minutos en ejecutarse y se mostrará así:
para que me mostrara todas las filas yo simplemente le di click en mostrar todo cuando la consulta terminó, el preguntara que si realmente desea mostrar todas las filas que podría afectar el rendimiento del navegador, dile que si.
Con dicha consulta ya tenemos entonces una tabla de estadísticas en base a un filtro con que realizar nuestra primera gráfica de BIG DATA con D3.JS el cual será tema del próximo módulo.

LABORATORIO DE GRÁFICAS BIG DATA CON D3 JAVASCRIPT – MÓDULO 3

Ahora si ya en el módulo anterior ubicamos la data con que trabajar, es tiempo de ponernos manos a la obra a instalar D3.JS en nuestro servidor local. https://c3js.org/
Descargamos: https://github.com/c3js/c3/releases/latest Ubicándolo en nuestro localhost nos queda así:
Probando que funciona…
Vamos a la pagina https://c3js.org/examples.html y seleccionamos un ejemplo que nos guste yo seleccionaría para uso del lab este https://c3js.org/samples/axes_rotated.html
para ser más organizados he organizado el directorio de pruebas del lab en el servidor local así:
Simplemente cree una carpeta dentro del www y dentro de ella puse la que se descomprime al descargar C3 de GitHub.
Para comenzar C3 usa D3 asi que debemos descargar igualmente D3 desde : https://d3js.org/ https://github.com/d3/d3/releases/download/v5.7.0/d3.zip y ubicar la libreria D3 dentro de la misma carpeta donde pusimos anteriormente C3 queda asi:
Ahora debes generar un archivo index.html el cual lleva la siguiente estructura:
El código completo del proyecto se incluye en el archivo adjunto de binarios encontrarás el enlace al final del laboratorio. graficasd3_MODULO3.rar
Con ese código dentro del HTML tu primer gráfica D3 lucirá así:
Felicidades por tu primer gráfica con librerías BIG DATA, en el siguiente módulo veremos como cargarle data propia.

LABORATORIO DE GRÁFICAS BIG DATA CON D3 JAVASCRIPT – MÓDULO 4

Para mostrar la información sobre la tabla D3 vamos a necesitar implementar PHP de la siguiente forma: (no os preocupéis todo el código del módulo 4 también estará disponible para descarga al final del laboratorio).
En ese código PHP simplemente se ejecuta la consulta SQL y se imprime el arreglo que ella devuelve, en el archivo de consultas SQL que incluye el laboratorio podrás encontrar las consultas SQL más generales que podrías requerir al implementar un software de:
En una empresa local , espero te animes a probarlas todas sobre la tabla de accidentes de tránsito que incluimos con el laboratorio.
Ejecutar ese código nos imprime la consulta así:
Si te preguntas para que puse a imprimir la consulta fue para orientarme sobre qué estructura tiene el arreglo para poderlo recorrer, pero más aún para saber con qué identificadores (posiciones) consultar su información ya vamos a analizar en detalle esa implementación.
El código para imprimir la gráfica es:
En esta mezcla de código PHP Y Javascript lo que hicimos fue recorrer el arreglo para imprimir desde PHP hacia el Javascript las posiciones que habíamos observado que se imprimían cuando imprimimos la consulta.
El resultado de ese código es la siguiente gráfica:
no siendo mas me despido, espero estés contento por haber programado y ejecutado tu primer implementación de gráficas BIG DATA con este tutorial del laboratorio, recuerda visitar la comunidad devmafia para más tutoriales como este.
Last modified 2mo ago