Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
JJumblii
Last edited Jan 17, 2022
Created on Jan 17, 2022
Forked from Hello HTML

This example shows a world map rendered as gray countries with white borders, overlaid with white circles marking populated places from Natural Earth data. Hovering over a country or city highlights it in pink or blue, respectively. The visualization uses D3 v3's `d3.geoMercator` projection and `d3.geoPath` to draw GeoJSON features from two remote sources: world-110m.geojson for countries and ne_50m_populated_places_simple.geojson for places. Circles are positioned via the projection’s coordinates and respond to mouseover and mouseout events.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This visualization displays a world map using a Natural Earth projection, with each country rendered as a white SVG path with green borders using D3 v4’s `d3.geoPath` and TopoJSON data from `world-110m.json`. Country names from `world-country-names.csv` are joined to the geometry via their IDs. Hovering over a country changes its fill to grey, thickens its stroke, and shows a tooltip with the country’s name that follows the mouse cursor.

NNecklessCage
88% match
Loading thumbnail…

Untitled

This example shows an interactive world map that displays country borders and names, with a dark blue ocean sphere and light green landmasses. The map uses the Natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features as SVG paths generated by `d3.geoPath`. Hovering over a country changes its fill to red, and a `zoom` behavior applies pan and zoom transforms to the map group. Country data comes from the world-atlas TopoJSON file, converted with `topojson.feature`.

AAbishek-Dulal
87% match
Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, with each country filled in grey and stroked with white. The visualization uses a Mercator projection centered on the equator, configured via `d3.geoMercator` with a custom scale and rotation. The code loads US Atlas topology data from a remote JSON file and uses `topojson.feature` to extract country boundaries, which are then drawn with `d3.geoPath`. The SVG container is created using `d3.select` and appended to the document body.

Sspace-captain96
86% match
Loading thumbnail…

Untitled

A world map rendered in gray displays curved green lines connecting pairs of cities, with each line drawn as a GeoJSON LineString between two latitude-longitude coordinates loaded from a CSV file. The example uses d3.geoMercator for projection, d3.geoPath to generate SVG paths for both the world shape and connection lines, and d3.queue to load the world GeoJSON and connection data concurrently. Country boundaries appear with white strokes and zero width, while the connections use a teal stroke.

Jjs164
86% match
Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, colored grey with thin white stroke lines separating countries. The map uses the Mercator projection, centered on the prime meridian and rotated to show the eastern hemisphere. Users can pan and zoom interactively via a d3.zoom handler, which applies a transform to the grouped country paths during the zoom event. The geographic data comes from a TopoJSON file loaded with d3.json, and the features are extracted using topojson.feature before being drawn with d3.geoPath. The projection is configured with d3.geoMercator, and the zoom scale is restricted to a range of 1 to 8.

NNatalija Jansone
86% match
Loading thumbnail…

Untitled

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles scaled by population size. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations are loaded via d3.csv, with circles positioned using the projection and sized through a linear scale. The SVG is built in React, with static styling applying a light fill to land and subtle borders.

VVineel Gannu
86% match
Loading thumbnail…

Untitled

This example shows a world map rendered as light green countries against a blue sphere, with black country borders at low opacity. It uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic shapes, while `topojson.feature` extracts country polygons from the world-atlas dataset (110m resolution). The SVG is populated asynchronously after fetching the TopoJSON file, and the sphere is drawn first as a filled path. Styling comes entirely from CSS classes.

Ffaaty
86% match
Loading thumbnail…

Untitled

This example shows a world map with cities whose populations exceed 50,000, rendered as semi-transparent circles sized by the square root of their population. The map includes landmasses, country interiors, graticules, and a background sphere, all drawn using `d3.geoPath` with the Natural Earth projection (`geoNaturalEarth1`). City data comes from a Simplemaps CSV loaded via `d3.csv`, while country boundaries are derived from World Atlas TopoJSON processed with `topojson.feature` and `mesh`. The visualization is built with React and D3 v4, using `scaleSqrt` to map population values to circle radii.

Ssdilbaz
85% match