Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/geekplux/timeline-sankey

A project to visualize time range series data using the Sankey diagram.
https://github.com/geekplux/timeline-sankey

data-analysis data-science data-visualization sankey sankey-chart sankey-diagram time-series time-series-analysis timeline visualization

Last synced: about 2 months ago
JSON representation

A project to visualize time range series data using the Sankey diagram.

Host: GitHub
URL: https://github.com/geekplux/timeline-sankey
Owner: geekplux
License: bsd-3-clause
Created: 2022-05-26T16:08:10.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2023-05-10T03:24:32.000Z (over 1 year ago)
Last Synced: 2024-10-18T23:00:57.553Z (2 months ago)
Topics: data-analysis, data-science, data-visualization, sankey, sankey-chart, sankey-diagram, time-series, time-series-analysis, timeline, visualization
Language: TypeScript
Homepage: https://timeline-sankey.vercel.app
Size: 2.66 MB
Stars: 92
Watchers: 3
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

# Timeline-Sankey

A project to visualize time range series data using the [Sankey diagram](https://en.wikipedia.org/wiki/Sankey_diagram).

## Features

- Visualization layout:
- **Responsive View**, with automatic resizing, and adaptive layout for mobile or desktop devices.
- **Grid layout** for multiple node series
- Direct link and cross(series) link
- Node title
- Series(column) title in mobile view
- Interactions:
- Hovering over a node highlights the connected nodes and links
- **Zoom** on vertical orientation
- **Filter** by node tags, categories or date range
- Node clicking redirect
- **Swipe** and **Touch** on mobile device view

## Preview

[Online Demo](https://timeline-sankey.vercel.app)

You can play with the demo by tweaking any parameters on right side of the page.

#### Desktop View

![](./preview/desktop.png)

Interaction on desktop view

![](./preview/interaction_desktop.png)

#### Mobile View

More preview images can be found in the [preview folder](./preview).

### Docs

This is not a library, but all parameters are exposed as public properties and which can be changed on the demo page. You can also go through the [index.tsx](./src/pages/index.tsx) to see all properties.

### Visualization Algorithm

- Simple calculation of node position witnin each series(grid, column) to make them side by side as much as possible. So it's not a classical Sankey diagram algorithm like [which d3 is using](https://github.com/d3/d3-sankey)
- Connect nodes with links then
- Calculate node properties when interacting or filtering

## LICENSE