@explorable-viz/fluid 0.9.9 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorable-viz/fluid",
-  "version": "0.9.9",
+  "version": "0.10.0",
   "description": "A functional programming language which integrates a bidirectional dynamic analysis, connecting outputs to data sources in a fine-grained way. Fluid is implemented in PureScript and runs in the browser.",
   "main": "index.js",
   "repository": {

package/website/article/convolution/index.html

@@ -82,9 +82,16 @@
 </div>
 
 <script type="module">
-   import { loadFigure, drawCode } from "../shared/load-figure.js"
-   drawCode("../fluid/lib/matrix.fld")()
-   loadFigure("spec.json")("../fluid/convolution.fld")()
+   import { loadFigureSpec, drawCode } from "../shared/load-figure.js"
+   drawCode("../fluid/convolution.fld")()
+   const jsonSpec = {
+      "fluidSrcPath": ["../fluid"],
+      "inputs": [ "inputImage", "filter" ],
+      "query": true,
+      "linking": false
+   }
+
+   loadFigureSpec(jsonSpec)("../fluid/convolution.fld")()
 </script>
 </body>
 </html>

package/website/article/css/styles.css

@@ -4,35 +4,35 @@
 
 @font-face {
    font-family: 'OdiseanTech';
-   src: url('../font/OdiseanTech.woff2') format('woff2');
+   src: url('/font/OdiseanTech.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
 }
 
 @font-face {
    font-family: 'GraphikLight';
-   src: url('../font/GraphikLight.woff2') format('woff2');
+   src: url('/font/GraphikLight.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
 }
 
 @font-face {
    font-family: 'GraphikLightItalic';
-   src: url('../font/GraphikLightItalic.woff2') format('woff2');
+   src: url('/font/GraphikLightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
 }
 
 @font-face {
    font-family: 'GraphikMedium';
-   src: url('../font/GraphikMedium.woff2') format('woff2');
+   src: url('/font/GraphikMedium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
 }
 
 @font-face {
    font-family: 'GraphikMediumItalic';
-   src: url('../font/GraphikMediumItalic.woff2') format('woff2');
+   src: url('/font/GraphikMediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
 }

package/website/article/fluid/1805.02474v1-10.fld

@@ -0,0 +1,46 @@
+import scigen
+import util
+import dataset.scigen._1805_02474v1_10
+
+def model_BiLSTM: model("BiLSTM", tableData)
+def model_LSTM: model("LSTM", tableData)
+def model_2_stacked_BiLSTM: model("2 stacked BiLSTM", tableData)
+def model_3_stacked_BiLSTM: model("3 stacked BiLSTM", tableData)
+def model_S_LSTM: model("S-LSTM", tableData)
+def model_CNN: model("CNN", tableData)
+def model_3_stacked_CNN: model("3 stacked CNN", tableData)
+def mostEfficient:
+   findWithKey_("time_s", minimum(map(lambda y: y.time_s, tableData)), tableData)
+
+"""As shown in Table 3, BiLSTM gives significantly
+   ${trendWord(model_BiLSTM.acc, model_LSTM.acc, betterWorse)}
+   accuracies compared to uni-directional LSTM2, with the training time per epoch
+   ${trendWord(model_BiLSTM.time_s, model_LSTM.time_s, growShrink)} from
+   ${model_LSTM.time_s} seconds to ${model_BiLSTM.time_s} seconds.
+   Stacking 2 layers of BiLSTM gives ${trendWord(model_2_stacked_BiLSTM.acc, model_BiLSTM.acc, improve)}
+   to development results, with a ${trendWord(model_2_stacked_BiLSTM.time_s, model_BiLSTM.time_s, smallerHigher)}
+   time of ${model_2_stacked_BiLSTM.time_s} seconds. 3 layers of stacked BiLSTM
+   ${trendWord(model_3_stacked_BiLSTM.acc, model_BiLSTM.acc, improve)} the results.
+   In contrast, S-LSTM gives a development result of ${model_S_LSTM.acc}%, which is significantly
+   ${trendWord(model_S_LSTM.acc, model_2_stacked_BiLSTM.acc, betterWorse)}
+   compared to 2-layer stacked BiLSTM, with a
+   ${trendWord(model_S_LSTM.param, model_2_stacked_BiLSTM.param, smallerHigher)}
+   number of model parameters and a
+   ${trendWord(model_S_LSTM.time_s, model_2_stacked_BiLSTM.time_s, shorterLonger)}
+   time of ${model_S_LSTM.time_s} seconds. We additionally make comparisons with
+   stacked CNNs and hierarchical attention (Vaswani et al., 2017), shown in Table 3 (the CNN and Transformer rows),
+   ${mostEfficient.model} is the
+   ${rankLabel("most efficient", findIndex("model", "CNN", insertionSort(lambda a, b: a.time_s < b.time_s, tableData)))}
+   among all models compared, with the
+   ${rankLabel("smallest", findIndex("model", "CNN", insertionSort(lambda a, b: a.param < b.param, tableData)))}
+   model size. On the other hand, a 3-layer stacked CNN gives an accuracy of
+   ${model_3_stacked_CNN.acc}%, which is also the
+   ${rankLabel("lowest", findIndex("model", "CNN", insertionSort(lambda a, b: a.time_s < b.time_s, tableData)))}
+   compared with BiLSTM, hierarchical attention and S-LSTM. The
+   ${rankLabel("best", findIndex("model", "S-LSTM+Attention", insertionSort(lambda a, b: b.acc < a.acc, tableData)))}
+   performance of hierarchical attention is obtained by S-LSTM+Attention in terms of both accuracy and efficiency.
+   S-LSTM gives significantly ${trendWord(model_S_LSTM.acc, model_CNN.acc, betterWorse)}
+   accuracies compared with both CNN and hierarchical attention. Table 3 additionally shows the results of
+   BiLSTM and S-LSTM when external attention is used Attention leads to improved accuracies for both BiLSTM and
+   S-LSTM in classification, with S-LSTM still
+   ${trendWord(model_S_LSTM.acc, model_BiLSTM.acc, underOverPerforming)} BiLSTM significantly."""

package/website/article/fluid/bar-chart-line-chart.fld

@@ -0,0 +1,37 @@
+import renewables
+
+def totalFor(c, rows): sum([row.output for row in rows if row.country == c])
+
+def data2015: [row for row in renewables if row.year == 2015]
+
+def countryData: [{
+    x: c,
+    segments: [{ y: "output", z: totalFor(c, data2015) }]
+  } for c in ["China", "USA", "Germany"]]
+
+def series(type, country):
+  [
+    { x: row.year, y: row.output }
+    for year in [2013 .. 2018] for row in renewables
+    if row.year == year if row.energyType == type if row.country == country
+  ]
+
+MultiView({
+  barChart: BarChart({
+    caption: "Total output by country",
+    size: { width: 275, height: 185 },
+    stackedBars: countryData
+  }),
+  lineChart: LineChart({
+    tickLabels: { x: Rotated, y: Default },
+    size: { width: 330, height: 285 },
+    caption: "Output of USA relative to China",
+    plots: [
+      LinePlot({ name: energyType, points: plot })
+      for energyType in ["Bio", "Hydro", "Solar", "Wind"]
+      for plot in [
+        zipWith((lambda p1, p2: { x: p1.x, y: p1.y / p2.y }), series(energyType, "USA"), series(energyType, "China"))
+      ]
+    ]
+  })
+})

package/website/article/fluid/convolution/emboss.fld

@@ -1,5 +1,3 @@
-let filter =
-   let emboss = [[-2, -1, 0],
-                 [-1,  1, 1],
-                 [ 0,  1, 2]] in
-   [| nth2 i j emboss | (i, j) in (3, 3) |];
+def filter:
+  def emboss: [[-2, -1, 0], [-1, 1, 1], [0, 1, 2]]
+  [| nth2(i, j, emboss) for (i, j) in (3, 3) |]

package/website/article/fluid/convolution/testImage.fld

@@ -1,7 +1,9 @@
-let inputImage =
-   let image = [[15, 13,  6, 9, 16],
-                 [12,  5, 15, 4, 13],
-                 [14,  9, 20, 8,  1],
-                 [ 4, 10,  3, 7, 19],
-                 [ 3, 11, 15, 2,  9]] in
-   [| nth2 i j image | (i, j) in (5, 5) |];
+def inputImage:
+  def image: [
+    [15, 13, 6, 9, 16],
+    [12, 5, 15, 4, 13],
+    [14, 9, 20, 8, 1],
+    [4, 10, 3, 7, 19],
+    [3, 11, 15, 2, 9]
+  ]
+  [| nth2(i, j, image) for (i, j) in (5, 5) |]

package/website/article/fluid/convolution.fld

@@ -1,28 +1,30 @@
 import convolution.testImage
 import convolution.emboss
 
-let lookup m n image =
-    let (m_max, n_max) = dims image
-    -- in image!(((m - 1) `mod` m_max) + 1, ((n - 1) `mod` n_max) + 1);
-    in if (m >= 1) `and` (m <= m_max) `and` (n >= 1) `and` (n <= n_max)
-    then image!(m, n)
-    else 0;
+def lookup(m, n, image):
+  def (m_max, n_max): dims(image)
+  if m >= 1 |and| m <= m_max |and| n >= 1 |and| n <= n_max:
+    image!(m, n)
+  else: 0
+  # image!((m - 1 |mod| m_max) + 1, (n - 1 |mod| n_max) + 1)
 
-let matrixSum matr =
-    let (m, n) = dims matr
-    in foldl (+) 0 [ matr!(i, j) | (i, j) <- range (1, 1) (m, n) ];
+def matrixSum(matr):
+  def (m, n): dims(matr)
+  foldl((+), 0, [matr!(i, j) for (i, j) in range((1, 1), (m, n))])
 
-let convolve image kernel =
-    let ((m, n), (i, j)) = (dims image, dims kernel);
-        (half_i, half_j) = (i `quot` 2, j `quot` 2);
-        area = i * j
-    in [| let interMatrix =
-              @doc("""average these to compute value of element (${m'},${n'})""")
-              [| let x = m' + i' - 1 - half_i;
-                     y = n' + j' - 1 - half_j in
-                lookup x y image * kernel!(i', j')
-              | (i', j') in (i, j) |]
-          in matrixSum interMatrix `quot` area
-          | (m', n') in (m, n) |]
-in
-convolve inputImage filter
+def convolve(image, kernel):
+  def ((m, n), (i, j)):
+    (dims(image), dims(kernel))
+  def (half_i, half_j):
+    (i |quot| 2, j |quot| 2)
+  def area: i * j
+
+  def interMatrix(m_, n_):
+    # @doc("""average these values to compute element (${m_},${n_})""")
+    [| kernel!(i_, j_) *
+       lookup(((m_ + i_) - 1) - half_i, ((n_ + j_) - 1) - half_j, image)
+       for (i_, j_) in (i, j) |]
+
+  [| matrixSum(interMatrix(m_, n_)) |quot| area for (m_, n_) in (m, n) |]
+
+convolve(inputImage, filter)

package/website/article/fluid/dataset/renewable-new.json

@@ -0,0 +1,91 @@
+[
+   { "year": 2013, "country": "China", "energyType": "Bio", "output": 6.2 },
+   { "year": 2013, "country": "China", "energyType": "Hydro", "output": 260 },
+   { "year": 2013, "country": "China", "energyType": "Solar", "output": 19.9 },
+   { "year": 2013, "country": "China", "energyType": "Wind", "output": 91 },
+
+   { "year": 2013, "country": "USA", "energyType": "Bio", "output": 15.8 },
+   { "year": 2013, "country": "USA", "energyType": "Hydro", "output": 78 },
+   { "year": 2013, "country": "USA", "energyType": "Solar", "output": 12.1 },
+   { "year": 2013, "country": "USA", "energyType": "Wind", "output": 61 },
+
+   { "year": 2013, "country": "Germany", "energyType": "Bio", "output": 8.1 },
+   { "year": 2013, "country": "Germany", "energyType": "Hydro", "output": 5.6 },
+   { "year": 2013, "country": "Germany", "energyType": "Solar", "output": 36 },
+   { "year": 2013, "country": "Germany", "energyType": "Wind", "output": 34 },
+
+   { "year": 2014, "country": "China", "energyType": "Bio", "output": 10 },
+   { "year": 2014, "country": "China", "energyType": "Hydro", "output": 280 },
+   { "year": 2014, "country": "China", "energyType": "Solar", "output": 28 },
+   { "year": 2014, "country": "China", "energyType": "Wind", "output": 115 },
+
+   { "year": 2014, "country": "USA", "energyType": "Bio", "output": 16.1 },
+   { "year": 2014, "country": "USA", "energyType": "Hydro", "output": 79 },
+   { "year": 2014, "country": "USA", "energyType": "Solar", "output": 18 },
+   { "year": 2014, "country": "USA", "energyType": "Wind", "output": 66 },
+
+   { "year": 2014, "country": "Germany", "energyType": "Bio", "output": 8.8 },
+   { "year": 2014, "country": "Germany", "energyType": "Hydro", "output": 5.6 },
+   { "year": 2014, "country": "Germany", "energyType": "Solar", "output": 38 },
+   { "year": 2014, "country": "Germany", "energyType": "Wind", "output": 39 },
+
+   { "year": 2015, "country": "China", "energyType": "Bio", "output": 10.3 },
+   { "year": 2015, "country": "China", "energyType": "Hydro", "output": 96 },
+   { "year": 2015, "country": "China", "energyType": "Solar", "output": 44 },
+   { "year": 2015, "country": "China", "energyType": "Wind", "output": 145 },
+
+   { "year": 2015, "country": "USA", "energyType": "Bio", "output": 16.7 },
+   { "year": 2015, "country": "USA", "energyType": "Hydro", "output": 80 },
+   { "year": 2015, "country": "USA", "energyType": "Solar", "output": 26 },
+   { "year": 2015, "country": "USA", "energyType": "Wind", "output": 74 },
+
+   { "year": 2015, "country": "Germany", "energyType": "Bio", "output": 7.1 },
+   { "year": 2015, "country": "Germany", "energyType": "Hydro", "output": 5.6 },
+   { "year": 2015, "country": "Germany", "energyType": "Solar", "output": 40 },
+   { "year": 2015, "country": "Germany", "energyType": "Wind", "output": 45 },
+
+   { "year": 2016, "country": "China", "energyType": "Bio", "output": 12 },
+   { "year": 2016, "country": "China", "energyType": "Hydro", "output": 305 },
+   { "year": 2016, "country": "China", "energyType": "Solar", "output": 77 },
+   { "year": 2016, "country": "China", "energyType": "Wind", "output": 169 },
+
+   { "year": 2016, "country": "USA", "energyType": "Bio", "output": 16.8 },
+   { "year": 2016, "country": "USA", "energyType": "Hydro", "output": 80 },
+   { "year": 2016, "country": "USA", "energyType": "Solar", "output": 41 },
+   { "year": 2016, "country": "USA", "energyType": "Wind", "output": 82 },
+
+   { "year": 2016, "country": "Germany", "energyType": "Bio", "output": 7.6 },
+   { "year": 2016, "country": "Germany", "energyType": "Hydro", "output": 5.6 },
+   { "year": 2016, "country": "Germany", "energyType": "Solar", "output": 41 },
+   { "year": 2016, "country": "Germany", "energyType": "Wind", "output": 50 },
+
+   { "year": 2017, "country": "China", "energyType": "Bio", "output": 14.9 },
+   { "year": 2017, "country": "China", "energyType": "Hydro", "output": 313 },
+   { "year": 2017, "country": "China", "energyType": "Solar", "output": 131 },
+   { "year": 2017, "country": "China", "energyType": "Wind", "output": 188},
+
+   { "year": 2017, "country": "USA", "energyType": "Bio", "output": 16.7 },
+   { "year": 2017, "country": "USA", "energyType": "Hydro", "output": 80 },
+   { "year": 2017, "country": "USA", "energyType": "Solar", "output": 51 },
+   { "year": 2017, "country": "USA", "energyType": "Wind", "output": 89 },
+
+   { "year": 2017, "country": "Germany", "energyType": "Bio", "output": 8 },
+   { "year": 2017, "country": "Germany", "energyType": "Hydro", "output": 5.6 },
+   { "year": 2017, "country": "Germany", "energyType": "Solar", "output": 42 },
+   { "year": 2017, "country": "Germany", "energyType": "Wind", "output": 56 },
+
+   { "year": 2018, "country": "China", "energyType": "Bio", "output": 17.8 },
+   { "year": 2018, "country": "China", "energyType": "Hydro", "output": 322 },
+   { "year": 2018, "country": "China", "energyType": "Solar", "output": 176 },
+   { "year": 2018, "country": "China", "energyType": "Wind", "output": 210 },
+
+   { "year": 2018, "country": "USA", "energyType": "Bio", "output": 16.2 },
+   { "year": 2018, "country": "USA", "energyType": "Hydro", "output": 80 },
+   { "year": 2018, "country": "USA", "energyType": "Solar", "output": 62 },
+   { "year": 2018, "country": "USA", "energyType": "Wind", "output": 96 },
+
+   { "year": 2018, "country": "Germany", "energyType": "Bio", "output": 8.4 },
+   { "year": 2018, "country": "Germany", "energyType": "Hydro", "output": 5.6 },
+   { "year": 2018, "country": "Germany", "energyType": "Solar", "output": 45 },
+   { "year": 2018, "country": "Germany", "energyType": "Wind", "output": 59 }
+]

package/website/article/fluid/dataset/scigen/1805.02474v1-10.json

@@ -0,0 +1,17 @@
+[
+  {"model": "LSTM", "time_s": 99.0, "acc": 80.72, "param": 5977},
+  {"model": "BiLSTM", "time_s": 106, "acc": 81.73, "param": 7059},
+  {"model": "2 stacked BiLSTM", "time_s": 207, "acc": 81.97, "param": 9221},
+  {"model": "3 stacked BiLSTM", "time_s": 310, "acc": 81.53, "param": 11383},
+  {"model": "4 stacked BiLSTM", "time_s": 411, "acc": 81.37, "param": 13546},
+  {"model": "S-LSTM", "time_s": 65, "acc": 82.64, "param": 8768},
+  {"model": "CNN", "time_s": 34, "acc": 80.35, "param": 5637},
+  {"model": "2 stacked CNN", "time_s": 40, "acc": 80.97, "param": 5717},
+  {"model": "3 stacked CNN", "time_s": 47, "acc": 81.46, "param": 5808},
+  {"model": "4 stacked CNN", "time_s": 51, "acc": 81.39, "param": 5855},
+  {"model": "Transformer (N=6)", "time_s": 138, "acc": 81.03, "param": 7234},
+  {"model": "Transformer (N=8)", "time_s": 174, "acc": 81.86, "param": 7615},
+  {"model": "Transformer (N=10)", "time_s": 214, "acc": 81.63, "param": 8004},
+  {"model": "BiLSTM+Attention", "time_s": 126, "acc": 82.37, "param": 7419},
+  {"model": "S-LSTM+Attention", "time_s": 87, "acc": 83.07, "param": 8858}
+]

package/website/article/fluid/dataset/scigen/_1805_02474v1_10.fld

@@ -0,0 +1,2 @@
+def tableData:
+   loadJson("dataset/scigen/1805.02474v1-10.json")

package/website/article/fluid/methane.fld

@@ -1 +1 @@
-let methane = loadJson "dataset/methane-emissions.json";
+def methane: loadJson("dataset/methane-emissions.json")

package/website/article/fluid/moving-average.fld

@@ -1,21 +1,24 @@
 import methane
 
-let nthPad n xs =
-      nth (min (max n 0) (length xs - 1)) xs;
-    movingAvg ys window =
-      [ sum [ nthPad n ys | n <- [ i - window .. i + window ] ] / (1 + 2 * window)
-      | i <- [ 0 .. length ys - 1 ] ];
-    movingAvg' rs window =
-      zipWith
-         (fun x y -> {x: x, y: y})
-         (map (fun r -> r.x) rs)
-         (movingAvg (map (fun r -> r.y) rs) window);
-let points =
-      [ { x: r.year, y: r.emissions } | r <- methane, r.type == "Agriculture" ]
-in LineChart {
-   tickLabels: { x: Rotated, y: Default },
-   size: { width: 330, height: 285 },
-   caption: "SSP5-8.5 projected methane emissions (Agriculture)",
-   plots: [ LinePlot { name: "Moving average", points: movingAvg' points 1 },
-            LinePlot { name: "Original curve", points: points } ]
-}
+def nthPad(n, xs):
+  nth(min(max(n, 0), length(xs) - 1), xs)
+def movingAvg(ys, window):
+  [sum([nthPad(n, ys) for n in [i - window .. i + window]]) / (1 + 2 * window) for i in [0 .. length(ys) - 1]]
+def movingAvg'(rs, window):
+  zipWith((lambda x, y: { x: x, y: y }), map((lambda r: r.x), rs), movingAvg(map((lambda r: r.y), rs), window));
+
+def points:
+  [{ x: r.year, y: r.emissions } for r in methane if r.type == "Agriculture"];
+
+LineChart({
+  tickLabels: { x: Rotated, y: Default },
+  size: { width: 330, height: 285 },
+  caption: "SSP5-8.5 projected methane emissions (Agriculture)",
+  plots: [
+    LinePlot({
+      name: "Moving average",
+      points: movingAvg'(points, 1)
+    }),
+    LinePlot({ name: "Original curve", points: points })
+  ]
+})

package/website/article/fluid/non-renewables.fld

@@ -1,23 +1,31 @@
 import nonRenewables
 
-let countries = ["BRA", "EGY", "IND", "JPN"];
-let totalFor year country =
-   let [ row ] = [ row | row <- nonRenewables, row.year == year, row.country == country ]
-   in row.nuclearOut + row.gasOut + row.coalOut + row.petrolOut;
-let stack year = [ { y: country, z: totalFor year country } | country <- countries ];
-let yearData year = [ row | row <- nonRenewables, row.year == year, row.country `elem` countries ]
-in MultiView {
-   barChart: BarChart {
-      caption: "Non-renewables output",
-      size: { width: 275, height: 185 },
-      stackedBars: [ { x: numToStr year, segments: stack year } | year <- [2014..2018] ]
-   },
-   scatterPlot: ScatterPlot {
-      caption: "",
-      points: [ {
-         x: sum [ row.nuclearOut | row <- yearData year ],
-         y: sum [ row.nuclearCap | row <- yearData year ]
-      } | year <- [2014..2018] ],
-      labels: { x: "Nuclear capacity", y: "Nuclear output" }
-   }
-}
+def countries: ["BRA", "EGY", "IND", "JPN"]
+
+def totalFor(year, country):
+  def [row]:
+    [row for row in nonRenewables if row.year == year if row.country == country]
+
+  row.nuclearOut + row.gasOut + row.coalOut + row.petrolOut
+
+def stack(year):
+  [{ y: country, z: totalFor(year, country) } for country in countries]
+
+def yearData(year):
+  [row for row in nonRenewables if row.year == year if row.country |elem| countries]
+
+MultiView({
+  barChart: BarChart({
+    caption: "Non-renewables output",
+    size: { width: 275, height: 185 },
+    stackedBars: [{ x: numToStr(year), segments: stack(year) } for year in [2014 .. 2018]]
+  }),
+  scatterPlot: ScatterPlot({
+    caption: "",
+    points: [{
+      x: sum([row.nuclearOut for row in yearData(year)]),
+      y: sum([row.nuclearCap for row in yearData(year)])
+    } for year in [2014 .. 2018]],
+    labels: { x: "Nuclear capacity", y: "Nuclear output" }
+  })
+})

package/website/article/fluid/nonRenewables.fld

@@ -1,2 +1,5 @@
-let nonRenewables = loadJson "dataset/non-renewables.json";
-let renewables = loadJson "dataset/renewable.json";
+def nonRenewables:
+  loadJson("dataset/non-renewables.json")
+
+def renewables:
+  loadJson("dataset/renewable.json")

package/website/article/fluid/renewables.fld

@@ -0,0 +1 @@
+def renewables: loadJson("dataset/renewable-new.json")

package/website/article/fluid/scigen.fld

@@ -0,0 +1,48 @@
+def ordinalMap: [
+  { lastDigit: 1, suffix: "st" },
+  { lastDigit: 2, suffix: "nd" },
+  { lastDigit: 3, suffix: "rd" }
+]
+
+def ordinal(n):
+  if n <= 0:
+    error("n <= 0 not supported")
+  else:
+    if n < 4:
+      numToStr(n) ++ findWithKey_("lastDigit", n, ordinalMap).suffix
+    else:
+      if n >= 4 |and| n <= 20:
+         numToStr(n) ++ "th"
+      else:
+        error("n > 20 not supported")
+
+def rankLabel(word, n):
+  if n == 1: ""
+  else: ordinal(n) ++ "-" ++ word
+
+def trendWord(n1, n2, compareWord):
+  compareWord(compare(n1, n2))
+
+def growShrink(EQ): "unchanging"
+def growShrink(LT): "shrinking"
+def growShrink(GT): "growing"
+
+def smallerHigher(EQ): "equal"
+def smallerHigher(LT): "smaller"
+def smallerHigher(GT): "larger"
+
+def improve(EQ): "does not further improve"
+def improve(LT): "does not further improve"
+def improve(GT): "further improves"
+
+def shorterLonger(EQ): "equal"
+def shorterLonger(LT): "shorter"
+def shorterLonger(GT): "longer"
+
+def betterWorse(EQ): "equal"
+def betterWorse(LT): "worse"
+def betterWorse(GT): "better"
+
+def underOverPerforming(EQ): "performing the same as"
+def underOverPerforming(LT): "performing worse than"
+def underOverPerforming(GT): "outperforming"

package/website/article/fluid/util.fld

@@ -0,0 +1,39 @@
+def insert(lt, x, []): [x]
+def insert(lt, x, y :| ys):
+  if x |lt| y: x :| y :| ys
+  else:
+    y :| insert(lt, x, ys)
+
+def insertionSort(lt, lst):
+  def helper([], sorted): sorted
+  def helper(x :| xs, sorted):
+    helper(xs, insert(lt, x, sorted))
+
+  helper(lst, [])
+
+def findIndex(fName, x, []): -1
+def findIndex(fName, x, y :| ys):
+  if y[fName] == x: 1
+  else:
+    findIndex(fName, x, ys) + 1
+
+def findWithKey_(fName, x, table):
+  fromSome(findWithKey(fName, x, table))
+
+def findWhere(pred, table):
+  fromSome(find(pred, table))
+
+def model(m, t):
+  findWithKey_("model", m, t)
+
+def maximumBy(f, []):
+  error("Empty list!")
+def maximumBy(f, x :| xs):
+  def helper([], current): current
+  def helper(y :| ys, current):
+    if f(y) > f(current):
+      helper(ys, y)
+    else:
+      helper(ys, current)
+
+  helper(xs, x)

package/website/article/index.html

@@ -17,9 +17,11 @@
       <div></div>
       <h2>Fluid Demo Articles</h2>
 
-      <a href="non-renewables">Non-renewable energy</a><br>
+      <a href="non-renewables">Non-renewable energy stacked bar chart/scatter plot</a><br>
+      <a href="renewables-linked">Non-renewable energy bar chart/line chart</a><br>
       <a href="moving-average">Moving average</a><br>
       <a href="convolution">Matrix convolution</a><br>
+      <a href="scigen-1805.02474v1-10">SciGen 1805.02474v1-10 benchmark</a><br>
    </div>
 </div>
 </body>

package/website/article/moving-average/index.html

@@ -50,9 +50,15 @@
 </div>
 
 <script type="module">
-   import { loadFigure } from "../shared/load-figure.js"
-   loadFigure("spec.json")("../fluid/moving-average.fld")()
+   import { loadFigureSpec } from "../shared/load-figure.js"
+   const jsonSpec = {
+      "fluidSrcPath": ["../fluid"],
+      "inputs": ["methane"],
+      "query": false,
+      "linking": false
+   }
 
+   loadFigureSpec(jsonSpec)("../fluid/moving-average.fld")()
 </script>
 </body>
 </html>

package/website/article/non-renewables/index.html

@@ -39,8 +39,14 @@
 </div>
 
 <script type="module">
-   import { loadFigure } from "../shared/load-figure.js"
-   loadFigure("spec.json")("../fluid/non-renewables.fld")()
+   import { loadFigureSpec } from "../shared/load-figure.js"
+   const jsonSpec = {
+      "fluidSrcPath": ["../fluid"],
+      "inputs": ["nonRenewables"],
+      "query": false,
+      "linking": true
+   }
+   loadFigureSpec(jsonSpec)("../fluid/non-renewables.fld")()
 </script>
 </body>
 </html>