ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  SANKEY chart?
Posted by JJJ on Apr-14-2012 03:37
Hi Peter,
Still lovin' ChartDirector after something like 10 years, it gives us a great capability.  I'm now getting asked to do some even more complicated things, one of which is a SANKEY diagram.  I have no doubt that with enough time and knowledge that ChartDirector can produce such a diagram.  You guys have so much experience and are so good at utilizing ChartDirector's capabilities that I wanted to check to see if you have mocked up anything to create a SANKEY diagram in VB/VB.NET that could be used as a baseline.

Any assistance is greatly appreciated!

jay

  Re: SANKEY chart?
Posted by Peter Kwan on Apr-17-2012 01:23
Hi JJJ,

I cannot think of an easy way to draw a nice SANKEY diagram with ChartDirector. I think a very basic SANKEY diagram can be draw with 3 shapes:

(a) A sequence of rectangles of decreasing height, flowing from left to right.

(b) An arrow that terminates the rightmost rectangle.

(c) Arrows connecting to the rectangles and pointing downwards.

The (a) and (b) above represents a left to right arrow of decreasing height. The (c) above represents the diversions from the main flow.

After some thoughts, I think the easy way to draw the shapes are to use DrawArea.rect for the rectangles, and DrawArea.polygon for the arrows. (An arrow can be treated as a heptagon.)

Regards
Peter Kwan

  Re: SANKEY chart?
Posted by JJJ on Apr-20-2012 19:41
Thanks for the response, Peter, I'll keep looking into it.

Jay

  Re: SANKEY chart?
Posted by Daniel on Jun-16-2016 15:15
Hi you all ChartDirector users,

... and CD gurus, including Peter

I wonder if anyone here finally used CD to output these so-called SANKEY diagrams. I still struggle to define some sort of chart that can potentially display flows of resources in a figurative way. And Yep, SANKEY diagrams and Minard XIXth century "Russian campaign of 1812" plot (see below), as reported by Tufte are great sources of inspiration.

Any feedback from this community welcome:)

Daniel

https://en.wikipedia.org/wiki/Charles_Joseph_Minard

  Re: SANKEY chart?
Posted by Daniel on Jun-17-2016 00:20
Attachments:
Hi,

Just as a supplement, I was intending to produce some kind of "proof-of-concept" stuff using the great functionality and specifically use CD "line charting" with:
1- General Curve Fitting ie "splines"
2- Inter-Line Coloring for proper color fitting
3- dropping X and Y axes entirely.

Does that make sense to anyone here?

Daniel
sankey.png

  Re: SANKEY chart?
Posted by Daniel on Jun-22-2016 21:23
It looks like there is little chance that I get feed back on Sankey charts within CD.

May I say that I regret it.

Why ?  We were able (and still are!) to implement a lot of distinct new charting material right from with Chartdirector with a some tweaking.

Possibly most CD users are appealed by the standard material provided here. That's of course quite understandable of course. And the product is possibly first and forehand targeted at these standard use cases:)

Daniel

  Re: SANKEY chart?
Posted by Peter Kwan on Jun-24-2016 00:24
Hi Daniel,

The Sankey chart is definitely interesting and we may include it in future versions of ChartDirector. However, due to our limited manpower, it is unlikely to be available in the near term.

We think the Sankey chart is quite different from the charts currently supported by ChartDirector, and is closer to another class of chart for visualizing connections, which includes Sankey, Flow charts, Organization Charts, Network Maps, etc.. These types of charts have no known well-accepted algorithm for automatic layout that works in the general case (unlike a pie chart or bar chart or line chart of which the layout method is well-known). A quality Sankey chart implementation likely requires substantial research effort.

Regards
Peter Kwan

  Re: SANKEY chart?
Posted by Daniel on Jun-24-2016 19:36

>The Sankey chart is definitely interesting and we may include it in future versions of
>ChartDirector. However, due to our limited manpower, it is unlikely to be available in the
>near term.

I understand that quite well.

As you are quite aware - we have discussed that via private emails - I appreciate the great efforts ASE is putting into the product in order to support such a wide array of platforms and programming language.

