Skip to main content
SimilarExport ZIP
100%

Country Map

✓ Published0🌍 Public
Rreddyakshitha
Last edited Apr 4, 2022
Created on Apr 2, 2022
Forked from World Map

This example displays a black silhouette of India on a blank SVG canvas, derived from world map data. It uses D3 v5 methods `d3.json`, `d3.geoPath`, and `d3.geoNaturalEarth1` to load and project the geographic coordinates. The code fetches the world-atlas TopoJSON file, converts it to GeoJSON with `topojson.feature`, filters for the country named "India," and renders the resulting path. The projection is translated and scaled to focus on the country’s extent.

AI-generated description

country map

MIT Licensed

Similar vizzes

Loading thumbnail…

Country Map

This example displays a map of India, rendered as a single SVG path. It loads country boundary data from the world-atlas TopoJSON collection and filters for India. The code uses `d3.json` to fetch the data, `topojson.feature` to extract the geometry, and a `d3.geoMercator` projection with `d3.geoPath` to draw the landmass. The resulting path is appended to an SVG canvas sized at 960 by 500 pixels.

HHarshiiiiiiiip
91% match
Loading thumbnail…

Country

This example displays a map of India rendered in red on a blank SVG canvas. Using the D3.js v4 library, it loads GeoJSON country data, filters the features to isolate India, and projects it with `d3.geoMercator` and `d3.geoPath`. The map is centered using specific latitude and longitude coordinates and scaled to fit an 840x500 pixel SVG, with data sourced from a GitHub gist.

MManoj Kolluri
87% match
Loading thumbnail…

Country Map

This example displays a choropleth map of India rendered as an SVG, with each state filled using a categorical color scale. The visualization uses D3’s `geoMercator` projection, `geoPath`, and `scaleOrdinal` to draw the country’s boundaries from a TopoJSON file hosted on GitHub. Title text appears above the map, and hovering over any state highlights it in red via CSS. The code relies on the D3 v5, TopoJSON, and d3-geo-projection libraries.

Vvaddepallinaveen
86% match
Loading thumbnail…

Activity 8 Country

This example displays a single-country map of India projected with the Mercator projection. It fetches world country boundaries from the world-atlas TopoJSON data, extracts the India feature, and renders it as an SVG path using D3's geoProjection and geoPath APIs. The visualization demonstrates loading D3 v5 and topojson-client from CDNs, and fitting the map to a 960 by 500 pixel canvas.

UUVarshaReddy
86% match
Loading thumbnail…

Activity 8 Country

This example displays a map of India rendered as an SVG path, centered and scaled using a Mercator projection. The code loads world country boundaries from the World Atlas TopoJSON dataset via `d3.json`, extracts India’s geometry with `topojson.feature`, and fits it to a 960×500 viewport using `d3.geoMercator().fitSize`. A single path drawn with `d3.geoPath` visualizes the country’s outline. The visualization demonstrates loading external JSON, filtering TopoJSON features, and projecting geographic data entirely with D3 v5.

Mmn0658
85% match
Loading thumbnail…

Activity 8 Country

This example displays a map of India rendered as an SVG path, centered using a Mercator projection fitted to the country’s boundaries. It loads world country geometries from the world-atlas TopoJSON dataset, filters for India, and draws the shape with d3.geoPath. The code demonstrates importing D3 v5 via a CDN script tag and using topojson-client to extract features.

Aaniteshterala2000
85% match
Loading thumbnail…

India Map Country

This example displays a map of India with its state boundaries, rendered as an SVG using D3.js. Each state is drawn as a sky-blue path with black strokes and labeled with its name. The visualization uses `d3.geoMercator()` projection with `projection.fitExtent()` to fit the map to the viewport, and state boundaries are converted from TopoJSON data using `topojson.feature`. Hovering over a state highlights it in orange via CSS, while state names are placed at path centroids with `d3.geoPath()`.

Nnsatyaprakash22
85% 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
85% match