Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
RRobFaj
Last edited Apr 13, 2023
Created on Apr 13, 2023
Forked from D3 Starter

This visualization displays a single country, Germany, extracted from a world GeoJSON dataset and rendered in red on a blank SVG canvas. The map uses the Mercator projection, specifically centered on GPS coordinates [2, 47] with a scale factor of 980, via the `d3.geoMercator` projection. The code loads world boundaries from a remote GitHub repository using `d3.json`, filters the features to only include Germany, and draws the path with `d3.geoPath` and the `.projection()` method. The result is a simple, static choropleth-style map focusing solely on that nation.

AI-generated description

A demonstration of how to start using D3 version 6.

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
78% match
Loading thumbnail…

Untitled

A choropleth world map visualizes mock document counts by country, with countries colored on a scale from green to red based on their associated values. The map renders in SVG using the Mercator projection via `d3.geo.mercator` and `d3.geo.path`, with graticule lines drawn for reference. TopoJSON data from `world.json` is loaded and merged with aggregation data containing country codes and document counts, then filtered to exclude Antarctica. Country boundaries appear as white strokes, and users can hover to reveal labels, though labels remain hidden by default.

FFatemeh Safarlou
77% 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
77% match
Loading thumbnail…

Untitled

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.

JJumblii
76% match
Loading thumbnail…

Untitled

A world map rendered in the Mercator projection displays country boundaries as grey paths with thin white strokes. The example demonstrates loading GeoJSON-derived topology data from a local `world-110m2.json` file and converting it to SVG paths using `d3.geoPath`. The map is centered and rotated with `d3.geoMercator` and `projection.rotate`, and country features are extracted via `topojson.feature` from the TopoJSON library. The page uses D3 v7 to fetch the data asynchronously with `d3.json` and append the resulting paths to an SVG container.

Sspace-captain96
76% match
Loading thumbnail…

Untitled

A globe projection of the world renders country polygons onto a Canvas element using `d3.geoPath` and `d3.geoOrthographic`. It displays land masses in dark blue, water in light gray, and a graticule overlay. The globe auto-rotates slowly, but dragging it with the mouse adjusts the projection angles, and hovering highlights a country in a different color while showing its name. The visualization loads world geography as TopoJSON from a remote source and country names from a TSV file, using `d3.geoGraticule10`, `d3.drag`, and the `versor` library for rotation calculations.

AAbhishek Singh
76% match
Loading thumbnail…

Untitled

This example presents a choropleth map of global population by country, rendered as an SVG using D3.js v4. It employs a Mercator projection via `d3.geoMercator` and draws country boundaries with `d3.geoPath`. The fill color for each nation is determined by a threshold color scale that bins population values into a blue scheme from `d3.schemeBlues`. Data is loaded asynchronously with `d3.json` for the world GeoJSON topology and `d3.csv` for population figures.

AAaronBhasker
75% 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
75% match