Skip to main content
SimilarExport ZIP
100%

Create major events across different countries today

✓ Published1🌍 Public
NNita
Last edited Feb 23, 2025
Created on Feb 23, 2025
Forked from World map

This visualization combines a world map with a timeline of major political events across different countries. The map uses a Mercator projection to display countries colored by GDP, population, or CO2 emissions with interactive tooltips, while a separate timeline shows events categorized as Political, Policy, or International. Built with D3 v7, the example uses `d3.geoMercator`, `d3.geoPath`, and TopoJSON data from world-atlas, with zoom functionality via `d3.zoom` for the map and scale time axes for the timeline.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Create major events across different countries today

The visualization is a circle-packing chart that displays countries grouped by continent, with circle size representing GDP and color indicating income category. It uses the `d3.pack()` layout algorithm, `d3.hierarchy()` for data structuring, and `d3.schemeCategory10` for color encoding. Interactive tooltips provide details on GDP, population, and CO2 emissions. The code relies on a custom tooltip component and data transforms to organize the hierarchical dataset.

NNita
79% match
Loading thumbnail…

Map

This example uses D3 v5 to visualize global economic data with a natural Earth projection. Countries are filled with colors from a spectral scheme based on their economy category, and hovering highlights each region. The visualization includes a custom color legend with circles and text. Data is loaded from the world-atlas package as TopoJSON and TSV files, which are processed using the `feature` function from topojson and rendered with `d3.geoPath`. The map supports zooming through `d3.zoom` events.

Kklumng
75% match
Loading thumbnail…

Map Tutorial

This visualization presents an interactive world map using a Mercator projection, rendered as SVG paths with animated zooming capabilities. Built with D3 v7 alongside the d3-geo and topojson libraries, the map displays countries from the world-atlas 110m JSON dataset as black-filled paths with whitesmoke borders. When users click a country, the map smoothly transitions and scales to center on that region, using d3.geoPath projections and transition animations with cubic easing. Clicking the same country again resets the view to the full world map.

Llupica.matthew@gmail.com
75% match
Loading thumbnail…

world map

A choropleth map of world countries colored by economy category, with an interactive legend that filters the map when clicking a category. Hovering a country displays its name and value via a tooltip. The visualization uses D3 v5 with d3.geoNaturalEarth1 projection, d3.geoPath for rendering, and d3.zoom for pan and zoom. Data comes from the world-atlas TopoJSON and TSV files, processed with topojson.feature and d3.tsv.

BBajiSharifPatan@my.unt.edu
75% match
Loading thumbnail…

Map with D3.js

This map displays the countries of the world in light green with black outlines, colored red on hover. The map supports zooming and panning through D3’s zoom module and geoMercator projection. It renders country shapes as SVG paths generated with d3.geoPath, using world-atlas data from TopoJSON and TSV files for country names. The code employs d3.select, d3.json, d3.tsv, and the topojson feature function to construct the visualization.

Aanastasiiaplatovskikh
74% match
Loading thumbnail…

Interactive WorldMap

This interactive visualization displays a world map colored by each country’s economy type, using a natural Earth projection. The map supports pan and zoom through `d3.zoom`, with country names and economy values shown as tooltips via SVG `<title>` elements. It loads geographic data from the world-atlas TopoJSON and country names from a TSV file, then maps economy categories to a spectral color scale using `d3.scaleOrdinal`. The code relies on `d3.geoPath` to render countries and a sphere outline, with hover effects changing country fills to red.

KKelsey Xu
74% match
Loading thumbnail…

An interactive D3 map

This interactive D3 map displays a world map with countries colored pink and overlaid with green-bordered circles, visualizing numerical values from a CSV dataset via a color-coded choropleth. Built with React and D3 v5, it loads GeoJSON topology data from the world-atlas package and uses topojson’s feature and mesh functions to render land and country boundaries as SVG paths, while the data CSV is joined by ISO country codes for the visual encoding.

Nnouralkhoury
74% match
Loading thumbnail…

Project

This example displays a world map with countries filled in light green, rendered on a blue spherical backdrop. The map allows panning and zooming through the d3 zoom event, which applies a transform to the map group. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` APIs to project geographical data, and the `topojson.feature` function to convert TopoJSON into GeoJSON features. Country names are loaded from a TSV file from the world-atlas package and displayed as tooltips via SVG `title` elements.

MMukund Khandelwal
74% match