how_use_link

100%

✓ Published0🌍 Public

Last edited May 31, 2018

Created on May 31, 2018

This example uses the d3.linkHorizontal generator to draw a single curved path between a source point [100,100] and a target point [300,300] on an SVG canvas. The code constructs a minimal data object with source and target coordinates, passes it to the generator, and assigns the resulting path data to an SVG path element with a thick gray stroke. The d3.v4 library is loaded from a CDN, and the visualization demonstrates the basic link generator syntax without relying on a tree layout or external dataset.

AI-generated description

The d3.tree layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Radial orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.’s linear-time variant of the Reingold-Tilford algorithm. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Compare to this radial layout.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4339184'>Tidy Tree</a>

forked from <a href='http://bl.ocks.org/eastom/'>eastom</a>'s block: <a href='http://bl.ocks.org/eastom/2d9275f0bc0af1c044fec902c3cec436'>Tidy Tree</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example draws a single horizontal curved path on an SVG canvas using D3 v5’s `d3.linkHorizontal` generator. The path connects a fixed source point at (20, 10) to a target point at (280, 100), with a dark slate blue stroke and no fill. The code defines data with explicit source and target coordinates, then appends a `<path>` element to an empty `<svg>` selected via `d3.select`. The accompanying files include CSV datasets with clinical system requirements and concept relationships, but the visualization itself only renders the static link and does not use those files.

OOghenemaro Anuyah

84% match

Loading thumbnail…

LinkHorizontalVertical

The example distinguishes d3.linkHorizontal and d3.linkVertical, two D3 v6 shape generators for curved node-link paths. It draws four SVG paths connecting fixed source and target points: two horizontal and two vertical variants, with green and steelblue strokes marking each type. A legend with colored rectangles labels the two generators. The code renders to an SVG canvas using React, with path geometry computed from explicit coordinate objects.

Vvivianaaai@qq.com

81% match

Loading thumbnail…

hello path

This example demonstrates two fundamental D3.js path generators: `d3.line` and `d3.arc`. A black polyline connects four data points, with commented-out curve options like `d3.curveCardinal` and `d3.curveBasis` showing alternative interpolation methods. Beside it, three arc segments rendered via `d3.arc` form a partial donut chart with varying inner radii, fill colors, and a pad angle, all drawn as SVG paths on a 1600x800 canvas.

Vvivianaaai@qq.com

73% match

Loading thumbnail…

path with d3 - 1

A simple SVG line chart demonstrates D3's `d3.line()` path generator. Five coordinate pairs define a polyline rendered as a thick black path across a 960 by 500 canvas. A green circle with a CSS hover animation (class `pulseCircle`) sits at the first data point, scaling from zero to four times its size over two seconds using keyframes. The example shows D3 v7 appending SVG elements and generating path data from an array of points, with the circle's interactive pulse effect driven by vanilla CSS rather than D3 transitions.

NNita

72% match

Loading thumbnail…

D3 Link Example

This example demonstrates how to make an SVG element function as a hyperlink in D3, allowing visual marks to navigate to external pages. It renders a single blue rectangle inside an SVG canvas and wraps it with an anchor element using the `xlink:href` attribute to link to Google. The code appends the SVG and rectangle dynamically using D3's selection and chaining methods, with the D3 library loaded from a CDN. The example highlights standard link behavior, such as opening in the current tab or a new tab with the meta key, though it notes that iframe-based viewers may interfere with such interactions.

CCurran Kelleher

72% match

Loading thumbnail…

path testing

This SVG example demonstrates how D3.js v5 can draw a simple line path from an array of coordinate pairs. A single path element is generated by feeding a two-dimensional array of points into a d3.line function, which formats the coordinates into an SVG path string. The visualization centers the line within a larger SVG canvas using a group transform. The code relies on D3’s selection and append methods to build the graphic, while the line appears as a black stroke with a fixed width against a blank background.

Hhunsingeruk@gmail.com

72% match

Loading thumbnail…

path testing 2

This example demonstrates how to construct SVG paths programmatically using D3.js’s `d3.path` object, including circles and a cubic Bézier curve drawn with explicit control points. The code defines reusable functions like `drawCircle` and `draw` to generate path strings, then appends a static path (`M50,50 C625,700 725,700 750,800`) to an SVG canvas, styling it with a black stroke and no fill. It also initializes a line generator via `d3.line` but does not render it, focusing instead on path string construction and inspection through console output. The visualization uses a fixed dataset of coordinates and renders entirely in SVG with D3 v5.

Hhunsingeruk@gmail.com

71% match

Loading thumbnail…

linecross labels

This example shows how to connect labeled points to a series of evenly spaced endpoints using angled and straight line segments. Colored circles on the left link to larger target circles on the right through two distinct line types, with the bend point shifting between a shared midpoint and a point based on the source x-coordinate depending on the item’s index. The visualization renders three SVG charts side-by-side at different widths, using d3.scaleLinear for vertical positioning and d3-selection-multi’s attrs method to set line and circle properties. The dataset is a hardcoded array of seven objects with x, y, and color values.

PPatrick Wojda

70% match