Skip to main content
100%

Chord diagram transition - G10 Currency Pairs

✓ Published0🌍 Public
AAjayyy
Last edited Jun 17, 2019
Created on Jun 17, 2019

This visualization demonstrates the changing sentiment between G10 currency pairs from 2013 to 2017 using an interactive chord diagram. Year buttons transition the diagram between different data matrices, animating the chord paths and group arcs with `transition.attrTween`. Built with D3 v3 and React, the chart renders as SVG, using `d3.layout.chord` and `d3.svg.chord` to represent the flow of currency interactions. The data was originally sourced from FAO fishery trade flows but has been repurposed here for currency sentiment analysis.

AI-generated description

Chord Diagram with transitions to see sentiments of each year

===============================================

Forked from below:

This Chord diagram was created to show the Fish Trade Flows in US dollars between world regions. To show how the exports change through the years I used transitions between the chords. This was possible thanks to a stack overflow answer by AmeliaBR.

The data was obtained from FAO Fisheries Yearbooks. It spans 9 years, from 2004 to 2015. The final version of this visualization can be viewed at Databyou.

This research was funded by the project SAF21 - Social science aspects of fisheries for the 21st Century. SAF21 is a project financed under the EU Horizon 2020 Marie Skłodowska-Curie (MSC) – ITN - ETN programme (project 642080).

This bl.ock was created by Luz K. Molina.

forked from <a href='http://bl.ocks.org/databayou/'>databayou</a>'s block: <a href='http://bl.ocks.org/databayou/c7ac49a23c275f0dd7548669595b8017'>Chord diagram transition interactive</a>

forked from <a href='http://bl.ocks.org/willzjc/'>willzjc</a>'s block: <a href='http://bl.ocks.org/willzjc/156841b4debbe5b7d6f4d285f5592215'>Chord diagram transition - G10 Currency Pairs</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Responsive Chord

A Responsive Chord diagram visualizes bilateral trade flows between countries, using curved chords to show the direction and volume of exchanges between pairs of sellers and buyers. The matrix-based layout positions entities around a circular arc, with chord thickness proportional to flow values read from a CSV file. Built with D3 v3, the code employs `d3.layout.chord` to compute the layout, ordinal color scales for categorical grouping, and custom tooltips for hover details. The visualization also implements fade effects on non-hovered chords to focus attention on specific relationships.

Aandreaangeli
75% 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
72% match
Loading thumbnail…

Gist 0e21ec455ae9428b9684

A chord diagram displays directed relationships among entities, with arcs connecting groups and tick marks showing value scales. The visualization uses mouseover filtering to fade unrelated chords, highlighting connections tied to the hovered group. Built with D3 v3, it employs `d3.layout.chord`, `d3.svg.arc`, and `d3.svg.chord` to render SVG paths, with an ordinal color scale for groups. The matrix data originates from Martin Krzywinski’s Circos guide, and the layout includes animated opacity transitions on interaction.

Aaht
72% match
Loading thumbnail…

Chord

This visualization uses a chord diagram to display the pairwise relationships in a 10x10 numeric matrix, with each node representing a class from a CSV file. The diagram shows ribbons connecting the nodes, where each ribbon’s color reflects the source or target node based on which has a higher value, and its opacity is fixed at 0.5. The code loads data with `d3.csv` and `d3.json`, then uses `d3.chord` to compute the chord layout, `d3.ribbon` for the connecting paths, and `d3.arc` for the outer arcs, all rendered as SVG within a React-compatible HTML page using D3 v6.

Vvivianaaai@qq.com
72% 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
71% match
Loading thumbnail…

Untitled

This visualization displays a chord diagram representing bilateral relationships between countries, with the thickness of each chord indicating the strength of the connection. It uses d3.forceSimulation to position nodes and d3.ribbon to draw the connecting arcs, with all elements rendered as SVG. The graph supports interactive highlighting, where hovering over a group or value emphasizes the corresponding connections. Data is loaded from a hardcoded array in the source, and the visualization is built using d3.v4 and React.

JJasonXu1244
70% 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
70% 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
70% match