Vinay world map

100%

Vinay world map

✓ Published1🌍 Public

Last edited Apr 13, 2026

Created on Apr 13, 2026

Forked from Map

This example displays a choropleth-style map of the United States using SVG paths. The map renders all states from TopoJSON data loaded from the us-atlas package, with each state filled by an orange color scale indexed by its position in the dataset. It uses d3.geoAlbersUsa for the projection and d3.geoPath to draw boundaries. The visualization includes hover tooltips via appended title elements, though the tooltip text is static.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Country Map

This example shows a choropleth map of the United States, with each state rendered as a green SVG path on a light blue background. It loads US state boundaries from the us-atlas TopoJSON file and uses the `d3.geoPath` projection with `d3.geoAlbersUsa` to create the map. The code relies on `d3.json` to fetch the data and the `topojson-client` library to convert TopoJSON features into GeoJSON paths for rendering.

KKishen Patel

84% match

Loading thumbnail…

usa map

The map displays all U.S. states as colored SVG paths, with each state assigned a distinct color from a categorical scale and a hover effect that turns it black. It uses d3.geoPath with the geoAlbersUsa projection to render state boundaries from TopoJSON data loaded via the us-atlas and geo-albers-usa-territories libraries. State names appear as tooltips through appended title elements, and the color scale is d3.scaleOrdinal with schemeCategory10.

Ssatishnarne99@gmail.com

83% match

Loading thumbnail…

usa map

This example displays a choropleth-style map of US states, with each state filled by a categorical color from `d3.scaleOrdinal` and `schemeCategory10`. It uses `d3.geoPath` with a `geoAlbersUsa` projection to render the SVG paths, and the state boundaries are loaded from a TopoJSON file via `us-atlas`. Hovering a state changes its fill to yellow, while a red stroke outlines all boundaries. The code processes the TopoJSON with `topojson.feature` and appends a `<title>` element for each state name.

SSai Hemanth Babu Sunkari

83% match

Loading thumbnail…

US Country Map

This example displays a static choropleth map of the United States, with all states uniformly filled in red on a light yellow background. Using D3 v4 and TopoJSON, it loads state boundaries from the `us-atlas` dataset and renders them as SVG paths with `d3.geoPath` and the `d3.geoAlbersUsa` projection, which automatically positions Alaska and Hawaii. The code applies stroke styling to delineate state borders, offering a simple baseline for geographic data visualization.

Aavinash021997

83% match

Loading thumbnail…

Vinay world map

This example displays a world map using a Natural Earth projection, with each country filled in varying shades of blue. The visualization shows geographic boundaries, a graticule, and a sphere background, drawn as SVG paths via `d3.geoPath`. It loads TopoJSON country data from the world-atlas package and converts it to GeoJSON with `topojson.feature`, applying a color scale based on data index. The map is built with D3 v7, using `d3.geoNaturalEarth1` for the projection and `d3.geoGraticule` for the grid lines.

VVinay Kumar Parvathini

82% match

Loading thumbnail…

Country Map

This example displays a choropleth map of the 50 US states, rendered as SVG paths with a blue fill and black state borders. The visualization uses the `geoAlbersUsaTerritories()` projection and `d3.geoPath()` to draw geographic features, while `useData` fetches TopoJSON data from the `us-atlas` package. State boundaries are generated via the `feature()` and `mesh()` functions from TopoJSON, and hovering highlights a state blue.

Rrakeshkommineni

82% match

Loading thumbnail…

United States Of America Map

This example displays a green choropleth map of the United States rendered as an SVG. It loads world country boundaries from the world-atlas TopoJSON dataset and isolates the U.S. geometry using `topojson.feature` and a name-based lookup. The map is projected with `d3.geoMercator` and drawn using `d3.geoPath` inside a D3 v5 script, with all paths styled via CSS.

Aanith462@gmail.com

82% match

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147

82% match