D3 Imagemap

100%

✓ Published0🌍 Public

Last edited Sep 19, 2024

Created on Mar 26, 2024

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js

This example demonstrates how to build a map using D3.js within a React framework. The code renders an SVG element and selects it using `d3.select`. It retrieves the SVG's height and width attributes to define the map's dimensions. The visualization uses D3.js v5 and shows the basic setup for creating geographic visualizations, with the map itself to be populated using D3's geo tools. The page is styled with CSS.

JJake

77% match

Loading thumbnail…

Responsive svg image map

This interactive SVG image map places two clickable polygons over a background image, alerting the user to the name of each region when clicked. Built with D3 v4, the visualization uses `d3.select` to query the SVG elements and `getBoundingClientRect` to measure the document flow. A `draw` function dynamically calculates a scaling factor to resize the image and polygons proportionally across the full viewport width. The two polygon areas are defined using static coordinate points, and window resize events trigger redrawing.

PPatrick Wojda

75% match

Loading thumbnail…

Map Interaction with D3.js

This example shows an interactive world map with zoom and pan capabilities, where hovering over a country highlights it in red. Built with React and rendered as SVG, it uses D3.js v5 with `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw countries from TopoJSON data. A `d3.zoom` handler transforms the map group on user interactions, while `d3.tsv` loads country names from a World Atlas TSV file to populate tooltips. The map features a steel-blue ocean sphere and light-green landmasses.

NNoor-SC

74% match

Loading thumbnail…

Map with react and d3

This example demonstrates how to integrate D3.js v5 with React to create a simple map visualization. The HTML page loads React and D3 from CDNs, then renders a basic SVG map using D3’s geographic projection and path generation. The React component displays a static message, while the map itself is drawn using D3’s `d3.geoPath` and `d3.geoProjection` APIs, relying on built-in geographic data. The rendering happens client-side, with React managing the DOM container and D3 handling the map’s geometric shapes.

NNaveenaS12

74% match

Loading thumbnail…

A D3 Map, points plotted with canvas instead of SVG

This example shows a zoomable map of Manhattan with tree locations from a CSV file, plotted as red circles. It uses D3 v3 for map tile fetching and projection, while rendering the points onto a Canvas 2D context instead of SVG for performance. The code demonstrates a hybrid approach where D3's `d3.geo.tile` and `d3.geo.mercator` handle geographic transforms, and the canvas context draws arcs at projected coordinates. Zooming and panning trigger redraws, and the mouse position is displayed with latitude/longitude.

SShweta-tech

74% match

Loading thumbnail…

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title

This example demonstrates an interactive rectangle that can be resized and repositioned within a fixed map area using mouse or touch gestures. Dragging the corner handles adjusts the rectangle’s width and height while enforcing minimum size constraints, and dragging the rectangle’s interior moves it without exceeding the map boundaries. The visualization uses the D3.js library’s zoom and drag behaviors, with SVG elements for rendering and a custom zoom constraint function to keep the rectangle within the coordinate space. Numeric inputs for x, y, width, and height update live as the rectangle changes, reflecting the current state of the data.

HHerst

74% match

Loading thumbnail…

Interaction with React

This example demonstrates a real-time interactive visualization where a circular SVG element follows the mouse cursor across a 960x500 canvas. Built with React 17 and D3 v7, the application uses React’s `useState` and `useCallback` hooks to track mouse coordinates through an `onMouseMove` event handler on the `<svg>` element. As the pointer moves, React re-renders the circle’s `cx` and `cy` attributes, updating its position instantly. The visualization highlights how React manages state-driven updates for DOM elements, contrasting with D3’s imperative approach to data binding.

Nnicholasgonzalez1

73% match

Loading thumbnail…

d3.js selection frame example

This example demonstrates interactive rubber-band selection in an SVG canvas using D3.js v3. It shows how users can drag to draw a rectangular selection frame over a set of labeled circles, with the selection rectangle dynamically resizing to accommodate drags in any direction. The code uses D3’s `mousedown`, `mousemove`, and `mouseup` events on the SVG element, appending a `rect` with the `.selection` class and updating its position and dimensions via `d3.mouse`. The circles, defined in a static JavaScript array, highlight on mouseover and clear the selection on release.

JJosephSKh

73% match