search

borntofrappe / learning-d3

d3.js is vast. Here's a repository filled with projects to master the library, its many modules and powerful features.
4 stars 0 forks source link

Parallel Sets #30

Closed borntofrappe closed 1 year ago

borntofrappe commented 1 year ago

Considering the FIFA world cup I'd think it interesting to focus on how countries fared between editions. Consider a chart similar to a Sankey Diagram, where the nodes are positioned according to the stage of the competition reached in each installment.

borntofrappe commented 1 year ago

Updated goal

Create a visualization similar to Parallel Sets.

The decision follows an update in terms of data, as I grew weary of using the topic of soccer competition and moved toward rugby. The data now focuses on the Six Nations Champsionship, looking specifically at the ranking in the table of the 2000-2022 years.

borntofrappe commented 1 year ago

95c8c57 completes the visualization.

From a left to right sankey diagram.

Parallel Sets Horizontal

I've decided to shift the perspective top to bottom, left to right. I believe the end result more than justifies this decision. It does ask to scroll, but it is the price to pay for more visual clarity. It is far more evident how a country moves throughout the different editions.

Parallel Sets Vertical

With interaction in the form of click event it is possible to highlight the path of a specific team.

borntofrappe commented 1 year ago

An excellent exercise to get practice with the d3-sankey module as well as the filter method on a D3 selection.