Skip to main content
SimilarExport ZIP
100%

ICE-8: Country Map

✓ Published0🌍 Public
CChaitanya Galla
Last edited Apr 1, 2022
Created on Mar 30, 2022
Forked from HTML Starter

This example renders a country map using D3.js v4 with a Mercator projection, centering and scaling to zoom in on England. It loads GeoJSON data asynchronously via `d3.json`, filters the features to include only England, and draws the result as SVG paths using `d3.geoPath`. The map is filled with a single grey color and no stroke, displaying the country’s outline on a blank canvas.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-8 Country Map

This interactive map displays European countries as white shapes with grey borders, rendered using an SVG canvas. The visualization employs d3.geoMercator for projection and d3.geoPath to convert GeoJSON features into SVG paths. It fetches geographic data from a remote URL via d3.json, then applies a Mercator projection centered on coordinates [82, 23] to render the map. The example integrates React for the page structure while relying on D3 v5 for geographic data processing and SVG rendering.

KKetha
85% match
Loading thumbnail…

ICE 8 Map (Country)

This visualization displays a choropleth map of England's geographical regions, with each region filled in a semi-transparent blue and internal boundaries highlighted with light gray strokes. It uses D3.js v7 with the `geoNaturalEarth1` projection and `geoPath` to render the map, while TopoJSON's `feature` and `mesh` functions process the source data from a JSON file containing England's divisions. React 18 manages the SVG rendering.

RReyden Harris
84% match
Loading thumbnail…

ICE-8 World Map

This example displays an ICE-8 world map, rendering countries as blue filled shapes with white outlines against a light blue spherical backdrop. It uses a Mercator projection via d3.geoMercator and draws the geographic paths with d3.geoPath. The SVG output is generated through React, with country boundaries parsed from a TopoJSON file using the topojson feature function. The visualization loads geographic data from a GitHub gist and styles the map using CSS, with the sphere and country paths colored separately for contrast.

Aanushaanumula
84% match
Loading thumbnail…

ICE8 -Country Map-US

This example displays a map of the United States rendered with green land areas and white state boundaries against a pale-green sphere background. It uses React to manage the application state and render SVG elements, while D3’s `geoAlbers` projection, `geoPath`, and `geoGraticule` handle the map geometry. Geographic data is loaded asynchronously from a TopoJSON file via D3’s `json` method, with the TopoJSON `feature` and `mesh` APIs extracting the nation outline and state borders.

Nnithish-1999
83% match
Loading thumbnail…

Fork of ICE 8 - Country Map

This example displays a static choropleth-style map of countries, rendered as gray SVG paths with dark strokes on a white background. The code uses D3 v4’s `d3.geoPath` with a `d3.geoAlbersUsa` projection, though the title suggests a country map. It loads TopoJSON data from a remote gist via `d3.json`, then applies `topojson.feature` to extract country geometries. The map is positioned within an SVG using margin-based translation, styled with CSS from an external stylesheet.

GGalineeharika
83% match
Loading thumbnail…

ICE 8 - World Map

This example displays a world map rendered as a green SVG using a Mercator projection. It loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with topojson.feature. The code uses d3.geoPath and d3.geoMercator to define the projection, and appends a path for each country to an SVG element with a light blue background. The map is built with D3 v4 within a React-compatible HTML page.

DDaniel Mata
83% match
Loading thumbnail…

ICE-8(Europe)

This example displays a choropleth-style map of Europe, with each country rendered as a light blue filled polygon outlined in black. The visualization uses the D3.js library's `d3.geoMercator` projection to transform geographic coordinates, and `d3.geoPath` to generate SVG path data from GeoJSON features. The geographic data is fetched from a remote URL using `d3.json`. The entire rendering occurs in an SVG element, and the map is built using React for the page structure while D3 handles the drawing.

Jjayanthamol99
83% match
Loading thumbnail…

ICE 8 world map

This example renders a world map using the geoNaturalEarth1 projection from D3, displaying countries as green SVG paths with black outlines. The code fetches country boundaries from the world-atlas dataset via the `json` function, extracts features using the `topojson` library's `feature` method, and projects them with `d3.geoPath`. The visualization employs simple CSS styling for the country shapes against a light blue background.

Ggeethanjalikotaru
83% match