New Sample Diagrams: "Start Simple" and "Financial Results"

"Start Simple" gives you just 2 simple gray flows.
- This is probably a better starting point when you're doing something
  which isn't like any of the other samples.

"Financial Results" is an opinionated take on the quarterly-results
graph of a business. Some notable things:
- Costs and Expenses are distinct; color them differently.
- Green/red is not an accessible color pairing. I took the cue for
  these particular colors from Bloomberg's accessible Terminal colors
  (https://www.bloomberg.com/ux/2021/10/14/designing-the-terminal-for-color-accessibility/):
  profit = blue, expense = rust, cost = a grayish variant of their
  default gold.

"Financial Results", "Ranked Election", "Start Simple", and
"Job Search" all now place their labels BEFORE their nodes.
- This ought to make the diagrams easier to read for someone who hasn't
  seen a Sankey before. (Most people are not acclimated to reading &
  tracing labels when they switch positions in the middle.)

Author: nowthis

build/build.css

@@ -373,9 +373,9 @@ th#title {
   border: var(--border-base);
   border-style: dotted;
   border-radius: 0.7em;
-  margin: 0.4em auto 1em;
-  padding: 0.5em;
-  box-shadow: 0.1em 0.1em 0.3em gray;
+  margin: 0 auto 0.5em;
+  padding: 0.2em;
+  box-shadow: 0.1em 0.1em 0.2em gray;
 }
 
 #example_diagrams h4 {

build/constants.js

@@ -77,11 +77,17 @@ const fontMetrics
       name: 'Basic Budget',
       flows: "// Enter Flows between Nodes, like this:\n//         Source [AMOUNT] Target\n\nWages [1500] Budget\nOther [250] Budget\n\nBudget [450] Taxes\nBudget [420] Housing\nBudget [400] Food\nBudget [295] Transportation\nBudget [25] Savings\n\n// You can set a Node's color, like this:\n:Budget #708090\n//            ...or a color for a single Flow:\nBudget [160] Other Necessities #0F0\n\n// Use the controls below to customize\n// your diagram's appearance...",
       settings: {
+        canvas_width: 600,
         node_height: 50,
         node_spacing: 85,
+        node_width: 9,
         font_size: 16,
+        unit_prefix: '',
         layout_style_auto: true,
         flow_outside_in: true,
+        theme_a_radio: true,
+        label_pos_inside: true,
+        justify_ends: false,
         },
     }],
 
@@ -90,11 +96,17 @@ const fontMetrics
       name: 'Ranked Election',
       flows: '// Sample Ranked Election diagram\n\nGH - Round 1 [300000] GH - Round 2\nEF - Round 1 [220000] EF - Round 2\nCD - Round 1 [200000] CD - Round 2\nAB - Round 1 [10000] GH - Round 2\nAB - Round 1 [25000] EF - Round 2\nAB - Round 1 [20000] CD - Round 2\n\nGH - Round 2 [310000] GH - Round 3\nEF - Round 2 [245000] EF - Round 3\nCD - Round 2 [50000] GH - Round 3\nCD - Round 2 [95000] EF - Round 3\n\n// This line sets a custom gray color:\n:No further votes #555 <<\nAB - Round 1 [20000] No further votes\nCD - Round 2 [75000] No further votes',
       settings: {
+        canvas_width: 700,
         node_height: 76,
         node_spacing: 85,
-        font_size: 13,
+        node_width: 9,
+        font_size: 14,
+        unit_prefix: '',
         layout_style_exact: true,
         flow_inherit_from_source: true,
+        theme_a_radio: true,
+        label_pos_before: true,
+        justify_ends: false,
         },
     }],
 
