search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.55k stars 19.61k forks source link

Add support for StreamGraph algorithm #14643

Open villebro opened 3 years ago

villebro commented 3 years ago

What problem does this feature solve?

ECharts currently supports the themeRiver algorithm for drawing area charts centered around the x-axis:

image

Another algorithm, StreamGraph, produces a similar but asymmetrical chart, that often provides a more visually appealing chart, which minimizes the slopes of the series for each point on the x-axis. See an example of the StreamGraph in Apache Superset using the NVD3 plugin:

image

There are two variations of this; the wiggle and weighted_wiggle algorithm (see the following technical paper for details: http://leebyron.com/streamgraph/stackedgraphs_byron_wattenberg.pdf ). E.g. matplotlib implements these https://www.python-graph-gallery.com/252-baseline-options-for-stacked-area-chart: (sym here equals themeRiver)

image

What does the proposed API look like?

These algorithms could be added to the current themeRiver type as rendering options, or potentially introduce a new flowGraph/streamGraph type, and add themeRiver, wiggle and weightedWiggle as rendering options to it.

If this is something the project would interested in introducing, I would be happy to carry out the work for it.

pissang commented 3 years ago

Hi @villebro, Thanks for the very detailed explanation. Correct me if I'm wrong, from the graph, I guess the ticks of y-axis need to be calculated after the stream is layout since the 0 tick is on the baseline. If so, it's not easy for echarts because the architecture limits layout is always after tick calculation. I think we need to do some big underlying change before we integrating streamgraph.

villebro commented 3 years ago

@pissang thanks for the response! If I understand the limitation correctly, I think centering the baseline on 0 is a nice extra, but it doesn't necessarily need to be so (if you look at the NVD3 example, the baseline starts on the total value at x0, which doesn't really make sense). So I'm sure we can compromise on the y-axis values/ticks and address those later if the need comes up.

pissang commented 3 years ago

@villebro Great! That should make things much simpler. But I'm still not sure if we should add this wiggle option in the themeRiver, or in the area chart as NVD3 does, or even extend a new type of series. I think I need to do more research on it.

villebro commented 3 years ago

I think adding it to area would also be a good solution for now, especially if we won't be super pedantic about the y-axis ticks. Maybe a bigger refactor/moving to a new series type can then be left for the next major version. But to reiterate, any solution is fine by me, and happy to help out with the implementation if you feel this is worthwhile pursuing.

pissang commented 3 years ago

The easiest and acceptable way is adding a wiggle option to themeRiver. It will be great if you can implement it to meet your requirement and PR to us.