Skip to main content
100%

Hive Plot (Areas) v4

✓ Published0🌍 Public
Aalexmacy
Last edited Jan 15, 2017
Created on Jan 15, 2017

Three radial axes extend from a central point, with colored bezier curves linking positions along the axes. Each curve represents a link between two nodes, with its thickness encoding a value range and its color encoding a group membership. The visualization uses D3 v4’s SVG rendering and the custom `d3.hive.link` function to draw the curved links. Axes are positioned with `d3.scalePoint`, radii with `d3.scaleLinear`, and colors are assigned via `d3.scaleOrdinal` with `d3.schemeCategory20c`.

AI-generated description

V4 conversion of <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/2066421'>Hive Plot (Areas)</a>

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

Hive Plot (Links)

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.

Mmbostock
91% match
Loading thumbnail…

D3 Hive Plot (Areas) - std expose

This D3 v2 example demonstrates a hive plot using area-based links instead of simple lines. Three radial axes are arranged at 120-degree intervals, each with a white stroke overlay to clearly separate the axes. The links are drawn as curved ribbons with varying start and end radii, creating a filled-area appearance between nodes on adjacent axes. Each link is assigned a color from a categorical palette based on its group, and the axes extend from an inner radius of 40 to an outer radius of 240 pixels. The visualization uses an ordinal angle scale for the three axes and a linear radial scale to position the link endpoints, with the custom link function generating cubic Bézier curves to smoothly connect the areas across axes. The example demonstrates how to represent multi-dimensional relationships in a compact, radial layout.

ZZJONSSON
88% match
Loading thumbnail…

D3 Hive Plot (Areas) - evil exposure

A D3 hive plot uses three radial axes to display an abstract network, with curved links connecting the axes. The SVG visualization encodes data through the link's start and end positions along each axis and uses a category20c color scale to distinguish groups. The code defines an ordinal scale for axis angles and a linear scale for radii, then generates paths using a custom link function that draws curves between points on the axes. The white outline on the axis lines is created by layering two line elements with different stroke widths.

ZZJONSSON
86% 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
86% match
Loading thumbnail…

Hive Plot Demo

A Hive Plot Demo renders six edges among three labeled axes (foo, bar, baz) in a 350×350 SVG canvas. Three colored axes radiate from a central point, with edges drawn as basis-interpolated splines between axis endpoints, using the D3 v2 API (d3.select, append, attr, d3.svg.line). The demo defines axes via CoffeeScript objects and computes edge directions and control-point offsets for curved paths. Data is entirely mocked in code, with static, predefined node positions and edge lists.

RRichMorin
79% match
Loading thumbnail…

Hive Plot Demo Rework

An interactive network visualization of software module dependencies, presented as a hive plot with four radial axes for import relationships. The demo uses D3.js to render SVG paths and ellipses, with mouseover interactions that highlight a selected link and connected nodes in blue, green, and red. The visualization is built from the flare-imports dataset, with a smaller test dataset for comparison.

RRichMorin
78% 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
77% match