Skip to main content
SimilarExport ZIP
100%

Interactive Map

✓ Published0🌍 Public
AArnaudBru
Last edited Feb 2, 2018
Created on Feb 2, 2018

This interactive map displays world countries on an equirectangular projection, with hover highlighting and rollover labels showing country names. Users can zoom and pan the map, with limits ensuring the map never leaves the viewport. The visualization uses D3.js v4’s `d3.zoom`, `d3.geoPath`, and `d3.geoEquirectangular` for rendering, while JQuery handles container sizing. Country labels are positioned using `Path.Centroid`, and the map resizes responsively with the window, recalculating zoom and translate extents. Data comes from a geographic GeoJSON source embedded in the SVG rendering.

AI-generated description

D3.js Map with zoom/pan and rollover labels:

  • Uses D3.js(v4) and JQuery
  • Displayed within "map-holder" div to allow easier placement on page.
  • Initial zoom is to show the map as small as possible without leaving whitespace at edges (i.e matching height of div or width of div, whichever is greater zoom)
  • Initial translation is to show centre of map in centre of div
  • ScaleExtent used to ensure map can't be zoomed out to smaller than initial value
  • TranslateExtent used to ensure map can't be moved beyond inside of div
  • Country name labels placed using Path.Centroid (some strange results for countries with remote colonies, e.g France)
  • On resize of window the map SVG is resized, the zoom scaleExtent and translateExtent recalculated and the map zoomed and panned to new initial settings.

forked from <a href='http://bl.ocks.org/andybarefoot/'>andybarefoot</a>'s block: <a href='http://bl.ocks.org/andybarefoot/765c937c8599ef540e1e0b394ca89dc5'>Responsive interactive D3.js map</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Interactive Map

An interactive world map rendered as an SVG using D3.js, with pan and zoom controls. The map displays countries as gray polygons with dark borders, and allows users to click on a country to highlight it and display its label. It uses d3.geoEquirectangular for projection, d3.geoPath for rendering, and the d3.zoom behavior for interactive navigation. The map data comes from a TopoJSON file, and the visualization also responds to window resizing by recalculating zoom limits and centering the view.

CChooo4u
84% 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
83% match
Loading thumbnail…

world Map

This visualization displays an interactive world map using a simple equirectangular projection. Countries are rendered as SVG paths with light green fills and indigo outlines, with hover states that turn them maroon. The map supports pan and zoom interactions. The code uses d3.geoEquirectangular, d3.geoPath, and d3.zoom, loading GeoJSON data from the world-atlas TopoJSON file via topojson.feature.

Mmandadi1999
82% match
Loading thumbnail…

Interactive world map

This interactive world map displays country boundaries with hover highlighting and zoom/pan capabilities. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render SVG paths from TopoJSON data in the world-atlas package. A zoom behavior enables interactive transformations, while country names from a TSV file appear as tooltips via SVG `title` elements. The map fills countries in green and the ocean sphere in blue, with hover states turning countries red.

Eevapavlinek
81% match
Loading thumbnail…

Map

A choropleth-style interactive map displays world country shapes in light gray against a dark background. Hovering over a country highlights it in a darker tone and reveals its name in a label with a blue background, while all labels remain hidden by default. The visualization uses D3 v4 with `d3.geoPath` to render geographic features from GeoJSON data, with CSS classes controlling country fill, stroke, and label visibility. The map fills the entire viewport within a dedicated SVG container.

AArnaudBru
81% match
Loading thumbnail…

Map

A choropleth-style interactive map displays world country shapes in light gray against a dark background. Hovering over a country highlights it in a darker tone and reveals its name in a label with a blue background, while all labels remain hidden by default. The visualization uses D3 v4 with `d3.geoPath` to render geographic features from GeoJSON data, with CSS classes controlling country fill, stroke, and label visibility. The map fills the entire viewport within a dedicated SVG container.

AArnaudBru
81% match
Loading thumbnail…

Interactive maps

This interactive map displays world countries using a natural Earth projection, with hover states that highlight individual nations in red. The visualization loads geographic data from a world-atlas TopoJSON file and renders it as SVG paths, with country names appearing as tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.zoom` for panning and zooming. The map also includes a dark blue sphere background, while CSS styles control the country and hover fill colors.

Ddaanasma
81% match
Loading thumbnail…

Interactive Tricks

This interactive map displays world countries using a natural Earth projection, with hover effects that change country colors to pink and tooltips showing country names. The visualization supports zooming and panning through d3.zoom, applied to the SVG group containing all geographic paths. It uses d3.geoPath with geoNaturalEarth1 projection, loads TopoJSON data from world-atlas, and merges country names from TSV data using reduce. The code leverages D3 v5 selection, JSON, TSV, and zoom APIs, rendering geographic features as SVG paths with CSS styling for interactivity.

Llrakla
81% match