Mapas web interactivos con D3.js

Mapas web interactivos con D3.js

Roger Veciana i Rovira
@rveciana
GeoExamples

¿Qué es D3?

Data Driven Documents

Librería JavaScript que usa datos para la creación y control de visualizaciones dinámicas e interactivas en navegadores web

¿Qué es D3?

Datos -> Documentos

¿Qué NO es D3?

¿Qué es D3?

Transformación de información a elementos de la página web

HTML

      
        <table>
          <tr>
            <th>Partido</th><th>Votos</th>
          </tr>
          <tr>
            <td>PSOE</td><td>16%</td>
          </tr>
        </table>

Resultado:

PartidoVotos
PSOE16%

SVG

      
        <svg width="100" height="100">
          <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="#FF9999" />
          <text x="25" y="55" font-family="sans-serif" font-size="20px" fill="red">PSOE</text>
        </svg>

Resultado:

PSOE

Canvas

      
        <canvas id="myCanvas" width="100" height="100"></canvas>
        <script>
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');

          context.beginPath();
          context.arc(50, 50, 40, 0, 2 * Math.PI, false);
          context.fillStyle = '#FF9999';
          context.fill();
          context.lineWidth = 4;
          context.strokeStyle = 'red';
          context.stroke();
          context.fillStyle = 'red';
          context.font = '20px sans-serif';
          context.fillText('PSOE', 25, 55);
        </script>
      </code>

Resultado:

Funcionamiento básico de D3js: Nodos y datos

  
  d3.select('#contenedor').selectAll("div")
    .data([10, 20, 30])
    .enter()
    .append('div')
    .text(function(d){return d;});

¿Como funciona esto?

Búsqueda de instancias de datos

  
  d3.select('#contenedor').selectAll("div")

Se definen los datos a vincular con la selección

  
  .data([10, 20, 30])

Se escojen los datos que no están en la selección

  
  .enter()

Se añaden los elementos al DOM

  
     .append('div')
    .text(function(d){return d;});
Para cada elemento devuelto por enter()

El código entero otra vez

  
  d3.select('#contenedor').selectAll("div")
    .data([10, 20, 30])
    .enter()
    .append('div')
    .text(function(d){return d;});

¿Que herramientas ofrece D3?

svg.selectAll("circle")
    .data([32, 57, 112])
    .enter()
    .append("circle")
    .attr("cy", 30)
    .attr("cx", function(d, i) { return i * 50 + 10; })
    .attr("r", function(d) { return Math.sqrt(d); })
    .style("fill", "red");

¿Que herramientas ofrece D3?

var scale = d3.scale.linear()
    .domain([30, 120])
    .range([10, 30]);
      
    svg.selectAll("circle")
    .data([32, 57, 112])
    .enter()
    .append("circle")
    .attr("cy", 30)
    .attr("cx", function(d, i) { return i * 50 + 10; })
    .attr("r", function(d) { return scale(d); })
    .style("fill", "red");

Layouts

Funciones Geográficas

 <svg height="210" width="400">
  <path d="M150 0 L75 100 L225 100 Z" fill="red"/>
</svg>

Conclusiones

Ejemplos del taller

Se pueden consultar todos juntos en bl.ocks.org/rveciana

TopoJSON

topojson -p nombre,idprov --shapefile-encoding utf-8 -o provincias.json provincias_españa.shp

Algunos recursos