Skip to main content
100%

distance(km) using haversine formula.

✓ Published0🌍 Public
Aandrewcowley
Last edited Oct 12, 2013
Created on Oct 12, 2013

This example calculates the great-circle distance between two geographic coordinates using the haversine formula. It shows the distance in kilometers between the Washington Monument area points [38.898556, -77.037852] and [38.897147, -77.043934]. The code defines a self-executing function that converts latitude and longitude differences to radians, applies the haversine equation with Earth’s mean radius (6371 km), and returns the result. It relies on native JavaScript Math methods (`cos`, `sin`, `atan2`, `sqrt`) without external libraries, and the output is a single numeric value representing the distance.

AI-generated description

Similar vizzes

Loading thumbnail…

haversineDistance en javascript

This example demonstrates the Haversine formula, a core geospatial calculation that computes the great-circle distance between two latitude-longitude coordinate pairs. The code defines a `haversineDistance` function that takes two coordinate arrays and an optional flag to return the result in either kilometers or miles. It converts degrees to radians, applies the trigonometric Haversine equation, and uses the Earth’s mean radius (6371 km) to derive the final distance. The example also includes a sample console log call, which outputs 5198.4 meters for two points near Buenos Aires, Argentina, using plain JavaScript without any external libraries.

Aaaizemberg
76% match
Loading thumbnail…

Two Point Equidistant

This example visualizes the Two Point Equidistant projection, which preserves accurate distances from two specified points—here, Honolulu and Washington, D.C. The map displays graticules and landmasses over a stylized background, with a warning that artifacts appear beyond 145° due to incomplete elliptical clipping. It uses `d3.geo.twoPointEquidistant()` with custom scale, translation, and `clipAngle`, along with `d3.geo.path` and `d3.geo.graticule`. Land data comes from a TopoJSON world file, rendered as SVG with styled foreground, graticule, and land paths.

Mmbostock
52% match
Loading thumbnail…

Two Point Equidistant

This example demonstrates the two-point equidistant projection, showing great circles centered on Honolulu and Washington, D.C. as red and blue circles. The map includes world landmasses with the projection applied. The code uses `d3.geo.twoPointEquidistant()` with specified points, `d3.geo.circle()` for generating circles, and `d3.geo.path()` for rendering. It renders to SVG using D3.v3 and topojson, loading world data from a JSON file. The projection is noted as a work in progress with visual artifacts requiring elliptical clipping.

Mmbostock
52% match
Loading thumbnail…

lat/lon to tile number from http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29

This example demonstrates how to convert geographic coordinates (latitude and longitude) into slippy-map tile numbers, and vice versa, for a given zoom level. It shows the mathematical relationships between raw coordinate pairs and the tile grid system used by web maps like OpenStreetMap. The code defines pure JavaScript functions—`long2tile`, `lat2tile`, `tile2long`, and `tile2lat`—using the `Math` object’s trigonometric and logarithmic methods to perform the projection. No external libraries are used; the logic directly implements the Web Mercator projection formulas, enabling both forward and inverse tile-number calculations. The functions are standalone and ready for integration into tile-based map renderers.

CCaged
49% match
Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how latitude and longitude coordinates from a world GeoJSON file are projected onto an SVG canvas using a custom cylindrical map projection, with red circles marking London and San Francisco. Built with D3.js version 3.5.5, the code uses `d3.geo.projection` to define the cylindrical transformation and `d3.geo.path` to render the world map from the 110m-resolution GeoJSON data. The `projection([0,52])` and `projection([-122.4194,37.7749])` calls place the two cities, while the commented-out alternative projections (Mercator and azimuthal equidistant) show the flexibility of the approach.

KKristinHenry
47% match
Loading thumbnail…

Finding longest path between two geoms

This example computes the longest straight-line distance between two geographic geometries: a point near the UK coast and a line formed by the union of two points further south. It uses PostGIS functions `ST_LongestLine` and `ST_SetSRID` to construct the geometries and find the connecting line, then `ST_Distance_Sphere` calculates the great-circle distance in meters. The SQL query reveals the underlying spatial computation, showing how PostGIS can determine the maximum separation between a point and a multi-point geometry on a spherical Earth model.

Aandrewxhill
47% match
Loading thumbnail…

Distance Relay

Distance Relay is a D3.js visualization that renders three labeled distance vectors radiating from a central point, each paired with a circle whose diameter equals the vector's magnitude. The vectors use red, green, and magenta strokes, and their angles and lengths define the circle centers and radii. The code employs `d3.select`, `extent`, and SVG circle elements, with manual trigonometry converting polar coordinates to Cartesian positions. The viewBox is dynamically adjusted to fit all geometric elements, and the example invites creative theming variations like Halloween or Christmas modifications.

Bbenclark.3rd@gmail.com
47% match
Loading thumbnail…

Antimeridian Cutting

This example demonstrates antimeridian cutting in map projections, showing how geographic shapes that cross the ±180° longitude line are rendered without visual artifacts. A conic equal-area projection is rotated interactively via mouse movement, with the projected sphere drawn on a Canvas element. The code uses d3.geoConicEqualArea for the projection, d3.geoPath for rendering, and d3.scaleLinear to map mouse coordinates to rotation angles. World land data from the `world-110m.v1.json` file is loaded with `d3.json` and processed using `topojson.feature`.

Mmbostock
46% match