Team coherentie: LIO

100%

Team coherentie: LIO

✓ Published0🌍 Public

Last edited Jan 8, 2019

Created on Jan 8, 2019

This visualization shows how teams within the LIO department interact, mapping which team opens a ticket (right side) and which team resolves it (left side). It uses a stretched chord diagram with dummy groups to create space between the two halves, with animated gradients and hover effects to clarify connections. The code relies on D3 v3, custom layout functions for chord sorting, and a modified chord path generator to pull the halves apart. Data comes from 4,974 respondents and is 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/1c3d39ca986756fb6c579d8ed48a29dd'>2018: Stretched Chord Diagram ATUB</a>

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

mit Licensed

Similar vizzes

Loading thumbnail…

Team coherentie: LIO

This interactive chord diagram visualizes interaction patterns between teams within the LIO service unit, with the left side representing the initiating team and the right side the team resolving tickets. The custom layout algorithm (`customChordLayout`) and a stretched chord renderer (`stretchedChord`) pull the two halves apart for clearer comparison. Built with D3.js v3 and an SVG animation, the visualization uses an invisible chord to create a visual gap, with gradient animations providing a subtle flow effect.

MMisunoKitara

95% match

Loading thumbnail…

Team coherentie: LIO

This example visualizes team interactions for the LIO service in 2020, showing which team initially receives a ticket (left side) and which team resolves it (right side). Only the teams with the largest shares are included for clarity. The visualization uses a stretched chord diagram with D3 v3, leveraging custom functions `stretchedChord` and `customChordLayout` to pull the two halves apart along the x-axis. Data is displayed as an SVG with animation, using gradient fills and hover effects to highlight connections between the 4964 recorded interactions.

MMisunoKitara

94% match

Loading thumbnail…

Team coherentie 2021: LIO

This diagram visualizes team interactions for the LIO service in 2021, showing which team initially receives a ticket and which team resolves it. The chord diagram uses a custom layout to pull the two halves of the circle apart, with the left side representing the originating team and the right side the resolving team. Animated gradients move across the chords to draw attention to the flow. The visualization is built with D3 v3, using custom `stretchedChord` and `customChordLayout` functions, and rendered as SVG with animations.

MMisunoKitara

93% match

Loading thumbnail…

Team coherentie: LIO

This example uses a circular flow diagram to show how often different teams within the Dutch police service LIO interact with each other. The left side of the diagram lists teams that initially receive a ticket, while the right side shows which teams ultimately resolve it, with the width of each chord indicating the number of interactions. Built with D3.js v3, the visualization uses a stretched chord layout and custom functions like `stretchedChord` to pull the two halves of the diagram apart. The data comes from a dataset of 4,460 ticket interactions from 2019, and the chords are animated with a moving gradient to draw attention to the flow.

MMisunoKitara

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

84% match

Loading thumbnail…

Team coherentie: FOOCES

This interactive D3.js v3 visualization uses a stretched chord diagram to show team interactions within the FOOCES service, mapping which teams create tickets (on the left) to which teams resolve them (on the right). The SVG rendering employs a custom `stretchedChord` function and `customChordLayout` to pull the two halves apart, with animated linear gradients over the chords. Data comes from roughly 10,750 ticket records, filtered to show only the most significant team interactions, with a small dummy segment used to center the layout.

MMisunoKitara

83% match

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

83% match

Loading thumbnail…

Team coherentie: FOOCeS

A stretched chord diagram with animated gradients visualizes team interaction for the FOOCeS service in 2020, showing which team initially receives a ticket (left side) versus which team resolves it (right side). Based on data from 12,206 respondents, only teams with the largest shares are included for clarity. The visualization uses a custom `stretchedChord` function and a modified `d3.layout.chord` layout with SVG paths rendered via D3 v3. Animated linear gradients add moving highlights to the chord flows, with pull-out spacing separating the two halves.

MMisunoKitara

83% match