ICE 8: VN Map

100%

✓ Published0🌍 Public

Last edited Apr 1, 2022

Created on Mar 31, 2022

This example renders a choropleth map of Vietnam’s states, coloring each polygon according to its area value using a purple ordinal color scale. Built with React and D3 v6, it loads TopoJSON data from a GitHub repository, converts it to GeoJSON via `topojson.feature`, and projects it with `d3.geoMercator` and `d3.geoPath`. The SVG output is generated inside a React component using refs, with `d3.json` fetching the data asynchronously and `scaleOrdinal` mapping values to colors.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 country map

This example displays a choropleth-style map of US states rendered as an SVG using React and D3 v5. The map shows state boundaries with sky-blue land fills and green interior borders, built from a TopoJSON file fetched via `d3.json`. The code uses `geoAlbersUsaTerritories` for projection and `d3.geoPath` to generate paths, while `topojson.feature` and `topojson.mesh` extract land and interior outlines from the dataset.

Ssumitradevipolina

80% match

Loading thumbnail…

ICE 8

This example presents a choropleth map of India, rendered using the Mercator projection via `d3.geoMercator` and drawn with SVG paths. Each state is filled with a color from `scaleOrdinal(schemeCategory10)`, and hovering over a region turns it brown. The visualization loads TopoJSON data from a GitHub gist, parses it with the `topojson.feature` method, and projects the geometry using `d3.geoPath`. An explicit title element is added per state based on the data’s `interpolateRainbow` property, though no such property exists in the dataset.

Ppavan0828

80% match

Loading thumbnail…

ICE8 - Country Map

This example presents a choropleth map of Indian electoral regions, using color to encode the Electoral Division property of each region. The map is rendered as SVG paths generated via `d3.geoPath` with a `geoMercator` projection. Data is loaded from a remote TopoJSON file, parsed with the `topojson` library, and each region’s fill color is assigned using a custom ordinal scale. The code also appends a `<title>` element for each path, providing region names as hover tooltips.

Vvagdevi-369

79% match

Loading thumbnail…

ICE 8: Region Map - USA

This example displays a choropleth-style region map of the United States, rendered as SVG paths within a React component. The map shows state boundaries as purple interior lines over a teal sphere, with land masses filled in dark blue. The code loads geographic data from the us-atlas TopoJSON file and uses d3.geoAlbers, d3.geoPath, and d3.geoGraticule for projection and rendering, along with topojson.feature and topojson.mesh to process the topology. React manages the data loading via useEffect and useState.

NNITIN0601

79% match

Loading thumbnail…

ICE-8 World Map - Nghia Dang

This interactive world map uses an orthographic projection to display the globe, rendering landmasses in blue and highlighting internal country boundaries with silver strokes. A yellow graticule grid overlays the sphere, which has an empty fill. Built with D3 v7 and React, the visualization fetches country topologies from the world-atlas package, using `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule`. The `topojson` library's `feature` and `mesh` functions process the data, while SVG paths draw the resulting map elements.

Tteohangxanh

79% match

Loading thumbnail…

ICE - 8 - Map

This example presents a choropleth map of India's administrative regions, coloring each state according to its name using a categorical color scale. It renders the map with D3's `geoPath` and a Mercator projection, drawing state boundaries as SVG paths with white strokes. Data is loaded from a GeoJSON file hosted on GitHub, processed with `topojson`'s `feature` function, and each state is labeled at its centroid. The visualization uses D3 v5 within a React framework, with styling applied via CSS classes.

Ggunasindhuja

79% match

Loading thumbnail…

ICE 8 country map

This example displays a choropleth map of India, coloring each state with a categorical color scale. The map uses the Mercator projection to render geographic boundaries from a TopoJSON file. The visualization is built with React, D3 v5, and the `topojson` library, which parse the data and generate SVG paths. The `d3.geoPath` and `d3.geoMercator` functions handle projection and rendering, while a CSS hover effect highlights individual states in yellow.

Nnagarjuna1968

79% match

Loading thumbnail…

ICE8_CountryMap

This example renders a choropleth-style map of the United States using React and SVG. It loads US state topology from a remote TopoJSON file via `d3.json`, then converts it to GeoJSON features and an interior mesh using `topojson.feature` and `topojson.mesh`. The map is drawn with `d3.geoPath` and the custom `geoAlbersUsaTerritories` projection, styling land areas cyan and state boundaries black, with a green hover effect on individual states.

Ssrividya-bachina

79% match