Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Polished World Map

✓ Published1🌍 Public
NNita
Last edited Jun 3, 2025
Created on Jun 3, 2025

This interactive map plots recent global news events by geographic location, with markers color-coded by news category. The visualization uses a Natural Earth projection with graticule lines and country borders, rendered as SVG paths. Built with D3.js and React, it loads world geography from world-atlas TopoJSON and overlays a CSV dataset of headlines, using the d3.geoPath and d3.geoNaturalEarth1 APIs for projection and the d3.csv parser for data ingestion. Hovering over a marker reveals a tooltip with the headline, summary, location, and date.

AI-generated description

World News Map

An interactive map displaying global news events. Hover over each marker to see details about news stories from around the world.

Features

  • Interactive world map with news events plotted by geographical location
  • Color-coded markers based on news category
  • Tooltip information showing headline, summary, location, and date
  • Legend explaining the category colors

Data

The map uses data from data.csv, which contains news headlines with their summaries, locations, coordinates, categories, and dates.

Implementation

Built using:

  • React
  • D3.js for geographic visualization
  • TopoJSON for world map data
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Polished World Map

An interactive world map rendered with SVG lets users click countries to view population, GDP, and region details from Natural Earth data loaded via TopoJSON. D3 geo projections—including Natural Earth, Orthographic, Mercator, and Albers—and a toggleable graticule are controlled through React state. The map uses `d3.geoPath` for geographic shapes and `projection.fitSize` for scaling, with React managing country selection and UI components.

NNita
87% match
Loading thumbnail…

Fork of Polished World Map

This interactive world map visualizes country boundaries, graticules, and landmasses using a Natural Earth projection. It renders geographic features as SVG paths via `d3.geoPath`, with land filled in teal and interiors stroked in a lighter hue over a gray sphere. The visualization loads a TopoJSON topology from the us-atlas dataset, converting it into features and meshes with the `topojson.feature` and `topojson.mesh` APIs. The React app uses `d3.json` to fetch the data and displays a loading message until available.

VVu Le
85% match
Loading thumbnail…

News world 1

A world map visualization plots news events by latitude and longitude, with color-coded markers distinguishing categories like Conflict/Warfare and Humanitarian Crisis. Clicking a marker opens a detail panel with the headline, summary, and metadata; filters allow narrowing by category or date range. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to render landmasses and graticules from TopoJSON data, plus `zoom` for pan and zoom interactions.

NNita
85% match
Loading thumbnail…

Fork of Fork of Polished World Map

This fork of a polished world map visualizes global country boundaries using data from the World Atlas TopoJSON, rendered with React and d3. The map displays a natural Earth projection with graticules, landmasses filled in teal, and interior borders highlighted. The code uses `d3.geoPath` with the `geoNaturalEarth1` projection to draw shapes, while topojson's `feature` and `mesh` functions prepare the geographic data. The visualization includes a sphere outline, graticule grid, and styled land and interior paths in SVG, with explicit CSS for colors.

Kkarumanchimanasa
85% match
Loading thumbnail…

Fork of Polished World Map

This interactive world map presents a stylized view of global landmasses and country boundaries, sourced from the World Atlas TopoJSON dataset. The visualization renders a natural Earth projection with graticules, using red for land, a light gray sphere, and teal borders for interior country boundaries. Built with React and D3 v5, it demonstrates a polished geographical display, leveraging D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` APIs. The data is processed via TopoJSON's `feature` and `mesh` functions to create the land polygons and interior boundaries.

RRitik Raj
85% match
Loading thumbnail…

Fork of Polished World Map

This interactive SVG world map displays country boundaries, graticules, and interior mesh lines using a Natural Earth projection. The visualization uses React to render D3.js geo paths from World Atlas TopoJSON data, with `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs from D3 v5. The styling applies a teal color scheme to landmasses while keeping the sphere and graticules neutral, creating a polished cartographic aesthetic.

KKostas Tsakaleris
84% match
Loading thumbnail…

Fork of Polished World Map

This world map visualizes country boundaries from the World Atlas Topojson dataset, rendered as an SVG using a React component. The d3.geoNaturalEarth1 projection and d3.geoPath draw the landmasses, graticules, and interior borders, while the sphere outline creates a polished globe effect. Land areas are filled in teal with lighter stroke boundaries, and graticules appear as subtle gray lines. The visualization uses d3.json to load the data and topojson.feature and topojson.mesh to extract the geographic features.

Mmark.horne99@gmail.com
84% match
Loading thumbnail…

Fork of Polished World Map

This visualization presents a natural Earth projection world map with country boundaries, graticules, and city locations. The map uses d3.geoNaturalEarth1 and d3.geoPath to render land masses and interiors from World Atlas TopoJSON data, while circles sized by population via d3.scaleSqrt represent cities from a CSV dataset. Built with React and D3 v5, the SVG rendering applies subtle gray styling to geographical features and semi-transparent teal dots for urban centers.

Ssteelerfan107
84% match