Skip to main content
Log in
M

MisunoKitara

@MisunoKitara·86 public vizzes

Loading thumbnail…

ICTS Initiële Servicegroep Chord Diagram

A chord diagram visualizes the relationships between 37 Dutch ICT service groups, using a matrix of interaction values to draw ribbons whose thickness reflects the strength of connection between each pair. The circular layout groups nodes by name, with each arc segment proportional to its total weight. Built with D3.js v3, the code computes the chord paths and animates the diagram using the library’s force simulation. Data is provided inline as a hardcoded matrix, with Bootstrap used only for page layout and jQuery included for DOM handling, though the visualization itself relies solely on D3’s chord layout and rendering functions.

Apr 24, 2026
Loading thumbnail…

ICTS Sequences sunburst

This interactive sunburst chart visualizes hierarchical sequences of ICT service ticket categories, with each arc segment’s size representing the count of visits for that path. Hovering over a segment displays its percentage of the total and highlights all ancestor arcs while fading the others, with an accompanying breadcrumb trail and toggleable legend. Built with D3 v3, it uses `d3.layout.partition` for the layout and `d3.svg.arc` for rendering, reading data from a CSV file and animating opacity changes on mouseover and mouseleave events.

Feb 17, 2026
Loading thumbnail…

ICTS Sequences sunburst

This sunburst chart visualizes ICTS ticket sequences, breaking down hierarchical paths from a root category through intermediate groups to individual leaf nodes. It uses a d3.layout.partition with arc segments, colored by category name, and animates opacity on mouseover to highlight the ancestry chain of a selected segment. The display includes a breadcrumb trail and a percentage readout showing the selected node’s share of the total. Data comes from a CSV file loaded via d3.text and d3.csv.parseRows, with the visualization built using d3.v3 and SVG paths.

Feb 17, 2026
Loading thumbnail…

ICTS Initiële Servicegroep Chord Diagram 2024

This interactive chord diagram visualizes the relationships and service dependencies among 37 named ICTS service groups, with animated, colored chords and matrix values representing interaction strengths. It uses the D3 v3 library to render the circular layout, while jQuery and Bootstrap handle page structure and responsive styling. The visualization is built from a static matrix array containing numeric connection data, with chord paths and labels generated programmatically. The chart updates dynamically in the browser, allowing viewers to explore the magnitude of connections between different service groups.

Feb 27, 2025
Loading thumbnail…

ICTS Initiële Servicegroep Chord Diagram 2021

This animated chord diagram visualizes the relationships between 37 ICTS service groups in 2021, using a matrix of proportional values to show the strength of connections. The circular layout presents each group as a labeled arc, while translucent ribbons connect groups to indicate interaction intensity. Built with D3.js v3, the visualization uses chord and arc layouts to render the matrix data, with Bootstrap handling the page layout and jQuery included for DOM manipulation. Hover interactions and color coding help distinguish individual groups and their outgoing connections.

Feb 27, 2025
Loading thumbnail…

2024: Circle Packer ICTS (incl. spam/geannuleerd) v1.1

This animated visualization packs circles into a hierarchical layout, displaying a year’s worth of ICTS ticket data categorized as spam or cancelled. The view uses an interactive circle-packing algorithm to nest groups and items by status, with circles appearing and resizing as the layout animates over time. The implementation relies on D3’s `d3.pack` and `d3.forceSimulation` for layout and physics, while transitions are driven by `transition.attrTween` to smoothly update circle positions and radii. Data is ingested from an inline JavaScript source, rendering entirely in the browser via HTML widgets.

Feb 26, 2025
Loading thumbnail…

2024: Circle Packer ICTS (incl. spam/geannuleerd)

This animated circle packing visualization displays continents and the languages spoken within them, with circle sizes scaled by the number of countries speaking each language. The data originates from a gist by MisunoKitara, updated for 2024 including spam and cancelled entries. Built using the `circlepackeR` package in R, the visualization relies on D3.js force-directed layout algorithms to position and size the nested circles, rendering the hierarchical structure of language distributions across continents.

