Mapa světa

100%

✓ Published2🌍 Public

Last edited Aug 12, 2021

Created on Jul 14, 2021

This example displays an interactive world map with countries rendered in light green, shading to red on hover, against a blue ocean sphere. It uses the `d3.geoFahey` projection and `d3.geoPath` to convert TopoJSON country boundaries from the world-atlas dataset into SVG paths. The code loads data via `json`, adds tooltips with country names through `title` elements, and applies hover styling via CSS. The map itself is static, with no zoom or pan behavior implemented.

AI-generated description

Mapy začínají 6:45:00 Pokračuj na interaktivní mapu 7:05:10

MIT Licensed

Similar vizzes

Loading thumbnail…

worldmap

This example displays an interactive world map with countries rendered as individual SVG paths, colored light green with black outlines, and highlighted in red on hover. It uses D3 v5's `geoNaturalEarth1` projection with `geoPath` to draw the map, and a light blue sphere for the oceans. Country boundaries come from the `world-atlas` package's countries-50m GeoJSON data, and the `topojson-client` library converts TopoJSON to GeoJSON for feature extraction. The chart supports zooming via D3's `zoom` event, which updates the SVG group transform in real-time.

Hhxc20060903

87% match

Loading thumbnail…

Map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue ocean background. It uses D3.js version 5 to load geographic data from the World Atlas TopoJSON file and convert it to GeoJSON features. The map is drawn with the `d3.geoPath` and `d3.geoNaturalEarth1` projection, while `topojson.feature` extracts country boundaries from the dataset. The code appends paths for the sphere and each country, applying basic styling from an external CSS file.

Mma-jacobs

87% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered with D3.js, displaying country boundaries colored light green that turn red on hover. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, with zoom support through `d3.zoom`. It loads world-atlas TopoJSON data and a companion TSV file to map country names, appending tooltips with each country’s name. The map is drawn as SVG paths, including a dark blue sphere background.

Ss-janibekova

87% match

Loading thumbnail…

lets make a map!

This example displays an interactive world map with countries rendered in light green and hover effects that change their color to red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file. Pan and zoom functionality is implemented via d3.zoom, and the map is rendered as SVG with a light blue sphere background.

SShane Carey

87% match

Loading thumbnail…

World Map

This example presents an interactive world map rendered as an SVG, showing country boundaries colored in teal that turn red on hover. It uses a React component with `useData` to fetch the world-atlas TopoJSON dataset and convert it to GeoJSON features via `topojson.feature`. The map applies an equal Earth projection using `d3.geoEqualEarth` and draws paths with `d3.geoPath`. A light blue sphere background is included, and hovering a country triggers a console log of its name.

JJakub

87% 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

87% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered as SVG, where each country is colored light green and turns red on hover, with a dark blue sphere backdrop. Built with D3.js v5 and TopoJSON, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from the World Atlas 50m dataset. Zoom and pan are enabled via `d3.zoom`, while country names are loaded from a TSV file and attached as SVG title tooltips.

IIgor Borzunov

86% match

Loading thumbnail…

Let's Make a Map With D3.js !

This example shows an interactive world map rendered with SVG, where each country is colored light green and turns orange on hover, with a dark background and a blue ocean sphere. The map supports pan and zoom through D3’s zoom behavior, which applies a transform to the group containing all country paths. The code uses D3 v5’s `geoNaturalEarth1` projection, `geoPath` for path generation, and `topojson.feature` to convert TopoJSON data from the world-atlas package into GeoJSON. Country names are joined from a separate TSV file, and the hover effect is implemented via CSS styling on the `.country` class.

GGino Dzin

86% match