Skip to main content
SimilarExport ZIP
100%

Fork of Fork of ICE8 - Country Map

✓ Published0🌍 Public
JJustin Roberts
Last edited Mar 25, 2023
Created on Mar 25, 2023

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`.

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

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
100% 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
95% 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
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
89% 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
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
87% match
Loading thumbnail…

Fork of Australia Electorate Map

This visualization displays Australia’s federal electoral divisions, each filled with a categorical color based on its electoral division name. It removes the first feature from the TopoJSON data and uses D3 v5’s geoMercator projection and geoPath to render SVG paths. The code also labels each region with its name at the centroid using d3.geoPath.centroid, and styles state boundaries with CSS. Data comes from a local australia.json file containing TopoJSON geometry.

BBasharAlFattal
87% match
Loading thumbnail…

Fork of Australia Map

A choropleth map of Australia renders electoral boundaries with a categorical color scale, displaying state names at region centroids. The visualization uses D3.js version 5 with the geoMercator projection and geoPath generator to project TopoJSON data into SVG paths. The code applies a ten-color ordinal scale based on electoral division properties, with state name labels positioned via the projection's centroid method. The React framework loads geographic data from a GitHub gist, styling state boundaries with black strokes and white fills.

MMgk1255
87% match