Skip to main content
SimilarExport ZIP
100%

Fork of ICE8 - Country Map

✓ Published4🌍 Public
Nnjuki andrew
Last edited Jul 25, 2022
Created on Jul 25, 2022
Forked from 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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
96% 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
95% 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
95% 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
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
91% 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
90% match
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
88% match
Loading thumbnail…

Fork of Fork of Australia Map

This map of Australia displays individual regions colored by electoral division using a categorical color scale. Built with React and D3 v5, it loads GeoJSON data from a external URL via `json()` and renders each state as an SVG path using `geoPath` with a `geoMercator` projection. `feature` from topojson extracts the shapes, while `scaleOrdinal` with `schemeCategory10` assigns colors. Each region is labeled with its name positioned at the path centroid via `pathGenerator.centroid`.

KKeerthipriyaBankuru
88% match