Lemoncode TV

D3js y Proyecciones, Islas Canarias

Ya tenemos nuestro mapa, sólo hay un problema, y es que las Islas Canarias salen en su sitio real, nos vendría bien moverlas para arriba y aprovechar el espacio, tal y como podíamos ver en los mapas que estaban colgados en el cole.

Para ello vamos a jugar con las proyecciones.

Manos a la obra

• Roger Veciana tiene publicada una librería muy interesante de proyecciones que incluye, entre otras, la de España, vamos a usarla.

npm install d3-composite-projections --save

• Importamos el fichero:

import * as d3 from "d3";
import * as topojson from "topojson-client";
const mapatopojson = require("./maps/autonomous_regions.json");
+ const d3Composite = require("d3-composite-projections");

• Y reemplazamos la proyección geoMercator por la geoConicConformalSpain:

- const miProyeccion = d3.geoMercator();
+ const miProyeccion = d3Composite.geoConicConformalSpain();

Si ahora ejecutamos podemos ver que las islas canarias se desplazan y podemos aprovechar mejor el espacio de dibujo.

npm start

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.