Your supporting java  + C + Csharp code base is really impressive! The support of vectorial output is a exceptional achievement as well. All this IMHO justify using CD as a plot-building platform including in cases that may require you to build of of the stuff from scratch!

I was expecting other chartdirector "end-users" to come over and deliver their "tips and tricks".

>We think the Sankey chart is quite different from the charts currently supported by >ChartDirector, and is closer to another class of chart for visualizing connections, which >includes Sankey, Flow charts, Organization Charts, Network Maps

We have started to deliver some sort of these charts within CD using "tricks".

Of course I would be quite glad that you could support such a wide array of new base charts. But I we can certainly cheat with the platform and deliver handcrafted stuff on CD. That has been my experience.

By the way I wonder if some enhancement to ASE base primitives could be enough to support more "end-user" creativity?

You understand that I am no great fan of JS-based work on JS-centric toolsets. I definitely prefer to capitalize on the exceptional speed and code-efficiency of CD.

It would be great to be able to have the ability to build semi-customs shapes such as arrows and a few others more easily than via polygons and other kind of truely basic primitives (the drawarea object?).

I can accept that this would not be on your agenda though. Working with restricted manpower is something I am quite aware as well:)

Renewed regards for the great work provided - Daniel

  Re: SANKEY chart?
Posted by Daniel on Jul-09-2016 13:51
To make sure that the kind of Sankey diagrams we are trying to implement are well understood, here are a couple of implementations that would "fit our bill":

http://www.google.com/search?q=sankey+diagram+tableau&biw=1280&bih=689&source=lnms&tbm=isch

I am pretty sure that they can be produced with CD, of course :
1-as multiple base charts objects objects within a "MultiChart"
2-possibly with the support of some additional drawarea operations

IMHO this kind of Sankey boxes is clearly generic tooling that can accommodate large subsets of data-viz issues. Sheer personal opinion, I must admit:)

Thanks for the great API

Daniel

  Re: SANKEY chart?
Posted by daniel on Oct-26-2019 23:10
Attachments:
HI Peter,

I am back with my 2016 question. Still using CD more heavily than back in times by the way. Such a great and robust piece of software engineering:-)

Daniel wrote:

To make sure that the kind of Sankey diagrams we are trying to implement are well understood, here are a couple of implementations that would "fit our bill":

I am pretty sure that they can be produced with CD, of course :
1-as multiple base charts objects objects within a "MultiChart"
2-possibly with the support of some additional drawarea operations

Daniel

Back with sankey or alluvial plots within CD.

Why? Sankey plots are no longer a scientific-orientated device. They have made their way into business plot mainstream. Sometimes a bit over-used or even mis-used at times. But as far as we are concerned, we need them and will definitely try to implement some sort of "alluvial diagrams" within Chartdirector.

The kind of output we are looking in our POC are the kind of standard "alluvial diagram" that are often produced these days (see attachment). But possibly on the heavy side in terms of data content.

We intend to produce them as :
1) a "multichart" supporting object as supporting material,
2) within the multichart we will embed two plain "barcharts" (one on the left, one on right),
3) one XY chart would accommodate multiple splines and the addInterLineLayer would cater for coloring the different colored links.

Looks like pretty simple stuff. And I see no reason not to try. But I never really used addInterLineLayer on CD splines and we expect our output to be data-intensive ie lots of overlayed colored bands.

Do you feel this process could work and deliver attractive output ?

Daniel
sankey_image.png

  Re: SANKEY chart?
Posted by daniel on Oct-28-2019 16:29
Hi Peter,

Just a series of slight corrections on my message on sankey/alluvial diagrams:

Correction: We intend to produce them as :

1) a multichart supporting object as "envelop" material,

2) within the multichart we will embed two series of boxes (one on the left, one on right), these will be provided via calls to the DrawArea.rect primitive,

3) one single XY chart between the two sets of boxes would accommodate multiple sets of pairs of spline layers. The addInterLineLayer would cater for coloring the different colored links.

I hope this is clear enough - two CD charts and some drawarea-level operations - and that I am not missing something simple here!

Regards, Daniel

  Re: SANKEY chart?
