Skip to main content
SimilarExport ZIP
100%

fork of Country Map

✓ Published0🌍 Public
SSurikanti Swathi
Last edited Apr 13, 2023
Created on Apr 12, 2023
Forked from HTML Starter

This fork of the Country Map example visualizes the borders of Chad as a standalone SVG map. It loads world country boundaries from a TopoJSON file via `d3.json`, extracts Chad’s geometry using `topojson.feature`, and fits a `d3.geoMercator` projection with `fitSize` to the 960×500 viewport. A single path element is drawn with `d3.geoPath`, using SVG for rendering. No additional styling or interaction is applied beyond the default black fill and stroke.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Country map using d3.js

This visualization displays a map of African countries with administrative subdivisions, rendered as a static SVG graphic. The map uses a green fill for state regions with black stroke outlines, set against a pink sphere background. The code loads GeoJSON data from a GitHub gist and processes it using topojson’s `feature` API, while d3.geoMercator projection and d3.geoPath generate the geographic paths. The rendering approach relies on SVG path elements appended dynamically via d3’s data join, with styling defined in CSS classes.

Bbhargavarathod
80% match
Loading thumbnail…

Fork of Fork of Fork of Map with D3 geoEquirectangular()

This example displays a world map rendered with the equirectangular projection, showing country boundaries as styled SVG paths. It loads geographic data from the World Atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from TopoJSON. The visualization uses D3 v5’s `geoPath` and `geoEquirectangular` to generate the map, with countries filled in a light beige and outlined with a dark stroke. The code demonstrates basic data fetching, projection setup, and DOM manipulation through D3 selections.

CChawin Sungwalngern
80% match
Loading thumbnail…

Fork of Map with D3 geoOrthographic

This example shows a world map rendered with an orthographic projection, displaying countries as filled paths on a light background. The visualization uses D3 v5 and TopoJSON to load and parse world-atlas geodata, then applies `d3.geoOrthographic` and `d3.geoPath` to project and draw the country boundaries as SVG elements. The map is static, with no interaction or rotation, and the styling is defined in CSS with muted colors for the landmasses.

CChawin Sungwalngern
79% match
Loading thumbnail…

Fork of World Map with D3.js!

This example displays a world map as an SVG graphic, with each country rendered as a green path with black outlines. Hovering over a country changes its fill color to orange, providing basic user feedback. The visualization uses D3 v5 functions such as `select`, `json`, `geoPath`, and `geoEquirectangular` for the projection, while TopoJSON’s `feature` method converts the loaded world-atlas countries-110m.json data into GeoJSON features for rendering.

DDINESH SAI BOPPANA
78% match
Loading thumbnail…

Fork of World Map with D3.js!

This example displays a world map as an SVG graphic, with each country rendered as a green path with black outlines. Hovering over a country changes its fill color to orange, providing basic user feedback. The visualization uses D3 v5 functions such as `select`, `json`, `geoPath`, and `geoEquirectangular` for the projection, while TopoJSON’s `feature` method converts the loaded world-atlas countries-110m.json data into GeoJSON features for rendering.

DDINESH SAI BOPPANA
78% match
Loading thumbnail…

Fork of World Map with D3.js!

This example displays a world map as an SVG graphic, with each country rendered as a green path with black outlines. Hovering over a country changes its fill color to orange, providing basic user feedback. The visualization uses D3 v5 functions such as `select`, `json`, `geoPath`, and `geoEquirectangular` for the projection, while TopoJSON’s `feature` method converts the loaded world-atlas countries-110m.json data into GeoJSON features for rendering.

DDINESH SAI BOPPANA
78% match
Loading thumbnail…

Fork of World Map with D3.js!

This example displays an interactive world map where each country is rendered as a green SVG path with a black stroke. A blue sphere provides the background, and hovering over a country highlights it in orange. Built with D3.js v5 and TopoJSON, it uses `d3.geoPath` with `d3.geoEquirectangular` projection to draw the map from the world-atlas countries-110m.json data source. The SVG rendering is styled via CSS classes, with hover effects defined in the stylesheet.

BBajiSharifPatan@my.unt.edu
78% match
Loading thumbnail…

Fork of World Map with D3.js!

This example renders a static world map using D3.js and TopoJSON. It loads country boundaries from a world-atlas TopoJSON file, converts them to GeoJSON with `feature()`, and draws them as SVG paths with a `geoEquirectangular` projection and `geoPath`. A dark blue sphere background and yellow countries with white strokes are styled via CSS, with a hover effect that highlights each country in bright yellow.

Rradhadevarapu
78% match