Skip to main content
SimilarExport ZIP
100%

Chart

✓ Published0🌍 Public
TThanaporn-sk
Last edited Nov 1, 2019
Created on Nov 1, 2019

This chart visualizes a radial network with two concentric rings of nodes, connected by curved links that represent relationships between outer and inner points. The visualization is interactive, as hovering over a node highlights its connected links in navy blue. Built with D3 v4, the code uses `d3.line()` with a Catmull-Rom curve for the circular outlines and a custom link function to draw quadratic Bézier paths. The data is computed geometrically, positioning 24 outer and 12 inner nodes around a center, with 14 predefined source-target connections.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/giorgi-ghviniashvili/'>giorgi-ghviniashvili</a>'s block: <a href='http://bl.ocks.org/giorgi-ghviniashvili/8f131391f9d09812bf172bf2fa7528b7'>radial line v4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Network Chart

This network chart visualizes connections between named individuals using a force-directed layout. Nodes are rendered as pink circles with violet text labels, while orange links between them have stroke widths proportional to the link weight data from the local `graphFile.json`. The visualization uses the older `d3.layout.force` API (from d3 v4) with gravity, charge, and distance parameters to position the graph, and supports interactive dragging of nodes. The SVG is drawn dynamically, with each node’s position updated on every tick event.

PPavaniMangugari
76% match
Loading thumbnail…

Radial Arc Diagram

An interactive radial arc diagram displays a small network of four people—Bob, Jane, Sue, and Tom—arranged in a circle, with curved paths connecting each person to their listed connections. The visualization loads data from a local JSON file and renders nodes as circles with labels, using d3.scale.ordinal with rangePoints to position them angularly around a central point. Each link is drawn as an arc using a custom curve function that calculates chord lengths, while node labels flip orientation when positioned on the left side of the circle. The code relies on d3.json for data loading and SVG elements with D3’s enter/update selections.

Mmbostock
75% match
Loading thumbnail…

RADIAL network diagram

A radial network diagram displays countries in a hierarchical tree layout, with nodes connected by curved links radiating outward from a central root. The visualization supports panning and zooming interactions for exploring large datasets. Built with D3 v4, it uses `d3.stratify` to process hierarchical CSV data and `d3.linkRadial` for the curved paths. Node labels rotate radially to maintain readability, while the SVG rendering includes styled internal and leaf nodes. The dataset derives from flare.csv, representing country hierarchies.

RRashi Tyagi
75% match
Loading thumbnail…

Network_Visualization

This network visualization displays the connections within a Data & AI ecosystem, arranging nodes in a fixed circular layout. Node colors encode group membership using a d3.scaleOrdinal with ten categorical colors, while links depict relationships between entities. The example loads two external CSV files via Promise.all and d3.csv, then manually positions nodes using trigonometric calculations rather than d3.forceSimulation. Circles and labels are rendered as SVG elements, with each node circle including a tooltip title showing the node’s id.

AAparna Desi Reddy
75% 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
74% 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
74% match
Loading thumbnail…

Network chart

This network chart visualizes a small social graph of seven individuals across four groups, with links between them weighted to indicate relationship strength. The visualization uses a force-directed layout to position nodes, with each node rendered as a circle accompanied by a text label. The code employs the `d3.layout.force` API from D3 v4 to simulate the physical forces that arrange the nodes, and users can click and drag nodes to reposition them. Links are drawn as lines with stroke widths proportional to the weight data from the `graphFile.json` source, and the SVG canvas is styled with a tan background and green node circles.

Eeravellisaimeghana
74% match
Loading thumbnail…

Network chart

This network chart visualizes a small social graph of seven individuals across four groups, with links between them weighted to indicate relationship strength. The visualization uses a force-directed layout to position nodes, with each node rendered as a circle accompanied by a text label. The code employs the `d3.layout.force` API from D3 v4 to simulate the physical forces that arrange the nodes, and users can click and drag nodes to reposition them. Links are drawn as lines with stroke widths proportional to the weight data from the `graphFile.json` source, and the SVG canvas is styled with a tan background and green node circles.

Eeravellisaimeghana
74% match