Tag: sample diagrams

New Sample Diagram: “Journey”

There’s a new Sample Diagram to try out at the top of the Build-a-Diagram page: Journey, which demonstrates how you can produce traceable paths for multiple players across multiple stages by using a specific approach to encoding your data.

It was added in February of this year. The conditions required for this kind of diagram to work are:

  • Each flow maintains a single color from start to end.
  • All flows for a particular player must be listed together.
  • The “Arrange the Diagram” control must be set to “Using the exact input order”.

In the sample diagram, every flow for every player has the same value (1), but that condition isn’t absolutely necessary as long as the other conditions are met.

This diagram style can be used for such things as a ranking chart for team standings in a league (sometimes called a “bump chart”).

This post prompted me to go track down when each of the other sample diagram types was added, for comparison:

Before & After: Social header image

There have been many changes to SankeyMATIC in the last year.

One quick snapshot of what’s changed can be seen in the updated header image on social media which shows off new examples of what you can do on the site; the old & new images are attached here so you can see some of the differences, especially in how much easier the labels can be to read.

"Before" image from November 2022: Below the title "Sample Diagram Starting Points", three sample sankey diagrams are shown: "Job Search", "Ranked Election", and "Basic Budget". All of the labels on the sample diagrams are the same small size and are hard to read.
November 2022
"After" image from January 2024: Four sample sankey diagrams are presented as though they were printed out and scattered in a pile. The labels on each appear in a variety of readable sizes and positions, including some nodes where the label is centered. The diagrams depict four scenarios: "Job Search", "Financial Results", "Ranked Election" and "Budget".
January 2024

(adapted from vis.social/@SankeyMATIC)

More on New Label Features

Two upcoming SankeyMATIC Label features about to ship –

New Feature #1 – Placement & sizing

Names and Values can be placed on separate lines and can be given different sizes.

The Job Search example shows how this can allow larger & more readable labels by using the available space differently:

A before & after comparison of a Job Search flow diagram made with mock data using SankeyMATIC. From left to right, the diagram shows a total of 17 Applications which flow into three separate nodes: 4 "No Answer", 9 "Rejected", and 4 "Interview". The "Interview" flow is broken down further as the job search process continues through more stages, ending in 1 offer Accepted and 1 offer Declined. In the 'before' version, all names & values in the labels are on the same line and are shown at the same small size. In the 'after' version, the value for each node is presented on its own line first (using a very large text size), and the name of the node is on a second line. The name's size is smaller than the value's, but it is still a larger text size than the 'before' image. Annotations on the 'after' image read: * 'Values can be placed on their own lines.' * 'Values and names can be different sizes.' * 'This can make more room for your labels to be *larger* and more readable.'

New Feature #2 – Scaling based on value

You can make each label larger or smaller based on the amount it represents.

The Financial Results example shows how this can help draw attention to specific areas of your image:

A before & after comparison of a Financial Results flow diagram made with mock data using SankeyMATIC. In this diagram, 3 company divisions (A, B, and C) join their revenue amounts into a single 'Revenue' node with a value of ,800, which is then split into Gross Profit (,000) and Cost of Sales (0). The Gross Profit amount is further broken down into smaller Expenses of various kinds until a remaining Net Profit of 0 is shown. In the 'before' version, all names and values in the labels are on the same line and are shown at the same small size. In the 'after' version, each name is shown first on its own line and the amount is on a second line using a larger text size. The key difference being shown is that each label's overall size is scaled according to the amount it represents. * The largest node is 'Revenue' (,800), and its label is presented using the largest text size. * The smallest node is 'Amortization' (), and its label's text size is much smaller. * All other nodes in between have labels sized in between those two extremes, scaled according to their own amounts. Annotations on the 'after' image read: * 'Labels can be *magnified* based on their amounts' * 'Largest amount = largest label' (placed next to the 'Revenue' node * 'Smallest amount = smallest label' (placed next to the 'Amortization' node)

Open the ‘Labels‘ panel in the left column to use the new features.

(cross-posted from vis.social/@SankeyMATIC)

December 2021: Sliders and Samples

New Feature: Sliders now produce ‘live’ changes

Appearance controls which use sliders (examples: Curviness, Node Opacity, Flow Opacity, Border Width) now make immediate changes to the diagram as you drag them.

This makes it much easier to observe what each slider is doing and to precisely pick the value you want.

Small screenshot showing the 'Curviness' slider from the SankeyMATIC Build page

Added multiple sample diagrams

Now there are 3 different diagrams you can use as starting points when you first begin.

Note: When you have made any changes to the Inputs field, choosing a new base diagram will alert you that you will lose your changes if you continue.

Thumbnail image of the sample Sankey diagram for a Job Search
Thumbnail image of the sample Sankey diagram for a Ranked Election
Thumbnail image of the sample Sankey diagram for a Basic Budget

Other minor changes

  • In the Inputs section, comments are now indicated using two slashes (“//”) instead of an apostrophe.
    • The double slash is a standard comment marker for many languages and formats, so this will hopefully be more familiar to more people.
    • Typing apostrophes on iOS devices defaulted to the ‘smart’ version, making it require several steps to successfully enter a comment. This change eliminates that difficulty.