dataviz

Visualización tipo gráfica de barras

Descripción de archivos principales:

barchart.html
- Archivo html en el que se importan principalmente:
- Librería de la visualización
- Archivo js con diversas funcionalidades (js/barchart.js)
- Contendor para la gráfica, que en este caso se debe definir en el html como:
  <div id="bar-chart"></div>
- Contenedor para leyendas, que debe tener la siguiente estrucutra html:
```
<div class="svgLegend4">
    <div class="legend4"></div>
</div>
```
partials/barchart_example.json
- Json base para definir los valores que mostrará la visualización.
js/barchart.js
- Javascript que contiene las funcionalidades necesarias para dibujar la visualización.

##Json base para gráfica de barras

El Json que consumirá la visualización debe estar en todo momento dentro del folder partials y tener asignado el nombre barchart_example.json

La estructura debe ser igual a la del archivo barchart_example.json, si exisite alguna diferencia, por mínima que sea, la gráfica no se visualizará en el navegador.

Además los nombres o keys de los valores deben ser iguales a los dej Json de ejemplo para que estos se puedan mostrar en la visualización.

Estructura

{
  "ejex": "Transporte",
  "ejey": "Personas",
  "valores": [
    {"label":"Coche", "Chihuahua":20325, "Coahuila":10834, "Sonora": 50926, "Nuevo León":20778},
    {"label":"Coche compartido", "Chihuahua":15643, "Coahuila":30726, "Sonora":40878, "Nuevo León":15352},
    {"label":"Autobus", "Chihuahua":20778, "Coahuila":15352, "Sonora":40878, "Nuevo León":20325},
    {"label":"Metro", "Chihuahua":50926, "Coahuila":20778, "Sonora":40522, "Nuevo León":10834},
    {"label":"Bicicleta", "Chihuahua":20325, "Coahuila":10834, "Sonora":25899, "Nuevo León":23987},
    {"label":"A pie", "Chihuahua":15352, "Coahuila":20325, "Sonora":30726, "Nuevo León":16335},
    {"label":"Motocicleta", "Chihuahua":40878, "Coahuila":15352, "Sonora":67854, "Nuevo León":20778},
    {"label":"Taxi", "Chihuahua":50926, "Coahuila":10834, "Sonora":20325, "Nuevo León":20778}
  ]
}

Valores editables para la gráfica de barras

"ejex" //Legenda del Eje X en la gráfica
"ejey" //Legenda del Eje Y en la gráfica
"valores" //Son los valores que se muestran en las columnas de la gráfica
"label" //Es el valor por el cual se agrupan las columnas

Visualización tipo gráfica de pie

Descripción de archivos principales:

piechart.html
- Archivo html en el que se importan principalmente:
- Librería de la visualización
- Archivo js con diversas funcionalidades (js/piechart.js)
- Contendor para la gráfica, que en este caso se debe definir en el html como:
  <div id="pie-chart"></div>
- Contenedor para leyendas, que debe tener la siguiente estrucutra html:
```
<div class="svgLegend4">
    <div class="legend4"></div>
</div>
```
partials/piechart_example.json
- Json base para definir los valores que mostrará la visualización.
js/piechart.js
- Javascript que contiene las funcionalidades necesarias para dibujar la visualización.

##Json base para gráfica de pie

El Json que consumirá la visualización debe estar en todo momento dentro del folder partials y debe tener asignado el nombre piechart_example.json

La estructura debe ser igual a la del archivo piechart_example.json, si exisite alguna diferencia, por mínima que sea, la gráfica no se visualizará en el navegador.

Además los nombres o keys de los valores deben ser iguales a los dej Json de ejemplo para que estos se puedan mostrar en la visualización.

Estructura

[
  {"label": "Alpha", "value": 20},
  {"label": "Beta", "value": 15},
  {"label": "Gamma", "value": 70},
  {"label": "Delta", "value": 40},
  {"label": "Epsilon", "value": 50}
]

