Bipartite Network Visualization: Collaborators & Areas

A technical visualization mapping collaborators to their respective areas using a bipartite diagram. Interactive, scalable, and data-driven.

Displaying 10 of 281 collaborators

AreasCollaborators

Technical Specification of the Visualization

This plotter renders a bipartite diagram as an SVG (Scalable Vector Graphics) graphic. Each collaborator is visually connected to their thematic area through smooth curves flowing from left to right. The system uses a Cartesian coordinate space where X represents horizontal position (0 on the left, increasing rightward) and Y represents vertical height (0 at the top, increasing downward).

Section 0: SVG and Coordinate Systems

SVG (Scalable Vector Graphics) is a format that defines graphics using geometric primitives (lines, curves, polygons) instead of pixels. It is scalable — it works at any size without losing quality. SVG uses a 2D Cartesian coordinate system: each point is defined by a pair (X, Y). The origin (0, 0) is at the top-left corner, X increases rightward, and Y increases downward. In this plotter, the SVG has a responsive width and dynamically calculated height.

Example of root SVG element attributes

Parameters:
width/height = dimensions on the page
viewBox = "x y width height" of the drawing space
When stretched/resized, content scales automatically
Coordinate (0,0): top-left corner

Section 1: Partitioning and Cardinality

The visualization begins by grouping all collaborators into their thematic areas. Each area forms a partition — an isolated group that does not overlap with others. The size of each partition is its cardinality, simply the count of how many collaborators belong to that area.

A = {A₁, A₂, ..., A_m}

m = total number of distinct areas

Example:
If there are 3 areas with 5, 8, and 3 collaborators,
the cardinalities are: |A₁| = 5, |A₂| = 8, |A₃| = 3

Section 2: Calculation of Vertical Dimensions

The SVG needs to know its total height. This is calculated using the right column (collaborators) as reference. Each text item occupies a fixed height, and there is a small gap between each one. The total height of the SVG becomes the basis for the entire Y coordinate system.

H_SVG = (n × h) + ((n − 1) × Δ)

n = collaborators, h = text height (px), Δ = gap between items (px)

Concrete example:
10 collaborators, h=20px, Δ=8px
H_SVG = (10 × 20) + (9 × 8) = 272px
The SVG will have 272px total height

Section 3: Vertical Alignment

The left column (areas) does not start at Y=0. Instead, it is centered vertically within the total SVG space. If the right column is taller than the left, there is white space at the top and bottom of the left column — this creates a balanced and symmetric visual effect.

Y_start = (H_total − H_areas) ÷ 2

Initial Y of the left column in the coordinate system

Visual example:
Total height: 272px | Areas height: 150px
Extra space: 272 − 150 = 122px
Distributed: 122 ÷ 2 = 61px above, 61px below

Section 4: Cubic Bézier Curves

Each line connecting a collaborator to their area is a smooth curve, not a straight line. A cubic Bézier curve is defined by 4 points: two endpoints (P₀ and P₃) and two control points (P₁ and P₂) that determine the curvature. The parameter t varies from 0 to 1, tracing the curve smoothly from start to end. Think of control points as "magnets" that pull the curve. The binomial coefficients (1, 3, 3, 1) come from (1−t+t)³, guaranteeing C¹ continuity.

B(t) = (1−t)³P₀ + 3(1−t)²tP₁ + 3(1−t)t²P₂ + t³P₃

t ∈ [0,1]: cubic polynomial interpolation

Control Point Geometry:
P₀ = (0, y_area)
P₁ = (width × 2/3, y_area) — extends horizontally maintaining Y
P₂ = (width × 1/3, y_collaborator) — approaches destination
P₃ = (width, y_collaborator)
Effect: Ratio 2/3 and 1/3 creates smooth curvature that does not oscillate

Section 5: Chromatic Distribution

Each thematic area receives a unique color using sinusoidal waves. The three waves (R, G, B) are phase-shifted by 120° (2π/3), creating a smooth rotation in the RGB spectrum. As h increases from 0 to 1, you sweep a complete rainbow (red → green → blue → red). The 2π/3 radian (120°) phase shift distributes the three components uniformly on the color wheel, avoiding desaturated consecutive colors and maximizing perceptual contrast between adjacent areas.

R = ⌊127·sin(2πh) + 128⌋

G = ⌊127·sin(2πh + 2π/3) + 128⌋

B = ⌊127·sin(2πh + 4π/3) + 128⌋

Practical example:
h = i ÷ m (0 = area 1, 1 = last area)
For 5 areas: h = {0, 0.2, 0.4, 0.6, 0.8}
h=0: sin(0)=0 → RGB=(128,64,64) reddish
h=0.2: phase-shifted → distinct colors
h=0.4: green dominates
Property: Each h generates unique color; neighbors have maximum contrast

Section 6: Lexicographic Ordering

All collaborators are sorted alphabetically by name. This sorting is deterministic — it always produces the same result. Each collaborator receives an index (0, 1, 2, ...), and this index is used to calculate their Y position in the SVG. A collaborator at index 5 will always appear at the same vertical position.

Y_{item_j} = j × (h + Δ)

Y in right column for j-th ordered collaborator

Practical example:
h = 20px (text height)
Δ = 8px (spacing)
Collaborator at index 5:
Y = 5 × (20 + 8) = 140px
(measured from Y=0 at the top)

Section 7: Computational Complexity

The algorithm executes in three phases: (1) Sorting n collaborators, (2) Layout calculating m groups and their Y positions, (3) Rendering generating n Bézier curves. Sorting dominates total time. This means doubling the number of people worsens performance logarithmically. Using quicksort or mergesort with lexicographic comparator is essential; radix-sort on strings is impractical without preprocessing. O(n) alternative exists (counting sort if names are numeric) but sacrifices readability.

Lexicographic sorting:

O(n log n)

Layout calculation (groups):

O(n + m)

SVG rendering:

O(n)

Total (dominated):

O(n log n)

Real example:
n=1000, m=10:
Sorting: ~10,000 comparisons
Layout: 1,000 + 10 iterations
Rendering: 1,000 SVG paths
Practical limit: ~100k collaborators in browser (time ≈ 1-2s, SVG DOM overhead)

Section 8: Integration: From Data to Visualization

How it all connects: Data starts disorganized (collaborator → area). Partitioning (Section 1) groups them by area. Lexicographic Ordering (Section 6) defines Y position of each collaborator (right). Vertical Alignment (Section 3) centers areas (left) in the same space. Chromatic Distribution (Section 5) assigns unique color to each area. Bézier Curves (Section 4) connect visually: they exit from area Y position, arrive at collaborator Y position, colored by area. SVG (Section 0) encapsulates everything in a scalable coordinate system. Architectural design: Each section is independent and reusable — you can change how colors are generated, or how curves are drawn, without affecting partitioning or sorting.

Data Flow:

DB → Partition → Sort → Layout → Colors → Curves → SVG

Trace example (1 collaborator):
1. Input: cv_name="Alice", cv_area_pt="Design"
2. Partition: "Design" is index 1 of 5 areas
3. Sort: "Alice" is at index 7 of 100 collaborators
4. Layout: Alice at Y=140px (right), Design at Y=80px (left)
5. Color: Design (index 1) = h=0.2 → vibrant RGB color
6. Curve: Bézier from (0, 80) to (800, 140) with Design color
7. SVG: Path rendered in viewBox, scalable 100%
Visual result: Colored line connecting Design to Alice