Viz - chord - duration

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.

91% match

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.

91% match

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.

90% match

Viz - chord - labelPadding

This chord diagram visualizes trade flows between five countries—the US, Canada, China, India, and the UK—using directed ribbons around a circular layout. The viz.chord() function from the vizjs library, built on d3.v4, draws SVG paths and positions labels with a labelPadding of 0.8 to adjust their distance from the arcs. Raw data is hardcoded in JavaScript as arrays of source–target–value tuples, and the chart is rendered inside a 960x500 SVG with a translated group element.

Viz - chord - outerRadius

A circular chord diagram visualizes directional flows between four countries: the US, Canada, the UK, China, and India, with edge thickness proportional to values like trade or migration. Using the vizjs library’s `viz.chord()` function, the diagram’s outer radius is set to 230 pixels, and the underlying data is provided as an array of source-target-value tuples. The visualization is rendered as SVG within a D3 v4 selection, where the chord layout and drawing are handled by the viz library’s API, not by raw D3 primitives.

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.

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.

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.