Skip to content

Commit 4f4e9d3

Browse files
JonasDoesThingsJonasDoesThings
committed
Merge branch 'refs/heads/dev'
2 parents 61612b6 + 3752de4 commit 4f4e9d3

10 files changed

+165
-12
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sankeydiagram.net",
3-
"version": "1.5.0",
3+
"version": "1.5.1",
44
"private": true,
55
"browserslist": [
66
"defaults"

‎src/404.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ <h1 class="font-semibold">SankeyDiagram.net</h1>
4040
<div class="block md:hidden peer-hover:block hover:block relative md:absolute bg-white top-full left-0 rounded-b md:shadow md:border py-2.5 font-light text-sm">
4141
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./how-to/what-is-a-sankey-diagram">What is a Sankey Diagram?</a>
4242
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./how-to/create-a-sankey-diagram">How To create a Sankey Diagram</a>
43+
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./how-to/example-sankey-diagrams">Example Sankey Diagram Visualisations</a>
4344
</div>
4445
</div>
4546
<div class="peer hover:bg-gray-100 h-full flex items-center px-4">

‎src/how-to/create-a-sankey-diagram.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ <h1 class="font-semibold">SankeyDiagram.net</h1>
6868
<div class="block md:hidden peer-hover:block hover:block relative md:absolute bg-white top-full left-0 rounded-b md:shadow md:border py-2.5 font-light text-sm">
6969
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./what-is-a-sankey-diagram">What is a Sankey Diagram?</a>
7070
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./create-a-sankey-diagram">How To create a Sankey Diagram</a>
71+
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./example-sankey-diagrams">Example Sankey Diagram Visualisations</a>
7172
</div>
7273
</div>
7374
<div class="py-1.5 px-3 flex items-center">
@@ -105,7 +106,7 @@ <h1 class="font-semibold">SankeyDiagram.net</h1>
105106
<a class="underline text-accent text-sm" target="_blank" href="/?content=PTAEBcAsEsGdTqAhqAxgewLaYKYDtxk8ATNLABwBsdwdKBPBAcz3QCcdTo8JIdR0AV3DlhAKBCgcSVJFDFoSJmySYAtJW4BrBPFjkcqaADNonBDyj9j7TEkIAiAMoB5AKoAlAMIBRUAG0AQQBZdwA5ABUAXVAIwI8AcR8IhzFYITZUfn8ARgAGPJjwJDYmGjSMrIgAd3QAgGZCiBKy8DFi0poAgDYAViKWrvBaoA&">Open Example Diagram</a>
106107
</div>
107108
</div>
108-
<div>
109+
<div id="auto-calculating-flow-amounts">
109110
<div>
110111
<p class="font-bold text-3xl mb-2">2. Auto-Calculating Flow Amounts ([?]-operator)</p>
111112
<pre>
@@ -126,7 +127,7 @@ <h1 class="font-semibold">SankeyDiagram.net</h1>
126127
<a class="underline text-accent text-sm" target="_blank" href="/?content=M4QwNiBOCeAEDaAmADAXVgIwK4BMDmApgC4BQA9GbEQBYGwBEA/PbAPYAOBkIRrksILLwC2PAJYBjcGDjAsw4AFos7AWDBsheVmIB2eWADdwWAsBLZ8xBI3R5IrCVzFmS9x87MIAzOkMFCIhAMMFd3J0gXYBt0ADNILDEic3jE5IQARjQBdnZQlISk6PgAVnQMEF1KkGAgA=&">Open Example Diagram</a>
127128
</div>
128129
</div>
129-
<div>
130+
<div id="custom-colors">
130131
<div>
131132
<p class="font-bold text-3xl mb-2">3. Sankey Diagram with Custom Colors</p>
132133
<pre>

‎src/how-to/example-sankey-chart-simple-personalfinance-budget-visualisation.png‎

124 KB
Loading

‎src/how-to/example-sankey-diagrams.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta content="width=device-width, initial-scale=1" name="viewport">
5+
6+
<title>Example Sankey Diagram Visualisations | SankeyDiagram.net</title>
7+
<meta content="What can Sankey Diagrams be used for? Check out sankey chart examples and find out how to easily present data." name="description">
8+
<meta content="What can Sankey Diagrams be used for? Check out sankey chart examples and find out how to easily present data." property="og:description">
9+
<meta content="Example Sankey Diagram Visualisations | SankeyDiagram.net" property="og:title" />
10+
<meta content="article" property="og:type" />
11+
<meta content="2024-08-30" property="article:published_time" />
12+
<meta content="https://sankeydiagram.net/how-to/example-sankey-diagrams" property="og:url" />
13+
<meta content="https://sankeydiagram.net/banner.png" property="og:image" />
14+
<meta content="en_US" property="og:locale" />
15+
<meta content="summary" property="twitter:card" />
16+
<meta content="Example Sankey Diagram Visualisations | SankeyDiagram.net" property="twitter:title" />
17+
<meta content="What can Sankey Diagrams be used for? Check out sankey chart examples and find out how to easily present data." property="twitter:description" />
18+
<meta content="@JonasDoesThings" property="twitter:creator" />
19+
<meta content="https://sankeydiagram.net/banner_square.png" property="twitter:image" />
20+
21+
<link href="https://sankeydiagram.net/how-to/example-sankey-diagrams" rel="canonical" />
22+
23+
<meta content="index, follow" name="robots">
24+
<meta charset="UTF-8">
25+
26+
<link href="../manifest.json" rel="manifest">
27+
<link href="../css/index.css" rel="stylesheet">
28+
<link href="../static/favicon.png" rel="icon" type="image/png">
29+
</head>
30+
<body class="min-w-full bg-neutral-100">
31+
<nav aria-label="main navigation" class="bg-white flex flex-row items-stretch px-6 gap-5 min-w-full relative drop-shadow z-10" role="navigation">
32+
<a class="flex flex-row flex-nowrap items-center py-1.5" href="/">
33+
<picture class="h-7 aspect-square mr-1">
34+
<source srcset="../logo.png?as=webp" type="image/webp">
35+
<img alt="sankeydiagram.net logo" height="32" src="../logo.png" width="32">
36+
</picture>
37+
<h1 class="font-semibold">SankeyDiagram.net</h1>
38+
</a>
39+
<button aria-controls="navbar-default" aria-expanded="false" class="navbar-burger peer group -mr-6 ml-auto inline-flex w-11 items-center justify-center text-sm text-gray-500 md:hidden aria-expanded:bg-neutral-200" type="button">
40+
<span class="sr-only">Open main menu</span>
41+
<svg aria-hidden="true" class="w-5 h-5 group-aria-expanded:hidden" fill="none" viewBox="0 0 17 14" xmlns="http://www.w3.org/2000/svg"><path d="M1 1h15M1 7h15M1 13h15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
42+
<svg class="w-6 h-6 hidden group-aria-expanded:block" fill="none" mlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M6 18 18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" /></svg>
43+
</button>
44+
<div class="hidden peer-aria-expanded:block md:flex flex-col md:flex-row absolute top-full left-0 md:relative bg-white w-full shadow md:shadow-none">
45+
<div class="relative cursor-pointer flex flex-col md:flex-row md:items-center">
46+
<div class="peer hover:bg-gray-100 h-full flex items-center px-4">
47+
<span class="cursor-pointer py-1.5">
48+
About
49+
</span>
50+
<svg class="size-5 ml-1.5 text-accent" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19.5 8.25-7.5 7.5-7.5-7.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
51+
</div>
52+
<div class="block md:hidden peer-hover:block hover:block relative md:absolute bg-white top-full left-0 rounded-b md:shadow md:border py-2.5 font-light text-sm">
53+
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full" href="https://github.com/nxt3AT/sankeydiagram.net" rel="noopener noreferrer" target="_blank">GitHub</a>
54+
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full" href="https://jonasdoesthings.com/" target="_blank">@JonasDoesThings</a>
55+
<hr class="navbar-divider hidden md:block">
56+
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full" href="mailto:jonas@jonasdoesthings.com">Report an issue</a>
57+
<a class="text-gray-400 p-2 px-6 hover:bg-gray-100 inline-block w-full" href="../privacypolicy.html" rel="nofollow" target="_blank">Privacy Policy</a>
58+
</div>
59+
</div>
60+
<div class="relative cursor-pointer flex flex-col md:flex-row md:items-center">
61+
<div class="peer hover:bg-gray-100 h-full flex items-center px-4">
62+
<span class="cursor-pointer py-1.5">
63+
How To
64+
</span>
65+
<svg class="size-5 ml-1.5 text-accent" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19.5 8.25-7.5 7.5-7.5-7.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
66+
</div>
67+
<div class="block md:hidden peer-hover:block hover:block relative md:absolute bg-white top-full left-0 rounded-b md:shadow md:border py-2.5 font-light text-sm">
68+
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./what-is-a-sankey-diagram">What is a Sankey Diagram?</a>
69+
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./create-a-sankey-diagram">How To create a Sankey Diagram</a>
70+
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./example-sankey-diagrams">Example Sankey Diagram Visualisations</a>
71+
</div>
72+
</div>
73+
<div class="py-1.5 px-3 flex items-center">
74+
<a class="py-1.5 px-3 rounded buy-me-a-coffee-button font-bold" href="https://www.buymeacoffee.com/jonasdoesthings" rel="nofollow" target="_blank" title="Support my Work">
75+
<span class="mr-2">🍵</span>Buy Me A Coffee
76+
</a>
77+
</div>
78+
</div>
79+
</nav>
80+
<main class="m-0 flex flex-col w-full p-3 gap-3 min-h-[90vh]">
81+
<h2 class="font-bold text-3xl mt-6" id="what-are-sankey-diagrams">Example Sankey Diagram Data-Visualisations</h2>
82+
<p class="w-full lg:w-10/12 xl:w-9/12 max-w-full">
83+
To better understand use-cases and possibilities of visualisations with Sankey Diagrams, this page has some different examples of data that can be visualized with Sankey Diagrams / Sankey Charts.
84+
<br><br>
85+
See <a class="underline text-accent" href="./create-a-sankey-diagram">How To Create a Sankey Diagram</a> to unlock the potential and storytell with your data by creating easy to understand Sankey-Visualisations, making your complex data more accessible and engaging.
86+
</p>
87+
88+
<article class="mt-3 ml-2 px-2 py-2 border-y-2 border-black/50 w-full lg:w-10/12 xl:w-9/12 max-w-full">
89+
<h3 class="font-bold text-2xl inline-block">Example Personal-Finance Income Budget Sankey Diagram</h3>
90+
<p class="text-sm">
91+
This sankey-visualization depicts an annual personal-finance budget. You can als use it as a sankey chart template and adjust it with your values.<br>
92+
It uses features like <a class="underline text-accent" href="/how-to/create-a-sankey-diagram#auto-calculating-flow-amounts">auto-calculating flow amounts ([?] operator)</a> and <a class="underline text-accent" href="/how-to/create-a-sankey-diagram#custom-colors">custom flow-colors</a>.<br>
93+
</p>
94+
<img alt="example sankey diagram depicting a yearly personal finance budget visualization" class="my-2" src="./example-sankey-chart-simple-personalfinance-budget-visualisation.png">
95+
<span class="text-sm">View Diagram Source: <a class="underline text-accent" href="/?content=PTAEFEA8EMFsAcA2BTUAFZAnAzgewHbSKgBiAlofgMaoAiZ0A5pnAFADqTqA2gOwCsABmEBdUABVoMAEYpQASWq5YPRGUYALAC7NkyfCNaSZcxVWU8ATIIAcNgGxjjybKG6ZkAE0PHos1GYWbvwALACMYSFiAHLIWgpKKm5qmjoe+oasALJk2FTBoqCx8YFJ3Cnauhms9ABuZJ76nq4A1AlaWC7x3GHCgjFxCeZlFWl6BqysxUNB3AD8YgAyZPX4jBCQ8PrYLqzLq+tQW/g7rj0AzEL9oABK+lp7KxSHm9subtaFAKpaZGq/u32zw2x1OwRshQAwtBMI8DiC3mdeoVxCwTvBcJgHkC1giTu9uCEIdcAOKYXA0TBkQFPXFHREFa5oDQEZBw4H0/GuAAFPU+YgAyshEAAzAC00I8k2mpR4C1Ai2QuQArlLFSqPG4Qn0nCxasK9krsKqeNrCgKWfB4M9DRqeGF+RBoL9cQB5ZXYo0mtzEsQk3DA92eu1uS6kgCesFtxs1fCEgq0HjgNvVMftOtIqvwZC03oAZKBaMhzLCpoNZW4HRmBdADq4CwKtBSANbYMslRJWDM3aD4TzKUCN5UikVAA&sankey-settings-separators=true&sankey-settings-suffix=%24&sankey-settings-colorscheme=4&sankey-settings-flow-opacity=45&sankey-settings-sort-nodes-by-linenumber=true&sankey-settings-canvas-width=2300&sankey-settings-canvas-height=1150">Edit This Diagram</a></span>
96+
</article>
97+
</main>
98+
99+
<footer class="text-center mt-6">
100+
<p>
101+
<strong>Sankey Diagram Generator</strong> provided by <a class="text-accent" href="https://jonasdoesthings.com/" target="_blank"><strong>JonasDoesThings</strong></a> and <a class="text-accent" href="https://github.com/nxt3AT/sankeydiagram.net/" rel="nofollow" target="_blank">Open Source contributions</a>.
102+
</p>
103+
</footer>
104+
105+
<script src="../js/gui.js" type="module"></script>
106+
</body>
107+
</html>

‎src/how-to/what-is-a-sankey-diagram.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ <h1 class="font-semibold">SankeyDiagram.net</h1>
6868
<div class="block md:hidden peer-hover:block hover:block relative md:absolute bg-white top-full left-0 rounded-b md:shadow md:border py-2.5 font-light text-sm">
6969
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./what-is-a-sankey-diagram">What is a Sankey Diagram?</a>
7070
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./create-a-sankey-diagram">How To create a Sankey Diagram</a>
71+
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./example-sankey-diagrams">Example Sankey Diagram Visualisations</a>
7172
</div>
7273
</div>
7374
<div class="py-1.5 px-3 flex items-center">
@@ -87,6 +88,7 @@ <h2 class="font-bold text-3xl mt-6" id="what-are-sankey-diagrams">1. What are Sa
8788
</p>
8889
<div class="my-2">
8990
<img alt="example sankey diagram" class="max-w-xl" src="./create-a-sankey-diagram-example-automatic-calculation.png" />
91+
<p>You can also check out <a class="underline text-accent" href="./example-sankey-diagrams.html">the chart-examples page</a> for inspiration.</p>
9092
</div>
9193
<p>
9294
<b>Fun Fact:</b> Sankey Diagrams are named after Irish Captain Matthew Henry Phineas Riall Sankey who used this visualization back in 1809.

‎src/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ <h1 class="font-semibold">SankeyDiagram.net</h1>
6868
<div class="block md:hidden peer-hover:block hover:block relative md:absolute bg-white top-full left-0 rounded-b md:shadow md:border py-2.5 font-light text-sm">
6969
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./how-to/what-is-a-sankey-diagram">What is a Sankey Diagram?</a>
7070
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./how-to/create-a-sankey-diagram">How To create a Sankey Diagram</a>
71+
<a class="p-2 px-6 hover:bg-gray-100 inline-block w-full text-nowrap" href="./how-to/example-sankey-diagrams">Example Sankey Diagram Visualisations</a>
7172
</div>
7273
</div>
7374
<div class="py-1.5 px-3 flex items-center">
@@ -144,6 +145,8 @@ <h1 class="font-semibold">SankeyDiagram.net</h1>
144145
<input class="settings-input sankey-settings-node-text-background-opacity" max="100" min="0" type="range" value="0">
145146
</div>
146147
<label for="sankey-settings-labelabove">Labels Above Nodes </label><input class="settings-input" id="sankey-settings-labelabove" type="checkbox">
148+
<br>
149+
<label for="sankey-settings-sort-nodes-by-linenumber">Sort Nodes by Line Number </label><input class="settings-input" id="sankey-settings-sort-nodes-by-linenumber" type="checkbox">
147150

148151
<div class="divider">Advanced</div>
149152
<label for="sankey-settings-canvas-width">Canvas Width </label><input type="number" class="settings-input" id="sankey-settings-canvas-width" value="1920">

‎src/js/d3-sankey-diagram/src/sankey.js‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import { sum } from 'd3-array'
55
import assignRanks from './assignRanks/index.js'
6-
import sortNodes from './sortNodes/index.js'
6+
import defaultSortNodes from './sortNodes/index.js'
77
import { addDummyNodes, removeDummyNodes } from './sortNodes/dummy-nodes.js'
88
import nestGraph from './sankeyLayout/nest-graph.js'
99
import positionHorizontally from './sankeyLayout/horizontal.js'
@@ -69,6 +69,7 @@ export default function sankeyLayout () {
6969
var maxIterations = 25 // XXX setter/getter
7070
var nodePosition = null
7171
var sortPorts = defaultSortPorts
72+
var sortNodes = defaultSortNodes
7273

7374
// extent
7475
var x0 = 0
@@ -240,6 +241,18 @@ export default function sankeyLayout () {
240241
return sortPorts
241242
}
242243

244+
sankey.sortNodes = function (x) {
245+
if(arguments.length) {
246+
if(x == null) {
247+
sortNodes = defaultSortNodes;
248+
} else {
249+
sortNodes = required(x);
250+
}
251+
return sankey;
252+
}
253+
return sortNodes;
254+
}
255+
243256
// sankey.scaleToFit = function (graph) {
244257
function maybeScaleToFit (G, nested) {
245258
if (scale !== null) return
@@ -369,13 +382,13 @@ function setWidths (G, scale) {
369382
node.toElsewhere = (node.toElsewhere || [])
370383
node.fromElsewhere.forEach(link => {
371384
link.dy = link.value * scale
372-
link.source = { id: "__from_elsewhere_" + u }
385+
link.source = { id: '__from_elsewhere_' + u }
373386
link.target = node.data
374387
})
375388
node.toElsewhere.forEach(link => {
376389
link.dy = link.value * scale
377390
link.source = node.data
378-
link.target = { id: "__to_elsewhere_" + u }
391+
link.target = { id: '__to_elsewhere_' + u }
379392
})
380393
})
381394
}
@@ -395,10 +408,10 @@ function addLinkEndpoints (G) {
395408
G.nodes().forEach(u => {
396409
const node = G.node(u)
397410
node.fromElsewhere.forEach(link => {
398-
link.points = [{x: link.x1, y: link.y1, ri: link.r1, d: link.d1, style: "down-right"}]
411+
link.points = [{x: link.x1, y: link.y1, ri: link.r1, d: link.d1, style: 'down-right'}]
399412
})
400413
node.toElsewhere.forEach(link => {
401-
link.points = [{x: link.x0, y: link.y0, ri: link.r0, d: link.d0, style: "right-down"}]
414+
link.points = [{x: link.x0, y: link.y0, ri: link.r0, d: link.d0, style: 'right-down'}]
402415
})
403416
})
404417
}

0 commit comments

Comments
 (0)