How to use the d3-geo.geoMercator function in d3-geo

To help you get started, we’ve selected a few d3-geo 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 / 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 pokelondon / pintsinthesun / src / app / components / threed.js View on Github external
getProjection() {
        const centre = [this.props.centre.lng, this.props.centre.lat];
        const TILESIZE = 128;
        // return d3.geo.mercator()
        //     .center(centre)
        //     .translate([0, 0])
        //     .scale(TILESIZE << ZOOM);

        return geoMercator()
            .center(centre)
            .translate([0, 0])
            .scale(TILESIZE << ZOOM);
    }
github higlass / higlass / app / scripts / GeoJsonTrack.js View on Github external
constructor(scene, dataConfig, handleTilesetInfoReceived, option, animate) {
    super(scene, dataConfig, handleTilesetInfoReceived, option, animate);

    switch (this.options.projection) {
      case 'mercator':
      default:
        this.projection = geoMercator();
        break;
    }

    this.updateProjection();
  }
github rveciana / d3-composite-projections / src / transverseMercatorChile.js View on Github external
export default function() {
  var cache,
      cacheStream,
      mainland = transverseMercator().rotate([72, 37]), mainlandPoint,
      antarctic = stereographic().rotate([72, 0]), antarcticPoint,
      juanFernandez = mercator().rotate([80, 33.5]), juanFernandezPoint,
      pascua = mercator().rotate([110, 25]), pascuaPoint,

      point, pointStream = {point: function(x, y) { point = [x, y]; }};

    /*
    var mainlandBbox = [[-75.5, -15.0], [-32, -49.0]];
    var antarcticBbox = [[-91.0, -60.0], [-43.0, -90.0]];
    var juanFernandezBbox = [[-81.0, -33.0], [-78.5, -34.0]];
    var pascuaBbox = [[-110, -26.6], [-108.7, -27.5]];
    */

  function transverseMercatorChile(coordinates) {
    var x = coordinates[0], y = coordinates[1];
    return point = null,
        (mainlandPoint.point(x, y), point) ||
        (antarcticPoint.point(x, y), point) ||
github srnd / www / src / components / Fragments / ProgramMap / index.js View on Github external
projection() {
        return geoMercator()
            .scale(0.65 * this.state.width)
            .center([-93, 40])
            .translate([this.state.width/2, this.state.height/2]);
    }
github BigFatDog / auth-flow-react-apollo-saga / app / containers / Vartan / algs.js View on Github external
function projectData(data) {
    const latExtent = extent(citiesData, d => d.lat);
    const lngExtent = extent(citiesData, d => d.lng);
    const extentGeoJson = {
      type: 'LineString',
      coordinates: [[lngExtent[0], latExtent[0]], [lngExtent[1], latExtent[1]]],
    };
    const projection = geoMercator().fitSize([width, height], extentGeoJson);
    data.forEach((d, i) => {
      const city = citiesData[i];
      const location = projection([city.lng, city.lat]);
      d.x = location[0];
      d.y = location[1];
    });
  }