Fork of world map

100%

Fork of world map

✓ Published0🌍 Public

Last edited Apr 3, 2024

Created on Apr 3, 2024

This example renders a natural Earth projection world map using SVG paths. It displays country boundaries with a hover effect that turns each country yellow, while oceans appear as a blue sphere. The visualization loads GeoJSON country data from the world-atlas TopoJSON file and converts it using topojson’s `feature` method, then projects it with `d3.geoNaturalEarth1` and `d3.geoPath`. The code uses D3 v5 selections to append and style the paths, with CSS controlling fill and stroke properties.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of world map

This example displays a world map using a natural Earth projection, with all countries rendered as solid orange SVG paths with black borders against a blue background. The visualization fetches geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the topojson feature method. It relies on D3 v5’s geoPath and geoNaturalEarth1 for projection and path generation, while styling country shapes through CSS classes. The result is a simple, static choropleth-free map emphasizing geographic boundaries without additional interaction or aggregation.

Rreddysushma994@gmail.com

93% match

Loading thumbnail…

Fork of World Map

This example presents a natural Earth projection of the world map, rendered as an SVG with a light blue spherical background and green landmasses outlined in black. It loads world country boundaries from the world-atlas TopoJSON dataset via `d3.json`, converting them to GeoJSON with `topojson.feature`. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and country paths, demonstrating a straightforward choropleth-free geographic rendering workflow.

Aadapavaishnavi12

93% match

Loading thumbnail…

Fork of World Map

This example displays a simple world map rendered with SVG paths. It depicts the Earth’s natural Earth projection with countries filled in blue and outlined in yellow, set against a green sphere. The code uses D3’s `geoNaturalEarth1` projection, `geoPath` for generating the path data, and `topojson.feature` to parse the world-atlas GeoJSON data loaded from a remote URL. The visualization appends each country path to the SVG canvas.

Cchandrakalavanukuri

93% match

Loading thumbnail…

Fork of WorldMap

This fork of a world map shows the Earth’s landmasses and oceans using a natural Earth projection. Built with D3 v5 and topojson, it loads country boundary data from the world-atlas package. The code uses `d3.geoPath` to generate SVG paths for each country, which are filled with a light gray and highlight yellow on hover. The ocean is a separate blue sphere path, and the map is rendered as static SVG within a simple HTML page.

Rreddysushma994@gmail.com

92% 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

92% 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

92% match

Loading thumbnail…

Fork of World Map

This example renders a natural Earth projection world map using D3 v5 and TopoJSON. It displays countries as green landmasses with black strokes against a blue spherical backdrop. The code fetches world boundary data from the world-atlas package, converts TopoJSON to GeoJSON with topojson.feature, and visualizes it using d3.geoNaturalEarth1, d3.geoPath, and SVG paths. A pre-defined sphere path establishes the globe’s outline before country features are appended.

Ppemmasaniprudhvinadh

92% match

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

92% match