Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published0🌍 Public
Hhtt102
Last edited Jan 8, 2020
Created on Oct 22, 2019
Forked from Hello VizHub

This example displays an interactive world map using a Natural Earth dataset loaded with `d3.json` and `d3.tsv` from the world-atlas package. It renders country boundaries with `d3.geoPath` and `d3.geoEquirectangular`, with zooming enabled via `d3.zoom`. Clicking on the map adds circles at projected coordinates using `d3.scaleLinear` axes, and hovering over a circle shows its x/y values as SVG text. The visualization combines map navigation with scatter-plot annotations in a single svg canvas.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example shows a map of the world’s countries drawn as a blue sphere with light green landmasses and subtle black borders. It uses D3.js’s `geoNaturalEarth1` projection and `geoPath` to render the globe, with country boundaries from the world-atlas TopoJSON dataset. The page loads topographic data via `topojson.feature`, appends a path for the sphere, then binds country features to SVG paths. The visualization demonstrates the minimal structure of a Vizhub project with D3 v5 and SVG rendering.

Hhugomell
86% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays an interactive world map using a natural Earth projection, with countries rendered as green SVG paths that turn red on hover. The map supports zooming and panning through a D3 zoom behavior applied to the SVG group. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and topojson.feature to parse geographic data from the world-atlas dataset. A semi-transparent blue sphere outlines the globe, while country names appear as tooltips via appended title elements.

Ffbudwill
85% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js, displaying country boundaries as SVG paths colored light green, with a blue sphere background. The map supports zooming and panning through a d3.zoom behavior, and hovering over a country turns it red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for generating paths from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file and displayed as tooltips via SVG `<title>` elements.

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

Let's make a map with D3.js!

This example shows an interactive world map built with D3 v5, displaying country boundaries and names loaded from the World Atlas TopoJSON and TSV datasets. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and renders countries as SVG paths generated with `d3.geoPath`. Hovering highlights a country in red, and a zoom behavior implemented with `d3.zoom` allows pan and zoom. A light blue sphere background and green country fills demonstrate basic choropleth styling.

BBrett
84% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using D3.js, rendering countries as interactive SVG paths with hover effects that turn them red. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw the globe and country boundaries from TopoJSON data loaded from the World Atlas. A `d3.zoom` behavior enables pan and zoom, while country names are joined from TSV data using `Promise.all`. The map is styled with CSS classes, featuring a blue sphere and light green countries.

Rrcumani
84% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create an interactive world map using D3.js v5 and TopoJSON. It renders a natural Earth projection with country boundaries, showing country names as hover tooltips and enabling zoom and pan through d3.zoom. The visualization loads geographic data from the world-atlas package, combining TopoJSON geometry with TSV metadata for country names. The map uses an SVG rendering approach, with countries styled as light green polygons that darken on hover, all implemented through d3.geoNaturalEarth1, d3.geoPath, and d3.json.

Dddperdue
83% match
Loading thumbnail…

Map interaction with D3.js!

This example demonstrates an interactive world map built with D3.js v5, allowing users to pan and zoom via the `d3.zoom` API. It renders country boundaries as SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection, applied to TopoJSON data from the world-atlas package. Country names are matched from a TSV file and displayed as tooltips via SVG `<title>` elements. Hovering changes the fill color through CSS, while the sphere background is styled as dark blue.

Aaxliao
83% match