Skip to main content
SimilarExport ZIP
100%

flush-cord

✓ Published0🌍 Public
11wheel
Last edited Aug 22, 2016
Created on Jun 19, 2015

Two offset dashed circles sit on a black background, each with a draggable control at its edge. Dragging a control changes the angle of a connecting ribbon, which bends between the two circles to form a smooth, tapered chord whose thickness and curvature adjust dynamically. The example uses D3’s drag behavior and SVG path elements, with the ribbon drawn as a cubic Bézier curve clipped by the circle geometry. Data is generated procedurally from mouse position, with no external dataset.

AI-generated description

Similar vizzes

Loading thumbnail…

cord-links

Three concentric arcs of labeled rectangles represent events, people, and places, with chord links drawn between them. The visualization shows how a single event connects to the people and places associated with it. Hovering over an event highlights its connections with animated bezier curves, while hovering over a person or place highlights their associated events. The example is rendered as an SVG with D3.js and uses procedural data generation to create the node groups and their links.

11wheel
71% match
Loading thumbnail…

Ribbon

This visualization uses hand-coded angular paths to draw colored ribbons on an SVG canvas. Five semi-transparent ribbon shapes are defined with start and end angles for source and target arcs, then rendered using a custom `ribbon()` function. The paths are filled with distinct colors from `d3.schemeSet3` and positioned at the center of a 1600x800 viewport. While the code references a Caltech36 social network dataset, the current example displays stylized geometric arcs rather than actual network data, demonstrating the possible output of the `d3.ribbon()` API.

Vvivianaaai@qq.com
70% match
Loading thumbnail…

Circle Dragging I

This example shows a set of colored circles scattered across an SVG canvas, which users can drag with the mouse. Each circle’s position is stored as x and y properties in its data object, and those values update live during the drag. The code uses d3.select and d3.drag from the d3-drag module to handle the interaction, attaching event handlers for start, drag, and end. At drag start, the circle is raised to the foreground with `.raise()` and gets a black stroke via the `.active` class; the stroke is removed on release. The circles are rendered as SVG `<circle>` elements, colored with a categorical scheme from `d3.scaleOrdinal` and `d3.schemeCategory20`, with random initial positions computed from the SVG’s dimensions.

Mmbostock
69% match
Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

EEfratVil
69% match
Loading thumbnail…

rounded-corner-curve

An interactive line chart demonstrates a technique for drawing smooth paths with rounded corners through data points, contrasting it with a standard linear interpolation. The example generates random data and displays two paths: a default black line and a magenta path with rounded corners. Moving the mouse horizontally adjusts the rounding intensity in real time, revealing how the SVG path `C` (cubic Bézier) commands create the effect. The code uses d3.js for data generation and SVG path construction, with custom logic for path string manipulation.

11wheel
69% match
Loading thumbnail…

Untitled

This example visualizes a chord diagram showing relationships between four groups, with ribbon thickness representing the magnitude of connections between them. The code uses `d3.chord()` to compute group and link data from a hardcoded 4x4 matrix, then renders the outer arcs with `d3.arc()` and the connecting ribbons with `d3.ribbon()`. Each arc and ribbon is colored based on its source group using a predefined color array. The SVG is appended to a div, centered within a 440x440 viewport, with stroke outlines on all paths for clarity.

Mmaviszv
68% match
Loading thumbnail…

Untitled

This example visualizes a chord diagram showing relationships between four groups, with ribbon thickness representing the magnitude of connections between them. The code uses `d3.chord()` to compute group and link data from a hardcoded 4x4 matrix, then renders the outer arcs with `d3.arc()` and the connecting ribbons with `d3.ribbon()`. Each arc and ribbon is colored based on its source group using a predefined color array. The SVG is appended to a div, centered within a 440x440 viewport, with stroke outlines on all paths for clarity.

Mmaviszv
68% match
Loading thumbnail…

Untitled

This example shows a chord diagram visualizing flows between four groups, with colored ribbons representing connections and arcs along the outer ring marking each group's total. The code uses d3.chord() to compute group and chord angles from a hardcoded 4×4 matrix, then renders the result as SVG paths. d3.arc() draws the outer segments, while d3.ribbon() generates the linking bands, with fill colors derived from each ribbon's source group. The visualization is built with d3.v4 and embedded in a minimal HTML page.

Mmaviszv
68% match