linked-hover

100%

✓ Published0🌍 Public

Last edited Aug 22, 2016

Created on Aug 19, 2014

Linked-hover displays two line charts drawn side by side from randomly generated data, each with 100 points. Hovering over a circle in either chart emphasizes the corresponding point in both charts by enlarging it and adding a blue stroke, while also updating the URL hash to reflect the selected index. The visualization uses D3.js v3 for SVG rendering and axes, with lodash helpers for data manipulation. The linked selection is driven by mouseover events and a shared setHover function that applies transitions to all circles, ensuring synchronized highlighting across charts.

AI-generated description

Similar vizzes

Loading thumbnail…

Hovering Line Chart

Two hovering line charts are displayed in an SVG. The first line is red, and the second is green. When the mouse hovers over the first line, its stroke color changes to light gray. When hovering over the second line, its color shifts, and the cursor changes to a grab icon. The code uses CSS `:hover` pseudo-classes to alter the `stroke` property and cursor style of the SVG `path` elements. The paths are defined using SVG path data, with no data source specified.

WWRCIECH

79% match

Loading thumbnail…

d3.js line chart with multiple lines and points

This example shows two multi-series line charts overlaid in a single SVG, with each line distinguished by its own path and circular data points. It demonstrates how to map linear scales to x- and y-axes, render gridlines and tick labels, and add interactive hover effects that enlarge points on mouseover. The code uses D3.js v3 APIs including `d3.svg.line()`, `d3.scale.linear()`, and selection methods like `append`, `attr`, and `on`. The data is a hardcoded array of two numeric arrays, with axes and points generated programmatically from the same scales.

CCaged

74% match

Loading thumbnail…

linked-hover-phyllotaxis

A grid of small multiple canvases displays phyllotaxis spirals at different angular offsets, each built from 600 points rendered as 2-pixel rectangles. Hovering over any canvas triggers a mouse-distance scan to find the nearest point index, then a magenta SVG circle in every panel translates to that same index. The linked hover reveals how the spiral’s geometry shifts across offsets, Svelte manages state, and the data is generated procedurally via a phyllotaxis formula.

11wheel

74% match

Loading thumbnail…

mouse-over event on line path

A step-before line chart plots randomized x/y data, and a semi-transparent circle tracks the mouse position along the path during hover, using D3’s SVG path `getPointAtLength` and `getTotalLength` to interpolate the nearest point. The chart includes randomized axes, draggable circles, and a click animation that spawns and removes expanding rings. Data is generated with `Math.random()` and rendered with D3 3.5.5, using SVG elements and CSS transitions for visual feedback.

LLuisSevillano

74% match

Loading thumbnail…

Multi-links in tooltips using v5

This example shows a line chart of stock closing prices over time, where each data point is a circle with a tooltip. Hovering over a circle reveals a hyperlink to a related d3.js example, along with the formatted date and price. The visualization uses d3.v5’s `d3.csv`, `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. Circles are drawn with SVG, and tooltips are HTML divs that appear on `mouseover`, linking out to external URLs stored in the CSV data.

Dd3noob

73% match

Loading thumbnail…

MouseOverMyColorIS

Twenty semi-transparent circles scatter randomly across an SVG canvas, each filled with a distinct color from D3’s `d3.scale.category20` palette. Hovering over any circle triggers a native browser tooltip via an appended SVG `<title>` element, displaying that circle’s specific color name. The example uses D3’s data join to bind randomly generated coordinates and radii, then appends circles and their tooltips. It demonstrates adding interactive title elements directly within D3 selections, with no additional libraries beyond the core `d3.js` script.

BBAvlino

73% match

Loading thumbnail…

Linked Brushing between two charts

This example demonstrates linked brushing between a bar chart and a scatter plot, both visualizing the same dataset. Hovering over a bar or circle highlights the corresponding country’s marks in both charts in pink, while all other marks remain grey, enabling quick cross-referencing. The bar chart displays column C, while the scatter plot shows columns A and B, with both rendered as SVG elements using D3 v5. The code uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `mouseover`/`mouseout` events to synchronize highlighting across the two charts.

GGerardoFurtado

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

73% match