Buenos Aires – Escuela De Datos http://es.schoolofdata.org evidencia es poder Mon, 26 Mar 2018 17:09:36 +0000 es hourly 1 https://wordpress.org/?v=5.3.2 114974193 Cómo crear un mapa 3D de Buenos Aires, Argentina http://es.schoolofdata.org/2017/10/04/como-crear-un-mapa-3d-de-buenos-aires-argentina/ http://es.schoolofdata.org/2017/10/04/como-crear-un-mapa-3d-de-buenos-aires-argentina/#respond Wed, 04 Oct 2017 18:47:26 +0000 http://es.schoolofdata.org/?p=2303 Por Nicolas Grossman y Bruno Salerno

Los mapas son excelentes herramientas para visualizar datos de una ciudad y compararlos entre zonas de la misma. Pero si además podemos graficar los edificios en tres dimensiones, la visualización resulta más impactante aún. En este tutorial contamos cómo realizamos el mapa que muestra los precios promedio del metro cuadrado en cada parcela de la ciudad de Buenos Aires (Argentina) y San Pablo (Brasil), con sus respectivos edificios en 3D.

1. Obtener los shapefiles con las geometrías de las parcelas/edificios de la ciudad y su respectiva altura y un dataset con las propiedades en venta y su precio.

En el caso de Buenos Aires, la información  está en archivos distintos.

2. Calcular el precio por metro cuadrado y la altura para cada parcela

A partir del dataset de propiedades y el de parcelas, utilizando un spatial join de Qgis, se calcula el precio promedio del metro cuadrado que le corresponde a cada parcela. Este tutorial explica simplemente cómo hacerlo.

Luego unimos los datos de las parcelas con la altura de cada edificio.

Se hace una union de estos datasets por el campo que identifica a cada parcela, que incluye la “sección”, la “manzana” y la “parcela”, para así poder asociar cada parcela a su altura correspondiente.

3. Transformar el shapefile en un tileset vectorial

En este punto transformamos el shapefile en un tileset vectorial que es un tipo información georeferenciada que usan múltiples tecnologías de mapas digitales para mostrar los datos.

Se denominan «tilesets» porque se trata de un malla de mosaicos que cubre la superficie deseada: cada mosaico tiene cierta información que va siendo dibujada a medida que navegamos por esa zona del mapa. Si no fuera por estos mosaicos sería muy lento mostrar toda la información que muestra el mapa.

Primero hay que convertir el shapefile producido en el primer punto en un GEOJSON (QGis=> guardar como => GeoJSON).

