Comparison to d3.chord

100%

Comparison to d3.chord

✓ Published0🌍 Public

Last edited Aug 8, 2016

Created on Aug 8, 2016

This example compares a chord diagram built with the `viz.ch()` API from VizJS to the classic d3.chord example. It visualizes a 4x4 matrix of numeric flows between four groups, with chords colored by the target group to reveal the breakdown of each source’s outgoing connections. The layout minimizes chord intersections, separating chords that share a starting point to reduce clutter. The chart is rendered as an SVG using d3.v4 for the base graphics, while the custom chord layout and arc-drawing logic come from VizJS.

AI-generated description

Compare this to the d3.chord example

Chords from any given group are non intersecting in viz.ch(). The chord layout is created to minimize chord intersections thus reducing cluttering.
viz.ch() uses a custom arc function so that two arcs starting from same point are non intersecting.
Instead of using value/source/target to color each chord, viz.ch() splits each chord between any two groups into two chords and are colored using the respective target colors. This way one is able to quickly see the breakdown of each group from its arc.

For other options/examples, see VizJS

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Chord I

A chord diagram visualizes directed relationships among four entities, with ribbons showing the magnitude of flow between groups and colored arcs representing each group’s total. The layout mirrors Circos and Martin Krzywinski’s design. Built with D3 v4, the code uses `d3.chord` to compute the chord layout, `d3.arc` for the group arcs, and `d3.ribbon` for the connecting bands. Colors come from `d3.scaleOrdinal`, and tick labels are formatted via `d3.formatPrefix`, with matrix data hardcoded in the source.

MMorganhaoyu

81% match

Loading thumbnail…

Chord Diagram

This chord diagram visualizes a 4x4 matrix of directed relationships, with ribbon thickness and arc sizes encoding the numeric values. The static SVG renders using `d3.chord()`, `d3.arc()`, and `d3.ribbon()` layouts, with group ticks and formatted labels generated by `d3.formatPrefix`. Categories are assigned colors via `d3.scaleOrdinal` over a custom palette. The code defines its own `groupTicks` function to position tick marks along each arc, while ribbons are filled by target-group color with a darker stroke.

Mmbostock

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

78% match

Loading thumbnail…

Viz - chord - redraw

A chord diagram visualizes random trade flows among five countries (China, US, UK, India, Canada), redrawing every two seconds. The layout uses the `viz.chord()` API from Viz.js, generating new matrix values via `Math.random()`. D3 v4’s `d3.select("g").call()` applies the updated chord data to an SVG group element, animating transitions between states. The rendering relies on SVG paths created by the chord layout, with no explicit styling or interaction.

NNPashaP

78% match

Loading thumbnail…

Chord - source, target, value

Two chord diagrams display directional flows between five countries using data from a static array of source, target, and value triples. The left diagram uses default accessors (`d=>d[0]`, `d=>d[1]`, `d=>d[2]`), while the right overrides them with `viz.ch().source`, `.target`, and `.value` functions, doubling the value and reversing source/target. Rendered as SVG via d3.v4 and VizJS, each diagram uses a custom `fill` function mapping country names to colors, and both are placed side-by-side in a single SVG canvas.

NNPashaP

77% match

Loading thumbnail…

Viz - chord - chordOpacity

This example visualizes immigration flows between five countries using a chord diagram rendered in SVG. The chord layout, generated by the Viz.js library, uses the `chordOpacity(0.2)` setting to make the ribbons semi-transparent, revealing overlapping relationships. The data is a hardcoded array of source-target-value triplets, with the diagram centered at a fixed transform. The code relies on d3.v4 for the SVG structure and Viz.js’s chord API to compute and draw the arcs and connecting bands, though no custom D3 scales or axes are implemented.

NNPashaP

76% match

Loading thumbnail…

Viz - chord - duration

A chord diagram visualizes directional flows among four countries—US, Canada, UK, China, and India—using matrix-like value pairs. The chart uses `viz.chord()` from the vizjs library to render an animated SVG, with a 1000-millisecond duration for the transition. Data is hardcoded as arrays of [source, target, value] tuples, and the diagram is drawn inside an SVG `<g>` element. The rendering leverages D3 v4 to manage the SVG structure and transitions, showing the magnitude of trade or migration between each pair.

NNPashaP

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

76% match