Simple Crosshair Example

100%

Simple Crosshair Example

✓ Published0🌍 Public

Last edited May 28, 2019

Created on Mar 27, 2017

A simple interactive crosshair tracks the mouse over a sine wave plotted with d3fc’s `chartCartesian` and `seriesSvgLine`. The crosshair, rendered by `annotationSvgCrosshair`, updates its x and y coordinates, which are displayed in a tooltip `div` positioned in the plot area. Mouse events are captured by the `fc.pointer` component, which supplies the coordinates to the crosshair via a multi-series mapping. The tooltip text is updated through the chart’s `decorate` pattern on enter and update selections.

AI-generated description

This example demonstrates an interactive cross-hair.

The crosshair itself is rendered via the crosshair annotation. Notice that the annotation itself is just a 'renderer', i.e. it does not handle mouse / touch events.
The pointer component is used to add appropriate event handlers to the plot-area. The pointer component takes the mouse events and converts them into an array, which is the format required by the crosshair.
The crosshair location is rendered to a div element that is added to the plot-area by decorating the cartesian chart. By adding the element via the enter selection, we ensure that it is added just once.

mit Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example demonstrates a crosshair annotation that follows pointer movement over an SVG. The visualization uses d3fc's `annotationSvgCrosshair` and `pointer` APIs to track mouse position and render intersecting horizontal and vertical lines at that location. Scales are defined with d3.scaleLinear. The code renders to a 1000x1000 SVG element within an HTML page, with a React framework setup. Each pointer event triggers a re-render, updating the crosshair's datum with the latest cursor coordinates.

HHazki

78% match

Loading thumbnail…

Axes with Hover and labels

This example demonstrates interactive axes with crosshair guides that track the mouse cursor. As the pointer moves over the plot area, dashed lines extend from the cursor to the axes, accompanied by numeric value labels that display the current x and y coordinates. The visualization uses D3's `scaleLinear` for coordinate mapping and `axisBottom`/`axisLeft` for rendering ticks. Crosshair lines and value labels are dynamically joined to the SVG via the D3 `join` operation, updating on every mouse movement event.

MMaarten Snels

74% match

Loading thumbnail…

d3fc in R - crosshair with area

This example, built with d3fc in R via the d3r and rd3fc packages, demonstrates an interactive crosshair overlaid on an area chart. The area series dynamically tracks the crosshair position, highlighting the value under the cursor. The visualization is designed to explore asymmetry between growth and drawdown, with the crosshair-linked area providing immediate visual feedback as users hover across the time series. Implemented with Vue and assembled using Blockbuilder, the example leverages d3.js and d3fc to combine R-generated data with interactive charting.

663anp3ca

73% match

Loading thumbnail…

Axes with Hover

This example displays a scatter plot with labeled axes and a hover interaction. Moving the cursor over the inner rectangle draws black crosshair lines from the pointer to the x- and y-axes, dynamically revealing the mouse coordinates. The visualization uses D3's scaleLinear for mapping data, axisBottom and axisLeft for tick marks, and a ResizeObserver for responsive sizing. Hover events are captured via d3.pointer, updating state to drive the lines. The example is a static 100x100 data range with no external dataset.

CCurran Kelleher

70% match

Loading thumbnail…

Simple D3 tooltip

This example demonstrates a minimal tooltip interaction in D3.js, showing how a simple text label appears and follows the mouse cursor when hovering over a circle. The code uses D3 v5 to append a hidden div as the tooltip and positions it dynamically on mouse events. It employs `mouseover`, `mousemove`, and `mouseout` handlers to control visibility and track the pointer coordinates via `event.pageY` and `event.pageX`. The circle is drawn with an SVG `circle` element, styled with a black stroke and aliceblue fill, inside a 300-by-300-pixel SVG container.

GGerardoFurtado

70% match

Loading thumbnail…

Axes with Hover_drb

This example demonstrates interactive axes with crosshair hover lines. Moving the mouse over the plotting area draws vertical and horizontal black lines that track the cursor position, updating dynamically via D3’s `pointer` event and state management. The visualization uses D3 scales (`scaleLinear`) to map data ranges to pixel coordinates, with axis components built using `axisBottom` and `axisLeft`. A styled inner rectangle defines the plotting region, while axis labels are positioned manually. The code relies on D3.js version 7.9.0 and includes resize observation via `ResizeObserver`.

DDonald Bagwell

70% match

Loading thumbnail…

Mouse Follower Cross hair

A circle and two crosshair lines track the mouse cursor in real time over a fixed-width SVG canvas. The React application captures pointer movement through an `onMouseMove` event handler, updating state that repositions the red dot and the intersecting vertical and horizontal lines. React's `useState` and `useCallback` hooks manage the coordinate updates, while ReactDOM renders the SVG elements directly in the browser.

Sshaji K

69% match

Loading thumbnail…

MouseOver

This example demonstrates interactive mouse events on an SVG scatterplot built with D3 v3. Circles change color to orange and grow in radius on mouseover, then revert on mouseout. Clicking the background converts pixel coordinates to data values using inverted linear scales, adds a new point to the dataset, and appends a new circle. The code uses `d3.scale.linear`, `d3.svg.axis`, and `.on("mouseover")` handlers to manage the visual feedback and dynamic data updates.

BBAvlino

69% match