Skip to main content
šŸŒ Public

Share visualization

Send this visualization to others.

D3 Imagemap

Public visualization

Viewing a saved revision (read-only)

d5403d87592841a3a448dc1c4f6685fb

D3 Imagemap

0 stars1šŸŒ Public
LLiml
Last edited Sep 19, 2024
Created on Mar 26, 2024
Forked from React Starter

This example demonstrates an interactive image-mapping tool built with React and D3 v7, allowing users to draw rectangular regions over a base map image. Users create selections by dragging the mouse on an SVG canvas, then attach URLs to each marked rectangle via a prompt. The interface includes a list of all selections with edit capabilities, where coordinates and dimensions can be modified or items deleted through a dialog. The implementation uses D3's event handling for mouse interactions, SVG `rect` elements with red transparent styling, and DOM manipulation to update the selection list dynamically.

AI-generated description

React Starter code.