Skip to main content
SimilarExport ZIP
100%

v

✓ Published0🌍 Public
HHarshithmullapudi@my.unt.edu
Last edited Nov 2, 2025
Created on Nov 2, 2025
Forked from Map

This visualization presents two choropleth-style map examples: a world map using the Natural Earth projection and a United States map using the Albers USA projection, both rendered as SVG with D3 v7 and TopoJSON. The world map displays countries from the `world-atlas@2` dataset with a graticule overlay, while the US map shows states from `us-atlas@3`. The code uses `d3.geoNaturalEarth1`, `d3.geoAlbersUsa`, `d3.geoPath`, and `topojson.feature` to project and draw geographic features from remote TopoJSON files.

AI-generated description
MIT Licensed

Similar vizzes

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

dinesh ice8 q1

This example presents a dual-map visualization: a world choropleth and a US states choropleth, rendered as SVG using D3.js v7. The world map uses `d3.geoNaturalEarth1` projection and color-coded countries based on population data from a CSV file, while the US map uses `d3.geoAlbersUsa` projection with state-level values. Both maps load GeoJSON from the world-atlas and us-atlas CDN packages, and use `topojson-client` functions `feature` and `mesh` for geometry processing. A hover tooltip displays values; the US section also includes state borders drawn via a mesh layer.

Ddineshsingiri18@gmail.com
85% match
Loading thumbnail…

Fork of 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.

YYaswanth
83% match
Loading thumbnail…

Let's make a map with D3.js

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths and oceans as a dark blue sphere. The visualization loads geographic data from the visionscarto-world-atlas TopoJSON file and uses D3 v5’s `geoPath` and `geoNaturalEarth1` to project the features. TopoJSON’s `feature` API converts the topology into GeoJSON, while SVG paths are appended dynamically to the canvas.

AAmol Kulkarni
82% match
Loading thumbnail…

World

This example displays a static world map of all countries using a natural Earth projection. The visualization fetches geographic data from the world-atlas TopoJSON dataset and renders each country as a violet SVG path with black strokes on a green background. The code employs d3.json to load the data, d3.geoNaturalEarth1 for the projection, and d3.geoPath to generate the SVG paths. The topojson.feature method extracts the country geometries from the TopoJSON structure before binding them to the SVG elements.

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

Map

This example displays a world map using a natural Earth projection, with countries shown as light green shapes against a dark blue sphere background. The visualization is rendered as SVG paths derived from TopoJSON data loaded from the world-atlas package, with each country’s boundaries drawn using D3’s geoPath and geoNaturalEarth1 projection. The code utilizes D3 v6 for data binding and selection, while TopoJSON’s feature function converts the encoded topology into GeoJSON features for rendering.

Nnsadath
82% match
Loading thumbnail…

Let's make a map with D3.js!

This map example renders the countries of the world using an SVG canvas and a Natural Earth projection. The visualization draws a blue sphere as a background, then fills each country's geographic boundary in light green with a semi-transparent black outline. The code uses the D3.js libraries `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw the map, while the `topojson` module's `feature` function converts the TopoJSON data from the world-atlas package into plottable country features.

Ttarunkishore2303
82% match