D3.js para representar matrices Origen/Destino

Viendo un gráfico de Uber, he encontrado una posibilidad muy buena para representar las matrices Origen/Destino de transporte público, peatones, bicicletas o cualquier elemento de Movilidad.

Esta imagen la he tomado de un curso que estoy haciendo de Big Data en unimooc.com

Mirando las posibilidades para representar este tipo de diagrama, que puede venir muy bien para una MOD, tenemos la librería D3.js.

En esta librería encontramos D3 Chord.

https://github.com/d3/d3-chord

Iré completando este post con los pasos a seguir para visualizar los datos .

 

Software para generar gráficos de cuerdas: http://circos.ca/

Opciones de configuración de gráficos con Chart.js

Ya sabemos que para crear un gráfico con Chart.js tenemos que hacer, como mínimo, algo así:

var elementoCanvas = document.getElementById("micanvas");
var migrafico = new Chart(elementoCanvas, {
type: 'bar',
data: {
    labels: ["xxx", "yyy"...],
    datasets: [{
        label: 'nombre de la serie',
        data: [valores numéricos],
        backgroundColor: "color",
        borderColor: "otrocolor",
        borderWidth: 1
    }, // Segundo dataset
        {
          label: 'Otra serie',
          data: [más datos],
          backgroundColor: "otro color más",
          borderColor: "más colores",
          borderWidth: 1
        }],
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
});

Es simple. Básicamente tenemos que definir el tipo de gráfico:

• bar
• line
• radar
• polarArea
• pie
• doughnut
• bubble

Después definimos los datos, que será un array de etiquetas de los valores y un array de datasets (que contendrán tantos datos numéricos como etiquetas de valores hayamos definido).

Y por último las opciones del gráfico.

Colores

Para un dataset podremos definir un color (o array de colores). Chart.js soporta la notación en hexadecimal, RGB y HSL. También puedes utilizar las típicas constantes (blue, red, etc…).

Una buena opción es definir el color como nosotros queramos con rgb:

rgba(0, 0, 0, 0.1);

Los 3 primeros valores (entre 0 y 255 nos darán el rojo, verde y azul) el último valor, entre 0 y 1, nos da la opacidad (1) o transparencia (0) del color.

Otra manera de definir un color:

color(window.chartColors.red).alpha(0.5).rgbString()

Lo anterior lo pone en el propio github del proyecto, pero a mí no me funciona.

Colores de un dataset:

1. backgroundColor:
2. borderColor:

Ejes del gráfico

Si no quiero mostrar las etiquetas de debajo del gráfico (eje X):

options: {
        scales: {
            xAxes: [{
                display: false
            }]
        }
    }

Lo mismo sucederá con yAxes.

Título del Gráfico

options: {
    title: {
      display: true,
      text: 'Título del gráfico'
    }
}

Por defecto, display está a false, así que si quieres título hay que ponerlo a true.

Se puede cambiar su posición con position, asignándole valores: ‘top’, ‘left’, ‘bottom’ o ‘right’.

Se le puede cambiar la fuente, color, tamaño, padding, etc.

Leyenda

Dentro de options:

    legend: {
      display: true,
      labels: {
        fontColor: 'rgb(255, 99, 132)'
      },
      position: 'right'
      }

 

.

 

Tipos de gráficos de Chart.js

tipo de gráfico:

• bar
• line
• radar
• polarArea
• pie
• doughnut
• bubble

Bar

Su aspecto es el siguiente:

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

O si queremos las barras horizontales:

var myBarChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: options
});

.

line

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

Si en un dataset pones:

lineTension: 0,

conseguirás que las líneas sean rectas, no tendrás ninguna curva para suavizar el punto.

Con pointRadius podrás establecer el radio del punto.

fill: false, –> no aparecerá relleno por debajo de la línea.

showLine: false, –> no aparecerá la línea.

Es decir, si ponemos fill y showLine a false, tendremos un gráfico de puntos, en lugar de un gráfico de líneas.

