Chord

100%

Chord - 2015-16 English Premier League Goals

✓ Published0🌍 Public

Last edited Aug 8, 2016

Created on Jul 4, 2016

A chord diagram visualizes all goals scored between teams in the 2015-16 English Premier League season, with each team as a segment around the circle and ribbons encoding the number of goals. Hovering over a team highlights its connections and transitions associated chords. The visualization uses d3.v4 and the VizJS library to render SVG, pulling data from a gist.

AI-generated description

Chord Viz of all the goals in 2015-2016 EPL.

Interaction: hover mouse over a team to transition chords.

Part of a series of examples on Chord diagram using VizJS

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

All the champions, all the goals

This chord diagram visualizes all 2,427 goals scored and conceded in matches between the eight World Cup-winning teams, showing aggregate scoring relationships for each pair. Hovering over a team reveals its total goals scored and conceded, while hovering over a chord displays the head-to-head totals. The visualization uses D3.js v3, building the chord layout with d3.chord and rendering it as SVG paths with external arc labels and tick marks for goal counts. Data is embedded directly from the gist source, with tooltips implemented via div elements and mouse events.

GGerardoFurtado

76% match

Loading thumbnail…

Premier League Player Stats

This horizontal bar chart visualizes the top 10 goal scorers in the English Premier League for the 2017-18 season. It uses D3 v5 to map player names to a band scale and goal counts to a linear scale, rendering SVG rectangles with a fixed pink fill. The data is loaded from a local CSV file containing player and goal columns, and axes are generated with `axisLeft` and `axisBottom`.

MMukund Khandelwal

71% match

Loading thumbnail…

Chord Chard Diagram

A chord diagram visualizes five nodes (a through e) with uniform connections between all pairs, except for a double-weighted link from node e to itself. The chart uses D3 v5’s `d3.chord` and `d3.ribbon` to draw the ribbons and arcs, with labels positioned using `d3.arc` and trigonometric transforms. Data comes from a static JSON matrix defined in `flare.js`, rendered as SVG within a React component, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory10`.

AAyush

70% match

Loading thumbnail…

Chord I

A chord diagram visualizes directed relationships among four entities, with ribbons showing the magnitude of flow between groups and colored arcs representing each group’s total. The layout mirrors Circos and Martin Krzywinski’s design. Built with D3 v4, the code uses `d3.chord` to compute the chord layout, `d3.arc` for the group arcs, and `d3.ribbon` for the connecting bands. Colors come from `d3.scaleOrdinal`, and tick labels are formatted via `d3.formatPrefix`, with matrix data hardcoded in the source.

MMorganhaoyu

69% match

Loading thumbnail…

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

68% match

Loading thumbnail…

Chord Layout

A chord diagram displays three groups of flows, with each group’s values (`10, 20, 30`, etc.) represented as ribbons connecting around a circle. The diagram uses d3’s `d3.chord` layout to compute chord paths and `d3.ribbon` with a fixed radius of 200 to generate the curved ribbon shapes. Static example data is loaded directly from a JavaScript array, and the SVG output is styled via CSS with light fills and strokes. The visualization renders paths inside a `<g>` element translated to center the layout.

Ffloresh

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

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

66% match