El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este módulo, aprenderemos a crear mapas geográficos utilizando D3.js. Los mapas geográficos son una herramienta poderosa para visualizar datos espaciales y pueden ser utilizados en una variedad de aplicaciones, desde la visualización de datos demográficos hasta la representación de rutas de transporte.

Objetivos del Módulo

Entender los conceptos básicos de la proyección geográfica.
Aprender a cargar y manipular datos geográficos.
Crear mapas básicos utilizando D3.js.
Añadir interactividad a los mapas.

Contenido

Conceptos Básicos de Proyección Geográfica
Cargando y Manipulando Datos Geográficos
Creando un Mapa Básico
Añadiendo Interactividad
Ejercicio Práctico

Conceptos Básicos de Proyección Geográfica

¿Qué es una Proyección Geográfica?

Una proyección geográfica es una forma de representar la superficie curva de la Tierra en un plano bidimensional. Existen diferentes tipos de proyecciones, cada una con sus propias ventajas y desventajas.

Tipos Comunes de Proyecciones

Proyección Mercator: Comúnmente utilizada en mapas de navegación.
Proyección Albers: Buena para áreas de gran extensión en latitudes medias.
Proyección Ortográfica: Representa la Tierra como si se viera desde el espacio.

Ejemplo de Proyección en D3.js

// Definiendo una proyección Mercator
const projection = d3.geoMercator()
    .scale(100) // Escala de la proyección
    .translate([width / 2, height / 2]); // Trasladar al centro del SVG

// Crear un generador de caminos basado en la proyección
const path = d3.geoPath().projection(projection);

Cargando y Manipulando Datos Geográficos

Formatos de Datos Geográficos

GeoJSON: Un formato común para representar datos geográficos.
TopoJSON: Una extensión de GeoJSON que reduce el tamaño del archivo.

Cargando Datos GeoJSON

d3.json('path/to/geojson/file.json').then(data => {
    // Manipular los datos aquí
    console.log(data);
});

Ejemplo de Datos GeoJSON

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [[[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]]
      },
      "properties": {
        "name": "Example Polygon"
      }
    }
  ]
}

Creando un Mapa Básico

Configuración del SVG

const width = 960;
const height = 500;

const svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

Dibujando el Mapa

d3.json('path/to/geojson/file.json').then(data => {
    svg.selectAll('path')
        .data(data.features)
        .enter().append('path')
        .attr('d', path)
        .attr('fill', 'steelblue')
        .attr('stroke', 'black');
});

Añadiendo Interactividad

Resaltando Regiones al Pasar el Ratón

svg.selectAll('path')
    .on('mouseover', function() {
        d3.select(this).attr('fill', 'orange');
    })
    .on('mouseout', function() {
        d3.select(this).attr('fill', 'steelblue');
    });

Mostrando Información al Hacer Clic

svg.selectAll('path')
    .on('click', function(event, d) {
        alert(`You clicked on ${d.properties.name}`);
    });

Ejercicio Práctico

Ejercicio: Crear un Mapa Interactivo de un País

Objetivo: Crear un mapa interactivo de un país de tu elección.
Pasos:
- Cargar un archivo GeoJSON del país.
- Dibujar el mapa utilizando D3.js.
- Añadir interactividad para resaltar regiones y mostrar información al hacer clic.

Solución

// Configuración del SVG
const width = 960;
const height = 500;

const svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

// Definiendo una proyección
const projection = d3.geoMercator()
    .scale(1000)
    .translate([width / 2, height / 2]);

const path = d3.geoPath().projection(projection);

// Cargando y dibujando el mapa
d3.json('path/to/country/geojson.json').then(data => {
    svg.selectAll('path')
        .data(data.features)
        .enter().append('path')
        .attr('d', path)
        .attr('fill', 'steelblue')
        .attr('stroke', 'black')
        .on('mouseover', function() {
            d3.select(this).attr('fill', 'orange');
        })
        .on('mouseout', function() {
            d3.select(this).attr('fill', 'steelblue');
        })
        .on('click', function(event, d) {
            alert(`You clicked on ${d.properties.name}`);
        });
});

Conclusión

En este módulo, hemos aprendido a crear mapas geográficos utilizando D3.js. Hemos cubierto los conceptos básicos de proyección geográfica, cómo cargar y manipular datos geográficos, y cómo crear un mapa básico con interactividad. Estos conocimientos te permitirán visualizar datos espaciales de manera efectiva y crear mapas interactivos para tus proyectos.

En el próximo módulo, exploraremos cómo añadir interactividad y animación a nuestras visualizaciones para hacerlas más dinámicas y atractivas.

Creando Mapas Geográficos

Objetivos del Módulo

Contenido

Conceptos Básicos de Proyección Geográfica

¿Qué es una Proyección Geográfica?

Tipos Comunes de Proyecciones

Ejemplo de Proyección en D3.js

Cargando y Manipulando Datos Geográficos

Formatos de Datos Geográficos

Cargando Datos GeoJSON

Ejemplo de Datos GeoJSON

Creando un Mapa Básico

Configuración del SVG

Dibujando el Mapa

Añadiendo Interactividad

Resaltando Regiones al Pasar el Ratón

Mostrando Información al Hacer Clic

Ejercicio Práctico

Ejercicio: Crear un Mapa Interactivo de un País

Solución

Conclusión

D3.js: De Principiante a Avanzado

Módulo 1: Introducción a D3.js

Módulo 2: Trabajando con Selecciones

Módulo 3: Datos y Escalas

Módulo 4: Creando Visualizaciones Básicas

Módulo 5: Visualizaciones Avanzadas

Módulo 6: Interactividad y Animación

Módulo 7: Trabajando con Datos Reales

Módulo 8: Rendimiento y Optimización

Módulo 9: Mejores Prácticas y Técnicas Avanzadas

Módulo 10: Proyecto Final