Web Worldwind starter

100%

Web Worldwind starter

✓ Published0🌍 Public

Last edited Apr 29, 2024

Created on Apr 29, 2024

This example shows a NASA Web WorldWind globe rendered on an HTML5 Canvas. It displays a blue extruded polygon, a labeled red placemark, and a WMS layer, with navigation controls and coordinate readouts using the WorldWind API. The code initializes a `WorldWindow`, adds imagery, terrain, and shape layers, and creates a `Placemark` and `Polygon` with custom attributes. A WMS layer pulls data from a NASA service over HTTP, and a `ColladaLoader` can load a 3D model.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Nasa Worldwind Fundamentals

This interactive visualization showcases a 3D Earth globe with real-world satellite imagery as its base layer, using NASA WorldWind's JavaScript API to render the planet within an HTML5 Canvas. In addition to the global topographic map, the program integrates a collection of star positions and tectonic plate boundaries, which can be overlaid on the globe. To guide the user, a compass and coordinate display are included, along with on-screen controls for panning, zooming, and tilting the view. The visualization leverages the WorldWind library's layer system to combine the Blue Marble Next Generation (BMNG) imagery and Landsat data with the user-provided GeoJSON datasets for stars and plates, all rendered via the Canvas API.

DDonald Bagwell

81% match

Loading thumbnail…

nasa world wind

This example presents an interactive three-dimensional globe using the NASA World Wind API, allowing exploration of Earth through a virtual globe interface. The visualization renders satellite imagery and geographical data directly from NASA's servers, with the globe rotating smoothly in response to user drag and zoom commands. The code implements the World Wind Java-compatible JavaScript library, which handles the complex projection and tile-loading of global imagery layers. Together with the supporting HTML structure, this creates a lightweight, web-based alternative to desktop GIS clients.

DDonald Bagwell

77% match

Loading thumbnail…

Worldmap

This example displays a world map rendered with vector geometries, showing landmasses in teal, graticules in light gray, country borders, and a pale sphere background. It loads geographic data from the World Atlas TopoJSON dataset and uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to generate SVG paths. React manages data loading through a custom `useData` hook, while the `Marks` component renders each layer. A commented-out rotation effect suggests potential interactivity, though the map remains static. The visualization relies on the `topojson` library to convert topology into GeoJSON features and meshes.

LLewis Ward

69% match

Loading thumbnail…

World Map

This example displays a natural Earth projection of the world, using a flat SVG canvas. Landmasses are filled in teal, while graticules and a light gray sphere background define the map’s frame—the latter including a polygon that traces national interiors. Built with React and D3 v7, it leverages `geoNaturalEarth1` for projection, `geoPath` for rendering geographic features, and `geoGraticule` for the grid. The underlying data is fetched from the `world-atlas` TopoJSON source, with terrain and boundary polygons extracted via `feature` and `mesh` from the `topojson` library.

Ww.fukuyama@gmail.com

69% match

Loading thumbnail…

World Map

This example displays a world map using the Natural Earth projection via D3.js (v5) and React. The visualization renders landmasses, a sphere outline, graticule lines, and interior boundaries as SVG paths, with D3’s `geoNaturalEarth1` projection and `geoPath` generating the geometry. The map is styled with a purple land fill and teal graticule/interior strokes, while the underlying data comes from the `world-atlas` package’s countries-50m GeoJSON topology, processed using `topojson`’s `feature` and `mesh` functions.

Bbsolomon103

69% match

Loading thumbnail…

World Map

This example renders a world map using a natural Earth projection. It displays landmasses and interior borders in teal and gray against a light sphere, with graticules indicating latitude and longitude lines. The visualization loads GeoJSON topology from the world-atlas package and processes it with topojson’s `feature` and `mesh` functions. It uses d3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs within a React component, drawing all paths as SVG.

PPadoSensei

69% match

Loading thumbnail…

HTML Starter

This example displays a basic world map by loading TopoJSON country boundaries and rendering them as SVG paths. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to convert geographic coordinates into SVG path data. The code fetches the world-atlas dataset from a CDN, transforms it into GeoJSON using `topojson.feature`, and appends a `path` element for each country. The visualization is minimal, with no styling or interaction, serving as a starter template for geographic data exploration with React.

PPaul Chen

68% match

Loading thumbnail…

Untitled

This example demonstrates an interactive 3D globe visualization built with React and D3. It renders a rotating Earth using `d3.geoOrthographic` and `d3.geoPath` to project country boundaries onto a canvas, with atmospheric shading applied through layered gradients. The code uses `d3.forceSimulation` to position label nodes around the planet, enabling smooth hover interactions that display country names and associated data. The visualization loads geographic coordinates from a bundled TopoJSON dataset and updates the globe’s rotation via a requestAnimationFrame loop, providing a dynamic and responsive exploration of world geography.

Ssambird1

68% match