Skip to main content
SimilarExport ZIP
100%

Interactive Map.js!

✓ Published0🌍 Public
JJasonYeong0821
Last edited Dec 3, 2020
Created on Dec 3, 2020

This interactive map displays world countries colored in blue, with hover highlighting in orange and a tooltip revealing happiness rank, happiness score, suicide mortality rate, and universal healthcare status from a 2016 happiness dataset. The visualization merges TopoJSON country boundaries with JSON happiness data using d3.json, d3.tsv, d3.geoPath, and d3.geoMercator projections, rendered as SVG paths. Zooming is supported through d3.zoom, and the map is drawn on a light gray sphere background. Countries without matching data show "Unknown" values in the tooltip.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Map.js!

This interactive map displays global happiness and suicide mortality data, with each country colored blue and highlighted orange on hover. A tooltip reveals the country’s happiness rank, score, suicide mortality rate, and universal healthcare status when available, or states these as unknown otherwise. The visualization uses D3 v5 with `d3.geoMercator` and `d3.geoPath` to render SVG paths from TopoJSON world-atlas data, while `d3.zoom` enables panning and zooming. Happiness and suicide statistics come from a hosted JSON dataset, and hover text is implemented via SVG `<title>` elements.

Aargonaeut
94% match
Loading thumbnail…

Interactive map with D3.js

This interactive map visualizes world countries using a natural Earth projection, with hover highlighting and zoom-and-pan navigation. The D3.js code loads GeoJSON country boundaries from a TopoJSON dataset via `d3.json` and `topojson.feature`, then renders them as SVG paths with `d3.geoPath`. A blue sphere path represents the globe’s outline. The `d3.zoom` API enables user interaction by applying transform events to the SVG group, while CSS `:hover` styles change country fills to red.

MMartin Christensen
82% match
Loading thumbnail…

index1.js

This interactive map visualizes the world's countries as colored regions on a blue sphere, using a geographic projection to create a global view. The visualization relies on D3.js version 5 and the topojson library to fetch and process GeoJSON data from the world-atlas package, which provides country boundaries. The SVG rendering applies a light green fill to each country with a semi-transparent black stroke, while the sphere itself is filled with dark blue, achieved through the `d3.geoPath` projection generator and the `feature` API.

AAlexTapiaM
81% match
Loading thumbnail…

Test

This example visualizes survey data on happiness and organizational participation across countries, with each country represented as a colored region on a world map. The visualization shows how varying levels of happiness ("very" or "quite") correlate with activity in different organizations (art, environment, unions, politics, etc.), though it currently only loads and logs the data without rendering the map. The code uses d3.csv to parse the dataset and converts all numeric strings to numbers, while the SVG map is prepared with dark blue sphere and light green country paths that turn red on hover. The implementation relies on d3.v5, React, and TopoJSON (loaded but unused in this snippet).

OOhayouKaminari
81% match
Loading thumbnail…

Interactive World Map

This interactive world map displays country boundaries colored in green on a blue sphere, with hover states turning countries orange. The visualization uses D3 v5 and TopoJSON to load world atlas data from unpkg, combining geographic TSV metadata with 50m JSON topology. It renders through an SVG path generator with a natural Earth projection, while d3.zoom enables pan-and-zoom interaction. Country names appear as tooltips via appended title elements, and the map resizes to fill the browser viewport.

OOskar Weinfurtner
81% match
Loading thumbnail…

Untitled

This example displays a choropleth world map colored by the reported happiness score from a CSV dataset covering over 80 countries. The visualization loads world topography via TopoJSON, joins it with the tabular data, and maps each country’s score to a sequential blue color scale using `d3.scaleSequential` and `d3.interpolateBlues`. It renders the geographic boundaries as SVG paths through `d3.geoPath` with a Mercator projection. The underlying libraries are D3 v6 and the world-atlas TopoJSON collection.

NNikithakatta30
80% match
Loading thumbnail…

Final project

This interactive visualization explores global happiness data from 2015–2023, allowing users to switch between a choropleth map, leaderboard, line chart, and correlation matrix. The map colors countries by selected factors using d3.scaleSequential with interpolateYlGnBu, while the line chart compares individual country trends against the global average. The visualization uses d3-geo projections, d3-scale-chromatic, and SVG rendering, with support for zooming, tooltips, and animated year sliders.

Yyihsuan
80% match
Loading thumbnail…

Map Interaction Assignment Final

This interactive world map visualizes countries colored in light green against a blue sphere, with hover effects that turn countries yellow and reveal a tooltip containing the country name, continent, and economic status. Built with D3 v5 and the topojson library, it uses `d3.geoPath` with an equirectangular projection to render geographic features from the World Atlas 50m dataset, while supporting zoom and pan interactions through `d3.zoom`. Country metadata, including economy and continent classifications, is loaded from the accompanying TSV file and linked to the geometric data by ISO country codes.

MMukund Khandelwal
80% match