How to use the d3-geo.geoAlbersUsa 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 DefinitelyTyped / DefinitelyTyped / d3-geo / d3-geo-tests.ts View on Github external
const stereographicRaw: d3Geo.GeoRawProjection = d3Geo.geoStereographicRaw();
const transverseMercatorRaw: d3Geo.GeoRawProjection = d3Geo.geoTransverseMercatorRaw();

// Use Raw Projection =====================================================

const rawProjectionPoint: [number, number] = azimuthalEqualAreaRaw(54, 2);
const rawProjectionInvertedPoint: [number, number] = azimuthalEqualAreaRaw.invert(180, 6);

// ----------------------------------------------------------------------
// Pre-Defined Projections
// ----------------------------------------------------------------------

// Create predefined Projection from factory =============================

const albers: d3Geo.GeoConicProjection = d3Geo.geoAlbers();
const albersUsa: d3Geo.GeoProjection = d3Geo.geoAlbersUsa();
const azimuthalEqualArea: d3Geo.GeoProjection = d3Geo.geoAzimuthalEqualArea();
const azimuthalEquidistant: d3Geo.GeoProjection = d3Geo.geoAzimuthalEquidistant();
let conicConformal: d3Geo.GeoConicProjection = d3Geo.geoConicConformal();
const conicEqualArea: d3Geo.GeoConicProjection = d3Geo.geoConicEqualArea();
const conicEquidistant: d3Geo.GeoConicProjection = d3Geo.geoConicEquidistant();
const cquirectangular: d3Geo.GeoProjection = d3Geo.geoEquirectangular();
const gnomonic: d3Geo.GeoProjection = d3Geo.geoGnomonic();
const mercator: d3Geo.GeoProjection = d3Geo.geoMercator();
const orthographic: d3Geo.GeoProjection = d3Geo.geoOrthographic();
const stereographic: d3Geo.GeoProjection = d3Geo.geoStereographic();
const transverseMercator: d3Geo.GeoProjection = d3Geo.geoTransverseMercator();

// ----------------------------------------------------------------------
// Create New Projections
// ----------------------------------------------------------------------
github DefinitelyTyped / DefinitelyTyped / types / d3-geo / d3-geo-tests.ts View on Github external
const stereographicRaw: d3Geo.GeoRawProjection = d3Geo.geoStereographicRaw();
const transverseMercatorRaw: d3Geo.GeoRawProjection = d3Geo.geoTransverseMercatorRaw();

// Use Raw Projection =====================================================

const rawProjectionPoint: [number, number] = azimuthalEqualAreaRaw(54, 2);
const rawProjectionInvertedPoint: [number, number] = azimuthalEqualAreaRaw.invert(180, 6);

// ----------------------------------------------------------------------
// Pre-Defined Projections
// ----------------------------------------------------------------------

// Create predefined Projection from factory =============================

const albers: d3Geo.GeoConicProjection = d3Geo.geoAlbers();
const albersUsa: d3Geo.GeoProjection = d3Geo.geoAlbersUsa();
const azimuthalEqualArea: d3Geo.GeoProjection = d3Geo.geoAzimuthalEqualArea();
const azimuthalEquidistant: d3Geo.GeoProjection = d3Geo.geoAzimuthalEquidistant();
let conicConformal: d3Geo.GeoConicProjection = d3Geo.geoConicConformal();
const conicEqualArea: d3Geo.GeoConicProjection = d3Geo.geoConicEqualArea();
const conicEquidistant: d3Geo.GeoConicProjection = d3Geo.geoConicEquidistant();
const cquirectangular: d3Geo.GeoProjection = d3Geo.geoEquirectangular();
const gnomonic: d3Geo.GeoProjection = d3Geo.geoGnomonic();
const mercator: d3Geo.GeoProjection = d3Geo.geoMercator();
const orthographic: d3Geo.GeoProjection = d3Geo.geoOrthographic();
const stereographic: d3Geo.GeoProjection = d3Geo.geoStereographic();
const transverseMercator: d3Geo.GeoProjection = d3Geo.geoTransverseMercator();

