Team coherentie: FOOCeS

100%

Team coherentie: FOOCeS

✓ Published0🌍 Public

Last edited Mar 3, 2021

Created on Mar 2, 2021

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.

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/97c8d7386744b48e857316da3bce1d20'>2020: Stretched Chord Diagram ATAB</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Team coherentie 2021: FOOCeS

A custom chord diagram shows team interactions for the FOOCeS service in 2021, displaying which team initially receives a ticket on the left and which team resolves it on the right. The visualization uses D3 v3 with a custom layout, `d3.layout.chord`, and a stretched chord generator that pulls the two halves apart along the x-axis. SVG paths with animated linear gradients add subtle motion, while hover interactions adjust chord opacity. Data is drawn from a matrix of ticket counts, filtered to include only the largest contributing teams.

MMisunoKitara

95% match

Loading thumbnail…

Team coherentie: FOOCeS

This visualization shows team interaction for the FOOCeS service in 2020, tracking which team initially receives a ticket and which team resolves it. The diagram uses a circular flow layout with pulled-apart halves, displaying only the teams with the largest share of interactions. The data includes 12,206 respondents and uses a dummy segment to create vertical symmetry. The code employs a custom `stretchedChord` function for the chord paths, an animated linear gradient for the connections, and D3 v3's layout with custom sorting, rendered as SVG.

MMisunoKitara

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

94% match

Loading thumbnail…

Team coherentie: FOOCES

This example visualizes team interactions for the FOOCES service in 2019, showing which teams initially receive tickets and which teams resolve them. It uses a stretched chord diagram to pull the two halves apart, with the left side representing the receiving teams and the right side the resolving teams. Built with D3.js v3, the chart uses a custom `customChordLayout` function and a custom `stretchedChord` function to create the separated arcs and animated gradients. The data is based on 11,146 tickets, with only the largest teams included for clarity.

MMisunoKitara

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

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

93% 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: Ceif

This circular flow diagram visualizes team interactions within the Ceif service, showing which teams (on the left) resolve tickets originating from other teams (on the right). Built with D3.js v3, the visualization uses a stretched chord layout and animated SVG gradients to depict the flow of approximately 2,405 ticket interactions. The data is displayed in a bipartite layout, with a custom `customChordLayout` and `stretchedChord` function pulling the two halves apart for clarity. The matrix-driven diagram highlights the most significant team connections, omitting less active teams to maintain readability.

MMisunoKitara

84% match