Skip to main content
SimilarExport ZIP
100%

World map

✓ Published2🌍 Public
NNita
Last edited Feb 23, 2025
Created on Feb 23, 2025

This interactive world map visualizes average annual temperatures by country, with each nation colored on a blue-to-red sequential scale. Hovering over any country reveals a tooltip with its name and exact temperature. The visualization uses d3.geoPath with a Mercator projection to render TopoJSON data from world-atlas, supports zooming via d3.zoom, and includes a gradient legend built with d3.scaleSequential and an SVG linearGradient.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 8 Task1

The visualization displays average annual temperatures by country on a world map, with a blue-to-red sequential color scale representing cold to hot climates. Unmapped countries appear gray. The map uses D3 v7 and TopoJSON to render geographic features via `d3.geoPath` with a natural Earth projection. A hardcoded dataset supplies temperature values for twelve countries, while hover tooltips reveal exact temperatures. The SVG includes a gradient legend with an axis, showing the temperature scale from -10°C to 30°C.

GGorantla Sravani
82% match
Loading thumbnail…

ice 8 Task 1

This example shows a global choropleth map of average annual temperatures by country, with selected nations colored from blue (cold) to red (hot) and unlisted countries in gray. It uses d3.json to load TopoJSON world boundaries via topojson.feature, then d3.geoPath with a geoNaturalEarth1 projection to render SVG paths. A d3.scaleSequential with d3.interpolateRdYlBu encodes temperature values, while a linear-gradient legend and browser tooltip titles provide context from a hardcoded dataset.

GGorantla Sravani
82% match
Loading thumbnail…

World Map

This world map uses a natural Earth projection to display country boundaries, with a dark blue ocean sphere and light green landmasses. Hovering over a country turns it red and reveals its name via a tooltip. The visualization supports zooming and panning through d3.zoom, with geographic paths rendered using d3.geoPath. It loads world country geometries from TopoJSON and country names from a TSV file, both sourced from the world-atlas package.

Ggabcoderboi
81% match
Loading thumbnail…

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp
80% match
Loading thumbnail…

World map

This interactive world map displays country boundaries using a natural Earth projection, with hover tooltips showing country names and zoom/pan controls for exploration. It loads geographic data from the world-atlas TopoJSON and TSV files, then renders countries with D3’s `geoPath` and `geoNaturalEarth1`. The visualization uses `d3.zoom` for interaction and `topojson.feature` to convert TopoJSON geometry, with hover effects styled via CSS.

NNikhil Prakash
80% match
Loading thumbnail…

World Map Visualization

This world map visualization displays all countries in an equirectangular projection, with each nation filled by a distinct color from a categorical scale and labeled with its name at its centroid. Built with D3 v5 and TopoJSON, it loads world-atlas data (countries-110m.json) and uses d3.geoPath with geoEquirectangular projection to render SVG paths. Countries brighten to yellow on mouseover and revert to their original color on mouseout, while a lightsteelblue sphere behind the landmasses provides geographic context.

Ssreeramyamini@gmail.com
80% match
Loading thumbnail…

World Map

This visualization displays temperature data over time as a line chart with circular markers for each data point. The x-axis uses a time scale (d3.scaleTime) with day-of-week tick labels, while the y-axis uses a linear scale (d3.scaleLinear). Built with React and D3 v5, it renders SVG elements, with the line path created using d3.line() with curveNatural smoothing. Data is fetched via d3.json from a world-atlas TopoJSON file (though the chart plots temperature readings, not map features). Hovering over circles shows tooltips formatted with d3.timeFormat.

AAlex Gomes
80% match
Loading thumbnail…

World Map

This interactive world map displays country boundaries using a geoNaturalEarth1 projection. Users can zoom and pan the visualization via d3.zoom, which applies transform updates to the SVG group containing all geographic paths. The map renders country shapes with d3.geoPath, colored light blue with hover effects. Topojson feature extraction processes the world-atlas 50m.json dataset, while country names from the accompanying 50m.tsv file appear as title tooltips on each path.

Yyamunayennem
80% match