Skip to main content
SimilarExport ZIP
100%

ICE8 - Country Map

✓ Published1🌍 Public
Nnehabaddam
Last edited Mar 30, 2023
Created on Mar 28, 2023
Forked from ICE - 7 Area Chart

This example displays a map of Australia, with each electoral region filled using a pastel color from a categorical scale. The map uses the D3.js geoMercator projection and geoPath API to generate SVG paths from TopoJSON data. State and territory names are rendered as text labels positioned at each region's centroid using the geoPath.centroid method. The visualization loads geographic boundaries from a remote JSON file and applies a custom title, illustrating a straightforward choropleth-style rendering with D3 v5 and the TopoJSON library.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE8 - Country Map

This visualization displays an interactive SVG map of Australian electoral regions, with each state shaded according to a categorical color scale based on its electoral division. The code uses D3 v5 functions including `geoMercator` for projection, `geoPath` for generating SVG paths from TopoJSON data, and `scaleOrdinal` with `schemeCategory10` for color encoding. State names are rendered at path centroids and hover tooltips appear via appended `title` elements. The map updates dynamically through a React-based bundle, loading geographic boundaries from a local TopoJSON file.

SSatyaVineeth
93% match
Loading thumbnail…

ICE8_CountryMap

This visualization displays a choropleth map of Australian electoral regions, with each state filled by a categorical color scale and labeled with its name at the centroid. It uses d3.geoMercator projection and d3.geoPath to render the TopoJSON topology data, while d3.scaleOrdinal with schemeCategory10 assigns colors based on the Elect_div property. The SVG is populated by appending path elements for each feature, with tooltips added via appended title elements.

SSai Bhavana Akkineni
93% match
Loading thumbnail…

Fork of ICE8 - Country Map

This example displays a choropleth map of Australian electoral regions, colored by electoral division using a categorical color scale. The map renders as SVG paths generated with `d3.geoPath` and a `geoMercator` projection, with state names positioned at path centroids. The code loads TopoJSON data from `australia.json`, extracts features via `topojson.feature`, and applies `d3.scaleOrdinal` with `schemeCategory10` for fills.

Nnjuki andrew
90% match
Loading thumbnail…

Fork of Fork of ICE8 - Country Map

This example renders a map of Australian electoral regions as colored SVG paths, with each region filled according to its electoral division using a categorical color scale. The code uses D3 v5’s `geoMercator` projection and `geoPath` to convert TopoJSON geometry into SVG paths, and labels each region with its name at the path centroid. The TopoJSON data is loaded from a local `australia.json` file, and the visualization is built within a React framework using the `topojson.feature` API to extract region shapes.

GGalineeharika
88% match
Loading thumbnail…

Fork of ICE8 - Country Map

This example renders a choropleth map of Australia using a GeoJSON file. The code employs D3 v5's `geoMercator` projection and `geoPath` to convert geographic coordinates into SVG paths, with `scaleOrdinal` and `schemeCategory10` assigning categorical colors to electoral divisions. State names are placed at path centroids. The map is drawn in SVG within a React-free HTML page, loading data via `json()` and styling borders through CSS.

YYerlan Yeszhanov
88% match
Loading thumbnail…

Fork of Fork of ICE8 - Country Map

A choropleth map of Australian electoral regions renders each state and territory as an SVG path, colored by electoral division via a categorical color scale. The geoMercator projection is manually translated and scaled to frame the country. D3 v5’s `geoPath` generates the paths, while TopoJSON’s `feature` extracts region boundaries from the bundled `australia.json`. Each region includes a small text label at its centroid, computed with `pathGenerator.centroid`.

JJustin Roberts
87% match
Loading thumbnail…

Fork of Fork of ICE8 - Country Map

A choropleth map of Australian electoral regions renders each state and territory as an SVG path, colored by electoral division via a categorical color scale. The geoMercator projection is manually translated and scaled to frame the country. D3 v5’s `geoPath` generates the paths, while TopoJSON’s `feature` extracts region boundaries from the bundled `australia.json`. Each region includes a small text label at its centroid, computed with `pathGenerator.centroid`.

JJustin Roberts
87% match
Loading thumbnail…

Europe Map ICE8

This example displays an outline map of Australian states rendered as SVG paths, with each state stroked in red and filled with a pale cream color. The map uses a Mercator projection configured for Australia and supports panning and zooming through d3.zoom. The code loads GeoJSON data from a GitHub repository and applies a d3.geoPath generator to draw the state boundaries. Despite the "Europe Map ICE8" title, the visualization actually focuses on Australian geography.

Ssenthilrajendran1
86% match