Feb 26, 2025
Loading thumbnail…

ICTS Initiële Servicegroep Chord Diagram 2021

This interactive chord diagram visualizes the ICTS Initiële Servicegroep's service dependencies for 2021. It uses D3.js version 3's chord layout to display interconnections, with an animated rendering, where each service appears as a node segment and the chords represent the strength of their relationships. The matrix data is hardcoded in the script, and the visualization employs D3's SVG-based rendering.

Mar 4, 2024
Loading thumbnail…

ICTS Initiële Servicegroep Chord Diagram 2021

A chord diagram visualizes the 2021 service relationships within the ICTS Initiële Servicegroep, with six labeled groups (ACR, AES, AFI, AHR-Core, AHR-PyTm, AHR-Soft) connected by colored ribbons whose thickness and opacity encode interaction strength. The animation fades non-hovered chords to 20% opacity on mouseover, and the chart renders using d3.layout.chord, d3.svg.arc, and d3.scale.ordinal with a 16-color palette. Data comes from a hardcoded 6×6 matrix in the JavaScript, drawn with D3 v3 and jQuery, with Bootstrap styling for layout.

Mar 4, 2024
Loading thumbnail…

ICTS Initiële Servicegroep Chord Diagram 2021

This interactive chord diagram visualizes the initial service groups at ICTS for 2021, comparing values between the categories "ACR" and "AES" via a single non-zero matrix entry. Built with D3.js v3, it renders animated arcs and chords using the `d3.layout.chord` API, with hover effects that fade non-selected groups. The visualization includes tick marks, group labels, and a custom color palette, with all elements drawn as SVG paths and text within a Bootstrap-styled layout.

Mar 4, 2024
Loading thumbnail…

ICTS Sequences sunburst

This sunburst chart visualizes the hierarchical distribution of ICT service tickets across portfolios and categories, where each ring segment’s arc length and color encode the ticket count. The visualization reads a CSV file using `d3.text` and `d3.csv.parseRows`, then builds the tree with `d3.layout.partition` and draws arcs via `d3.svg.arc`. Hovering over a segment fades unrelated arcs, displays the percentage of the total in the center, and updates a breadcrumb trail built with D3 transitions. The legend’s visibility is toggled by a checkbox.

Mar 3, 2024
Loading thumbnail…

2023 Circle Packer ICTS (incl. spam/geannuleerd) - new

This interactive visualization shows continents as large circles, with smaller circles inside them representing languages, scaled by the number of countries speaking each language. It uses a hierarchical circle packing layout rendered with D3.js, supporting animated transitions between views. The visualization is built using the HTML Widgets framework and custom JavaScript, adapting code from the circlepackeR R package. Data includes languages per continent from a gist source, with the option to include or exclude spam and cancelled entries.

Mar 1, 2024
Loading thumbnail…

2023: Circle Packer ICTS (incl. spam/geannuleerd)

This animated circle-packing visualization displays a hierarchical dataset of continents, languages, and the countries where they are spoken, with circle sizes scaled by the number of countries per language. The rendering uses the `circlepackeR` package in R to generate the layout, then animates transitions between different years of data. It builds on D3’s treemap and `d3.zoom` for interactive panning and zooming. The dataset appears to track ICT event submissions, including spam and cancelled entries, across multiple years (2017, 2018, and 2023).

Mar 1, 2024
Loading thumbnail…

