100%

News world 1

✓ Published0🌍 Public

Last edited Jun 3, 2025

Created on Jun 3, 2025

Forked from Fork of Fork of Fork of Polished World Map

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.

AI-generated description

Global News Tracker

An interactive visualization of global news events using React and D3.js.

Features

Interactive world map showing news events from around the globe
Color-coded news markers by category (Conflict/Warfare, Humanitarian Crisis, etc.)
News detail popups on hover
Filter news by category and date range
Responsive design that works on desktop and tablets

Getting Started

Clone the repository
Install dependencies: npm install
Start the development server: npm start

Data Structure

News events are loaded from data.csv with the following structure:

headline: Title of the news item
summary: Brief description of the news
location_name: Name of the location
latitude: Geographic latitude coordinate
longitude: Geographic longitude coordinate
category: News category (Conflict/Warfare, Humanitarian Crisis, etc.)
date: Publication date in YYYY-MM-DD format

Technologies Used

React for UI components
D3.js for geographic visualization
TopoJSON for map data

License

MIT

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Polished World Map

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.

NNita

85% match

Loading thumbnail…

world map

A world map visualization displays global landmasses and country boundaries using a natural Earth projection rendered as SVG. The map shows land areas in teal, country interior borders in a lighter stroke, and background graticule lines. Built with React and D3 v5, the code uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to generate the projection and paths. TopoJSON data from the World Atlas dataset provides the land and country mesh features, which are processed through the `feature` and `mesh` APIs.

AAnkit5ingh

79% match

Loading thumbnail…

World Map

This visualization presents a world map using D3's geoNaturalEarth1 projection, rendering landmasses in teal with country borders highlighted and graticules overlaid on a light gray sphere. The data comes from the World Atlas TopoJSON dataset (countries-50m.json), processed with topojson’s feature and mesh functions. React manages the SVG output, while D3’s geoPath and geoGraticule construct the geometric paths. The map emphasizes clean, minimalist styling with muted colors, illustrating global geography through a responsive, interactive-free interface.

AAudrey

79% match

Loading thumbnail…

World Map

A world map visualization displays country borders and landmasses using a Natural Earth projection. The map renders land areas in teal, interior borders in a lighter stroke, and includes graticules and a sphere outline for geographic context. Built with React and D3 v5, it uses `d3.geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project shapes, while TopoJSON processes the world-atlas dataset to extract land features and country boundaries. The SVG output updates asynchronously after loading the geographic data.

Cchamce

79% match

Loading thumbnail…

world map

This visualization displays a world map using a natural Earth projection, with landmasses, country borders, graticules, and a sphere outline rendered in muted colors. The map is built with React and D3, using `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw geographic features. Country and land data come from the World Atlas TopoJSON file, processed with `feature` and `mesh` from TopoJSON. The SVG output is generated declaratively through React components, with each map element styled via CSS classes.

AAnthony Zornig

79% match

Loading thumbnail…

World Map

This interactive world map visualizes global landmasses and country borders using a natural Earth projection. The visualization renders a sphere, graticule grid, land areas in teal, and interior boundaries in a lighter teal stroke. Built with React and D3 v5, it uses the `geoNaturalEarth1` and `geoPath` APIs to project and draw geographic features, while TopoJSON converts the world-atlas dataset into GeoJSON features and meshes. Styling is applied via CSS classes on SVG path elements.

CCees Klap

79% match

Loading thumbnail…

World Map

This world map visualization displays global landmasses and country boundaries using a natural Earth projection. The map renders land areas in teal, country interiors in a lighter stroke, and graticules as thin gray lines over a light sphere background. Built with React and d3-geo, the visualization uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw features. Geographic data comes from the world-atlas TopoJSON dataset, processed with `topojson.feature` and `topojson.mesh` for land polygons and country borders.

DDanier

78% match

Loading thumbnail…

WORLD MAP

This world map visualization renders global land masses and country boundaries using a Natural Earth projection. The visualization combines D3’s geographic utilities—`geoNaturalEarth1`, `geoPath`, and `geoGraticule`—with React for component-based rendering. TopoJSON data from the World Atlas dataset populates the map, featuring colored land areas, graticule lines, and interior borders. The SVG output includes a filled sphere background with distinct styling for land, graticules, and international boundaries.

Kkakumanusreya

78% match