//Cada objeto del Json es un área del Pie chart

Valores editables para gráfica de pie

"label" //Es la etiqueta que se muestra en el tooltip y en las leyendas por cada color
"value" //Es el valor con que se dibuja cada área del Pie, en el tooltip se muestra como porcentaje

Visualización tipo Treemap

Descripción de archivos principales:

treemap.html
- Archivo html en el que se importan principalmente:
- Librería de la visualización
- Archivo js con diversas funcionalidades (js/treemap.js)
- Contendor para la gráfica, que en este caso se debe definir en el html como:
  <div id="treemapd3"></div>
partials/treemap_example.json
- Json base para definir los valores que mostrará la visualización.
js/treemap.js
- Javascript que contiene las funcionalidades necesarias para dibujar la visualización.

##Json base

El Json que consumirá la visualización debe estar en todo momento dentro del folder partials y debe tener asignado el nombre treemap_example.json

La estructura debe ser igual a la del archivo treemap_example.json, si exisite alguna diferencia, por mínima que sea, la gráfica no se visualizará en el navegador.

Además los nombres o keys de los valores deben ser iguales a los dej Json de ejemplo para que estos se puedan mostrar en la visualización.

Estructura para Treemap

{
	"unidad": "Personas",
	"valores": [
		{
			"nivel1": "Manufactura y construcción",
			"nivel2": "Apoyo a la juventud",
			"nivel3": "Servicios personales",
			"nivel4": "Prima quinquenal por años de servicios efectivos presta dos.",
			"valor": 55000
		}
	]
}

Valores editables para Treemap

"unidad" //Se muestra como texto dentro del popup de cada área del treemap
"valores" //Son los valores en que se agrupa el Treemap, si se quieren tener más o menos niveles de profundidad, estos se deben especificar en el archivo js/treemap.js en la variable idVal
"valor" //Asigna valor y porcentaje a cada elemento del Treemap

Visualización tipo scatter plot

Descripción de archivos principales:

scatter.html
- Archivo html en el que se importan principalmente:

Librería de la visualización
Archivo js con diversas funcionalidades (js/scatter.js)
Contendor para la gráfica, que en este caso se debe definir en el html como:
<div id="scatterplot"></div>
Contenedor para escalas, es en donde se mostrará la descripción de los tamaños de las burbujas en el scatter plot y debe tener la siguiente estrucutra html:

<div class="col-sm-10 escala">

  <div class="col-sm-1 textLegendHard">Escala:</div>
  
  <div class="col-sm-2" id="circle-big"></div>
  <div class="col-sm-2 textLegend"><span id="legendBig"></span></div>

  <div class="col-sm-2" id="circle-medium"></div>
  <div class="col-sm-2 textLegend"><span id="legendMd"></span></div>

  <div class="col-sm-2" id="circle-small"></div>
  <div class="col-sm-2 textLegend"><span id="legendSm"></span></div>

</div>

partials/scatter_example.json
- Json base para definir los valores que mostrará la visualización.
js/scatter.js
- Javascript que contiene las funcionalidades necesarias para dibujar la visualización.

Para probar las visualizaciones en local, es necesario montar el proyecto en un servidor web local como Apache.

##Json base

El Json que consumirá la visualización debe estar en todo momento dentro del folder partials y debe tener asignado el nombre scatter_example.json

La estructura debe ser igual a la del archivo scatter_example.json, si exisite alguna diferencia, por mínima que sea, la gráfica no se visualizará en el navegador.

Además los nombres o keys de los valores deben ser iguales a los dej Json de ejemplo para que estos se puedan mostrar en la visualización.

Estructura para scatter plot

{
  "titulo": "Tipos de contratación",
  "ejex": "Fecha de firma",
  "ejey": "Vigencia en meses",
  "unidad": "Pesos",
  "valores": [
    {
      "tipo": "Licitación",
      "monto": 12855,
      "vigencia": 50,
      "fecha": "12 Ene 2015",
      "contrato": "SO-005542-N23-2015"
    }
   ]
}

