Team coherentie: LIO

100%

Team coherentie: LIO

✓ Published0🌍 Public

Last edited Jan 30, 2020

Created on Jan 30, 2020

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.

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>

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

mit Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Team coherentie: LIO

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.

MMisunoKitara

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

86% match

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

86% match

Loading thumbnail…

Team coherentie: FOOCeS

This circular flow diagram, or stretched chord diagram, visualizes team interaction for the FOOCeS service in 2020. It shows how tickets move from the team that initially receives them (on the left) to the team that resolves them (on the right), and includes only the teams with the largest share for clarity. Built with D3.js v3, the visualization uses a custom `d3.layout.chord.sort.js` for layout and a modified `d3.stretched.chord.js` to pull the two halves apart along the x-axis. The data is based on 12,206 ticket records and is animated with an SVG linear gradient to highlight the flow.

MMisunoKitara

80% match

Loading thumbnail…

Team coherentie: CeIf

This example visualizes team interaction for the CeIf service in 2020, showing which team initially receives a ticket (left side) and which team resolves it (right side). Built with D3.js v3, it uses a custom-stretched chord layout to separate the two halves of the circular flow diagram, with animated gradients along the curved links. The matrix data includes 2,379 tickets among teams like Netwerken, Datacenter, and Servicepunt, with empty dummy groups used to balance the layout. Rendering uses SVG paths and animated linear gradients.

MMisunoKitara

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

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

79% match