Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
HHazki
Last edited Jan 27, 2020
Created on Jan 27, 2020
Forked from 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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a single circle rendered within an SVG container that tracks the mouse position, though the circle itself remains fixed at its initial coordinates. Built with React and D3 v7, the application uses React’s `useState` to store the mouse position and `useCallback` to capture mouse movement events on the SVG element. The code imports React and ReactDOM to manage the component lifecycle, while the SVG’s `onMouseMove` handler logs the cursor’s client coordinates to the console. The visualization highlights basic React state management and event handling within a D3-powered SVG canvas.

VVictor Abrokwah
78% match
Loading thumbnail…

Simple Crosshair Example

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.

CColinEberhardt
78% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a mouse follower visualization where a circle tracks the cursor’s position across an SVG canvas. The React app uses the `useState` hook to store mouse coordinates, updating them on every `onMouseMove` event. The circle radius is fixed at 50, and it renders via ReactDOM into an HTML root element. The visualization highlights real-time interaction, with the SVG’s width and height set to 960 by 500 pixels. It relies on React 18.2.0 and ReactDOM for rendering, showing how state management and event handling create a responsive graphical effect.

Rrahul887393@gmail.com
77% match
Loading thumbnail…

Hello HTML

A simple interactive SVG circle follows the mouse pointer across a 960-by-500 blank canvas, updating its position in real time. The visualization uses React 17 with the `useState` hook to manage the circle’s coordinates, which are updated on every `mousemove` event on the SVG element. The circle’s center is set via the `cx` and `cy` attributes, while D3 v5 is loaded but not directly used in the rendering logic. The example demonstrates state-driven updates in a React-rendered SVG without any external data source.

CChristian
77% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a circle following the mouse cursor inside an SVG canvas using React’s `useState` hook to track position changes. The visualization updates the circle’s `cx` and `cy` attributes in response to the `onMouseMove` event, rendering with ReactDOM and D3.js v5 as a dependency. The code relies on clientX and clientY coordinates from the event object to reposition the circle dynamically, with the initial state centered at half the SVG’s width and height.

DDavid Adelekan
77% match
Loading thumbnail…

HTML Starter

This example shows a hand-drawn geometric composition rendered as SVG, with pink background and black strokes forming intersecting lines and paths. The code uses raw SVG elements—`line`, `path`, and nested `g` groups—to construct arrow-like shapes and diagonal crosshatching patterns directly in HTML. It relies on SVG’s declarative markup for rendering, with styling applied via a linked CSS file that sets the background color. No JavaScript libraries or data sources are involved; the visualization is purely static and authored manually.

Tthoratvinod
76% match
Loading thumbnail…

HTML Starter

This example shows a hand-drawn geometric composition rendered as SVG, with pink background and black strokes forming intersecting lines and paths. The code uses raw SVG elements—`line`, `path`, and nested `g` groups—to construct arrow-like shapes and diagonal crosshatching patterns directly in HTML. It relies on SVG’s declarative markup for rendering, with styling applied via a linked CSS file that sets the background color. No JavaScript libraries or data sources are involved; the visualization is purely static and authored manually.

Tthoratvinod
76% 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
76% match