Team coherentie: ATAB

100%

Team coherentie: ATAB

✓ Published0🌍 Public

Last edited Feb 26, 2021

Created on Feb 23, 2021

This example visualizes team interaction for the ATAB service, showing which team initially receives a ticket versus which team resolves it. It uses a stretched chord diagram with two separated halves, displaying only the teams with the largest shares. The visualization is built with D3 v3 and the custom `customChordLayout` and `stretchedChord` functions, which control sorting and pull apart the chords. Data comes from 5,380 ticket records, and the SVG includes animated gradient effects via SMIL animations.

AI-generated description

An example of using the Circular Flow diagram with actual data, as explained in my blog on How to create a Flow diagram with a circular Twist

It shows what types of educations (on the left) lead to what types of occupations (on the right) about 1.5 years after graduating. The data is based on about 18000 HBO graduates in 2014 in the Netherlands used for the State of the State project

forked from <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/f9dacd23eece9d23669c'>Stretched Chord Diagram - From educations to occupations</a>

forked from <a href='http://bl.ocks.org/jonpage/'>jonpage</a>'s block: <a href='http://bl.ocks.org/jonpage/5db8f8367169112d0738'>Stretched Chord Diagram - From educations to occupations</a>

forked from <a href='http://bl.ocks.org/MisunoKitara/'>MisunoKitara</a>'s block: <a href='http://bl.ocks.org/MisunoKitara/abe8987858204fae859b0e07d4d3aa21'>2018: Stretched Chord Diagram ATAB</a>

forked from <a href='http://bl.ocks.org/MisunoKitara/'>MisunoKitara</a>'s block: <a href='http://bl.ocks.org/MisunoKitara/9140fb0e0d4cf7a3d02c1028e664541f'>2019: Stretched Chord Diagram ATAB</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Team coherentie: ATAB

This example uses a stretched chord diagram to show how tickets are transferred between teams within the ATAB department, mapping the team that initially receives a ticket (on the left) to the team that ultimately resolves it (on the right). Built with D3 v3 and custom layout functions, the visualization animates an SVG-based flow with an animated gradient along the chords, while hovering can highlight specific connections. The data consists of 4,443 ticket interactions among the department’s teams, with a dummy segment added to create visual balance. The diagram is rendered with two pulled-apart halves, using custom `customChordLayout` and `stretchedChord` functions to achieve the stretched effect.

MMisunoKitara

95% match

Loading thumbnail…

Team coherentie 2021: ATAB

This chord diagram visualizes team interaction for the ATAB service in 2021, showing which team initially receives a ticket versus which team resolves it. The circular layout splits into two halves, with links connecting teams and animated gradients highlighting flow direction. Built with D3 v3, it uses a custom `d3.layout.chord` variant with a stretched chord generator to pull the two halves apart horizontally. SVG rendering includes hover effects that reduce opacity on non-hovered chords, and the data comes from a static matrix in the script, filtering to teams with the largest shares.

MMisunoKitara

94% match

Loading thumbnail…

Team coherentie: ATAB

This visualization uses a stretched chord diagram to show how much interaction occurs between teams within the Dutch organization ATAB. The left side lists the team that initially receives a ticket, while the right side shows the team that eventually resolves it, with the chord thickness reflecting the volume of handoffs. The code uses D3.js v3 with custom layout and chord functions to create the diagram, and SVG with animation for the visual output. A dummy segment in the matrix creates a gap for visual clarity, and the title, data, and interaction patterns are based on 5,429 ticket records from 2019.

MMisunoKitara

93% match

Loading thumbnail…

Team coherentie: ATAB

A chord diagram visualizes inter-team interaction patterns for the ATAB service, separating source teams on one side from teams that resolve tickets on the other. The visualization uses an animated SVG layout built with D3.js v3, including a custom stretched chord layout that pulls the two halves apart for clarity. Ribbons are dynamically colored with a moving gradient, and the chart adapts its size and spacing based on screen width. Data is embedded as a matrix, with a dummy segment added to emphasize the directional flow of interactions.

MMisunoKitara

93% match

Loading thumbnail…

Team coherentie: ATUB

This interactive chord diagram visualizes the flow of ticket interactions between teams within the ATUB organization. Two halves of the circle are pulled apart horizontally, distinguishing the team that opens a ticket from the team that resolves it. The diagram focuses on teams with the largest share of interactions, as noted in the explanation text. Built with D3.js v3, it uses custom `customChordLayout` and `stretchedChord` functions to modify the standard chord layout. The chord paths are drawn as SVGs featuring an animated linear gradient that creates a moving pattern along the connections, with hover interactions controlling opacity. Data is a static matrix of team interaction counts.

MMisunoKitara

92% match

Loading thumbnail…

Team coherentie: ATUB

This visualization maps interactions between teams within the ATUB service organization, showing which team creates a ticket and which team resolves it. The circular layout separates source teams on the left from destination teams on the right, with connecting chords whose thickness reflects interaction frequency. The implementation uses a customized chord layout (`customChordLayout`) that stretches the two halves apart by a configurable pixel offset, combined with an animated gradient fill to suggest flow direction. Data is embedded directly in the script, presenting 6,406 recorded tickets across eight primary teams, with a dummy segment reserving space for the circle's gap.

MMisunoKitara

92% match

Loading thumbnail…

Team coherentie: ATUB

This visualization uses a stretched chord diagram to show team interaction patterns for the ATUB service in 2020, tracking which teams initially receive tickets and which teams resolve them. It filters to the largest contributing teams for clarity. Built with D3 v3, the diagram pulls the left and right halves of the circular layout apart along the x-axis, with animated gradients flowing along the chords. The underlying data, based on 8,297 respondents, is rendered as SVG with custom layout and stretched chord functions that modify D3’s standard chord and arc methods.

MMisunoKitara

92% match

Loading thumbnail…

Team coherentie: ATUB

A stretched chord diagram shows ticket handoffs between teams within the Dutch ATUB service, with the left half representing teams that initially receive tickets and the right half showing teams that resolve them. The visualization uses a custom D3 v3 chord layout with a stretched chord function that pulls the two halves apart along the x-axis. Data covers roughly 8,244 interactions in 2019, filtered to include only the largest contributing teams. Animated gray gradients flow along the chords, and hovering is implemented via opacity changes, with the diagram rendered as SVG.

MMisunoKitara

91% match