Herramientas de usuario

Herramientas del sitio


personas:johnny:proyectos:visualizaciones_d3

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

personas:johnny:proyectos:visualizaciones_d3 [2017/05/02 16:54] – creado kzpersonas:johnny:proyectos:visualizaciones_d3 [2017/05/05 20:13] (actual) kz
Línea 1: Línea 1:
-====== Guía de implementación - Diagrama de árbol ======+====== Diagrama de árbol ======
  
 {{:personas:johnny:proyectos:screen_shot_2017-05-02_at_10.11.16_am.png?400|}} {{:personas:johnny:proyectos:screen_shot_2017-05-02_at_10.11.16_am.png?400|}}
Línea 372: Línea 372:
  
 {{:personas:johnny:proyectos:screen_shot_2017-05-02_at_11.27.26_am.png?400|}} {{:personas:johnny:proyectos:screen_shot_2017-05-02_at_11.27.26_am.png?400|}}
 +
 +====== Diagrama tipo sankey ======
 +
 +{{:personas:johnny:proyectos:screen_shot_2017-05-05_at_2.24.17_pm.png?400|}}
 +
 +Esta gráfica se genera usando D3.js, específicamente la API que concierne a estructuras de tipo jerárquico. [[https://github.com/d3/d3/blob/master/API.md#hierarchies-d3-hierarchy]]
 +
 +**Uso:** Este tipo de gráfico se caracteriza por presentar todas las relaciones posibles de una fuente o sector hacia varios sectores o un único sector, dependiendo de las relaciones que estén presentadas en la data.
 +
 +**Archivo base para descargar:** {{ :personas:johnny:proyectos:sankey.zip |}}
 +
 +**Estructura de los archivos base
 +**
 +
 +{{:personas:johnny:proyectos:screen_shot_2017-05-05_at_11.10.51_am.png?400|}}
 +
 +Para este gráfico solo es necesario modificar el archivo **index.hmtl.**
 +
 +====== PASO A PASO
 + ======
 +
 +**La data
 +**
 +
 +El formato con el cual trabaja este gráfica es .json. Debido a la naturaleza de este tipo de gráfico, la estructura de la data será de este tipo.
 +
 +Por lo general, siempre la data se trabaja en Excel o en google spreadsheets. Para este gráfico la data se puede trabajar donde se sienta más cómodo.
 +
 +**La estructura de datos en spreadsheets o excel
 +**
 +
 +Los nombres de las columnas, y su contenido no afectan al código de este gráfico, es decir; no necesitamos nombres de columnas específicos para poder generar la data.
 +Aunque podemos generar este gráfico con un archivo .csv, esto implica otro tratamiento de los datos que resulta más complicado de realizar, por tal razón; escogí un camino más fácil para que cualquier persona que lea esta guía pueda visualizar la data.
 +
 +** 2 . ¿ Cómo se genera el json para este gráfico ?
 +**
 +
 +EL primer paso es ir al siguiente enlace: [[http://app.rawgraphs.io/]]
 +
 +{{:personas:johnny:proyectos:screen_shot_2017-05-05_at_11.30.44_am.png?400|}}
 +
 +Aquí nos encontraremos con una zona blanca que nos indica que podemos cargar los datos mediante el botón verde “upload a file” o pegarlos directamente en la ventana.
 +
 +{{:personas:johnny:proyectos:screen_shot_2017-05-05_at_11.30.56_am.png?400|}}
 +
 +Cuando hayamos cargado o pegado los datos, la página nos indicará que estamos listos para ir al paso siguiente. 
 +
 +Nos dirigimos más abajo en la misma, y escogemos un gráfico, para este tutorial específico, tenemos que escoger “alluvial diagram”.
 +
 +{{:personas:johnny:proyectos:screen_shot_2017-05-05_at_11.38.20_am.png?400|}}
 +
 +
 +Después de este paso, vamos otra vez hacia abajo en la página y nos encontraremos con el generador de la gráfica según el diagrama de hayamos seleccionado.
 +
 +{{:personas:johnny:proyectos:screen_shot_2017-05-05_at_11.40.21_am.png?400|}}
 +
 +Lo único que hace falta es arrastrar los bloques verdes de la izquierda, hacia las ventanas blancas de la derecha. Cabe notar, que las ventanas donde se arrastran los bloques nos indican qué tipo de dato debemos arrastrar ahi, si numeros o palabras. (numbers o strings).
 +
 +{{:personas:johnny:proyectos:screen_shot_2017-05-05_at_11.46.32_am.png?400|}}
 +
 +Finalmente la app web nos enseña el gráfico generado de la data.
 +
 +{{:personas:johnny:proyectos:screen_shot_2017-05-05_at_11.46.44_am.png?400|}}
 +
 +Pero esta grafica no nos sirve, porque suele ser un png o svg que se incrusta en una página web y que por lo general suele ser estática, sin ningún tipo de interactividad.
 +
 +Para finalizar esta parte, hacemos scroll hacia la última parte de la página, donde se nos entregará la gráfica en formato svg.
 +
 +{{:personas:johnny:proyectos:screen_shot_2017-05-05_at_11.50.37_am.png?400|}}
 +
 + A disposición en la parte izquierda, encontramos un panel donde podemos generar el json que necesitamos para generar el mismo gráfico pero usando d3 nativo. 
 +
 +Finalmente entonces, hacemos click en exportar json **“data model json”** y ya tendremos nuestra estructura de datos lista para inyectarle a la gráfica.
 +
 +{{:personas:johnny:proyectos:screen_shot_2017-05-05_at_11.50.42_am.png?400|}}
 +
 +**Generando la gráfica
 +**
 +
 +Finalmente para generar la gráfica, insertamos el archivo json que nos da la web en la carpeta donde está el proyecto y lo importamos en el código javascript. Específicamente la línea 75, reemplazando el nombre por el nombre que tenga el json.
 +
 +{{:personas:johnny:proyectos:screen_shot_2017-05-05_at_2.21.51_pm.png?400|}}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  
personas/johnny/proyectos/visualizaciones_d3.txt · Última modificación: 2017/05/05 20:13 por kz