pointStyle: ‘circle’, ‘triangle’, ‘rect’, ‘rectRounded’, ‘rectRot’, ‘cross’, ‘crossRot’, ‘star’, ‘line’, and ‘dash’ Podría ser incluso una imagen.

spanGaps está por defecto a false. Si lo ponemos a true, cuando te falte un valor en la línea, no se romperá la línea.

radar

var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: options
});

.

polarArea

new Chart(ctx, {
    data: data,
    type: 'polarArea',
    options: options
});

startAngle, en las opciones del gráfico, nos dirá dónde comienza el gráfico, el ángulo inicial para el primer elemento.

animation.animateRotate y animation.animateScale las tiene por defecto a true, por lo que nos hará una animación de rotación y escala inicial.

pie

var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: data,
    options: options
});

rotation –> para establecer el ángulo inicial

Todas estas opciones son aplicables al siguiente gráfico.

.

doughnut

var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options
})

bubble

var myBubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: data,
    options: options
});

Ojo: La estructura del Dataset es distinta:

var data = {
    datasets: [
        {
            label: 'First Dataset',
            data: [
                {
                    x: 20,
                    y: 30,
                    r: 15
                },
                {
                    x: 40,
                    y: 10,
                    r: 10
                }
            ],
            backgroundColor:"#FF6384",
            hoverBackgroundColor: "#FF6384",
        }]
};

El data del Dataset es un array de tuplas de 3 elementos: x, y, r (coordenada x, coordenada y, radio).

{
    // X Value
    x: ,

    // Y Value
    y: ,

    // Radius of bubble. This is not scaled.
    r: 
}

.

Empezando con Chart.js

Retomo esta librería y a ver si esta vez profundizamos algo más.

La página principal de la misma la tienes en:

http://www.chartjs.org/

En Github en https://github.com/chartjs/Chart.js. Démosle una estrellita y un watch.

Y la documentación en una página: http://www.chartjs.org/docs/

Licencia

Chart.js está disponible bajo licencia MIT. MIT license.

Instalación

Nos podemos descargar la librería desde Github. Tendremos un fichero

Chart.js-master.zip

También tenemos el CDN: https://cdnjs.com/libraries/Chart.js

Desde Github nos podemos ir a la última versión (en la actualidad la 2.5.0) y descargar los ficheros Chart.js y Chart.min.js

https://github.com/chartjs/Chart.js/releases/tag/v2.5.0

Podemos incluir dos builds (script src=…):

• Chart.js – https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js
• Chart.min.js – https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js

Comenzamos

