Skip to main content
SimilarExport ZIP
100%

ICE8 - Country Map

✓ Published3🌍 Public
SSatyaVineeth
Last edited Jul 10, 2022
Created on Jul 10, 2022
Forked from ICE8_CountryMap

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.

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_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…

ICE8 - Country Map

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.

Nnehabaddam
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
88% 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
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
86% 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
86% 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
85% 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
83% match