Hive Plot (Links)

100%

Hive Plot (Links)

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Mar 17, 2012

This hive plot visualization uses three radial axes to arrange six nodes, with curved links connecting them based on source and target relationships. The D3.js code builds the SVG scene using the `d3.hive.link()` API to generate cubic Bézier curves between axis points, while `d3.scale.ordinal` maps angular positions and `d3.scale.linear` maps radii. Nodes are colored by their axis index via `d3.scale.category10`, and the static example uses hardcoded data arrays.

AI-generated description

See my article on Krzywinski’s Hive Plots. See also area hive plots.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Hive Plot (Areas)

This example demonstrates a hive plot using the d3.hive.link API extension, which positions nodes on multiple radial axes and connects them with curved bezier paths. The visualization shows a synthetic network of 12 links between three axes, with each link colored by its group membership. The code manually defines the link data and uses d3.scale.ordinal for axis angles, d3.scale.linear for radial distances, and d3.scale.category20c for colors. The SVG diagram is drawn with the D3 v3 library, and axes are rendered as concentric lines with fill and stroke styles.

Mmbostock

94% match

Loading thumbnail…

Hive Link Plot

This visualization uses a hive plot to show relationships among eleven nodes, arranged on three radial axes by node type (0, 1, or 2). A D3 tooltip on mouseover reveals each node’s name and type. The layout is generated with `d3.scale.ordinal` and `d3.scale.linear`, while custom curves link nodes using the `d3.hive.link` API. SVG elements (lines, paths, circles) are animated via D3 transitions.

JJverma

92% match

Loading thumbnail…

Hive Link Plot

This visualization uses a hive plot to show visa refusal rates between countries, with seven radial axes representing continents. Each node is a country positioned along its continent’s axis by refusal rate, while curved links connect source and target countries, colored by the source continent. Interactive mouseover highlights a specific link and its connected nodes. The code uses d3.hive.link to generate the curved paths, d3.svg? (d3.scale.ordinal and d3.scale.linear) for positioning, and d3.legend for the color legend, with data loaded from a JSON file.

JJverma

81% match

Loading thumbnail…

hierarchical

This visualization displays a hierarchical dataset of 40 nodes as a radial tree, with the root at the center and branches extending outward in a circular pattern. The red links are generated using d3.linkRadial, while the layout is computed with d3.tree and d3.hierarchy. The SVG rendering supports interactive zooming via d3.zoom, and the data is loaded from a local JSON file.

WWillPCowan

73% match

Loading thumbnail…

Untitled

This radial hierarchy visualization displays nodes as text labels arrayed around a central point, with curved links connecting them based on their import relationships. The code uses `d3.cluster` to position nodes and `d3.radialLine` with a randomized curve bundle beta value to draw the links, rendered as SVG paths. Node sizes from the JSON data are loaded but not visually encoded. Data comes from a static `data.json` file defining the node names, sizes, and import dependencies.

Kkhalilha

73% match

Loading thumbnail…

Untitled

This visualization displays a circular arc diagram of node-link data, with nodes positioned along a horizontal axis and connected by curved paths. Hovering over a node highlights it and its associated links while dimming others and enlarging its label. The code uses D3.js v4 with d3.scaleOrdinal for group colors, d3.scalePoint for x-axis positioning, and d3.scaleLinear for node sizes. It renders as an SVG, loading data from a CSV file and applying a color palette from d3-scale-chromatic.

SSRC199

72% match

Loading thumbnail…

Radial Tree

This radial tree displays hierarchical data as a branching network of nodes and links radiating from a central root. The visualization uses D3 v7’s `d3.hierarchy`, `d3.tree`, and `d3.linkRadial` to compute the layout and draw curved edges, with nodes rendered as SVG circles and labels. Interactive links are added via `xlink:href` attributes. The data comes from a `data.json` file containing tasks, health goals, and awards, arranged in a nested children structure. The SVG output is styled with sans-serif fonts and customizable colors, strokes, and node radii.

WWRCIECH

72% match

Loading thumbnail…

Cluster Dendrogram II

This cluster dendrogram visualizes a hierarchical dataset from a flare.json file, displaying nodes as circles connected by curved links. The layout uses d3.layout.cluster to position nodes, with SVG paths generated using cubic Bézier curves to create distinctive non-intersecting links. Node styling includes white circles with steelblue strokes and text labels, while the entire chart renders at a fixed 960 by 2200 pixel size within an SVG container.

Mmbostock

71% match