Added a ‘Journey’ sample diagram

Author: nowthis

build/constants.js

@@ -212,6 +212,7 @@ labels relativesize 100
       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: {
+        size_h: 600,
         size_w: 600,
         node_w: 12,
         node_h: 50,
@@ -228,6 +229,7 @@ labels relativesize 100
         labels_highlight: 0.8,
         labels_magnify: 100,
         labels_relativesize: 110,
+        labelvalue_appears: 'y',
         labelvalue_position: 'below',
         themeoffset_a: 9,
         value_prefix: '',
@@ -237,8 +239,9 @@ labels relativesize 100
     // Ranked-choice election:
     ['election', {
       name: 'Ranked Election',
-      flows: '// Sample Ranked Election diagram\n\nGH\\nRound 1 [300000] GH\\nRound 2\nEF\\nRound 1 [220000] EF\\nRound 2\nCD\\nRound 1 [200000] CD\\nRound 2\nAB\\nRound 1 [10000] GH\\nRound 2\nAB\\nRound 1 [25000] EF\\nRound 2\nAB\\nRound 1 [20000] CD\\nRound 2\n\nGH\\nRound 2 [310000] GH\\nRound 3\\nProjected Winner\nEF\\nRound 2 [245000] EF\\nRound 3\nCD\\nRound 2 [50000] GH\\nRound 3\\nProjected Winner\nCD\\nRound 2 [95000] EF\\nRound 3\n\n// This line sets a custom gray color:\n:No further votes #555 <<\nAB\\nRound 1 [20000] No further votes\nCD\\nRound 2 [75000] No further votes',
+      flows: '// Sample Ranked Election diagram\n\nGH\\nRound 1 [300000] GH\\nRound 2\nEF\\nRound 1 [220000] EF\\nRound 2\nCD\\nRound 1 [200000] CD\\nRound 2\nAB\\nRound 1 [10000] GH\\nRound 2\nAB\\nRound 1 [25000] EF\\nRound 2\nAB\\nRound 1 [20000] CD\\nRound 2\n\nGH\\nRound 2 [310000] GH\\nRound 3\\nProjected Winner\nEF\\nRound 2 [245000] EF\\nRound 3\nCD\\nRound 2 [50000] GH\\nRound 3\\nProjected Winner\nCD\\nRound 2 [95000] EF\\nRound 3\n\n// This line sets a custom gray color:\n:No further votes #555 <<\nCD\\nRound 2 [75000] No further votes\nAB\\nRound 1 [20000] No further votes',
       settings: {
+        size_h: 600,
         size_w: 700,
         node_w: 10,
         node_h: 76,
@@ -255,6 +258,7 @@ labels relativesize 100
         labels_highlight: 0.8,
         labels_magnify: 105,
         labels_relativesize: 110,
+        labelvalue_appears: 'y',
         labelvalue_position: 'below',
         themeoffset_a: 9,
         value_prefix: '',
@@ -266,6 +270,7 @@ labels relativesize 100
       name: 'Job Search',
       flows: '// Sample Job Search diagram:\n\nApplications [4] 1st Interviews\nApplications [9] Rejected\nApplications [4] No Answer\n\n1st Interviews [2] 2nd Interviews\n1st Interviews [2] No Offer\n\n2nd Interviews [2] Offers\n\nOffers [1] Accepted\nOffers [1] Declined',
       settings: {
+        size_h: 600,
         size_w: 700,
         node_w: 8,
         node_h: 60,
@@ -282,6 +287,7 @@ labels relativesize 100
         labels_highlight: 0.55,
         labels_magnify: 95,
         labels_relativesize: 120,
+        labelvalue_appears: 'y',
         labelvalue_position: 'above',
         themeoffset_a: 6,
         value_prefix: '',
@@ -293,6 +299,7 @@ labels relativesize 100
       name: 'Financial Results',
       flows: '// Sample Financial Results diagram:\n\nDivisionA [900] Revenue\nDivisionB [750] Revenue\nDivisionC [150] Revenue\n\nRevenue [800] Cost of Sales\nRevenue [1000] Gross Profit\n\nGross Profit [10] Amortization\nGross Profit [640] Selling, General &\\nAdministration\nGross Profit [350] Operating Profit\n\nOperating Profit [90] Tax\nOperating Profit [260] Net Profit\n\n// Profit - blue\n:Gross Profit #48e <<\n:Operating Profit #48e <<\n:Net Profit #48e <<\n\n// Expenses - rust\n:Tax #d97 <<\n:Selling, General &\\nAdministration #d97 <<\n:Amortization #d97 <<\n\n// Cost - gray\n:Cost of Sales #bbb <<\n\n// main Revenue node: dark grey\n:Revenue #555',
       settings: {
+        size_h: 600,
         size_w: 900,
         node_w: 20,
         node_h: 75,
@@ -309,6 +316,7 @@ labels relativesize 100
         labels_highlight: 0.8,
         labels_magnify: 113,
         labels_relativesize: 116,
+        labelvalue_appears: 'y',
         labelvalue_position: 'below',
         themeoffset_b: 3,
         value_prefix: '$',
@@ -320,6 +328,7 @@ labels relativesize 100
       name: 'Start Simple',
       flows: 'a [1] b\na [1] c',
       settings: {
+        size_h: 600,
         size_w: 600,
         node_w: 12,
         node_h: 50,
@@ -336,11 +345,42 @@ labels relativesize 100
         labels_highlight: 0.75,
         labels_magnify: 100,
         labels_relativesize: 100,
+        labelvalue_appears: 'y',
         labelvalue_position: 'after',
         value_prefix: '',
         },
     }],
 
+    // Stable, traceable journey:
+    ['journey', {
+      name: 'Journey',
+      flows: '// List each player\'s moves all at once\n// Use one color for each player\n// Use an amount of 1 for each move\n// Check "Using the exact input order" below\n\n// Experiment with reordering players!\n\n:Player 1: #76a\nPlayer 1: [1] 1A #76a\n1A [1] 2C #76a\n2C [1] 3E #76a\n3E [1] Player 1 #76a\n:Player 1 #76a\n\n:Player 2: #e37\nPlayer 2: [1] 1B #e37\n1B [1] 2D #e37\n2D [1] 3E #e37\n3E [1] Player 2 #e37\n:Player 2 #e37\n\n:Player 3: #bb2\nPlayer 3: [1] 1A #bb2\n1A [1] 2D #bb2\n2D [1] 3E #bb2\n3E [1] Player 3 #bb2\n:Player 3 #bb2\n',
+      settings: {
+        size_h: 400,
+        size_w: 600,
+        node_w: 12,
+        node_h: 23,
+        node_spacing: 46,
+        node_border: 0,
+        node_theme: 'none',
+        node_color: '#777777',
+        flow_inheritfrom: 'outside-in',
+        layout_justifyends: 'y',
+        layout_order: 'exact',
+        labelname_size: 16,
+        labelname_weight: 400,
+        labelposition_scheme: 'auto',
+        labelposition_autoalign: 0,
+        labels_highlight: 0.75,
+        labels_magnify: 100,
+        labels_relativesize: 100,
+        labelvalue_appears: 'n',
+        labelvalue_position: 'below',
+        themeoffset_a: 9,
+        value_prefix: '',
+        },
+    }],
+
     // A variation of the inputs for the original d3 energy diagram, now found
     // at https://observablehq.com/@d3/sankey:
     // (This will become another button at some point.)

build/index.html

@@ -50,7 +50,8 @@ <h4>Sample Diagrams &amp; Starting Points:
 <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>
+<button type="button" id="load_example_journey" onclick="replaceGraph('journey'); return false;">Journey</button>
+<button type="button" id="load_example_basic_budget" onclick="replaceGraph('default_budget'); return false;">Budget</button>
 </h4>
 
 <p id="replace_graph_warning" style="display: none;">