1. Añadimos el script Chart.js
2. Tenemos que añadir un elemento canvas, como parámetros, añadiremos width y height (en realidad, lo que pongamos aquí sólo se va a utilizar para ajustar la relación de altura y anchura, pero el canvas se va a intentar ajustar a la página o al elemento en el que esté incluído)
3. Si queremos, podemos incluir un div al que le pondremos la altura y anchura que nos interese.
4. Después, en el script debemos crear el gráfico: var myChart = new Chart(ctx, { type: ‘bar’, data: {…
   definiendo el tipo del mismo (bar en este caso).
5. Un gráfico puede tener 1 o mas datasets, pero estos datasets deben tener la misma estructura para darle el mismo significado al gráfico. En este ejemplo vamos a insertar solo un dataset.

La estructura de la variable data podemos ver que es algo muy similar a json, principalmente esta dividida en labels y datasets.

• labels: son las etiquetas que aparecen en la parte inferior del gráfico, en nuestro caso serían «Rojo», «Azul», «Amarillo», «Verde», «Morado», «Naranja».
• datasets: Los datasets son los grupos de datos que se mostrarán en el gráfico, podemos mostrar 1 o 2 o mas datasets, siempre y cuando todos conserven la misma estructura, el nodo de datasets esta dividido en: label, data, backgroundColor, borderColor, borderWidth.
  • label: Label es la etiqueta del dataset, el significado de los datos de la grafica por ejemplo “# de Votos”.
  • data: data al igual que las siguientes propiedades, son listas y las siguientes propiedades deben coincidir con el número de elementos que contenga la propiedad data, en nuestro caso la propiedad data cuenta con 6 elementos: [12, 19, 3, 5, 2, 3], estos datos pueden ser diferentes en cada dataset.
  • backgroundColor: es una propiedad que sirve para guardar un color y se traduce como el color de fondo del gráfico, al ser una lista de colores podemos darnos cuenta de que los colores pueden ser diferentes para cada barra.
  • borderColor: es una propiedad que sirve para guardar un color y se tradude como el color de borde de las barras, la lista de colores debe coincidir en número con la lista de valores en data y backgroundColor.
  • borderWidth: este es un solo valor numerico y el valor contenido se traduce como el ancho o grosor del borde de las barras o lineas.

Opciones

La libreria tambien nos permite controlar ciertas opciones, las cuales las podemos encontrar en la documentacion y estas opciones dependen del tipo de gráfico que usemos.

Basicamente lo que hacemos con la opción que hemos usado en este caso es forzar el eje Y de la grafica para que empieze en valor 0, ya que por default el valor del eje Y empieza en el valor mínimo que tengamos en los datos de nuestros datasets.

El resultado:

<canvas id="myChart" width="400" height="400">canvas>
<script>
      // Debemos crear una instancia del objeto canvas.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
script>

En resumen, para crear un gráfico:

varchart1 = newChart(ctx, {

type: 'bar',

data: mydata,

options: myoptions

});

Siendo ctx el objeto canvas, mydata el dataset, y myoptions la opciones del gráfico.

Atención: Si no quieres que te ocupe todo el ancho, debes meter el canvas dentro de un div y a este div aplicarle un style=»width:60%». Si no lo haces así y lo intentas de cualquier otra forma, te ignorará y ocupará el ancho de la pantalla.

Basado en http://evilnapsis.com/2016/08/14/crear-graficas-de-barra-y-lineas-en-javascript-usando-la-libreria-chart-js/.

Capas base de un mapa con Leaflet.js

Referencia de la API

Uso de TileLayer para cargar la capa base de nuestro mapa.

Ejemplo de uso:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);

Por un lado está la URL template y por otro lado, las opciones del tileLayer que será evaluadas.

Sintaxis

L.tilelayer( urlTemplate, <TileLayer options> options?)

Opciones

Podemos definir un zoom máximo y un zoom mínimo (minZoom, maxZoom), entre 0 y 18 (siendo 18 el valor máximo de zoom).

Ejemplos

Openstreetmap

  
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
  maxZoom: 18
}).addTo(mymap);

Mapbox

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data © OpenStreetMap contributors, ' +
    'CC-BY-SA, ' +
    'Imagery © Mapbox',
  id: 'mapbox.light'
}).addTo(mymap);

---

Leaflet-providers

Puedes entrar en esta web para descargarte estos códigos y ver una preview:

http://leaflet-extras.github.io/leaflet-providers/preview/index.html

También tienes en Leaflet-extras el plugin Leaflet-providers

Te bajas el plugin, lo descomprimes, el fichero importante es:

leaflet-providers.js

Tendrás que incluirlo en tu web:

/js/leaflet-providers.js

Y el uso será el siguiente:

L.tileLayer.provider(‘capabase‘).addTo(mymap);

Por ejemplo:

L.tileLayer.provider(‘OpenMapSurfer.Roads’).addTo(mymap);

o

  L.tileLayer.provider(‘OpenStreetMap.Mapnik’).addTo(mymap);

Así, tenemos algunos identificadores como:

• OpenStreetMap.Mapnik
• OpenStreetMap.BlackAndWhite
• OpenTopoMap
• Stamen.Terrain
• …

.

 

 

Mi primer mapa con Leaflet

En primer lugar, entro en la web de descarga de Leaflet:

http://leafletjs.com/download.html

Y me descargo la versión estable (en este caso era la Leaflet 1.0.3). Descomprimo el zip en mi directorio de trabajo (en una carpeta llamada js, lógicamente hay que tenerlo todo ordenado).

Si no queremos hacer esto, podemos directamente:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js">script>

Si miramos lo que hemos descargado, vemos que tenemos un fichero con Leaflet minimizado (leaflet.js), otro fichero con las css (leaflet.css), una carpeta con imágenes, un fichero js con el fuente legible de Leaflet (leaflet-src.js).

Por lo tanto, en nuestro head tendremos que poner:

 
 

En el body de nuestra página deberemos poner un DIV con ID sobre el que queramos poner un mapa:

 

Asegúrate que le pones altura en los CSS a este DIV:

     #mimapaleaflet{
           height:180px;
     }

Después del código que inserta el DIV, insertaremos un script javascript para cargar una capa base:

var mymap = L.map('mimapaleaflet').setView([51.505, -0.09], 13);

L.map es la clase central de la API. Se usa para crear y manipular el mapa. En el mapa establecemos unas coordeanas de la vista y un nivel de zoom.

A continuación añadimos un mapa base como tile layer, en este caso las imágenes de OSM. Crear un tile layer lleva implícito establecer la URL, el texto con la atribución y el máximo nivel de zoom de la capa:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
maxZoom: 18
}).addTo(map);

Añadimos un control de escala:

     L.control.scale().addTo(mymap);

Y un marcador (un POI), que se podrá mover al establecerlo como draggable.

     L.marker([51.50, -0.071],{draggable: true}).addTo(mymap);

El resultado es algo así:

Añadir un popup:

Es simple, únicamente hay que añadir a la sentencia de creación del marcador:

     .bindPopup(«<b>Hello world!</b><br>I am a popup.»);

Con esto añadimos un popup que, aparece al hacer clic sobre el marcador y desaparece al hacer clic sobre otro marcador.

.

Geolocalización simple con Javascript

La geolocalización se realiza siguiendo jerarquia de consultas
GPS -> antena WIFI -> antena GSM o 3G -> IP fija -> …

El objeto navigator.geolocation, si existe, nos dará la geolocalización.

Código simple

if (navigator.geolocation) { //Check if browser supports W3C Geolocation API
   navigator.geolocation.getCurrentPosition (successFunction, errorFunction);
} else { 
   alert('Geolocation is not supported in this browser.'); 
}
function successFunction(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    alert('Your latitude is :'+lat+' and longitude is '+long);
}
function errorFunction(position) { alert('Error!'); }

Norma y tutoriales

• http://dev.w3.org/geo/api/spec-source.html
• http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/
• http://code.google.com/apis/maps/index.html

Almacenamiento de datos en el cliente con Javascript

HTML5 implementa nuevos tipos de almacenamiento de variables fácilmente accesibles desde Javascript.

Variables locales

localStorage

No se eliminan nunca.

Variables de sesión

sessionStorage

Se eliminan cuando se cierra el navegador o la pestaña.

Ambas variables pueden tener tantas propiedades como queramos crear (siempre de tipo String).

La mejor forma de crear una variable será:

localStorage.variable= (localStorage.variable || 0);

(Ya sea 0 o el valor de inicialización que queramos.)

Para pasar a String o recuperarlo a formato JSON:

Un objeto JavaScript se transforma a un string JSON con
 JSON.stringify(object)
Un string JSON se transforma en el objeto original con
n JSON.parse(string_JSON)

Same origin policy

Las variables se asocian al protocolo, dominio y puerto. Esto provoca GRAN SEGURIDAD. Y modularidad, ya que cada servidor tendrá un espacio de nombres propio dentro del navegador.

CDN de Bootstrap

Si no queremos instalar Bootstrap en nuestro servidor podemos utilizar el siguiente CDN:

<!– CSS –>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css» integrity=»sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=»anonymous»>

<!–  jQuery –>
http://code.jquery.com/jquery-2.2.1.min.js

<!–  JavaScript –>
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

Cargar un KML con la API de Google Maps

.