Usaremos el formato de tiles vectorial de Mapbox, mbtiles, ya que es ahí donde nosotros vamos a subir nuestro tileset. Para realizar la conversión de geojson a mbtiles usaremos el programa tippecanoe (https://github.com/mapbox/tippecanoe):

tippecanoe -o 3d_map_tileset.mbtiles -z 17 -Z 12 3d_map_tileset.geojson

Los parámetros z y Z son importantes, porque los tilesets se construyen por nivel de zoom. Cuanto más grande es el rango de zooms para el que se construye el tileset, más pesado es.

4. Subir el tileset a Mapbox Studio

Una vez generado el archivo, hay que subirlo a Mapbox Studio, en la sección datasets.

 

5. Programar Javascript

Vamos a necesitar programar un poco de javascript para poder mostrar la capa. De hecho, hay que hacer una aplicación en javascript que nos permita cargar un baselayer y el tileset en cuestión. Para eso vamos a usar Mapbox GL JS (https://github.com/mapbox/mapbox-gl-js).  La documentación sobre la API se encuentra en https://www.mapbox.com/mapbox-gl-js/api/.

Supongamos que vamos a hacer todo en un archivo llamado “our_map.html”. Los pasos a seguir serían:

        1. Crear el esqueleto de html:

<html>

<body

  <!– mapbox gl js –>

  <script src=’https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js’></script>

  <link href=’https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css’ rel=’stylesheet’ />

<script>

  // Here we are going to put our map code

</script>

</body>

</html>

Tenemos que realizar las siguientes tareas dentro del bloque <script>

        2. Cargar mapbox

  var center = [-58.388875,-34.612427];

 

      mapboxgl.accessToken = ‘YOUR ACCESS TOKEN’;

      var map = new mapboxgl.Map({

        container: ‘map’,

        style: ‘mapbox://styles/YOUTUSER/YOUR_BASE_STYLE’,

        center: center,

        zoom: 13.5,

        pitch: 59.5,

        bearing: 0

      });

       3. Cargar el tileset:

 map.on(‘style.load’, function () {

          map.addSource(‘buildings’,

              {«type»: «vector»,

                «url»: «THE TILESET URL»

              });

          map.addLayer({

            ‘id’: ‘buildings’,

            ‘interactive’: true,

            ‘type’: ‘fill-extrusion’,

            ‘source’: ‘buildings’,

            ‘source-layer’: ‘super_new_join_finalgeojson’,

            ‘paint’: {

              ‘fill-extrusion-height’: {

                ‘property’: ‘altura’,

                ‘stops’: [

                  [{zoom: 13, value: 0},   0],

                  [{zoom: 13.5, value: 1000}, 0],

                  [{zoom: 17.5, value: 0}, 0],

                  [{zoom: 17.5, value: 1000}, 1000]

                ]

              },

              ‘fill-extrusion-color’: {

                ‘property’: ‘precio’,

                ‘stops’: [

                  [0, ‘#e6e6e6’],

                  [700, ‘#ffffb2’],

                  [1754, ‘#fecc5c’],

                  [2233, ‘#fd8d3c’],

                  [2751, ‘#f03b20’],

                  [3683, ‘#bd0026’]

                ]

              },

              ‘fill-extrusion-opacity’: 0.9

            }

          }, ‘road_major_label’);

        });

Tomar nota de las partes más importantes:

 ‘fill-extrusion-height’: {

            ‘property’: ‘altura’,

…

}

Aquí estamos diciendo “tomar las alturas de los edificios del campo ‘altura’”.

Y

fill-extrusion-color: style: {

          ‘property’: ‘precio’,

          ‘stops’: [

            [0, ‘#e6e6e6’],

            [700, ‘#ffffb2’],

            [1754, ‘#fecc5c’],

            [2233, ‘#fd8d3c’],

            [2751, ‘#f03b20’],

            [3683, ‘#bd0026’]

          ]

        }

Aquí estamos diciendo “pintar usando los valores del campo ‘precio’ y usar los rangos para diferenciar los colores”, si no hay valor, usar ‘#e6e6e6’, si el valor está entre 0 y 700, usar ‘#ffffb2’, si el valor está entre 700 y 1754 usar  ‘#fecc5c’, y así sucesivamente.

 

El código completo sería:

<html>

  <body

    <!– mapbox gl js –>

    <script src=’https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js’></script>

    <link href=’https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css’ rel=’stylesheet’ />

    <div style=»padding:0; margin:0; width:100%; height:100%» id=»map»></div>

    <script>

      window.onload = function(){

        var center = [-58.388875,-34.612427];

        mapboxgl.accessToken = ‘YOUR ACCESS TOKEN’;

        var map = new mapboxgl.Map({

          container: ‘map’,

          style: ‘mapbox://styles/YOUTUSER/YOUR_BASE_STYLE’,

          center: center,

          zoom: 13.5,

          pitch: 59.5,

          bearing: 0

        });

        map.on(‘style.load’, function () {

          map.addSource(‘buildings’,

              {«type»: «vector»,

                «url»: «THE TILESET URL»

              });

          map.addLayer({

            ‘id’: ‘buildings’,

            ‘interactive’: true,

            ‘type’: ‘fill-extrusion’,

            ‘source’: ‘buildings’,

            ‘source-layer’: ‘super_new_join_finalgeojson’,

            ‘paint’: {

              ‘fill-extrusion-height’: {

                ‘property’: ‘altura’,

                ‘stops’: [

                  [{zoom: 13, value: 0},   0],

                  [{zoom: 13.5, value: 1000}, 0],

                  [{zoom: 17.5, value: 0}, 0],

                  [{zoom: 17.5, value: 1000}, 1000]

                ]

              },

              ‘fill-extrusion-color’: {

                ‘property’: ‘precio’,

                ‘stops’: [

                  [0, ‘#e6e6e6’],

                  [700, ‘#ffffb2’],

                  [1754, ‘#fecc5c’],

                  [2233, ‘#fd8d3c’],

                  [2751, ‘#f03b20’],

                  [3683, ‘#bd0026’]

                ]

              },

              ‘fill-extrusion-opacity’: 0.9

            }

          }, ‘road_major_label’);

        });

      }

    </script>

  </body>

</html>

Servir el HTML desde un server

Ahora hay que servir el html desde un server. En nuestra máquina local podemos usar http-server . Una vez instalado, (se puede instalar con npm: npm install http-server), hay que correrlo en la misma carpeta donde tenemos nuestro html. Y después, en el browser, navegar a localhost:8080/our_map.html.

Flattr this!

]]> http://es.schoolofdata.org/2017/10/04/como-crear-un-mapa-3d-de-buenos-aires-argentina/feed/ 0 2303 Open Data Day 2014 – Buenos Aires http://es.schoolofdata.org/2014/03/07/open-data-day-2014-buenos-aires/ http://es.schoolofdata.org/2014/03/07/open-data-day-2014-buenos-aires/#respond Fri, 07 Mar 2014 23:09:01 +0000 http://es.schoolofdata.okfn.org/?p=777

Este post fue escrito por Florencia Coelho de La Nación Data en Buenos Aires, y publicado originalmente aquí. ¡En Escuela nos da mucho gusto ver todo lo que se hace en Argentina!

Dia-de-los-Datos-Abiertos-1-1

Foto: Gentileza GCBA

Arrancamos en el barrio de Montserrat (México 658) donde se pintó un mural con datos abiertosde la Dirección General de Estadísticas y Censos y el Censo Fitosanitario 2013.

Rudi Borrmann, Director de Información y Gobierno Abierto de la ciudad de Buenos  Aires, nos explicó cómo lo armaron los artistas –PastelFD, Collage LAB y Marina Fages– y también cómo se basaron para elegir la paleta de colores. Tomaron 100 fotos del barrio Montserrat de Flickr y programáticamente se definieron los colores predominantes.

Se combinaron todas las imágenes en una sola, se subieron a kooler  https://kuler.adobe.com/ y se descargaron las cuatro paletas propuestas por la app por defecto (el algoritmo que usa es desconocido).  ¡No te lo pierdas!

También estuvimos en AreaTresLabs donde nos reunimos convocados por OKFN Argentina yBikestorming.

OKFN-bikestorming-AMBA-MovilidadAbierta

Allí el encuentro se centró en una expedición de datos que compartí con Andy Tow, Ariel Aizemberg, Ariel Perucca, Chris Eaton, Diego Kurz, Fernando Inocencio, Guillermo Schwindt, Joaquín Gallo, Matías Kalwill, Paula Alzualde, Sebastian Anapolsky y Yamila Garcia.

Los objetivos fueron:

(1) Identificar conjuntos de datos con potencial para mejorar la movilidad urbana de las personas en la región del AMBA (área metropolitana de la Ciudad de Buenos Aires), con foco en la movilidad no motorizada y el transporte público.

(2) Proponer la apertura de los conjuntos de datos identificados, o posibles mejoras de los mismos en caso de que ya sean abiertos.

(3) Crear un documento que sirva de referencia para otras iniciativas cívicas con fines similares.

La Pregunta inicial del equipo fue:

¿Cuales son los conjuntos de datos que, en caso abrirse, presentan el mayor potencial para impulsar mejoras en la experiencia de movilidad urbana de los ciudadanos en el AMBA (Área Metropolitana de Buenos Aires)?

Árbol de preguntas

Ponderamos las necesidades de información del ciudadano en relación a las distintas formas de movilidad. En este punto no importa si existen o no datos (abiertos o “cerrados”) para responder a sus preguntas. Lo que nos propusimos fue anticipar qué cosas se pregunta en su experiencia de movilidad, y cuáles de estas preguntas son las de mayor relevancia para él.

Pueden ver un cuadro del árbol aquí.

Expedición [lista en desarrollo]

Identificamos conjuntos de datos (“datasets”) y referencias de uso de datasets similares, para resolver los problemas identificados en la actividad anterior; así como datasets existentes, en relación a transporte, que no necesariamente sean de interés para los ciudadanos.

1.1 Conjuntos de datos (datasets) de interés para la movilidad urbana

  • Datos abiertos
  • Ferrocarriles de Buenos Aires

Sitios

  • Secretaría de Transporte de la Nación
  • CNRT

Estadisticas Cantidad de Usuarios

Datasets no encontrados pero de interés [Descripción; Destinatario]

  • Disponibilidad de bicis en tiempo real mediante API, antes se encontraba enhttp://www.citybik.es/; Gobierno de la Ciudad de Buenos Aires

1.2 Casos de Éxito de uso de datos para mejorar la experiencia de movilidad urbana

Datos en tiempo real:

Recorridos:

Datos abiertos existentes y en permanente actualización:

areatreslab-open-data-day

Foto: Gentileza @Matikalwill

Muchas gracias @OKFNAr y @BikeStorming por el empuje y la colaboración para hacer este post y @Areatreslabs por el lugar.  🙂

Flattr this!

]]> http://es.schoolofdata.org/2014/03/07/open-data-day-2014-buenos-aires/feed/ 0 777