Skip to main content
SimilarExport ZIP
100%

Map it

✓ Published1🌍 Public
DDolbyref113
Last edited Mar 4, 2020
Created on Mar 2, 2020

This map visualizes world countries colored by their type, with a legend showing the categorical color scale. Built with d3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to render the TopoJSON world-atlas data, while d3.zoom enables panning and zooming. Hovering a country displays its name and type in a tooltip, and the d3.scaleOrdinal with schemeSpectral assigns colors.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Map It

This visualization uses a natural Earth projection and an ordinal color scale to map countries by their type, with a color legend and zoom interaction. Built with D3 v5, it uses `geoPath`, `geoNaturalEarth1`, `scaleOrdinal`, and `schemeSpectral` to render SVG paths, loading country data from the world-atlas TopoJSON and TSV files. The map colors each country based on its `properties.type`, and hovering highlights the country in red. A color legend shows the scale’s domain, and zoom transforms are applied via `zoom()` events.

DDolbyref113
92% match
Loading thumbnail…

Map with D3.js

This map visualization displays world countries on a natural Earth projection using D3.js and TopoJSON data from the world-atlas dataset. It renders an SVG sphere background and country paths filled with teal, which turn red on hover through CSS. The code employs D3 v6 features like `geoNaturalEarth1` and `geoPath` to project geographic coordinates, while `topojson.feature` extracts country boundaries from the loaded TopoJSON file. A tooltip showing each country’s name appears via appended `title` elements.

WWayne716
87% match
Loading thumbnail…

D3.js Map

This map visualization displays world countries on a natural Earth projection, allowing users to click individual countries to toggle their fill between light green and red. Built with D3.js v5 and TopoJSON, it loads geographic data from the world-atlas package and country names from a TSV file. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for rendering, with d3.zoom enabling pan and zoom interactions on the SVG canvas.

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

MAP

A map of world countries renders as SVG paths, with each country colored white and outlined in dark grey, while oceans appear light blue. Hovering a country turns it light blue. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and country boundaries from the world-atlas TopoJSON dataset, with `topojson.feature` converting the raw data into features. Zooming is enabled via D3’s `zoom` behavior, which applies transforms to the map group.

Ccocktaildata
86% 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
85% match
Loading thumbnail…

d3 Visualization Map

This example displays a zoomable world map using a natural Earth projection, with countries colored light green and the ocean rendered as a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset (50m.json) and names from 50m.tsv. The map supports interactive pan and zoom via d3.zoom, while d3.geoPath and geoNaturalEarth1 handle geographic rendering. Countries highlight red on hover, with tooltips showing country names. The visualization is rendered as SVG, with the sphere and country paths generated from the projected GeoJSON features.

JJohnPaulPagelerJr
85% match
Loading thumbnail…

World Map

This example presents a choropleth world map visualizing countries colored by income group, with data sourced from World Atlas TopoJSON and TSV files. It uses D3 v5 with a geoNaturalEarth1 projection and d3.geoPath to render countries, while a color legend explains the ordinal color scale. The map supports zooming via d3.zoom, and hovering highlights countries in green. Animated transitions update the legend circles when the scale changes.

HHemanthh81
85% match