Joris Schelfaut

@JorisSchelfaut·6 public vizzes

Double bar chart - application access and user counts

A double bar chart compares user counts and access counts for six application modules. The chart renders horizontally as diverging bars from a central axis, with user counts extending left and access counts extending right, using D3 v7 with SVG. Each bar’s length is normalized against its respective maximum via a custom utility function, and colors encode intensity using dynamic RGB values. Axis labels include counts in parentheses, and the data is loaded asynchronously from a JSON file.

Oct 20, 2023

Loading thumbnail…

Directed dependency graph

This visualization displays a directed dependency graph of an application ecosystem, showing which modules depend on others through colored circles connected by arrowed links. The graph computes dependency paths from the JSON data and arranges nodes in a layered grid layout based on their dependency depth and relationships. It uses D3 v5’s `d3.json` function to load the data, and renders the visualization as SVG elements, including circles, text labels, and custom arrow markers defined with `markerBoxWidth`, `markerBoxHeight`, and `arrowPoints`. The layout calculates node positions using the dependency structure rather than a simulation.

Oct 20, 2023

Loading thumbnail…

Application dependencies POC (Chord Diagram)

This chord diagram visualizes application dependencies as weighted connections between five software modules, showing how services like Authentication and HR relate to dependent systems like Accounting. The visualization uses an interactive D3 chord layout with animated opacity transitions: hovering over a group highlights its related chords while dimming others, and clicking triggers a callback. Data is loaded from JSON and transformed into a dependency matrix, then processed through `d3.chord()` to generate arc segments and ribbon paths. Colors identify source groups, with tooltips displaying each module’s description.

Oct 20, 2023

Loading thumbnail…

Bar chart - application access counts

This bar chart shows the number of times each of six applications was accessed. It displays the access counts for Authentication, Lab, Sales Inventory, HR, Accounting, and Website, with each bar labeled with both the application name and its corresponding count. The visualization uses D3 v7 to render SVG rectangles, with a linear scale powering the left axis and tick lines, and the bars’ blue color intensity is normalized against the maximum access count. Data is loaded from a JSON file using `d3.json`.

Sep 11, 2023

Loading thumbnail…

Directed cyclic dependency graph (POC)

This visualization presents a directed cyclic dependency graph, using an application ecosystem as its sample dataset. Nodes are arranged in a circular layout, with arrows indicating dependencies between items, where the target node depends on the source. The graph is rendered as an SVG using D3 v5, leveraging the `d3.json` function to load the data and custom functions like `d3.linkVertical()` to draw curved, arrow-headed paths. Node positions and colors are computed from the data structure, and an interactive event object is prepared but not fully utilized in this proof of concept.

Sep 10, 2023

Loading thumbnail…

Relation Graph with d3-force

This example visualizes a small entity-relationship diagram (ERD) of a database schema, showing two tables (FILE and VARIABLE) with their columns as labeled nodes and the foreign-key relationship between them. Drawn with SVG, the graph uses the `d3-force` library’s `forceSimulation`, `forceLink`, and `forceManyBody` to apply a physics-based layout, while the `drag` API enables nodes to be repositioned interactively. Labels are added directly to each node, and the view supports pan and zoom via `d3.zoom`.

Oct 12, 2020