Skip to main content
SimilarExport ZIP
100%

Fork of Map

✓ Published0🌍 Public
YYaswanth
Last edited Nov 7, 2025
Created on Nov 7, 2025
Forked from Map

This visualization demonstrates two geographic maps side by side: a world map using the Natural Earth projection and a US state map using the Albers USA projection. The maps show country and state boundaries rendered as SVG paths with light blue and green fills, overlaid on a subtle graticule grid for the world map. Built with D3 v7 and TopoJSON, the code loads geographic data from the `world-atlas` and `us-atlas` datasets via CDN, then applies `d3.geoNaturalEarth1` and `d3.geoAlbersUsa` projections with `d3.geoPath` to draw the features.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of World Map

This example displays two static choropleth-style maps: a world map using the Natural Earth projection and a US states map using the Albers USA projection. It demonstrates how to load TopoJSON data from the `world-atlas` and `us-atlas` datasets, convert it to GeoJSON with `topojson.feature`, and render it with `d3.geoPath` and `d3.geoNaturalEarth1` or `d3.geoAlbersUsa`. Both maps include graticule lines and interactive title tooltips showing region IDs.

AAmrit Adhikari
90% match
Loading thumbnail…

Fork of Map

This interactive visualization presents two distinct maps—a world map and a US map—that can be panned and zoomed using D3’s zoom behavior. It renders geographic features from the TopoJSON data in the world-atlas and us-atlas packages, using a natural Earth projection for the world and an appropriate projection for the US. The SVG maps include hover effects that change country and state fills, and they feature on-screen zoom control buttons to adjust the view.

Ppragnyalipsa96@gmail.com
88% match
Loading thumbnail…

Fork of Map

This example demonstrates two static maps rendered with D3 v7: a world map using the Natural Earth projection and a map of Nepal using the Mercator projection. Both visualizations load country boundaries from the `world-atlas@2` TopoJSON dataset, which is converted to GeoJSON via `topojson.feature` and drawn with `d3.geoPath`. The world map includes a graticule and a sphere background, while the Nepal map filters features by country ID 524 and fits the projection to that geometry. The code uses `d3.geoNaturalEarth1`, `d3.geoMercator`, and `projection.fitSize` to position the maps within their SVG containers.

AAmrit Adhikari
87% match
Loading thumbnail…

Fork of World Map

This visualization shows a U.S. states map rendered as green polygons with black outlines against a light blue spherical background. It uses d3.geoAlbersUsa for the projection and d3.geoPath to generate SVG paths from TopoJSON data loaded from the us-atlas package. The code converts TopoJSON to GeoJSON using topojson.feature before binding the state features to SVG paths, while the sphere element is drawn separately using a GeoJSON Sphere object.

PPeiyang Li
86% match
Loading thumbnail…

Map

This example presents two static choropleth-style maps side-by-side: a world map using the Natural Earth projection and a U.S. map using the Albers USA projection. Both maps load TopoJSON data—from `world-atlas` and `us-atlas` datasets—and render country and state boundaries as SVG paths via `d3.geoPath` and `topojson.feature`. The world map includes a graticule generated by `d3.geoGraticule`, while the U.S. map uses `d3.geoAlbersUsa`. Regions are filled with solid colors, and hover tooltips are added using SVG `title` elements.

SSahil Thapa
86% match
Loading thumbnail…

Fork of ICE-8 world map_ USA map

This example presents two side-by-side SVG maps: a world map and a map of the United States, both filled with a constant blue color. It uses D3.js v7 and TopoJSON to load and render geographic features, with `d3.geoNaturalEarth1` for the world projection and `d3.geoPath` to draw paths. A graticule layer is added to the world map, and both maps include hover effects with a tooltip that displays country or state names. The maps use the world-atlas TopoJSON data source.

Ppasalabala22@gmail.com
86% match
Loading thumbnail…

Fork of World Map

This visualization displays a world map using a natural Earth projection, with land masses rendered in a light purple fill on a white spherical background. The example loads GeoJSON data derived from the world-atlas TopoJSON file and uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` for data conversion. A sphere is drawn first to provide the globe’s outline, followed by country paths. The stylesheet defines distinct colors for the sphere, land, and extra strokes, though the latter two are not actively applied in the current code.

MMahendraGullinkala
85% match
Loading thumbnail…

Fork of World Map

This example presents a natural Earth projection of the world map, rendered as an SVG with a light blue spherical background and green landmasses outlined in black. It loads world country boundaries from the world-atlas TopoJSON dataset via `d3.json`, converting them to GeoJSON with `topojson.feature`. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and country paths, demonstrating a straightforward choropleth-free geographic rendering workflow.

Aadapavaishnavi12
85% match