How to use the d3-geo-projection.geoRobinson function in d3-geo-projection

To help you get started, we’ve selected a few d3-geo-projection examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Vizzuality / trase / frontend / scripts / react-components / profile / profile-components / map.component.jsx View on Github external
this.element.innerHTML = '';

    if (!width || !height) return;

    const d3Container = d3_select(this.element);

    const svg = d3Container
      .append('svg')
      .attr('width', width)
      .attr('height', height);

    const geoParent = svg.append('g').attr('data-test', testId);
    const container = geoParent.append('g');

    const projection = useRobinsonProjection === true ? d3_geoRobinson() : d3_geoMercator();
    const path = d3_geoPath().projection(projection);
    d3_json(topoJSONPath, (error, topoJSON) => {
      if (!topoJSON) return;
      const features = topojsonFeature(topoJSON, topoJSON.objects[topoJSONRoot]);
      // Filter Antartica
      const filteredFeatures = features.features.filter(f => f.properties.iso2 !== 'AQ');
      const polygons = container
        .selectAll('path')
        .data(filteredFeatures)
        .enter()
        .append('path')
        .attr('class', d => `polygon ${getPolygonClassName(d)}`)
        .attr('data-test', d => getPolygonTestId && getPolygonTestId(d, testId))
        .attr('d', path);

      if (showTooltipCallback !== undefined) {
github Vizzuality / TRASE-frontend / scripts / components / profiles / map.component.js View on Github external
export default (className, { topoJSONPath, topoJSONRoot, getPolygonClassName, showTooltipCallback, hideTooltipCallback, useRobinsonProjection, legend }) => {
  const d3Container =  d3_select(className);
  d3Container.node().classList.remove('-with-legend');
  const containerComputedStyle = window.getComputedStyle(d3Container.node());
  const width = parseInt(containerComputedStyle.width);
  const height = parseInt(containerComputedStyle.height);

  const svg = d3Container.append('svg')
    .attr('width', width)
    .attr('height', height);

  const geoParent = svg.append('g');
  const container = geoParent.append('g');

  const projection = (useRobinsonProjection === true) ? d3_geoRobinson() : d3_geoMercator();
  const path = d3_geoPath()
    .projection(projection);

  d3_json(topoJSONPath, function(error, topoJSON) {
    const features = topojson.feature(topoJSON, topoJSON.objects[topoJSONRoot]);

    const polygons = container.selectAll('path')
      .data(features.features)
      .enter()
      .append('path')
      .attr('class', d => {
        return `polygon ${getPolygonClassName(d)}`;
        // return isCurrent(d) ? 'polygon -isCurrent' : 'polygon';
      })
      .attr('d', path);
github owid / owid-grapher / charts / MapProjections.ts View on Github external
@computed get World(): GeoPath {
        const projection = geoRobinson() as GeoProjection
        const path = geoPath().projection(projection)
        return path
    }
github mustafasaifee42 / VR-Viz / src / Utils / GetMapShape.js View on Github external
export default function (mapData, proj, scale, position, identifier, shapeKey) {
  let projection = 'sphere';
  switch (proj) {
    case ('Mercator'): projection = d3.geoMercator(); break;
    case ('Robinson'): projection = d3GeoProjection.geoRobinson(); break;
    case ('Gall-Peter'): projection = d3GeoProjection.geoCylindricalEqualArea.parallel(45); break;
    case ('Winkel-Tripel'): projection = d3GeoProjection.geoWinkel3(); break;
    case ('Equirectangular'): projection = d3.geoEquirectangular(); break;
    case ('Natural Earth1'): projection = d3.geoNaturalEarth1(); break;
    case ('AlbersUSA'): projection = d3.geoAlbersUsa(); break;
    default: projection = 'sphere'; break;
  }
  let features = topojson.feature(mapData, mapData.objects[shapeKey]).features;
  if(!proj){
    let countries = features.map((d, i) => d[identifier])
    let obj1 = {}
    for (let i = 0; i < countries.length; i++) {
      obj1[countries[i]] = features[i]
    }
    let names1 = Object.keys(obj1);
    let geoData1 = []
github mustafasaifee42 / VR-Viz / src / Utils / GetMapCoordinates.js View on Github external
export default function (long, lat, proj, scale, position) {
  let projection;
  switch (proj) {
    case ('Mercator'): projection = d3.geoMercator(); break;
    case ('Robinson'): projection = d3GeoProjection.geoRobinson(); break;
    case ('Gall-Peter'): projection = d3GeoProjection.geoCylindricalEqualArea.parallel(45); break;
    case ('Winkel-Tripel'): projection = d3GeoProjection.geoWinkel3(); break;
    case ('Equirectangular'): projection = d3.geoEquirectangular(); break;
    case ('Natural Earth1'): projection = d3.geoNaturalEarth1(); break;
    default: projection = d3GeoProjection.geoRobinson(); break;
  }
  let projection_scale = projection
    .scale(scale)
    .translate([position[0], position[1]]);

  return (projection_scale([long, lat]));
}