@@ -103,11 +115,55 @@ const fontMetrics
       name: 'Job Search',
       flows: '// Sample Job Search diagram:\n\nApplications [4] Interview\nApplications [9] Rejected\nApplications [4] No Answer\n\nInterview [2] 2nd Interview\nInterview [2] No Offer\n\n2nd Interview [2] Offer\n\nOffer [1] Accepted\nOffer [1] Declined',
       settings: {
+        canvas_width: 600,
         node_height: 50,
         node_spacing: 50,
+        node_width: 5,
         font_size: 14,
+        unit_prefix: '',
         layout_style_auto: true,
         flow_inherit_from_target: true,
+        theme_a_radio: true,
+        label_pos_before: true,
+        justify_ends: false,
+        },
+    }],
+
+    // Sample quarterly financial results:
+    ['financial_results', {
+      name: 'Financial Results',
+      flows: 'Division A [900] Revenue\nDivision B [750] Revenue\nDivision C [150] Revenue\n\nRevenue [1000] Gross Profit\n\nGross Profit [350] Operating Profit\nGross Profit [650] Operating Expenses\n\nOperating Profit [260] Net Profit\nOperating Profit [90] Tax\n\nOperating Expenses [640] S G & Admin\nOperating Expenses [10] Amortization\n\nRevenue [800] Cost of Sales\n\n// Profit - blue\n:Gross Profit #48e <<\n:Operating Profit #48e <<\n:Net Profit #48e <<\n\n// Expenses - rust\n:Operating Expenses #d74 <<\n:Tax #d74 <<\n:S G & Admin #d74 <<\n:Amortization #d74 <<\n\n// Cost - grayish-gold\n:Cost of Sales #e6cc91 <<\n\n// main Revenue node: dark grey\n:Revenue #444',
+      settings: {
+        canvas_width: 800,
+        node_height: 70,
+        node_spacing: 70,
+        node_width: 5,
+        font_size: 13,
+        unit_prefix: '$',
+        layout_style_auto: true,
+        node_use_color: true,
+        flow_use_color: true,
+        label_pos_before: true,
+        justify_ends: true,
+        },
+    }],
+
+    // The most basic diagram:
+    ['simple_start', {
+      name: 'Start Simple',
+      flows: 'a [1] b\na [1] c',
+      settings: {
+        canvas_width: 600,
+        node_height: 50,
+        node_spacing: 80,
+        node_width: 12,
+        font_size: 15,
+        unit_prefix: '',
+        layout_style_auto: true,
+        node_use_color: true,
+        flow_use_color: true,
+        label_pos_before: true,
+        justify_ends: false,
         },
     }],
 

build/index.html

@@ -57,6 +57,23 @@
 <div class="center_basic">
 
 <form id="skm_form" onsubmit="process_sankey(); return false;">
+<div id="example_diagrams" class="text_center">
+<h4>Sample Diagrams &amp; Starting Points:
+<button type="button" id="load_example_simple" onclick="replaceGraph('simple_start'); return false;">Start Simple</button>
+<button type="button" id="load_example_financial_results" onclick="replaceGraph('financial_results'); return false;">Financial Results</button>
+<button type="button" id="load_example_job_search" onclick="replaceGraph('job_search'); return false;">Job Search</button>
+<button type="button" id="load_example_election" onclick="replaceGraph('election'); return false;">Ranked Election</button>
+<!-- <button type="button" id="load_example_energy_all" onclick="replaceGraph('energy_flows_all'); return false;">Energy Flows</button> &nbsp; -->
+<button type="button" id="load_example_basic_budget" onclick="replaceGraph('default_budget'); return false;">Budget (Default)</button>
+</h4>
+
+<p id="replace_graph_warning" style="display: none;">
+<em>This will <strong>erase</strong> your changes. Are you sure?</em><br />
+<input type="hidden" id="demo_graph_chosen" value="" />
+<button type="button" id="replace_graph_yes" onclick="replaceGraphConfirmed(); return false;">Yes, replace the diagram</button>
+<button type="button" id="replace_graph_no" onclick="hideReplaceGraphWarning(); return false;">Cancel</button>
+</p>
+</div>
 
 <table><tr><td>
 
@@ -405,22 +422,6 @@ <h3 class="ui_head" onclick="togglePanel('svg_options');"><span id="svg_options_
 </table>
 
 </td><td id="grapharea">
-<div id="example_diagrams" class="text_center">
-<h4>Sample Diagrams:
-<button type="button" id="load_example_job_search" onclick="replaceGraph('job_search'); return false;">Job Search</button>
-<button type="button" id="load_example_election" onclick="replaceGraph('election'); return false;">Ranked Election</button>
-<!-- <button type="button" id="load_example_energy_all" onclick="replaceGraph('energy_flows_all'); return false;">Energy Flows</button> &nbsp; -->
-<button type="button" id="load_example_basic_budget" onclick="replaceGraph('default_budget'); return false;">Basic Budget (Default)</button>
-</h4>
-
-<p id="replace_graph_warning" style="display: none;">
-<em>This will <strong>erase</strong> your changes. Are you sure?</em><br />
-<input type="hidden" id="demo_graph_chosen" value="" />
-<button type="button" id="replace_graph_yes" onclick="replaceGraphConfirmed(); return false;">Yes, replace the diagram</button>
-<button type="button" id="replace_graph_no" onclick="hideReplaceGraphWarning(); return false;">Cancel</button>
-</p>
-</div>
-
 <!-- SIZE & SPACING & BACKGROUND -->
 
 <div class="expandable_box">