ICTS Initiële Servicegroep Chord Diagram 2022 (excl. Ivanti

This chord diagram visualizes the relationships and service flows among ICTS’s initial service groups for 2022, excluding Ivanti. It displays a matrix of numeric interaction values between 29 distinct groups, using a circular layout with colored ribbons and arcs. The visualization is built with the D3.js version 3 library and incorporates Bootstrap and jQuery for layout and interactivity. The data is embedded as a static matrix, and the rendered animation enhances the presentation of the interconnected service group relationships.

Apr 17, 2023
Loading thumbnail…

Sequences sunburst

This interactive sunburst chart visualizes hierarchical sequences of ICT support ticket categories, showing the distribution of ticket counts across nested portfolio and system classifications. The visualization uses D3.js v3 with the `d3.layout.partition` layout and `d3.svg.arc` to render the radial segments, while mouseover events trigger breadcrumb updates and opacity fading to highlight the current ancestry path. Data is loaded from a CSV file and structured into a hierarchy, with a legend toggled by a checkbox. The central description area displays the percentage each segment represents of the total ticket volume, with animated transitions restoring full opacity on mouseleave.

Apr 17, 2023
Loading thumbnail…

Sequences sunburst

This interactive sunburst chart visualizes hierarchical ticket data, showing how thousands of support requests flow from a top-level category through successive subcategories. Hovering over any segment fades all non-ancestral paths and displays a breadcrumb trail with the percentage of the total represented by that sequence. The visualization uses D3 v3’s `d3.layout.partition` and `d3.svg.arc` to compute and draw the radial layout, with the data loaded from a local CSV file. A legend and breadcrumb trail are built with D3 selections, and mouse interactions trigger opacity transitions and updates to the percentage readout.

Apr 7, 2023
Loading thumbnail…

ICTS Initiële Servicegroep Chord Diagram 2021

An animated chord diagram visualizes the 2021 service-group interactions for ICTS, using a 31-by-31 matrix of numeric values to represent relationships between named internal domains and support teams. The visualization uses D3 v3 to render the circular layout, with chord paths displaying connection strengths and the matrix defining the data source for all links. The example employs D3’s chord layout and animation to display the flow of interactions, with hover states and title text providing context for each group.

Mar 28, 2022
Loading thumbnail…

2021: Circle Packer ICTS (excl. spam/geannuleerd)

This animated circle-packing visualization displays 2021 ICTS event data, excluding spam and cancelled entries. The rendering uses a force-directed layout via `d3.forceSimulation` to position nested circles, with each circle sized to represent a data category. The animation iterates through time steps, updating the hierarchical packing in real time. The code relies on HTML widgets and D3.js, loading data directly from a gist source.

Jan 26, 2022
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.

Jan 26, 2022
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.

Jan 19, 2022
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.

Jan 18, 2022
Loading thumbnail…

Team coherentie 2021: CeIf

This interactive chord diagram shows team interactions for the CeIf service in 2021, distinguishing between the team that initially receives a ticket and the team that resolves it. The visualization uses a custom stretched chord layout to separate the two halves of the diagram, with animated gradients along the chords. It is built with D3 v3, using custom layout functions for chord sorting and stretching, and renders as SVG with hover effects that adjust chord opacity. The data is embedded as a matrix of ticket counts between teams, with dummy entries to create empty space in the circle.

Jan 17, 2022
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.

Jan 12, 2022
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.

Jan 12, 2022
Loading thumbnail…

Chord Diagram - ICTS globaal 2018

This chord diagram visualizes the flows of people between their previous and current phone brands, based on survey data. The interactive animation shows the movement of users across 31 service groups as interconnected arcs around a circular layout. Built with d3.v3, the visualization uses the chord diagram API to render the matrix of transition values, with colored ribbons representing directional flow magnitude between categories. The animation highlights changes over time, and the data is presented as raw numerical values in the source code, reflecting the 2018 ICTS global survey.

Mar 5, 2021
Loading thumbnail…

Sequences sunburst

A sequences sunburst visualizes event paths through a helpdesk ticketing system, summarizing navigation routes from a CSV of visit sequences. The interactive chart uses d3.layout.partition and d3.svg.arc to render a radial hierarchy, with a breadcrumb trail and percentage display on mouseover. Hovering highlights the ancestors of a segment and fades others, while the legend can be toggled. Data is parsed from a CSV file into a hierarchical JSON structure for the partition layout, and colors map to step names.

Mar 5, 2021
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.

Mar 4, 2021
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.

Mar 3, 2021
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.

Mar 3, 2021
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.

Mar 3, 2021
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.

Mar 3, 2021
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.

Mar 1, 2021
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.

Mar 1, 2021
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.

Feb 26, 2021
Loading thumbnail…

Nightingale's Rose

This interactive SVG recreation of Florence Nightingale's polar area diagram visualizes monthly mortality causes among British soldiers during the Crimean War. The chart uses an animated polar area diagram with wedges scaled by square-root-transformed death counts to represent area proportionally. Built with D3.js, it computes radii from area values and renders two sequential twelve-month panels. Data comes from Nightingale's original report, with disease, wounds, and other causes distinguished by color.

Jun 23, 2020
Loading thumbnail…

Chord Diagram - ICTS globaal 2019

This chord diagram visualizes the flow of service interactions between 28 ICT domains for 2019, showing the volume of transitions between categories as colored arcs and ribbons. The animated rendering uses d3.v3’s chord layout and SVG paths, with hover interactions for detail. The matrix data is hardcoded in the script, and Bootstrap and jQuery provide layout and UI support, while custom styling controls opacity and label placement.

Apr 10, 2020
Loading thumbnail…

2019 Arc Tween

A circular gauge displays a background arc and an orange foreground arc representing a value, which updates to a new random angle every few seconds. The animation uses a custom `transition.attrTween` on the `d` attribute, interpolating the endAngle in data space via `d3.interpolate`. The arc path is computed with `d3.arc`, and the transition duration is set to 100,000 milliseconds, creating a smooth, continuous rotation.

Feb 11, 2020
Loading thumbnail…

2019: Radial Cluster Dendrogram

This radial cluster dendrogram displays the hierarchical structure of the Flare class hierarchy, with leaf nodes positioned around the outer ring and internal nodes connected by curved links. The visualization uses d3.stratify to construct the tree from CSV data and d3.cluster to compute the radial layout. Rendered as SVG, the code projects node coordinates from polar to Cartesian space using a custom project function, with node circles and rotated text labels for each class and package.

Feb 7, 2020
Loading thumbnail…

Sequences sunburst

This sunburst visualization displays hierarchical sequences of ICT ticket paths, using a D3.js v3 partition layout to show the proportion of visits through different categories and subcategories. The interactive chart highlights a sequence on hover, fading unrelated arcs and updating a breadcrumb trail with the percentage of total events represented. It loads data from a CSV file using `d3.text` and `d3.csv.parseRows`, builds the hierarchy with a custom function, and renders arcs with `d3.svg.arc` and `d3.layout.partition`. A legend toggle and animated opacity transitions enhance the exploration of the event flows.

Feb 6, 2020
Loading thumbnail…

2019: Circle Packer ICTS (excl. spam/geannuleerd)

This animated visualization uses a circle-packing layout to display continents and the languages spoken within each, with circle sizes scaled by the number of countries speaking each language. The rendering relies on the circlepackeR R package, which implements the circular packing algorithm through D3.js force-directed simulation. Data is sourced from a Gist example originally created by justlebeau, with subsequent forks refining the dataset through 2019. The animation dynamically adjusts the nested circles, providing a hierarchical view of linguistic distribution across global regions.

Feb 5, 2020
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.

Jan 30, 2020
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.

Jan 30, 2020
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.

Jan 30, 2020
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.

Jan 30, 2020
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.

Jan 30, 2020
Loading thumbnail…

Team coherentie: ATUB

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.

Jan 29, 2020
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.

Jan 29, 2020
Loading thumbnail…

d3-voronoi-treemap usage

This example visualizes the global economy by GDP using a Voronoi treemap, presenting hierarchical data as nested polygonal cells whose areas reflect weights. It shows the distribution of GDP across continents and major countries, with each cell labeled and colored by category. The code uses the d3-voronoi-treemap plugin, which tesselates a 60-gon (simulating a circle) into inner cells, alongside d3.hierarchy for data structuring and d3.v4 for SVG rendering. Data comes from a JSON file containing weighted country and continent entries, displayed within a static, styled SVG layout.

Nov 12, 2019
Loading thumbnail…

d3-voronoi-treemap usage

This example shows a Voronoi treemap visualization of global GDP data, adapted from a HowMuch.net article. It displays hierarchical data as a partitioned circle, where each cell’s area corresponds to a data weight. The code uses the `d3-voronoi-treemap` plugin, built on d3.v4, along with helper libraries `d3-weighted-voronoi` and `d3-voronoi-map`. It renders as an SVG with interactive hover effects, loading data from a local JSON file.

Nov 12, 2019
Loading thumbnail…

Bubble chart SparkCentral 2019: 1

A bubble chart visualizes the relative volumes of customer support conversations across platforms, with a few large labeled bubbles for named channels and many smaller unlabeled bubbles for individual interactions. The visualization uses a force-directed layout driven by `d3.forceSimulation`, combining `d3.forceX`, `d3.forceY`, and `d3.forceCollide` to group bubbles by category while preventing overlap. Circle size encodes the `size` value from a CSV data source, and colors map categories through a `d3.scaleOrdinal`. The chart renders to SVG, with circles and text labels updated on each simulation tick.

Nov 12, 2019
Loading thumbnail…

Sankey Barbara

This interactive Sankey diagram visualizes time allocation from a CSV file, showing flows between organizational units, activity categories, and transportation planning topics. Built with D3.js v4 and rendered as SVG, the diagram uses custom node dragging for repositioning and features gradient-colored links. The code loads data via `d3.csv`, processes it into node and link arrays, and uses a custom `d3.sankey` layout function with iterative relaxation algorithms to position nodes and calculate link thickness based on values.

Jun 3, 2019
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.

May 31, 2019
Loading thumbnail…

Chord Diagram - ICTS globaal 2018

This chord diagram visualizes the flows of service interactions between 27 ICT-related domains for the year 2018. The matrix data encodes the volume of transitions between each pair of domains, with thicker chords representing higher values. The visualization uses the D3.js v3 chord layout to render the circular arcs and connecting ribbons, with the surrounding labels identifying each domain. The chart includes animation when the page loads, as the chords draw themselves in sequence. The data appears to be based on internal service group metrics, and the code relies on the D3 chord layout API to generate the geometry.

Apr 1, 2019
Loading thumbnail…

Chord Diagram - ICTS globaal

This interactive chord diagram visualizes the flow of interactions between ICT service domains and organizational units, based on data from a Global Mobile Consumer Survey. The circular layout encodes directed relationships through colored ribbons, with each arc segment representing a specific domain. Built with D3.js v3, the visualization uses matrix-based data to control ribbon thickness and relies on jQuery and Bootstrap for the surrounding interface. Animated transitions and hover interactions allow users to explore the connections between categories, highlighting the relative strength of various cross-departmental relationships.

Mar 29, 2019
Loading thumbnail…

ICTS 2018

This Sankey diagram visualizes the flow of helpdesk requests through the ICTS service department in 2018, showing how incoming categories like "Servicepunt.in" distribute to various resolution teams such as "Servicepunt.uit" and "Fac. onderzoek.uit." The SVG rendering uses SankeyMATIC-generated paths with colored, semi-transparent links whose stroke widths encode the numeric volume of each transfer, as labeled in the tooltips. The diagram presents a clear hierarchical branching from a single input node to multiple output destinations, allowing immediate comparison of workload proportions across different support areas.

Mar 25, 2019
Loading thumbnail…

2018: Circle Packer ICTS (excl. spam/geannuleerd)

This animated circle-packing visualization displays 2018 ICTS submissions (excluding spam and cancelled entries), sized and nested according to a hierarchical data structure. It inherits its core layout from the R `circlepackeR` package, which generates the circles using a JavaScript implementation of the packing algorithm. The rendering relies on D3.js to compute and draw the circles, with the animation updating the display over time. The data is drawn from a gist, and the code forks from prior blocks on the same topic.

Jan 25, 2019
Loading thumbnail…

2018: ICTS Werktijden Liquid Fill Gauge

Five liquid fill gauges display service working-hours percentages from 2018 ICTS data. Each circle shows a value with an animated wave filling to the corresponding height, using D3 v3 to generate SVG elements. The gauges use configurable wave animation, color schemes, and text positioning. Clicking any gauge triggers a random value update via the returned object’s `update` method, demonstrating the library’s dynamic reloading capability.

Jan 23, 2019
Loading thumbnail…

2018: ICTS Reactietijden Liquid Fill Gauge

Five D3.js v3 liquid fill gauges display response-time metrics from the ICTS service desk, each styled with distinct color schemes and animated wave configurations. The gauges use a custom `liquidFillGauge` function with SVG paths, clipped by wave patterns that rise and animate via D3 scales and linear interpolation. Clicking any gauge triggers an `update` method, randomly regenerating values between 0 and 100. The implementation highlights configurable parameters like wave height, speed, count, and text positioning, with values counting up on load.

Jan 23, 2019
Loading thumbnail…

2018: Reactietijden Liquid Fill Gauge

This visualization shows five liquid fill gauges displaying response times, each with distinct colors and configurations. The gauges update randomly when clicked, with values counting up and animating via wave-like fills. Built with D3 v3 for SVG rendering, it uses custom functions like `loadLiquidFillGauge` and `liquidFillGaugeDefaultSettings` to control wave height, speed, and animation. The `d3.scale.linear` API maps values for both circle and wave paths, while configurable settings adjust text position, color, and percent display.

Jan 22, 2019
Loading thumbnail…

2018: KLASCE: Servicepunt Reactietijden Liquid Fill Gauge

Five liquid-fill gauges display percentage values in animated SVG wave forms, each with distinct colors, wave counts, and text styles. Clicking any gauge triggers an update to a random value, demonstrating the gauge’s dynamic re-rendering. The visualization relies on D3 v3 for SVG generation, path construction for waves, and linear scales for positioning, alongside custom configuration parameters from Curtis Bratton’s Liquid Fill Gauge library for thickness, animation timing, and text placement.

Jan 21, 2019
Loading thumbnail…

2018: KLASCE: Aankoopadvies Werktijden Liquid Fill Gauge

The block displays five liquid fill gauges, each visualizing a single percentage value as a circular, animated water-like fill. The example demonstrates a customizable D3.js (v3) SVG component, where each gauge can be independently configured with distinct colors, wave heights, animation speeds, and text styling. The gauges are interactive: clicking any of them triggers a JavaScript update function that randomly changes the displayed value, and the gauge smoothly re-animates to the new percentage. The code relies on the `loadLiquidFillGauge` function and the `liquidFillGaugeDefaultSettings` configuration object to build each gauge using SVG paths and CSS animations.

Jan 15, 2019
Loading thumbnail…

2018: KLASCE: Servicepunt Werktijden Liquid Fill Gauge

Five liquid fill gauges display percentage values within animated, circular containers. Each gauge uses a wave pattern to represent the fill level, with configurable colors, wave heights, animation speeds, and text styling. The visualization is built with D3.js v3, using SVG and JavaScript to render and animate the gauges. Clicking any gauge triggers an update method that randomly changes its displayed value, demonstrating the library's dynamic updating capability.

Jan 15, 2019
Loading thumbnail…

2018: KLASCE: Half Donut

This example shows a half-donut chart displaying a single percentage value, 80%, with a light blue filled arc against a gray background. The chart is rendered using D3 v3’s SVG creation, with a pie layout defining a half-circle angular range and an arc generator for the donut shape. The code sets the arc’s outer and inner radii, positions the label above the center, and colors the two data segments using a simple two-color array. The data is hardcoded as a proportion, with the percentage text computed and displayed prominently.

Jan 14, 2019
Loading thumbnail…

2018: Reactietijden horizontal bars

This visualization shows the 2018 response times for different priority categories using animated horizontal bars. The data is loaded from a local JSON file and rendered using D3.js v3 with SVG. Each bar is a bullet chart representing response times for critical, high, medium, low, and total categories. The code uses D3’s bullet chart plugin, which includes ranges, markers, and measures, and features a transition effect when the "Update" button is clicked, randomizing the displayed values with `d3.transition` and a linear scale.

Jan 14, 2019
Loading thumbnail…

2017: Werktijden horizontal bars

Horizontal bullets compare actual versus target working times for five priority categories. Ranges, measures, and markers render as SVG rects and lines, driven by the custom d3.bullet plug-in. A button triggers a one-second transition, applying randomize() to recalculate each datum’s values. Data loads from bullets.json, with each category showing a title and subtitle.

Jan 14, 2019
Loading thumbnail…

2018: Radial Cluster Dendrogram

A radial cluster dendrogram displays the Flare class hierarchy as a circular node-link tree, with leaf nodes aligned at the outer edge and internal package nodes placed inward. The visualization uses `d3.stratify` to convert CSV data into a hierarchy and `d3.cluster` with a radial size to arrange nodes. Curved links are drawn as SVG paths, while circles and rotated text labels mark nodes. The dataset is derived from the Flare visualization toolkit, provided by Jeff Heer.

Jan 14, 2019
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.

Jan 14, 2019
Loading thumbnail…

Sequences sunburst

This sunburst diagram summarizes sequences of ICT ticket categories, showing the hierarchical flow of events from an initial category through subsequent subcategories to a final outcome. The visualization uses a D3.js partition layout and arc rendering to display the data, with a breadcrumb trail that emphasizes the selected path and fades non-ancestor segments. Percentages are displayed explicitly in the center to clarify the relative sizes of each sequence, despite the radial distortion. The code imports visit-sequences.csv and builds the hierarchy using `d3.csv.parseRows` and `d3.layout.partition`.

Jan 10, 2019
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.

Jan 10, 2019
Loading thumbnail…

2017: Circle Packer ICTS excl. spam/geannuleerd

This interactive animation visualizes continents and their languages, with circle sizes scaled by the number of countries speaking each language. Built with the circlepackeR R package and D3.js, it uses a hierarchical bubble layout to nest language circles within continent groupings. The data, sourced from a gist, excludes spam and cancelled entries, and renders as an animated, zoomable circle-packing diagram with smooth transitions between levels.

Jan 10, 2019
Loading thumbnail…

Team coherentie: KLASCE

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.

Jan 10, 2019
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.

Jan 9, 2019
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.

Jan 8, 2019
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.

Jan 8, 2019
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.

Jan 8, 2019
Loading thumbnail…

Chord Diagram - ICTS globaal

This chord diagram visualizes the flow of people between different organizational domains (such as HR, ICTS, and Education) based on survey data, using a circular matrix layout. The animation reveals the relationships and transitions between these categories. Built with D3.js v3, it uses chord paths and a matrix to encode the strength of connections, with hover interactions and labels. The data comes from a Deloitte global mobile consumer survey, displayed through a dynamic, rotating view.

Jan 8, 2019
Loading thumbnail…

Chord Diagram - ICTS globaal

This interactive chord diagram visualizes the flow of staff between 27 IT service domains, based on the 2014 Deloitte Global Mobile Consumer Survey data. It shows the proportional relationships and transitions between departments, with each chord representing the volume of movement. The visualization, built with D3 v3 and JavaScript, uses a matrix of values to generate the chord paths and labels around the circular layout. It includes a tooltip functionality and a title overlay, providing a clear view of the interconnections within the organizational structure.

Jan 8, 2019
Loading thumbnail…

Sequences sunburst

This D3.js sunburst visualization summarizes sequences of event paths, such as user navigation through a website, using hierarchical partition layout. It displays paths from root to leaf with colored arcs and an interactive breadcrumb trail that appears on hover, showing the current sequence and its percentage of the total. The code loads CSV data with `d3.csv.parseRows`, builds a hierarchy, and uses `d3.layout.partition` and `d3.svg.arc` for rendering, with transitions fading non-ancestor segments.

Jan 8, 2019
Loading thumbnail…

Sequences sunburst

A D3 sunburst visualization shows sequences of ICT support ticket events, with each arc representing a step in a path from the root “ICTS tickets” to leaf categories like “Servicepunt” or “Datacenter.” Hovering over a segment fades non-ancestor paths and displays a breadcrumb trail above the chart, along with the percentage of total sequences that follow that route. The chart loads data from a CSV file using `d3.csv.parseRows`, builds a hierarchy with `d3.layout.partition`, and renders arcs with `d3.svg.arc`. Animated transitions restore full opacity on mouseleave.

Jan 8, 2019
Loading thumbnail…

Sequences sunburst

The Sequences sunburst visualizes event-sequence frequencies as a radial partition layout, with each arc segment representing a step in a navigation path and its angular size proportional to the count. Interactive hover highlights the ancestors of a selected sequence and displays a breadcrumb trail with the percentage of the total. Built with d3.v3, the code uses `d3.layout.partition`, `d3.svg.arc`, `d3.csv.parseRows`, and `d3.text` to load the `visit-sequences.csv` data. A legend and toggleable visibility control the color-coded categories, while a fade transition restores full opacity on mouseleave.

Jan 8, 2019
Loading thumbnail…

SANKEY Experiment

This interactive Sankey diagram, built with D3.js v4, visualizes the flow of "Widgets" between five nodes. Users can click and drag the rectangular nodes in both horizontal and vertical directions, which triggers a recalculation of the diagram's layout and redraws the connecting, curved links. The example leverages a Sankey plugin adapted from Jason Davies and loads its node and link data from a local JSON file, with node colors generated from a categorical color scheme.

Jan 8, 2019
Loading thumbnail…

2017: Stretched Chord Diagram - Start Academiejaar ICTS Servicepunt

This visualization shows the flow of incoming versus resolved IT support tickets across different departments at a service desk, with tickets moving from the left half of the chart to the right. It uses a stretched chord diagram where the two halves are pulled apart along the x-axis to emphasize direction. The code relies on D3 v3’s `d3.layout.chord` with a custom layout function to sort chords and reduce overlap, and a custom `stretchedChord` function that modifies the SVG arc and curve paths to apply the pull-out effect. An animated linear gradient travels across the chords, and hover interactions dim non-selected links.

Jan 8, 2019
Loading thumbnail…

Chord Diagram

A chord diagram visualizes package-level dependencies within the Flare class hierarchy, with each arc representing a package and chords showing import relationships between and within packages. The diagram groups classes by their parent package, revealing total import counts and circular dependencies such as between *vis.data* and *vis.events*. Built with D3 v3, it uses `d3.layout.chord` and `d3.svg.chord` to compute and render the matrix, with arcs drawn via `d3.svg.arc` and colors from ColorBrewer’s categorical scale. Data comes from a JSON file listing class imports.

Jan 9, 2018
Loading thumbnail…

Team coherentie: ATAB

A chord diagram visualizes inter-team interaction patterns for the ATAB service, separating source teams on one side from teams that resolve tickets on the other. The visualization uses an animated SVG layout built with D3.js v3, including a custom stretched chord layout that pulls the two halves apart for clarity. Ribbons are dynamically colored with a moving gradient, and the chart adapts its size and spacing based on screen width. Data is embedded as a matrix, with a dummy segment added to emphasize the directional flow of interactions.

Jan 9, 2018
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.

Jan 8, 2018
Loading thumbnail…

Team coherentie: Ceif

This example visualizes team interaction for the Ceif service, distinguishing between the team that initiates a ticket and the team that resolves it. The chord diagram uses a custom layout to include dummy segments for empty space and a custom stretched chord function to pull the two halves of the circle apart. Built with D3 v3, the SVG animation uses linear gradients to create a moving light effect. The underlying matrix data is based on 2,178 respondents.

Jan 5, 2018