Team coherentie: KLASCE

100%

Team coherentie: KLASCE

✓ Published0🌍 Public

Last edited Jan 10, 2019

Created on Jan 10, 2019

A stretched chord diagram visualizes the interaction flows between teams within the KLASCE service, showing which team handles tickets and which team resolves them. Each arc represents a team, and the ribbons connecting them encode the volume of tickets transferred, with only the teams having the largest share included. Both halves are pulled apart horizontally to better distinguish the source and target teams. The visualization is built with D3.js v3, using a custom modified chord layout and a custom `stretchedChord` function, rendered as SVG with animated gradient effects on the ribbons. The data is actual ticket data from the KLASCE service.

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/38f387d5342e16b5c3989fe56441ff8f'>2018: Stretched Chord Diagram FOOCES</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Team coherentie: KlaSCe

This example visualizes team interactions within the KlaSCe service for 2019, showing which team initially receives a ticket and which team resolves it. A stretched chord diagram separates the two sets of teams on the left and right, with the thickness of each chord representing the volume of handoffs. The visualization uses a custom layout and drawing function built on D3 v3, with data from approximately 53,333 respondents. An animated linear gradient highlights the direction of flow.

MMisunoKitara

91% match

Loading thumbnail…

Team coherentie: KlaSCe 2021

This visualization shows team interaction for the KlaSCe service in 2021, with a chord diagram split into two halves to distinguish the team that initially receives a ticket from the team that resolves it. The data, presumably from a gist, is arranged in a matrix where entries indicate the number of tickets moving between teams, with a large empty stroke creating the visual gap between the halves. Rendering uses a custom `stretchedChord` function based on d3’s chord layout, with SVG paths and animated linear gradients. The diagram is interactive, with hover effects that adjust chord opacity (set by `opacityDefault` and `opacityLow`) to highlight connections.

MMisunoKitara

90% match

Loading thumbnail…

Team coherentie KlaSCe

This example visualizes team interactions within the KlaSCe service, showing which teams resolve tickets originating from other teams. It uses a stretched chord diagram, pulling the left and right halves apart along the x-axis to distinguish source and resolver teams. The visualization is built with D3 v3, employing a custom `stretchedChord` function and a custom chord layout (`customChordLayout`) to reduce overlap, while an animated linear gradient highlights the chords. Data represents 38,251 ticket interactions among selected teams.

MMisunoKitara

90% match

Loading thumbnail…

Team coherentie: KlaSCe

This example visualizes team interactions for the KlaSCe service in 2020, showing which team initially receives a support ticket and which team resolves it. The data is based on 74,193 tickets, with only the most significant teams included for clarity. The visualization uses a stretched chord diagram built with D3.js v3, where the left and right halves are pulled apart to separate the initiating and resolving teams. Animated linear gradients create a subtle moving pattern along the chords, and the layout is customized through a modified chord layout function to sort groups and subgroups.

MMisunoKitara

89% match

Loading thumbnail…

Team coherentie: CeIf

This example uses a stretched chord diagram to show how tickets move between teams within the CeIf service for 2019. The left side lists the team that initially receives a ticket, while the right side shows the team that ultimately resolves it, based on data from 2,460 respondents. The visualization is built with D3 v3, using a custom `customChordLayout` and a modified `stretchedChord` path generator to pull the two halves apart. An animated linear gradient is applied to the SVG paths to suggest flow, and the chart responds to screen width by adapting its size and pull-out distance.

MMisunoKitara

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

83% match

Loading thumbnail…

Team coherentie FOOCES

This visualization presents team interaction data for the FOOCES service using a chord diagram, showing the flow of tickets between teams. The diagram separates the source teams (on the left) from the teams that resolve the tickets (on the right), with animated gradient strokes highlighting the connections. Built with D3.js v3 and jQuery, the code uses custom functions `customChordLayout` and `stretchedChord` to optimize chord placement and pull the two halves apart for clarity. Hover interactions are implemented, though the specific behavior is not detailed in the provided code snippets.

MMisunoKitara

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

83% match