Viz - chord - source target value

100%

Viz - chord - source target value

✓ Published0🌍 Public

Last edited Jan 13, 2018

Created on Jan 13, 2018

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

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.

NNPashaP

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

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

88% match

Loading thumbnail…

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.

NNPashaP

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

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

87% match