Valores editables para scatter plot

"titulo" //Es la leyenda que se muestra en la parte superior de la gráfica
"ejex" //Legenda del Eje X en la gráfica
"ejey" //Legenda del Eje Y en la gráfica
"unidad" //Se muestra como texto en la leyenda de la Escala en la parte inferior de la gráfica
"valores" //Cada objeto dentro de este array dibuja una "burbuja" o "circulo" en el Scatter
"tipo" //Valor por el cual se agrupan las "burbujas
"monto" //Asigna el tamaño de la "burbuja"
"vigencia" //Posición de la "burbuja" respecto al Eje Y
"fecha" //Posición de la "burbuja" respecto al Eje X
"contrato" //Valor que se muestra como texto dentro del Tooltip de cada burbuja

Visualización de mapa geográfico de México interactivo

Descripción de archivos principales:

mapa.html
- Archivo html en el que se importan principalmente:
- Librería de la visualización
- Archivo js con diversas funcionalidades (js/mapa.js)
- Contendor para la gráfica, que en este caso se debe definir en el html como:
  <div id="mapMX" class="map"></div>
partials/mxGeo.json
- Json base para definir los valores que mostrará la visualización.
js/mapa.js
- Javascript que contiene las funcionalidades necesarias para dibujar la visualización.

Para probar las visualizaciones en local, es necesario montar el proyecto en un servidor web local como Apache.

##Json base

El Json que consumirá la visualización debe estar en todo momento dentro del folder partials y debe tener asignado el nombre barchart_example.json

La estructura debe ser igual a la del archivo barchart_example.json, si exisite alguna diferencia, por mínima que sea, la gráfica no se visualizará en el navegador.

Además los nombres o keys de los valores deben ser iguales a los dej Json de ejemplo para que estos se puedan mostrar en la visualización.

Estructura Json del mapa interactivo (En este ejemplo solo se muestran los valores editables)

{
  "type": "FeatureCollection",
  "etiqueta_info": "Etiqueta ejemplo:",
  "etiqueta_pop": "Porcentaje ejemplo:",
  "ejex": "Año",
  "ejey": "Valor",
  "features": [
    {
      "type": "Feature",
      "geometry": {
      ...
     },
     "properties": {
        "valor_info": "47",
        "porcentaje_pop": 32,
        "estado": "Sinaloa",
        "grafica": [
          {
             "tiempo": "2008",
             "valor": 10
           },
           {
            "tiempo": "2009",
            "valor": 5
          },
          {
            "tiempo": "2010",
            "valor": 2
          }
        ]
      }
    }
  ]
}

Valores editables para el mapa interactivo

"etiqueta_info" //Leyenda del Info Box
"etiqueta_pop" //Leyenda del Tooltip
"ejex" //Leyenda del Eje X en la gráfica
"ejey" //Leyenda del Eje Y en la gráfica
"valor_info" //Valor mostrado en el info Box
"porcentaje_pop" //Porcentaje mostrado en el Tooltip
"grafica" //Cada objeto dentro de este array es un punto en la gráfica que se dibuja dentro del Info Box.

Importante: No cambiar los demás nombres o valores del Geojson, ya que con cualquier error, el mapa no se visualizará en el navegador

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

dataviz

Visualización tipo gráfica de barras

Visualización tipo gráfica de pie

Visualización tipo Treemap

Visualización tipo scatter plot

Visualización de mapa geográfico de México interactivo

About

Releases

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
barchart		barchart
mapa		mapa
piechart		piechart
scatter		scatter
treemap		treemap
README.md		README.md

nez/dataviz

Folders and files

Latest commit

History

Repository files navigation

dataviz

Visualización tipo gráfica de barras

Visualización tipo gráfica de pie

Visualización tipo Treemap

Visualización tipo scatter plot

Visualización de mapa geográfico de México interactivo

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages