Creando Un Globo 3D Con WebGL-Globe

En este caso nos vamos a centrar en WebGL Globe una librería/utilidad creada por Google que permite mostrar fácilmente contenido estadístico en un globo 3D, al que podemos girar, hacer zoom, etc En esta caso trabajaremos con la BD de INES. (The International Nuclear and Radiological Event Scale).

En la web de Chrome experiments hay unos cuantos ejemplos:

chromeexperiments.com/globe

El código para empezar lo tenéis en su repositorio de GitHub. Lo primero que hay que hacer es preparar los datos, en este ejemplo vamos a mostrar la posición de las centrales nucleares y el número de reactores del que disponen.

Los datos con la localización de las centrales (según la IAEA) usados en este ejemplo están disponibles en Google Fussion Tables: Nuclear Power Station locations. Hay que jugar un poco con ellos para pasarlos a formato JSON y con la forma correcta. WebGL GLobe necesita que que las distintas series de datos estén en un array del tipo: latitud, longitud, y magnitud (que será la longitud de la barra que se dibujará en esa localización).

Algo así:

var data = [

  [
    'serieA', [ latitud, longitud, magnitud, latitud, longitud, magnitud, ... ]
  ],
  [
    'serieB', [ latitud, longitud, magnitud, latitud, longitud, magnitud, ... ]
  ]
];

Es importante normalizar la magnitud para que su valor este comprendido entre 0 y 1, sino nos saldrán unas barras desproporcionadas, ya que el código de globe.js multiplica por 200 el valor de la magnitud a la hora de representarlo en el globo.

Una vez tenemos el archivo en el formato correcto podemos continuar.

[-34,-59.1667,0.25,-32.2333,-64.4333,0.125,...]

Si se necesita se puede añadir una cuarta magnitud a las series de datos, el ID del color que queremos que aparezca ese punto. En ese caso habría que utilizar el modo leyenda () de globe y añadir un array con la librería de colores (con notación hexagesimal) de la leyenda sería algo así:

var globe = DAT.Globe(document.getElementById('container'),     
  function(label) {
    return new THREE.Color([
      0x250EF0, 0x45F775, 0xCEF23F, 0xF2FA0A, 0xADB30C, 0xE8BD3A, 
      0xFA5807, 0xFA07F6
    ][label]);
});

En este ejemplo usamos la escala de la IAEA como leyenda de colores que representa que centrales han sufrido un incidente.

En este array de colores la posición [0] representa el nivel (ID): 0 que será de color azul (250EF0) y que usamos para representar centrales sin ningún incidente, la posición [1] será el nivel 1, de color verde (45F775) y así sucesivamente.

Una vez añadido el cuarto valor que representa el nivel del incidente (si lo ha habido) en el archivo JSON, queda así:

[ 
  -34,-59.1667,0.25,0,
  -32.2333,-64.4333,0.125,0,
   ...
]

Para obtener los datos desde el archivo JSON preparado se hace una llamada en AJAX:

xhr = new XMLHttpRequest();
xhr.open('GET', 'nuclear.json', true);

Y se añaden los datos al globo. El formato puede ser magnitud o legend, si hemos añadido el cuarto valor (el color) a nuestro array:

 globe.addData(data, {format: 'legend'});

El resultado final:

Podéis ver el código en gitHub

Chernobyl (1986) y Fukushima (2011) son los únicos desastres nucleares para medir el nivel 7 en la Escala Internacional de Sucesos Nucleares.

Artículos Relacionados

Comentarios