Team coherentie: ATUB

100%

Team coherentie: ATUB

✓ Published0🌍 Public

Last edited Jan 29, 2020

Created on Jan 29, 2020

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.

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: 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

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

93% match

Loading thumbnail…

Team coherentie 2021: ATUB

A chord diagram visualizes team interactions for the ATUB service in 2021, showing which team initially receives a ticket versus which team resolves it. The two halves of the circle are pulled apart to emphasize the directional flow. Built with D3 v3, the visualization uses SVG paths and animated linear gradients, with a custom chord layout and stretched chord implementation to create the separated arcs. Data is embedded directly in the script as a matrix.

MMisunoKitara

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

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

91% match

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

91% match

Loading thumbnail…

Team coherentie: ATAB

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.

MMisunoKitara

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

90% match