Posted by Peter Kwan on Oct-28-2019 18:41
Hi Daniel,

Yes, your method is good.

I might just use one XYChart for both the spline layer and the boxes. The boxes can be drawn using DrawArea.rect on the left and right sides of the plotarea. Basically, it is like (in C#/Java)

XYChart c = .....;
... create spline layers ....

DrawArea d = c.makeChart3();

... draw rectangles using d.rect ....

... output the chart c as usual ...


Hope this can help.

Regads
Peter Kwan

  Re: SANKEY chart?
Posted by daniel on Oct-28-2019 20:44
Hi Peter,

Thanks for the comforting feedback.

Peter Kwan wrote:
I might just use one XYChart for both the spline layer and the boxes.

Sure. You are right. Thanks for the point:-)

We tend to build complex charts with CD now, sometimes heavily embedded . And I have a developped a tendency to over-engineer images at times. Which leads me, except for pretty plain output, to often deliver the output with multi-steps approach i-e embedding the output chart within a larger one acting as an parent envelop chart for "children" objects.

I'll keep it simple until this complexity is required. Certainly not for the current P-O-C design:-)

Keep the good work on CD!

Daniel

  Re: SANKEY chart?
Posted by Eric on Oct-30-2019 22:11
Hello Peter and Daniel,

I'm discovering with interest your discussion.
We are using CD in a .NET project and just got a request for adding Sankey diagrams.
It's not clear for me from your discussion if this diagram will be part of the standard product in a short term, or if this can already be done using existing material and doing some 'tricks' or ...
Thanks for your discussion and feedback.
Kind regards,
Eric

  Re: SANKEY chart?
Posted by daniel on Oct-31-2019 00:54
Hello Eric,

Eric wrote:
It's not clear for me from your discussion if this diagram will be part of the standard product in a short term, or if this can already be done using existing material and doing some 'tricks' or ...

I cannot answer if you can expect the diagram to be part of the standard product in a short term. Peter will certainly answer.

May I just say that as a long-timer user, I found CD to be both flexible and fast. I have been able to deliver quite a number of non-standard charts using both standard high-level objects called charts and low-level primitives. Let us call them drawarea-level.

The latest exchange on this thread was about "how to build them up?" And the answer is essentially as an xychart object containing a number of coupled splinelayers and coloring in between each of them. A couple of added boxes and voilĂ , you get it!

Should you feel comfortable with CD, there is definitely no reason you should not succeed in implementing sankey plots. One thing though, there are definitely many ways into them!

We came to CD for the charts a couple of years ago... We stayed with CD for this great flexible API. The great speed is an essential bonus:-)

Daniel

  Re: SANKEY chart?
Posted by Peter Kwan on Nov-01-2019 02:59
Attachments:
Hi Eric and Daniel,

Whereas ChartDirector does not have a built-in SANKEY chart type, it is not difficult to create this type of chart by joining rectangles with spline curves in ChartDirector. In fact, I have just tried myself and come up with the attached image with the following C# code. Basically, the code draws the splines, then draws the left and right side rectangles.


