Merge branch 'dev'

Author: JonasDoesThings

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sankeydiagram.net",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "private": true,
   "browserslist": [
     "defaults"

package.json

@@ -141,6 +141,7 @@ <h1 class="font-semibold">SankeyDiagram.net</h1>
                     <li><b>You can optionally specify a custom color for each flow.</b></li>
                     <li><b>Colors are specified at the end of each line inside square-brackets.</b></li>
                     <li>You can use a set of common pre-defined color names like "red", "blue", "green", or even enter custom hex-color-codes like "#FF0000".</li>
+                    <li>Find a list of all supported shorthand color names here: <a class="underline text-accent" href="./css-color-names-list-hex-code">list of css color names with hex codees</a></li>
                 </ul>
             </div>
             <div>

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

@@ -117,7 +117,19 @@ <h2 class="font-bold text-3xl" id="what-kind-of-data-is-good-for-sankey-diagrams
     </p>
 
     <hr class="border border-black mt-4" />
-    <h2 class="font-bold text-3xl" id="do-i-need-to-sign-up">5. Do I need to sign-up to create a Sankey Visualisation with sankeydiagram.net?</h2>
+    <h2 class="font-bold text-3xl" id="what-is-a-good-use-for-sankey-diagrams-in-business-finance">5. What is a good use for Sankey Diagrams in business and finance?</h2>
+    <p>Various examples where Sankey Diagrams can easily be used to visualize data, resources, and processes in a business and finance context:</p>
+    <ul class="list-disc list-inside">
+        <li>Visualizing the earnings and expenses (or cash-flow) of a company's fiscal year</li>
+        <li>Visualizing the share of specific sub-budgets in a total budget</li>
+        <li>Showing the number of applicants to a company and where they dropped out in the interview process</li>
+        <li>Explaining the user journey on a website or e-commerce store</li>
+        <li>Plotting the use and loss of resources in an organization</li>
+        <li>Planning your personal-finance budget</li>
+    </ul>
+
+    <hr class="border border-black mt-4" />
+    <h2 class="font-bold text-3xl" id="do-i-need-to-sign-up">6. Do I need to sign-up to create a Sankey Visualisation with sankeydiagram.net?</h2>
     <p>
         <b>No, you don't need to sign-up.</b> You can use everything for free, directly in your browser. No Sign-Up, no Ads.
     </p>

src/how-to/css-color-names-list-hex-code.html

@@ -185,7 +185,7 @@ <h1 class="font-semibold">SankeyDiagram.net</h1>
                 </p>
                 <div class="divider !mt-4">How do I use this tool?</div>
                 <p>
-                    See <a class="underline text-accent" href="/how-to/what-is-a-sankey-diagram">"How To create a Sankey Diagram"</a> for more information and a more complete guide on how to use this Sankey Diagram maker.
+                    See <a class="underline text-accent" href="/how-to/create-a-sankey-diagram">"How To create a Sankey Diagram"</a> for more information and a more complete guide on how to use this Sankey Diagram maker.
                 </p>
                 <div class="divider !mt-4">Examples</div>
                 <ul class="list-disc list-inside">

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

@@ -148,6 +148,7 @@ export const CSS3_NAMES_TO_HEX = {
   'whitesmoke': '#f5f5f5',
   'yellow': '#ffff00',
   'yellowgreen': '#9acd32',
+  'rebeccapurple': '#663399' // non-standard
 };
 
 export const palettePaired = d3.scaleOrdinal(d3.schemePaired);