World Map and Australian States

100%

World Map and Australian States

✓ Published0🌍 Public

Last edited Oct 30, 2025

Created on Oct 30, 2025

This interactive web application presents two geographic visualizations: a world map and a map of Australian states. Using D3.js version 7 and the TopoJSON library, the application loads GeoJSON data from remote URLs, projects it via `d3.geoConicEqualArea` and `d3.geoNaturalEarth1`, and renders the maps as SVG paths. The Australian map colors each state and displays its name as a tooltip on hover, while the world map uses uniform gray fills with darker strokes for country boundaries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map and Australian States

This interactive map visualization lets users explore world countries and Australian states through a React-based interface. The main view renders world map data from the world-atlas TopoJSON dataset using D3 projections, with controls to switch between Natural Earth, Orthographic, Mercator, and Albers projections, plus a toggle for graticule grid lines. Clicking a country displays a detail panel with population, GDP, and regional information from the GeoJSON properties. The code leverages D3's geoPath, geoGraticule, and projection functions, while an additional choropleth view colors Australian states by population using d3.scaleSequential with an interpolateBlues color scheme.

AArun Kumar M

93% match

Loading thumbnail…

World Map

This interactive geographic visualization presents a world map and a separate map of Australia, allowing users to switch between the two views. The map supports multiple projections—including Natural Earth, Orthographic, Mercator, and Albers—and lets users toggle graticule grid lines. Clicking a country or Australian state displays a details panel with population, GDP, and continent information for world countries. The visualization is built with React and D3 v7, using `d3.geoPath` for rendering, TopoJSON data from the world-atlas package for the world map, and an external Australia states TopoJSON file, all drawn as SVG elements.

AArun Kumar M

91% match

Loading thumbnail…

Country Map

This example displays a map of Australia’s administrative regions, with each state filled in red and labeled with its name. The visualization loads GeoJSON data from `australia.json` and projects it using `d3.geoMercator` with a custom translation and scale. It uses `d3.geoPath` to generate SVG paths for the regions and `topojson.feature` to extract the geometry. State names are positioned at each region’s centroid using `d3.geoPath.centroid`, rendered as SVG text elements with a small font size.

SSheela2930

80% match

Loading thumbnail…

D3 Australia Conformal Conic

This example displays a map of Australia’s states using a Lambert conformal conic projection, with each state drawn as a dark gray polygon that highlights in orange on hover. The map is rendered as SVG, and the geographic data comes from Natural Earth, preprocessed via `ogr2ogr` and converted to TopoJSON. The visualization uses D3’s `d3.geo.conicConformal` projection and `d3.geo.path` to draw the shapes, while the interaction is handled through CSS `:hover` rules.

RRandomEtc

79% match

Loading thumbnail…

Australia Map

This example presents a choropleth-style map of Australia, with each electoral region filled with a distinct color from `d3.schemeCategory10` and labeled with its name. The code uses `d3.geoMercator` to project the geographical data and `d3.geoPath` to generate SVG paths for each region. State and territory names are positioned using the centroid calculation from `d3.geoPath`. The map is rendered as an SVG, with data loaded from a TopoJSON file and processed using the `topojson.feature` API.

MMgk1255

78% match

Loading thumbnail…

Untitled

This example displays a choropleth map of Australian states using the D3plus framework, with each state colored according to a categorical color scale based on its indexed value. The visualization loads geographic boundaries from a TopoJSON file and renders them as SVG paths, with state names positioned at each region's centroid. The code leverages the D3.js projection and path generation APIs through D3plus's geo_map type, combining data-driven styling with interactive tooltips.

Aamiralitah

78% match

Loading thumbnail…

Australia Map

This example displays a map of Australia with its electoral regions, each filled with a distinct color from a categorical palette using `d3.scaleOrdinal` and `schemeCategory10`. The map is rendered as SVG paths generated by `d3.geoPath` with a `geoMercator` projection, using TopoJSON data from `australia.json`. State and territory names are overlaid at each region’s centroid via `pathGenerator.centroid`. The visualization relies on D3 v5 and the `topojson` library for feature extraction.

RRupeshGandham

78% match

Loading thumbnail…

World Map

This interactive visualization displays a world map using D3 and React, rendering Earth’s landmasses in green with country borders and graticule lines overlaid on a light gray sphere. The map is drawn using `d3.geoNaturalEarth1` projection and `d3.geoPath`, with geographic data sourced from the world-atlas TopoJSON file (countries-50m.json). Country interiors and borders are derived via `topojson.feature` and `topojson.mesh`, while React manages the SVG rendering and loading state.

HHollyClarke19

77% match