Skip to main content
SimilarExport ZIP
100%

Activity8_Task5_CountryMap

✓ Published1🌍 Public
Rrikhitakoganti12
Last edited Jul 5, 2023
Created on Jul 5, 2023
Forked from Hello VizHub

This example displays a map of Australia rendered as an SVG using D3.js v5 and TopoJSON data from the world-atlas package. It uses the `d3.geoMercator` projection and `d3.geoPath` to draw the country’s outline onto a 960×500 canvas. The code fetches geographic data via `d3.json`, selects the Australia feature from the TopoJSON, and appends the path to the page.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Australia-Country Map

This example displays a choropleth-style map of Australia rendered as a single yellow SVG path with black borders. It loads world country boundaries from the World Atlas TopoJSON dataset, filters for Australia, and fits a Mercator projection to the country’s extent. The code uses `d3.json`, `topojson.feature`, `d3.geoMercator`, and `d3.geoPath` to project and draw the shape, with styling applied via CSS.

Ssrikkanth05
84% match
Loading thumbnail…

Activity8_Task5_1

This example displays an interactive world map using D3 v5 and TopoJSON, rendering countries as light-green SVG paths with an indigo stroke on a sky-blue sphere. It loads geographic data from the world-atlas countries-110m.json dataset and applies a d3.geoEquirectangular projection with d3.geoPath. Users can pan and zoom the map via d3.zoom, which applies SVG transforms. Countries highlight in maroon on hover, demonstrating basic choropleth-style interaction with projected geographic features.

Cchsaisriharsha@gmail.com
83% match
Loading thumbnail…

Activity8_Task5 Map

This interactive world map visualizes country boundaries using an equirectangular projection. Users can pan and zoom the SVG viewport via D3’s zoom behavior. The map is rendered with `d3.geoPath` and `d3.geoEquirectangular`, using TopoJSON data from the world-atlas package. Countries appear in light green with indigo borders and turn maroon on hover, while the ocean background is sky blue. The code imports D3 v5 modules and the TopoJSON `feature` method to convert the TopoJSON topology into GeoJSON features for rendering.

Ssrikkanth05
82% match
Loading thumbnail…

Activity 8 Task 5-2 Country

This example displays a map of India rendered as an SVG path, centered within a 960-by-500 viewport. It uses D3 version 5 and TopoJSON to load the world-atlas dataset, extract the country’s geometry by name, and project it with a Mercator projection fitted to the country’s bounds. The `d3.geoPath` generator then draws the boundary, with no additional styling or interactive elements.

VVishnu Sudireddy
82% match
Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using D3 v5 and TopoJSON, rendering countries as light-green SVG paths with an indigo stroke against a sky-blue sphere. The map loads geographic data from the world-atlas countries-110m.json dataset and supports zooming and panning through d3.zoom. Hovering over a country changes its fill to maroon via CSS, while d3.geoPath and d3.geoEquirectangular handle the projection and path generation for the GeoJSON features.

Aakshayvenishetty1437
82% match
Loading thumbnail…

Activity_8-Task_5(2)

This example displays a single country, India, as a static SVG map rendered from TopoJSON world data. The code extracts the India geometry from the world-atlas dataset using the topojson-client API, then applies a Mercator projection with d3.geoPath to draw the country’s boundaries. The map is centered and scaled to fit a 960×500 pixel viewport, demonstrating a minimal setup for geographic visualization with D3 v5.

Ssaipaidipalli
81% match
Loading thumbnail…

Activity 8_Task 5

This interactive world map visualization uses a D3.js geo projection to render countries from a TopoJSON dataset. The map is drawn as SVG paths using the `d3.geoEquirectangular` projection and `d3.geoPath`, with pan and zoom enabled through the `d3.zoom` API. Countries appear in light green with indigo borders, and hovering changes their fill to maroon. The background sphere is filled with sky blue, and the map loads geographic boundary data from the world-atlas package.

KKeerthiAnnem
81% match
Loading thumbnail…

Activity 8 Country

This example renders a map of India from TopoJSON data using D3 v5 and the topojson-client library. It extracts the India geometry from the world-atlas countries-50m dataset, applies a Mercator projection with d3.geoMercator, and fits it to a 960 by 500 pixel SVG canvas. The map is drawn as a single path element using d3.geoPath. The code loads D3 from a CDN and does not include interactive features.

UUmarani Vemula
81% match