Chord - source, target, value

100%

Chord - source, target, value

✓ Published0🌍 Public

Last edited Jul 31, 2016

Created on Jul 4, 2016

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.

AI-generated description

viz.ch().source, viz.ch().target, viz.ch().value

These methods can be used to set the accessor functions for the source, target, and values in the data array.

The diagram on the left uses the default accessors d=>d[0], d=>d[1], and d=>d[2] for source, target and value respectively.

The diagram on the right over rides these deafults.

Part of a series of examples on Chord diagram using VizJS

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Viz - chord - source target value

This example visualizes international travel flows as a chord diagram, showing directional connection values between the US, Canada, UK, China, and India using an SVG rendering. The code uses the `viz.chord()` API from the vizjs library, with custom accessor functions mapping the data array’s source, target, and value (divided by 1000) fields. The chart is generated by calling `d3.select("g").call(chord)` in d3.v4, with the data provided as a hardcoded gist array of country-pair values.

NNPashaP

85% match

Loading thumbnail…

Viz - chord - fill

This example visualizes migration or trade flows between five countries using a chord diagram, with each arc and ribbon colored by the source country. The data is a hardcoded array of [source, target, value] triples, and the chart is built with the viz.js library’s `viz.chord()` function, configured by a `.fill()` accessor that maps country names to colors. The diagram is rendered into an SVG `<g>` element using a standard D3 v4 selection and call operation, with the chord layout centered via a translate transform.

NNPashaP

85% match

Loading thumbnail…

Chord I

Two side-by-side chord diagrams visualize migration flows among five countries: one for emigration and one for immigration. The diagrams use the VizJS library’s chord layout, invoked via `viz.ch()`, with D3 v4 for SVG rendering. Ribbon widths encode flow magnitudes, which are formatted as thousands with `d3.format`, and group arcs are colored by country using a custom fill function. The data is a hardcoded array of origin–destination pairs, and nodes are reordered with a custom sort function.

NNPashaP

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

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

82% match

Loading thumbnail…

Viz - chord - default

This example shows international migration flows using a chord diagram, where each arc represents the volume of movement between two countries and the connecting ribbons visualize the directional trade of people. The diagram uses `viz.chord()` from the Viz.js library, which is called on a D3 v4 selection, with data passed as a source-target-value matrix. The chart renders as an SVG inside a single `<g>` element, and the underlying data is a hardcoded array of country pairs.

NNPashaP

82% match

Loading thumbnail…

Viz - chord - label

A chord diagram visualizes bidirectional trade flows among the US, Canada, China, India, and the UK, with labels showing source country and value in thousands. The example uses the `viz.chord()` API from the Viz.js library, feeding aggregated numeric data from a hardcoded array. The chord layout is rendered as SVG, with labels formatted via `d3.format(",")`. The code relies on D3 v4 for selection and scaling, while Viz.js handles the chord geometry and label placement.

NNPashaP

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

79% match