Lab 7: Temporal Data Visualization

1. Dataset

Companies — lab7_assignment_companies.csv
12 rows, one node each: id, company_name, sector (7 sectors) and region (Asia 4, Europe 4, North America 4).
Transactions — lab7_assignment_transactions_60days.csv
367 rows over days 1–60 (2026-01-01 to 2026-03-01), each a day's commercial activity between two companies.
Rhythm
Every relationship recurs on a strict 2-, 3-, 4- or 5-day cycle.

2. Animated temporal network

Show

No relationship opens or closes in this frame.

Loading the network…

3. The whole period at once

Animation maps data time onto animation time, which means the viewer has to remember earlier frames to compare them. These two strips keep the shape of all 60 days on screen while one day is animated.

Loading the daily totals…

\ The dark bar and the caret above it are the current day; with a trailing window selected, the lighter blue bars are the other days in the frame.

4. Which relationship existed when

The one thing the animation cannot hold still is whether a relationship exists at all.Click any cell to jump the animation to that day.

Loading the relationships…

A filled cell means the two companies traded that day; darker means a larger amount. Meanwhile, the grey band spans each relationship's first to last day, and the black outline is the current frame.

Show all 27 relationships as a table

5. Encodings and why they were chosen

Region is the only categorical colour in the network: blue for Asia, orange for Europe, aqua for North America,

Sector is shape (7 d3.symbol types) and the day's traded volume is symbol area, so a company can grow and shrink over the 60 days without changing identity. Area, not radius, is proportional to the dollar value, and idle companies stop at a fixed floor rather than vanishing.

On the links, amount is stroke width and transaction type is dash pattern — type is deliberately not a second color scale, because five more hues competing with three region hues in the same picture is exactly how a node-link diagram becomes unreadable. In the visualization, day-to-day appearance and disappearance is carried by the D3 join itself, fading in on enter and out on exit over a duration tied to the playback speed.

The mental map is preserved by taking positions out of the animation entirely. The force simulation runs once, on the aggregate 60-day network, including all 27 relationships, pulled together in proportion to how often they trade with a collision radius set to the largest a node ever gets. Because position is no longer available to show clustering, clusters are drawn explicitly: a soft blob behind each connected component, and a count in the summary row. Re-settle layout releases the pins and re-runs the simulation if a reader wants a different arrangement.

Trailing 3 days and trailing 7 days exist because the relationships recur on 2- and 3-day cycles: a single day shows only a slice of the structure that is actually in force.

6. The temporal-network questions

1. How does overall connectivity change across the 60 days?

daily strips links per day value per day

It rises, but a trend line would hide the more interesting half of the answer. Averaged over quarters of the period, active relationships go 5.4 → 5.7 → 6.3 → 7.1 per day and traded value goes $76k → $91k → $114k → $143k per day — value nearly doubles while link count grows by a third, so the later relationships are also individually larger.

2. Which companies become more central or more active?

node size relationship grid volume per day

Centrality is handed on rather than accumulated, and it happens in two steps that the grid dates precisely. For example, forFusion Electronics (Technology, Asia) takes it first: on days 21 and 22 it opens three relationships at once — with Harbor Shipping, Lumen Distribution and Juniper Stores — and its volume jumps from $281k in days 1–15 to $623k in days 16–30.

Then on days 41–42 the hub moves west. As such, Cedar Retail opens three (Granite Wholesale, Keystone Materials, Harbor Shipping) and Ion Systems opens three (Delta Components, Apex Textiles, Fusion Electronics) while its dormant link to Juniper Stores revives. Cedar goes $135k → $305k → $666k across the last three quarters and Ion goes $134k → $333k → $838k, finishing as the single largest node by volume — while Fusion, having lost four partners on day 40, falls back to $427k.

3. Are there periods of relatively separate clusters?

cluster outlines clusters count

The network is never a single component on any of the 60 days demonstrated. The fragmentation is worst on the sparse days of the 3-day rhythm: on days 1, 7 and 13 only three relationships are active and they are three disjoint pairs (Cedar with Evergreen, Ion with Lumen, Granite with Harbor), so the largest cluster is two companies and half the network is idle. Those days are also single-continent days: not one Asian company trades.

4. Which relationships appear, disappear or strengthen?

relationship grid link glyphs first / last day

They are the backbone, and they are the cheap ones. Around that backbone there are two clean turnover events. Day 20 closes three (BlueRiver with Delta, Cedar with Fusion, Harbor with Keystone) and sends Ion with Juniper dormant for exactly twenty days.

In the grid this shows as the lower rows being uniformly darker than the upper ones. The backbone itself does not thicken: of the nine that trade continuously, every one is within ±6% of its own first-half average in the second half. The single exception proves the pattern — Ion with Juniper is up 59%, and only because it did not run continuously: it came back after its twenty dark days at the new, higher level. Growth arrives as new links, not as thicker old ones.

5. Does the network become more cross-regional?

region columns region dots cross-regional share

Yes, steadily. Cross-regional links are 63% of the active links in days 1–15, then 65%, 67% and 72% in days 46–60 — and seven of the eight relationships that open on days 41–42 cross a region boundary. Watching the animation with the region columns on, the late frames are visibly more diagonal than the early ones.

7. In-lab exercises (Tasks 1–11)

180 daily observations for eight cities from lab7_historical_weather.csv, parsed with d3.timeParse("%Y-%m-%d") (the parsed rows are also logged to the browser console, per Task 2). A synthetic historical-style dataset: plausible seasonal shape, not meteorology.

Range
Loading the weather data…

Static versus animated (Task 11). The line chart wins outright here, and the two forms in this lab show why. Time is mapped to space, so 180 days are on screen at once. Add Sydney and Toronto and the hemispheres swap in a single glance: Sydney opens January at 20°C and falls to 9.5°C by May while Toronto does the reverse, and the two lines cross in March. Switch the metric to precipitation and Cairo's line is flat on zero for all 180 days while Singapore's totals 919 mm. Any two dates can be compared by eye. The animated marker adds nothing to those questions — it re-tells information the line already holds, one frame at a time, and forces the viewer to remember what it just showed.

Animation earns its place in the assignment instead, because the thing changing there is not a value but a structure: links that exist on Tuesday and not on Wednesday have no natural place on a spatial axis. Even so, the network is not left to animation alone — the two day strips and the relationship grid put the whole period back on screen, which is the overview + animation  + time-controls combination rather than animation by itself.

← Back to home