LABORATORIO DE GRAFICAS BIG DATA CON D3 JAVASCRIPT BY GRAPHIXX

Underc0de - Hacking y seguridad informática

www.underc0de.org
¿Qué es BIG DATA ?
Su traducción literal del ingles seria 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 esa BIG DATA se almacena.

¿ Que tan grande es grande para BIG DATA ?

¿ Que tan grande puedo implementar BIG DATA en mi PC ?

Ahora es cuando debes preguntarte cuantos registros he tenido en mis manos, o mejor aun 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 como 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:

Mas 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 que 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.)

¿ Como esta 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 mas reciente encuesta:
Dicha encuesta la gano el Item : Data Visualization (D3.js+Tableau)

Sobre el cual nos hemos basado para elaborar este laboratorio.

https://www.facebook.com/events/465148820647149/
 LABORATORIO DE GRAFICAS BIG DATA CON D3 JAVASCRIPT – MODULO 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 medico 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 medico 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 perdidas, 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 GRAFICAS BIG DATA CON D3 JAVASCRIPT – MODULO 2

En este módulo aprenderemos como 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í:
https://www.datos.gov.co/Transporte/Registro-nacional-de-accidentes-de-transito/jb4r-tjbv

Al descargar un dataset como el de accidentes de tránsito de tu País de un año en particular

encontraras una hoja de datos de aproximadamente 200 mil registros la cual es idónea para tus
investigaciones y prácticas de graficas 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
grafica con D3.

Ahora bien, que queremos graficar ? es la pregunta del millón, para nuestra primera
grafica vamos a filtrar el número de accidentes por departamento(estado) y graficaremos
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.

https://notepad-plus-plus.org/download/
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 cuantas veces esta
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 tardara aproximadamente 2 minutos en ejecutarse y se mostrara así:
para que me mostrara todas las filas yo simplemente le di click en mostrar todo cuando la
consulta termino, 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 grafica de BIG DATA con D3.JS el cual será tema del próximo modulo.
 LABORATORIO DE GRAFICAS BIG DATA CON D3 JAVASCRIPT – MODULO 3

Ahora si ya en el modulo 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 seleccionare para uso del
lab este https://c3js.org/samples/axes_rotated.html

para ser mas 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 encontraras el enlace al final del laboratorio.
graficasd3_MODULO3.rar

Con ese código dentro del HTML tu primer grafica D3 lucirá así:

Felicidades por tu primer grafica con librerías BIG DATA, en el siguiente modulo veremos como cargarle data propia.
 LABORATORIO DE GRAFICAS BIG DATA CON D3 JAVASCRIPT – MODULO 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
implementarle 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 que estructura tiene el arreglo para poderlo
recorrer, pero más aun para saber con que 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 graficas
BIG DATA con este tutorial del laboratorio, recuerda visitar la comunidad para mas tutoriales como este.