地图的交互

100%

地图的交互

✓ Published0🌍 Public

Last edited Dec 28, 2020

Created on Dec 27, 2020

This visualization displays a world map rendered with D3 v5 using the geoMercator projection and topojson data from the world-atlas package. Country boundaries are drawn as SVG paths, colored green with a red hover effect, and each country includes a title tooltip showing its name from the accompanying TSV file. The map supports interactive zooming and panning through d3.zoom, which applies a transform to the grouped SVG elements. Population data from a local CSV is loaded but not yet visualized, leaving the focus on the geographic interaction.

AI-generated description

A map of d3js. HTML page demonstrating use of CSS and JavaScript

MIT Licensed

Similar vizzes

Loading thumbnail…

world map interaction

This example presents an interactive world map built with D3.js v5, displaying country boundaries and names sourced from the world-atlas TopoJSON dataset. Users can zoom and pan the map using d3.zoom, with the transform applied to a group element. Countries are rendered as SVG paths via d3.geoPath and a natural Earth projection, with tooltips showing country names from the TSV file. Hovering highlights countries in red, while the ocean sphere uses a blue fill.

Ppei9223

87% match

Loading thumbnail…

Map Interaction Assignment

This map displays global country boundaries over a blue sphere, with hover interactions highlighting each nation in red. Panning and zooming are enabled via d3.zoom, which applies transforms to the geographic group. The visualization loads TopoJSON world data from the world-atlas package, converts it to GeoJSON with topojson.feature, and renders paths using d3.geoPath with a d3.geoNaturalEarth1 projection. Hover tooltips appear through appended SVG title elements, which draw country names from the accompanying TSV data file.

MMukund Khandelwal

86% match

Loading thumbnail…

Map Interaction

This example displays an interactive world map rendered with SVG using the d3-geo-projection library, specifically the geoNaturalEarth1 projection. Countries from the world-atlas TopoJSON dataset are drawn as paths with d3.geoPath, each featuring a tooltip showing the country name. The map supports pan and zoom through d3.zoom, which applies a transform to the map group on events. Hovering over a country changes its fill color to red via CSS, while the sphere background uses a distinct blue fill.

WWayne716

86% match

Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Ggilbster

86% match

Loading thumbnail…

Interactive World Map

This interactive world map displays country boundaries colored in green on a blue sphere, with hover states turning countries orange. The visualization uses D3 v5 and TopoJSON to load world atlas data from unpkg, combining geographic TSV metadata with 50m JSON topology. It renders through an SVG path generator with a natural Earth projection, while d3.zoom enables pan-and-zoom interaction. Country names appear as tooltips via appended title elements, and the map resizes to fill the browser viewport.

OOskar Weinfurtner

86% match

Loading thumbnail…

Interactive Map

This interactive map displays country boundaries from the world-atlas TopoJSON dataset, rendered as SVG paths using d3.geoPath and an equirectangular projection. Hovering over a country highlights it in blue via CSS, while d3.zoom enables pan and zoom transforms on the map group. Country names from the accompanying TSV file appear as tooltips through SVG title elements, all loaded asynchronously with d3.json and d3.tsv.

Ccornshoots

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 interaction

This interactive world map displays country boundaries over a blue sphere, with countries highlighted in green and a darker shade on hover. It uses D3’s geoPath and geoNaturalEarth1 projection to render geographic features from a TopoJSON dataset provided by world-atlas. The zoom behavior, implemented via the d3.zoom API, adjusts the SVG group’s transform during navigation. The visualization renders as SVG within an HTML page, and the code relies on the topojson library’s feature function to extract country polygons.

EEmma

85% match