// ----------------------------------------------------------------------
// Create New Projections
// ----------------------------------------------------------------------
github msbarry / babymap / src / map.js View on Github external
previousYear = () => {},
  nextYear = () => {},
  width: outerWidth = 800
}) {
  const margin = {
    top: 0,
    right: 22,
    bottom: 0,
    left: 0
  };

  const width = outerWidth - margin.left - margin.right;
  const height = width * 0.68;
  const outerHeight = height + margin.top + margin.bottom;

  const projection = geoAlbersUsa()
    .scale(width * 1.35)
    .translate([width / 2, height / 2])
    .precision(0.1);

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

  const outerSvg = select(element).text('')
    .append('svg')
      .attr('class', 'map')
      .attr('width', outerWidth)
      .attr('height', outerHeight);

  // glow effect for label shadow
  const filter = outerSvg.append('defs')
    .append('filter')
github cockroachdb / cockroach-gen / pkg / ui / scripts / topo.js View on Github external
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
// implied. See the License for the specific language governing
// permissions and limitations under the License.


const fs = require('fs');
const path = require('path');

const d3geo = require('d3-geo');
const d3geoProjection = require('d3-geo-projection');
const topojson = require('topojson');

const usOrig = require('../node_modules/us-atlas/us/10m.json');
const worldOrig = require('../node_modules/world-atlas/world/50m.json');

const projection = d3geo.geoAlbersUsa().scale(1280).translate([480, 300]);
const invert = d3geo.geoTransform({
    point: function(x, y) {
        const inverted = projection.invert([x, y]);
        this.stream.point(inverted[0], inverted[1]);
    }
});

const usFeatProjected = topojson.feature(usOrig, {
    type: "GeometryCollection",
    geometries: usOrig.objects.states.geometries,
});
const usFeat = d3geoProjection.geoProject(usFeatProjected, invert);
const worldFeat = topojson.feature(worldOrig, {
    type: "GeometryCollection",
    geometries: worldOrig.objects.countries.geometries.filter(c => c.id != "840"),
});
github developmentseed / dirty-reprojectors / projections / albers-usa.js View on Github external
var d3 = require('d3-geo')
var R = 6378137.0 // radius of Earth in meters
module.exports = d3.geoAlbersUsa().translate([0, 0]).scale(R)
github PitchInteractiveInc / tilegrams / source / resources / GeographyResource.js View on Github external
const usProjection = (canvasDimensions) => {
  return geoAlbersUsa()
    .scale(canvasDimensions.width)
    .translate([
      canvasDimensions.width * 0.5,
      canvasDimensions.height * 0.5,
    ])
}
github PitchInteractiveInc / tilegrams / source / graphics / MapGraphic.js View on Github external
_buildPreProjection() {
    return geoAlbersUsa()
      .scale(canvasDimensions.width)
      .translate([
        canvasDimensions.width * 0.5,
        canvasDimensions.height * 0.5,
      ])
  }
github yifanwu / diel / code / src / notebook / components / charts / Map.tsx View on Github external
render() {
    const layout = this.props.layout ? this.props.layout : DefaultVizLayout;
    const {data, xAttribute, yAttribute} = this.props.spec;
    if (this.state.geoData) {
      let projection = geoAlbersUsa()
        .translate([layout.chartWidth / 2, layout.chartHeight / 2])
        .scale(1000);
      let latAttribute = xAttribute;
      let longAttribute = yAttribute;
      if (xAttribute.toLocaleUpperCase() !== "LATITUDE") {
        if ((yAttribute.toLocaleUpperCase() !== "LATITUDE") || (xAttribute.toLocaleUpperCase() !== "LONGITUDE")) {
          LogInternalError(`Maps have to be LATITUDE or LONGITUDE!`);
        }
        latAttribute = yAttribute;
        longAttribute = xAttribute;
      } else {
        if ((yAttribute.toLocaleUpperCase() !== "LONGITUDE")) {
          LogInternalError(`Maps have to be LATITUDE or LONGITUDE!`);
        }
      }
      let zoomDiv = null;