Ingresa a INTRODUCCIÓN A GRÁFICAS BIG DATA CON D3 JAVASCRIPT (Módulo 1)

MODULO 2-GRÁFICAS BIG DATA CON D3 JAVASCRIPT


By Underc0de – Hacking y seguridad informática

https://underc0de.org/foro

 

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 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.

 

MODULO 3-GRÁFICAS BIG DATA CON D3 JAVASCRIPT esperalo pronto

By: @graphixx

Posts Relacionados

Comments

comments

Deja una respuesta

Tu email no será publicado. Los campos requeridos estan marcados con *
Puedes usar tags HTML y los atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">