Skip to main content
SimilarExport ZIP
100%

Map

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

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
100% match
Loading thumbnail…

Map

This example visualizes world countries as a choropleth-style map, coloring each country green with white borders on a dark blue spherical backdrop. The map renders as SVG using D3.js with a Natural Earth projection via `d3.geoNaturalEarth1`, and country boundaries are generated through `d3.geoPath`. Geographic data loads from the world-atlas TopoJSON file (countries-110m.json), which is converted to GeoJSON using the `feature` function from the topojson library. Hovering a country changes its fill to red, and each country includes a title tooltip displaying its name.

VVlad Bogo
82% match
Loading thumbnail…

Choropleth Map

This choropleth map displays world countries colored in light green against a blue globe, with red highlighting on hover. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features with `d3.geoPath`. Country boundaries and identifiers come from the World Atlas TopoJSON dataset, while country names are joined from a TSV file. Interactive tooltips show each country’s name through appended SVG `<title>` elements, and the map supports zooming via D3’s zoom behavior.

Yylzami40
81% match
Loading thumbnail…

Choropleth Map

A choropleth map displays countries of the world colored in light green, with a blue sphere representing the globe and black borders between nations. The visualization uses `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features from TopoJSON data, while country names come from tab-separated values (TSV) data. Interactive zooming is implemented with `d3.zoom`, converting events to SVG transforms. Hovering over a country changes its fill color to red through CSS `:hover` styles, and tooltips with country names appear via SVG `title` elements.

Yyouer
81% match
Loading thumbnail…

Map.js!

This map visualization displays the world’s countries by using a Mercator projection to render geographic features as filled SVG paths on a light gray sphere background. The code loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with `topojson.feature`, then draws each country using `d3.geoPath`. Styling applies a blue fill with dark strokes and a subtle opacity, while the hidden overflow and full-bleed body create an immersive, full-window presentation.

Aargonaeut
81% match
Loading thumbnail…

Choropleth Map

A choropleth map displays countries with a uniform green fill, turning red on hover while the ocean remains light blue. The visualization uses an orthographic projection, rendering country boundaries as SVG paths via the `geoPath` and `geoOrthographic` functions. It loads world map data from the `world-atlas` package (50m JSON and TSV files) and processes TopoJSON features with the `topojson` library. The `zoom` interaction allows panning and scaling the map through SVG transforms, with country names shown in tooltips.

SSophia Murage
81% match
Loading thumbnail…

Choropleth Map

This choropleth map visualizes world countries using a natural Earth projection, with each country filled in light green and outlined in black. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, using `d3.geoPath` and `geoNaturalEarth1` to project and render country boundaries. Countries are colored by their assigned fill, and hovering over a country turns it red, while a tooltip displays the country name. The map includes a blue sphere background and supports zoom interactions through D3’s zoom behavior.

Yylzami40
81% match
Loading thumbnail…

Interactive Map

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.

AArnaudBru
81% match