public void createChart(WinChartViewer viewer, int chartIndex)
{
    // The source (left side) labels and colors
    string[] srcLabels = { "AAA", "BBB", "CCC" };
    int[] colors = { 0x7fff0066, 0x7f00cc00, 0x7f0088ff };

    // The destination (right side) labels
    string[] destLabels = { "XXX", "YYY", "ZZZ", "PPP" };

    // The flow size, from top to bottom at the source side. The array length must
    // equal to srcLabels.Length * destLabels.Length
    double[] data = { 3, 2, 1, 1, 2, 1, 4, 1.4, 2, 1, 0.2, 1 };

    // The chart setup
    XYChart c = new XYChart(700, 800);
    PlotArea p = c.setPlotArea(100, 10, c.getWidth() - 200, c.getHeight() - 20,
        Chart.Transparent, Chart.Transparent, Chart.Transparent, Chart.Transparent);

    // We just use an arbitray scale of 0 to 1
    c.xAxis().setLinearScale(0, 1, Chart.NoValue);
    c.yAxis().setLinearScale(1, 0, Chart.NoValue);
    c.xAxis().setColors(Chart.Transparent, Chart.Transparent);
    c.yAxis().setColors(Chart.Transparent, Chart.Transparent);

    // pre-compute the accumulated data value to be used later
    double[] accData = new ArrayMath(data).acc().result();

    // reserve 5% of plotarea height for the vertical gaps between the rectangles
    double boxGap = 0.05;
    // If we have N rectangles, we must have N - 1 gaps
    double srcGap = boxGap / Math.Max(1, srcLabels.Length - 1);
    double destGap = boxGap / Math.Max(1, destLabels.Length - 1);
    // The remaining 95% is to represent the data range
    double yScaleFactor = (1 - boxGap) / accData[accData.Length - 1];

    // Draw the splines
    double destY = 0;
    for (int d = 0; d < destLabels.Length; ++d)
    {
        for (int s = 0; s < srcLabels.Length; ++s)
        {
            int index = s * destLabels.Length + d;
            double srcY = (accData[index] - data[index]) * yScaleFactor + s * srcGap;
            double[] splineData = { srcY, srcY * 0.85 + destY * 0.15, srcY * 0.15 + destY * 0.85, destY };
            double[] xCoor = { 0, 0.25, 0.75, 1 };

            SplineLayer layer = c.addSplineLayer(splineData, colors[s]);
            layer.addDataSet(new ArrayMath(splineData).add(data[index] * yScaleFactor).result(), colors[s]);
            layer.setXData(xCoor);
            c.addInterLineLayer(layer.getLine(0), layer.getLine(1), colors[s]);

            destY += data[index] * yScaleFactor;
        }

        destY += destGap;
    }

    c.layoutAxes();

    // Draw the source rectangles
    for (int s = 0; s < srcLabels.Length; ++s)
    {
        int index = s * destLabels.Length;
        int topY = c.getYCoor((accData[index] - data[index]) * yScaleFactor + s * srcGap);
        int bottomY = c.getYCoor(accData[index + destLabels.Length - 1] * yScaleFactor + s * srcGap);
        ChartDirector.TextBox t = c.addText(p.getLeftX() - 80, Math.Min(topY, bottomY),
            srcLabels[s], "Arial Bold", 10, 0x000000, Chart.Center);
        t.setSize(80, Math.Abs(bottomY - topY));
        t.setBackground(Chart.Transparent, 0x000000);
    }

    // Draw the destination rectangles
    double topDestY = 0;
    for (int d = 0; d < destLabels.Length; ++d)
    {
        double bottomDestY = topDestY;
        for (int s = 0; s < srcLabels.Length; ++s)
            bottomDestY += data[s * destLabels.Length + d] * yScaleFactor;

        int topY = c.getYCoor(topDestY);
        int bottomY = c.getYCoor(bottomDestY);
        ChartDirector.TextBox t = c.addText(p.getRightX(), Math.Min(topY, bottomY), destLabels[d],
            "Arial Bold", 10, 0x000000, Chart.Center);
        t.setSize(80, Math.Abs(bottomY - topY));
        t.setBackground(Chart.Transparent, 0x000000);

        topDestY = bottomDestY + destGap;
    }

    viewer.Chart = c;
}


Regards
Peter Kwan
sankey.png

  Re: SANKEY chart?
Posted by Peter Kwan on Nov-01-2019 03:07
Hi Eric and Daniel,

Note that the code in my last message is written in a short time and there is no error checking in the code. One thing I immediately think of is may be the code should be modified to not drawing the spline if the data value is 0. The code probably will not work if there are negative data values (which should not be valid for this type of chart) or if all data values are 0 (there would cause division by zero in the code).

Regards
Peter Kwan

  Re: SANKEY chart?
Posted by daniel on Nov-03-2019 21:47
Hi Peter,

Thanks for the helpful sample code and associated image. Definitely easy to produce Sankey plot with CD:-)

May I had add that in some cases, one will want the "splined vectors" to be same-width all along.

CD has a lot of offer in terms of controls of the lines that are produce. In the case of constant-width lines, one should be able to use a "large width" splinelayer instead of of two-lines interlayer colors to produce the output.

This is all plain great!

Daniel