Fork of world map

100%

Fork of world map

✓ Published0🌍 Public

Last edited Mar 31, 2022

Created on Mar 31, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Fork of World Map

This example displays a natural Earth projection of the world map, with countries rendered as green landmasses on a light blue sphere. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to project and draw geographic features, while `topojson.feature` converts country boundaries from a TopoJSON world-atlas dataset loaded from unpkg. The SVG includes a background sphere path before adding individual country paths, resulting in a clean, stylized global visualization.

KKiran-tech007

92% match

Loading thumbnail…

Fork of World Map

This visualization displays a world map with country boundaries and graticules, rendered as SVG paths. The map uses a natural Earth projection via `geoNaturalEarth1` and `geoPath` from D3 v5, with land areas filled in orange against a black sphere backdrop. It loads geographic data from World Atlas TopoJSON and processes it with `topojson.feature` and `topojson.mesh` to extract land polygons and interior borders between countries, which are stroked in light blue. The React components encapsulate the data-loading hook and mark-rendering logic.

Bbhargavarathod

92% match

Loading thumbnail…

Fork of World Map

This visualization displays a world map using a natural Earth projection, with land masses rendered in a light purple fill on a white spherical background. The example loads GeoJSON data derived from the world-atlas TopoJSON file and uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` for data conversion. A sphere is drawn first to provide the globe’s outline, followed by country paths. The stylesheet defines distinct colors for the sphere, land, and extra strokes, though the latter two are not actively applied in the current code.

MMahendraGullinkala

91% match

Loading thumbnail…

Fork for the world map

This visualization displays a global map with countries rendered in yellow against a purple sphere, using a natural Earth projection. The code employs D3 v5’s `select`, `json`, `geoPath`, and `geoNaturalEarth1` functions, alongside the TopoJSON `feature` API to convert topojson country boundaries into SVG paths. The map data is fetched from a GitHub-hosted worldmap.json file, with each country drawn as a filled path with a black stroke. The static SVG canvas is sized at 1600×1000 pixels.

Rrohinikotha

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

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

91% match

Loading thumbnail…

Fork of World Map

This example displays a world map using a natural Earth projection, with countries rendered as green landmasses against a light blue spherical backdrop. The visualization loads TopoJSON world data from the world-atlas package, converts it to GeoJSON using `topojson.feature`, and draws the paths with `d3.geoPath` and `d3.geoNaturalEarth1`. It also appends a sphere path to frame the projection, all rendered as SVG elements.

SstellaWangg

91% match