A chord diagram of trips between districts, and its edge cases
Hover a ribbon for its numbers. An empty or all-zero matrix gives groups with no width and no ribbons.
A flow is an amount that moves from one place to another: trips from the district where they start to the one where they end. A chord diagram draws it as ribbons round a circle and a Sankey as bands between columns. A plain matrix often reads better than both.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Sort the matrix's rows and columns by total trips, descending, and redraw it. Which district comes first and which last?
Write validFlows(matrix) that returns an error message for a matrix that is not square, or has a negative or non-numeric value, and null when it is fine.
Explain it without notes
How is a flow matrix read, and what is on its diagonal?
What does a chord's source and target hold in a chord diagram?
When is a matrix a better choice than a chord diagram?
Why must a Sankey graph have no loops, and how do you handle flows that go both ways?
Preview
Console
Nothing logged yet.Expected console output
trips: 10000 | districts: 6 | matrix is 6x6
groups: 6 | ribbons: 21 (6 loops inside a district + 15 pairs)
angle of each group (degrees): Harbour 86, Old Town 87, University 55, Riverside 49, Hillcrest 45, Westpark 22
share of trips that start there: 25% 25% 16% 14% 13% 6%
Old Town -> Harbour 713 | back: 647 | the ribbon is thicker at the end of the bigger flow
all zeros: groups 6 | ribbons drawn 0 | angle of group 0: 0
Westpark with no trips: its arc is 0 degrees, ribbons: 15