Fork of Polished World Map

100%

Fork of Polished World Map

✓ Published0🌍 Public

Last edited May 23, 2021

Created on May 23, 2021

This example displays a map of U.S. states filled with a teal color, rendered as SVG paths inside a React component. It uses the `d3.geoAlbersUsa` projection and `d3.geoPath` to convert TopoJSON state boundaries from the `us-atlas` dataset into visible shapes. The map is drawn within a React app that loads the data asynchronously via `useEffect` and the D3 `json` function, while the `topojson.feature` API extracts the state geometries.

AI-generated description

A world map showing country boundaries from World Atlas TopoJSON, polished for visual style, including graticules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Polished World Map

This example displays a map of U.S. states, rendered as outlined polygons using React and SVG. The map uses the `geoAlbersUsa` projection from D3 v5 and draws state boundaries with `d3.geoPath`. Geographic data is loaded from the U.S. Atlas TopoJSON, converted via the `topojson.feature` API, and styled with a teal fill on a light gray background. Although the README mentions world country boundaries and graticules, the current code focuses solely on U.S. state shapes.

KKeyvan Rezaei

95% match

Loading thumbnail…

Fork of Polished World Map

A fork of the Polished World Map renders U.S. state boundaries as an SVG visualization using React and D3 v5. The map displays land masses in teal with graticules and interior borders, loaded from the us-atlas TopoJSON dataset. The code employs `topojson.feature` to convert the data into GeoJSON and `d3.geoPath` to draw shapes, with styles applied through CSS classes. A YouTube embed is included in the README, though no playback functionality appears in the application itself.

VVu Le

92% match

Loading thumbnail…

Fork of Country map

This example displays a map of the United States with its individual states filled in sky blue and state boundaries drawn in teal. It uses the `geoAlbersUsaTerritories` projection and `geoPath` from d3 to render geographic shapes as SVG paths, with data from the US Atlas TopoJSON. React manages the component state, loading the topology via `useData` and `topojson.feature` and `topojson.mesh` to extract land and interior boundaries.

SSaiSree0122

90% match

Loading thumbnail…

Fork of Centered US Map

This example displays a stylized map of the United States with state boundaries, rendered in an SVG using React. It loads geographic data from the US Atlas TopoJSON via `d3.json` and uses `topojson.feature` and `topojson.mesh` to extract land and interior borders. The `d3.geoAlbers` projection and `d3.geoPath` draw the shapes, with `d3.geoGraticule` defined but unused in the final marks. The map is colored with teal land, a light blue sphere, and purple state boundaries, showcasing a clean, polished visual style.

Hhusseng96

90% match

Loading thumbnail…

Fork of USA Country Map

This example displays a choropleth-style map of the 50 US states, rendered as an SVG where each state boundary is drawn using D3’s `geoPath` and a custom `geoAlbersUsaTerritories` projection. The map initially fills each state with a teal color, and hovering over a state highlights it in magenta. Data is loaded asynchronously from the US Atlas TopoJSON file (`states-10m.json`) using React hooks (`useState`, `useEffect`) and processed with TopoJSON’s `feature` and `mesh` functions to generate land and interior borders. The visualization is built with React 16 and D3 v5, with styling defined in an external CSS file.

Ttejaswikalluri05

90% match

Loading thumbnail…

Fork of USA Map

This example displays a filled map of the United States with orange sphere background, green land areas, and black state borders. It uses React with D3 v5 to load US Atlas TopoJSON data and render SVG paths through `d3.geoPath` with an Albers projection. The code applies `d3.geoGraticule` for grid lines and `topojson.mesh` to draw interior boundaries between states.

Bbhargavarathod

89% match

Loading thumbnail…

Fork of map with points

This example displays a choropleth-style map of the United States rendered as SVG paths, using React to manage component state and the d3.geoAlbersUsa projection with d3.geoPath to draw state boundaries from TopoJSON data loaded via the us-atlas package. The map is populated with geospatial features fetched from a remote URL, while a loading fallback appears until the data arrives. The visualization emphasizes the geographic outlines rather than quantitative values, with a single teal fill applied to all marks.

CChase Hall

89% match

Loading thumbnail…

Fork of Polished World Map

This example shows a stylized world map rendered with SVG, using country boundaries from the World Atlas TopoJSON dataset. The visualization displays landmasses in teal, graticules (latitude/longitude grid lines) in light gray, and interior borders between countries in a brighter teal, all within a light gray sphere outline. The React-based code loads the TopoJSON via `useData`, then converts it to GeoJSON using `feature` and `mesh` from the `topojson` library. The `Marks` component uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate paths, and `d3.geoGraticule` to create the grid overlay, with styling applied through CSS class selectors.

GGabriel Noya

88% match