Nikita's World Map with D3.js!

100%

Nikita's World Map with D3.js!

✓ Published1🌍 Public

Last edited Apr 3, 2022

Created on Apr 3, 2022

This visualization presents a static world map rendered as an SVG. Countries are drawn in black with white outlines, and hovering over any country turns it yellow. The map uses the D3.js library with a geoEquirectangular projection and a sphere background in navy blue. It loads geographic data from the world-atlas package, processes it with topojson's `feature` method, and draws the paths via `d3.geoPath`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map D3.js!

This example displays an interactive world map using SVG, with countries rendered in green and the ocean as a blue sphere. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the TopoJSON `feature` method. Countries are drawn with `d3.geoPath` and the `geoEquirectangular` projection, and hovering over a country changes its fill to orange via CSS. The map uses D3 v5 for data binding and rendering.

NNikkko1

85% match

Loading thumbnail…

Nikhil ICE 8 WORLD MAP

This visualization presents a world map using the equirectangular projection, rendering countries as green paths on a blue spherical background. It loads geographic data from the `world-atlas` TopoJSON dataset, which is converted to GeoJSON using the `topojson.feature` function. The map is drawn with D3 v5’s `geoPath` and `geoEquirectangular` APIs into an SVG, with static styling applied via CSS classes for the sphere and country outlines.

NNikhilMakkena

82% match

Loading thumbnail…

World Map with D3.js!

This example displays a world map as an SVG, with pink countries outlined in red against a blue spherical backdrop. It uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate paths from TopoJSON data loaded from the world-atlas package. A sphere path is drawn first, followed by country features from the dataset. Hovering over a country changes its fill color, demonstrating basic interactivity within a D3 v5 workflow.

DDINESH SAI BOPPANA

81% match

Loading thumbnail…

World map

This example shows an interactive world map rendered as an SVG, with countries filled in green that turn red on hover against a sky-blue sphere background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features using the `feature` method from TopoJSON. The visualization uses D3’s `geoEquirectangular` projection and `geoPath` to generate country outlines, while `select` and `selectAll` manage the SVG path elements. The map is drawn entirely with D3 v5 and CSS styling for hover effects.

Nnikhilagopi

81% match

Loading thumbnail…

Nikita's USA Country Map

This map of the United States displays all 50 states as a choropleth, with each state rendered as a filled path and colored blue, turning purple on hover. It uses the D3.js `geoPath` function with the `geoAlbersUsaTerritories` projection to draw the land boundaries and state interiors from the US Atlas TopoJSON dataset. The visualization is built in React, with the `useData` hook fetching the geographic data and `useEffect` triggering the TopoJSON transformation into geographic features and mesh lines. The SVG output is styled with CSS to emphasize state borders and provide interactive hover feedback.

Nnikitamakkena

81% match

Loading thumbnail…

World Map with D3.js!

A stylized world map visualizes countries as green regions with black outlines on a blue sphere, using D3.js v5 and TopoJSON. The code loads geospatial data from the world-atlas countries-110m.json file, converts it to GeoJSON features with the topojson `feature` function, and renders it into SVG paths via `d3.geoPath` with a `geoEquirectangular` projection. Hovering a country changes its fill to orange.

Ssainitish1999

81% match

Loading thumbnail…

World Map with D3.js!

This visualization displays a world map with countries rendered as pink shapes outlined in red against a blue spherical background. It uses d3-geoPath with an equirectangular projection to draw geographic features, and topojson's feature method to extract country polygons from the Natural Earth dataset loaded via world-atlas. The sphere background is created by passing a Sphere geometry object to the same path generator. Hovering highlights individual countries by changing their fill color.

DDINESH SAI BOPPANA

81% match

Loading thumbnail…

World Map ICE 8 Sai Nikitha

This example displays a world map using an equirectangular projection, with all countries rendered as grey SVG paths with black borders. It uses the TopoJSON `feature` API to extract country geometries from the world-atlas dataset, and D3 v5’s `geoPath` and `geoEquirectangular` to generate the paths. A white sphere outline represents the Earth’s boundary. Hovering over any country turns it blue via a CSS `:hover` rule, providing an interactive visual response without additional JavaScript.

NNikitha123171

80% match