Viz - chord - default

100%

Viz - chord - default

✓ Published0🌍 Public

Last edited Jan 13, 2018

Created on Jan 13, 2018

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Viz - chord - innerRadius

This example visualizes international migration flows between five countries using a chord diagram. The chart arranges the countries around a circular layout, with curved ribbons connecting source and target nations, where ribbon thickness encodes the volume of people moving between them. The inner radius of the chord layout is set to 130 pixels, creating a hollow center. It uses the Viz.js library’s `viz.chord()` function, which is called on a D3 v4 selection, while the data is provided as an array of source-target-value tuples and rendered as an SVG.

NNPashaP

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

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

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

88% match

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

88% match

Loading thumbnail…

Viz - chord - padAngle

This example visualizes international immigration flows between five countries using a chord diagram with a pronounced pad angle that separates the arcs. The visualization shows directional migration volumes, with the United States, Canada, the UK, China, and India connected by curved bands whose thickness encodes the numeric value of each origin-destination pair. The code builds the chart by combining the viz.chord() API from the vizjs library with d3.select and the d3.v4 framework, rendering entirely as SVG. Data is hardcoded in a getData() function, and the diagram is placed inside a single SVG group transformed to the center of the canvas.

NNPashaP

86% match

Loading thumbnail…

Viz - chord - sort

This example shows the flow of immigration between five countries—China, the US, the UK, India, and Canada—using a chord diagram. The chords are arranged according to a predefined sort order, with each ribbon’s thickness proportional to the numeric value in the data. The code uses the `viz.chord()` API from the vizjs library on top of D3 v4, rendering to SVG. Data comes from a hardcoded array of country pairs and flow amounts, and the chord’s sort function uses `d3.ascending` to order the groups.

NNPashaP

86% match