Skip to main content
SimilarExport ZIP
100%

Fork of worldmap

✓ Published0🌍 Public
Aaruna-rajeswari
Last edited Mar 8, 2023
Created on Mar 8, 2023
Forked from worldmap

This fork of a world map shows country boundaries from the World Atlas TopoJSON dataset, with each country rendered as a light green SVG path that turns red on hover and displays its name in a tooltip. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath to generate the geographic paths, and d3.zoom to enable panning and zooming on the map. Country outlines are stroked in black with low opacity, and the sphere background is filled with a blue color.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of worldmap

This example displays a natural Earth projection world map, with countries filled in light green against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature` method from topojson. The map is rendered as SVG paths, with the projection and path generation handled by `d3.geoNaturalEarth1` and `d3.geoPath`. A separate path outlines the globe’s sphere, while country borders use a subtle black stroke.

Aaruna-rajeswari
90% match
Loading thumbnail…

Fork of World Map

This example uses D3 to render a fork of a world map, displaying country boundaries as light green vector shapes on a white background through an SVG canvas. The visualization applies a Natural Earth projection using `d3.geoNaturalEarth1` and generates the geographic paths with `d3.geoPath`. It loads GeoJSON data from the `world-atlas` package, parses the countries using `topojson`, and draws each feature onto the SVG. The output is a static equirectangular-style map highlighting national borders with subtle black strokes.

NNaimisha-M
90% match
Loading thumbnail…

Fork of world map

This visualization displays a world map using a natural Earth projection, with countries rendered in red against an orange sphere. The map is drawn as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`, with geographic data loaded from a TopoJSON file hosted on GitHub. The code imports `feature` from `topojson` to convert the TopoJSON topology into GeoJSON features, then appends each country path to the SVG. Styling is defined in a separate CSS file, outlining countries with black strokes.

Bbhargavarathod
89% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays world countries colored in light green on a blue sphere, with hover effects turning countries red. It uses D3 v5 and TopoJSON to load and render world geography from the world-atlas dataset. The code combines `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing country boundaries, and `d3.zoom` for interactive panning and zooming. Country names are joined from a TSV file and shown as SVG `<title>` tooltips.

Ggharakhani1986
89% match
Loading thumbnail…

Fork of World Map

This fork of a world map projects countries onto a sphere, showing landmasses in green with black outlines over a light blue ocean. It builds the sphere and countries using D3 v5’s `geoNaturalEarth1` projection and `geoPath`, rendering the result as SVG paths. The data comes from the world-atlas 110m TopoJSON, which is converted to GeoJSON via TopoJSON’s `feature` function before being drawn.

MMahendraGullinkala
89% match
Loading thumbnail…

Fork of World Map

This visualization displays a natural Earth projection of the world map with countries rendered in light green and oceans in sky blue. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data sourced from the world-atlas package at 110m resolution. A sphere outline is drawn first, followed by country features parsed with TopoJSON’s `feature` method. The map is static, with no interactions or animations beyond the initial data join.

Ddineshtadepalli12
89% 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
88% 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
88% match