Hive Plot Demo

100%

Hive Plot Demo

✓ Published0🌍 Public

Last edited Mar 16, 2012

Created on Mar 14, 2012

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.

AI-generated description

Similar vizzes

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

83% 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

82% match

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

80% 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

76% match

Loading thumbnail…

SVG Demo

This demo displays a minimal SVG visualization: a single D3 axis rendered inside an SVG element. The axis is created from a two-value data array, with a linear scale using the extent of the data and a bottom-oriented axis. The code uses d3.scaleLinear, d3.extent, and d3.axisBottom, and calls the axis with a D3 selection. The scale’s domain is normalized with .nice(), and the axis is placed in a group with a transform offset. The bundle.js file contains the compiled index.js, which imports these D3 v5 functions directly.

GGabrz

68% 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

68% match

Loading thumbnail…

D3: A simple, unstyled axis

This example demonstrates a basic scatterplot rendered as an SVG, with red data-point labels and axes that adopt a default, unstyled appearance. Using D3 v4, the code loads a hardcoded array of coordinate pairs and applies linear scales to map the data to a 500-by-300-pixel drawing area. The `d3.axisBottom` and `d3.axisLeft` functions generate the x- and y-axes, while circles are placed and labeled via D3’s `selectAll` and `append` chain. Data is presented without any custom styling rules, highlighting raw axis output.

深深度碎片

67% match

Loading thumbnail…

Psuedo-viz

This demo showcases several basic D3.js concepts for encoding data with marks and channels. It uses point marks (circles) to map data to X position, Y position, and size, plus a line mark with varying length and colored rectangles for a bar-like display. The code relies on D3 modules such as `d3-scale` for linear and ordinal scaling, `d3-axis` for axes, and `d3-shape` with `symbol` for SVG path elements. It also applies `d3.schemeCategory10` for color encoding and uses `selection.each()` to orchestrate multiple sub-visualizations within a single SVG.

AAri Schechter

66% match