Skip to main content
SimilarExport ZIP
100%

d3fc in R - crosshair with area

✓ Published0🌍 Public
663anp3ca
Last edited Oct 9, 2018
Created on Oct 9, 2018

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.

AI-generated description

Thanks to anyone and everyone that provided these fine tools.

<hr/>

Toying with ideas for interactivity, I added a d3fc area to track the crosshair. I am trying to think of good ways to demonstrate the asymmetry of growth and drawdown.

forked from <a href='http://bl.ocks.org/timelyportfolio/'>timelyportfolio</a>'s block: <a href='http://bl.ocks.org/timelyportfolio/7a2beb87e561dc92b9d7678aa3d7dd91'>d3fc in R - crosshair with area</a>

mit Licensed

Similar vizzes

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
73% 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
69% match
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
69% match
Loading thumbnail…

Area Chart

This example demonstrates an interactive area chart built with D3.js (v4) that presents two overlaid series with gradient fills, rendered as SVG. The visualization initially displays one dataset, and a button click transitions the chart to a second, extended dataset. The chart's axes and area paths smoothly animate their transitions over two seconds using D3's `.transition()` method. The code defines linear gradients with specified opacity stops for series styling, and uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisRight` for scaling and axes, respectively.

Ssunole896@yahoo.com
67% 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
67% match
Loading thumbnail…

D3 v4 X-Value Mouseover with Droplines

This example shows a line chart of daily closing prices, displaying a crosshair and a tooltip with the precise dollar value as the mouse moves over the plot. The visualization is built with D3 v4, using the `d3.line` generator to create the path and `d3.axisBottom` and `d3.axisLeft` for the axes. A transparent `rect` overlay captures mouse events, and a `d3.bisector` function finds the nearest data point to the cursor’s x-coordinate, triggering the droplines and value label. The data is loaded from a TSV file with a date and close price per row.

MMbrownshoes
67% match
Loading thumbnail…

D3 Area - Multiarea

This example shows a multi-area chart built with D3 v7, displaying a gray band between upper and lower y-values across six x-axis points. The chart uses a linear scale to map input values (0–100) to pixel coordinates, while a d3.area() generator computes the path for the filled region. The data is provided as an inline array of objects with x, y0, and y1 fields, and the result is rendered as a single SVG path element inside a 700×400 viewport.

SSubhendu Karmakar
67% match
Loading thumbnail…

D3 Area Chart

This example displays a stepped area chart of a time series where values rise in distinct plateaus from zero to 80,000, then fall back to zero. The chart uses an SVG path generated by d3.area, with d3.axisBottom and d3.axisLeft for scales, and linear scales for both x and y dimensions. Data is provided as a hardcoded array mapped to x/y points, rendered with yellow fill on a red background. The visualization demonstrates how d3.v7 constructs area shapes from discrete data points.

AAmeer Nuri
67% match