CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-d3

Data-Driven Documents - A comprehensive JavaScript library for creating dynamic, interactive data visualizations in web browsers

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

geo.mddocs/

Geographic Projections

Mathematical functions for converting spherical coordinates to planar coordinates for mapping applications, including common projections and geographic utilities.

Capabilities

Path Generation

Functions for converting GeoJSON to SVG paths.

/**
 * Create geographic path generator
 * @param projection - Optional projection function
 * @returns Path generator
 */
function geoPath(projection?: GeoProjection | null): GeoPath;

interface GeoPath {
  /**
   * Generate SVG path string for GeoJSON object
   * @param object - GeoJSON object
   * @returns SVG path string or null
   */
  (object: any): string | null;
  
  /**
   * Set projection function
   * @param projection - Projection or null for identity
   * @returns Path generator for chaining
   */
  projection(projection: GeoProjection | null): GeoPath;
  
  /**
   * Compute area of GeoJSON object
   * @param object - GeoJSON object
   * @returns Area in square pixels
   */
  area(object: any): number;
  
  /**
   * Compute bounding box of GeoJSON object
   * @param object - GeoJSON object
   * @returns [[x0, y0], [x1, y1]] bounds
   */
  bounds(object: any): [[number, number], [number, number]];
  
  /**
   * Compute centroid of GeoJSON object
   * @param object - GeoJSON object
   * @returns [x, y] centroid coordinates
   */
  centroid(object: any): [number, number];
}

Map Projections

Common map projections for converting longitude/latitude to x/y coordinates.

/**
 * Create Mercator projection
 * @returns Mercator projection function
 */
function geoMercator(): GeoProjection;

/**
 * Create Albers equal-area conic projection
 * @returns Albers projection function
 */
function geoAlbers(): GeoConicProjection;

/**
 * Create orthographic projection (globe view)
 * @returns Orthographic projection function
 */
function geoOrthographic(): GeoProjection;

/**
 * Create natural Earth projection
 * @returns Natural Earth projection function
 */
function geoNaturalEarth1(): GeoProjection;

interface GeoProjection {
  /**
   * Project longitude/latitude to x/y coordinates
   * @param coordinates - [longitude, latitude] in degrees
   * @returns [x, y] coordinates or null if not projectable
   */
  (coordinates: [number, number]): [number, number] | null;
  
  /**
   * Invert x/y coordinates to longitude/latitude
   * @param coordinates - [x, y] coordinates
   * @returns [longitude, latitude] in degrees or null
   */
  invert?(coordinates: [number, number]): [number, number] | null;
  
  /**
   * Set projection scale
   * @param scale - Scale factor
   * @returns Projection for chaining
   */
  scale(scale: number): GeoProjection;
  
  /**
   * Set projection center point
   * @param center - [longitude, latitude] center
   * @returns Projection for chaining
   */
  center(center: [number, number]): GeoProjection;
  
  /**
   * Set translation offset
   * @param translate - [x, y] translation
   * @returns Projection for chaining
   */
  translate(translate: [number, number]): GeoProjection;
  
  /**
   * Fit projection to GeoJSON object
   * @param extent - [[x0, y0], [x1, y1]] target extent
   * @param object - GeoJSON object
   * @returns Projection for chaining
   */
  fitExtent(extent: [[number, number], [number, number]], object: any): GeoProjection;
}

interface GeoConicProjection extends GeoProjection {
  /**
   * Set standard parallels for conic projections
   * @param parallels - [latitude1, latitude2] standard parallels
   * @returns Projection for chaining
   */
  parallels(parallels: [number, number]): GeoConicProjection;
}

Geographic Utilities

Functions for geographic calculations and operations.

/**
 * Compute spherical area of GeoJSON feature
 * @param object - GeoJSON object
 * @returns Area in steradians
 */
function geoArea(object: any): number;

/**
 * Compute spherical bounding box
 * @param object - GeoJSON object
 * @returns [[west, south], [east, north]] bounds in degrees
 */
function geoBounds(object: any): [[number, number], [number, number]];

/**
 * Compute spherical centroid
 * @param object - GeoJSON object
 * @returns [longitude, latitude] centroid in degrees
 */
function geoCentroid(object: any): [number, number];

/**
 * Compute great-arc distance between two points
 * @param a - [longitude, latitude] of first point
 * @param b - [longitude, latitude] of second point
 * @returns Distance in radians
 */
function geoDistance(a: [number, number], b: [number, number]): number;

/**
 * Test if point is inside GeoJSON feature
 * @param object - GeoJSON object
 * @param point - [longitude, latitude] test point
 * @returns True if point is inside
 */
function geoContains(object: any, point: [number, number]): boolean;

Usage Examples

import { geoPath, geoMercator, geoAlbers } from "d3";

// Create projection and path generator
const projection = geoMercator()
  .scale(1000)
  .translate([400, 300]);

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

// Generate SVG path for GeoJSON
const geoJsonFeature = {
  type: "Feature",
  geometry: {
    type: "Polygon",
    coordinates: [[[-74, 40], [-74, 41], [-73, 41], [-73, 40], [-74, 40]]]
  }
};

const svgPath = pathGenerator(geoJsonFeature);

// Fit projection to data
const usProjection = geoAlbers()
  .fitExtent([[0, 0], [800, 600]], usGeoJson);

Types

// GeoJSON-like objects
interface GeoPermissibleObjects {
  type: string;
  coordinates?: any;
  geometry?: any;
  geometries?: any;
  features?: any;
}

// Projection function signature
type GeoProjection = {
  (coordinates: [number, number]): [number, number] | null;
  invert?(point: [number, number]): [number, number] | null;
  scale(scale: number): GeoProjection;
  translate(translate: [number, number]): GeoProjection;
  center(center: [number, number]): GeoProjection;
  fitExtent(extent: [[number, number], [number, number]], object: any): GeoProjection;
};

// Geographic bounds
type GeoBounds = [[number, number], [number, number]];

Install with Tessl CLI

npx tessl i tessl/npm-d3

docs

animation.md

color-interpolation.md

color-schemes.md

data-processing.md

format.md

geo.md

index.md

interactions.md

layouts.md

scales-axes.md

selection.md

shapes.md

time.md

tile.json