El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem a crear mapes geogràfics utilitzant D3.js. Els mapes geogràfics són una eina poderosa per visualitzar dades espacials i poden ser utilitzats en una àmplia varietat d'aplicacions, des de la visualització de dades demogràfiques fins a l'anàlisi de patrons de moviment.

Objectius del Tema

Entendre els conceptes bàsics de la projecció geogràfica.
Aprendre a carregar i processar dades geogràfiques.
Crear mapes bàsics amb D3.js.
Afegir interactivitat als mapes.

Conceptes Bàsics de la Projecció Geogràfica

Què és una Projecció Geogràfica?

Una projecció geogràfica és una manera de representar la superfície tridimensional de la Terra en un pla bidimensional. Hi ha diverses projeccions, cadascuna amb els seus propis avantatges i desavantatges.

Tipus de Projeccions

Algunes de les projeccions més comunes són:

Projecció Mercator: Manté les formes però distorsiona les àrees.
Projecció Albers: Manté les àrees però distorsiona les formes.
Projecció Orthographic: Projecció semblant a una vista des de l'espai.

Carregant i Processant Dades Geogràfiques

Formats de Dades Geogràfiques

Les dades geogràfiques es poden trobar en diversos formats, però els més comuns són:

GeoJSON: Un format basat en JSON per representar dades geoespacials.
TopoJSON: Una extensió de GeoJSON que comprimeix les dades per reduir la mida del fitxer.

Exemple de Dades GeoJSON

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [-101.744384765625, 39.32155002466662],
            [-101.5521240234375, 39.330048552942415],
            [-101.40380859375, 39.330048552942415],
            [-101.33239746093749, 39.364032338047984],
            [-101.041259765625, 39.36827914916011],
            [-100.975341796875, 39.30454987014581],
            [-100.9149169921875, 39.24501680713314],
            [-100.843505859375, 39.16414104768742],
            [-100.8050537109375, 39.104488809440475],
            [-100.491943359375, 39.10022600175347],
            [-100.43701171875, 39.095962936305476],
            [-100.338134765625, 39.095962936305476],
            [-100.1953125, 39.027718840211605],
            [-100.008544921875, 39.01064750994083],
            [-99.86572265625, 39.00211029922512],
            [-99.6844482421875, 38.97222194853654],
            [-99.51416015625, 38.929502416386605],
            [-99.38232421875, 38.92095542046727],
            [-99.3218994140625, 38.89530825492018],
            [-99.1131591796875, 38.86965182408357],
            [-99.0802001953125, 38.85682013474361],
            [-98.822021484375, 38.85682013474361]
          ]
        ]
      },
      "properties": {
        "name": "Kansas"
      }
    }
  ]
}

Carregant Dades GeoJSON amb D3.js

d3.json("path/to/geojson/file.json").then(function(data) {
  console.log(data);
});

Creant un Mapa Bàsic amb D3.js

Configurant la Projecció

const width = 960;
const height = 600;

const projection = d3.geoMercator()
  .scale(1000)
  .translate([width / 2, height / 2]);

Creant el Path Generator

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

Renderitzant el Mapa

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

d3.json("path/to/geojson/file.json").then(function(data) {
  svg.selectAll("path")
    .data(data.features)
    .enter().append("path")
    .attr("d", path)
    .attr("fill", "steelblue")
    .attr("stroke", "white");
});

Afegint Interactivitat

Afegint Esdeveniments de Mouseover i Mouseout

svg.selectAll("path")
  .data(data.features)
  .enter().append("path")
  .attr("d", path)
  .attr("fill", "steelblue")
  .attr("stroke", "white")
  .on("mouseover", function(event, d) {
    d3.select(this).attr("fill", "orange");
  })
  .on("mouseout", function(event, d) {
    d3.select(this).attr("fill", "steelblue");
  });

Afegint Tooltip

const tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

svg.selectAll("path")
  .data(data.features)
  .enter().append("path")
  .attr("d", path)
  .attr("fill", "steelblue")
  .attr("stroke", "white")
  .on("mouseover", function(event, d) {
    d3.select(this).attr("fill", "orange");
    tooltip.transition()
      .duration(200)
      .style("opacity", .9);
    tooltip.html(d.properties.name)
      .style("left", (event.pageX) + "px")
      .style("top", (event.pageY - 28) + "px");
  })
  .on("mouseout", function(event, d) {
    d3.select(this).attr("fill", "steelblue");
    tooltip.transition()
      .duration(500)
      .style("opacity", 0);
  });

Exercici Pràctic

Objectiu

Crear un mapa interactiu que mostri els països del món i canviï el color del país quan es faci clic sobre ell.

Passos

Carrega un fitxer GeoJSON amb les dades dels països del món.
Configura una projecció adequada.
Renderitza el mapa.
Afegeix interactivitat per canviar el color del país quan es faci clic.

Solució

const width = 960;
const height = 600;

const projection = d3.geoMercator()
  .scale(150)
  .translate([width / 2, height / 2]);

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

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

d3.json("path/to/world-geojson.json").then(function(data) {
  svg.selectAll("path")
    .data(data.features)
    .enter().append("path")
    .attr("d", path)
    .attr("fill", "steelblue")
    .attr("stroke", "white")
    .on("click", function(event, d) {
      d3.select(this).attr("fill", "orange");
    });
});

Conclusió

En aquest tema, hem après a crear mapes geogràfics utilitzant D3.js. Hem vist com carregar i processar dades geogràfiques, configurar projeccions i afegir interactivitat als mapes. Amb aquests coneixements, estem preparats per crear visualitzacions geogràfiques més complexes i personalitzades.

Creant Mapes Geo

Objectius del Tema

Conceptes Bàsics de la Projecció Geogràfica

Què és una Projecció Geogràfica?

Tipus de Projeccions

Carregant i Processant Dades Geogràfiques

Formats de Dades Geogràfiques

Exemple de Dades GeoJSON

Carregant Dades GeoJSON amb D3.js

Creant un Mapa Bàsic amb D3.js

Configurant la Projecció

Creant el Path Generator

Renderitzant el Mapa

Afegint Interactivitat

Afegint Esdeveniments de Mouseover i Mouseout

Afegint Tooltip

Exercici Pràctic

Objectiu

Passos

Solució

Conclusió

D3.js: De Principiant a Avançat

Mòdul 1: Introducció a D3.js

Mòdul 2: Treballant amb Seleccions

Mòdul 3: Dades i Escales

Mòdul 4: Creant Visualitzacions Bàsiques

Mòdul 5: Visualitzacions Avançades

Mòdul 6: Interactivitat i Animació

Mòdul 7: Treballant amb Dades Reals

Mòdul 8: Rendiment i Optimització

Mòdul 9: Millors Pràctiques i Tècniques Avançades

Mòdul 10: Projecte Final