@explorable-viz/fluid 0.12.3 → 0.12.4

package/output-es/App.View.MatrixView/foreign.js

@@ -0,0 +1,182 @@
+"use strict"
+
+import * as d3 from "d3"
+
+function setSelection_ (
+   {
+      hBorderStyles,
+      vBorderStyles,
+      eventListener,
+      withElement
+   },
+   {
+      selState,
+      selClasses,
+      selClassesFor
+   },
+   { matrix },
+   select,
+   rootElement
+) {
+   return () => {
+      var listener = eventListener(withElement(select))()
+      rootElement.selectAll('.matrix-cell').each(function (cellRect) {
+         const sel = selState(matrix.cells[cellRect.i][cellRect.j])
+         d3.select(this) // won't work inside arrow function :/
+            .classed(selClasses, false)
+            .classed(selClassesFor(sel), true)
+            .on('mousedown', e => { listener(e) })
+            .on('mouseenter', e => { listener(e) })
+            .on('mouseleave', e => { listener(e) })
+      })
+
+      rootElement.selectAll('.matrix-cell-text').each(function (cellText) {
+         const sel = selState(matrix.cells[cellText.i][cellText.j])
+         d3.select(this) // won't work inside arrow function :/
+            .classed(selClasses, false)
+            .classed(selClassesFor(sel), true)
+      })
+
+      rootElement.selectAll('.matrix-cell-hBorder').each(function (hBorder) {
+         d3.select(this)
+            .attr('style', hBorderStyles(matrix)(hBorder))
+      })
+
+      rootElement.selectAll('.matrix-cell-vBorder').each(function (vBorder) {
+         d3.select(this)
+            .attr('style', vBorderStyles(matrix)(vBorder))
+      })
+   }
+}
+
+function createElement_ (
+   { val },
+   { title, matrix },
+   parent
+) {
+   return () => {
+      const strokeWidth = 0.5
+      const highlightStrokeWidth = 0.5
+      const highlightStrokeColor = 'blue'
+      const w = 30, h = 30
+
+      const [width, height] = [w * matrix.j + highlightStrokeWidth, h * matrix.i + highlightStrokeWidth]
+      const hMargin = w / 2
+      const vMargin = h / 2
+
+      const rootElement = parent
+         .append('svg')
+
+      rootElement
+         .attr('width', width + hMargin)
+         .attr('height', height + vMargin)
+
+      rootElement
+         .append('text')
+         .text(title === "intermediate" ? " " : title)
+         .attr('x', hMargin / 2)
+         .attr('y', vMargin / 2)
+         .attr('class', 'title-text')
+         .attr('dominant-baseline', 'middle')
+         .attr('text-anchor', 'left')
+
+      // group for the whole matrix (rects and texts)
+      const matrixGrp = rootElement
+         .append('g')
+         .attr('transform', `translate(${highlightStrokeWidth / 2 + hMargin / 2}, ${highlightStrokeWidth / 2 + vMargin})`)
+         // these will be inherited by text elements
+         .attr('fill', 'currentColor')
+         .attr('stroke', 'currentColor')
+         .attr('stroke-width', '.25') // otherwise setting stroke makes it bold
+
+      // group for each row of cells
+      const rowGrp = matrixGrp
+         .selectAll('g')
+         .data([...matrix.cells.entries()].map(([i, ns]) => { return { i, ns } }))
+         .enter()
+         .append('g')
+
+      const cells = rowGrp
+         .selectAll('g')
+         .data(({ i, ns }) => [...ns.entries()].map(([j, n]) => { return { i, j, n } }))
+         .enter()
+
+      cells
+         .append('rect')
+         .attr('x', ({j}) => j * w)
+         .attr('y', ({i}) => i * h)
+         .attr('width', w)
+         .attr('height', h)
+         .attr('class', 'matrix-cell')
+         .attr('stroke-width', strokeWidth)
+
+      cells
+         .append('text')
+         .text(({n}) => val(n))
+         .attr('x', ({j}) => (j + 0.5) * w)
+         .attr('y', ({i}) => (i + 0.5) * h)
+         .attr('class', 'matrix-cell-text')
+         .attr('text-anchor', 'middle')
+         .attr('dominant-baseline', 'middle')
+         .attr('pointer-events', 'none')
+
+      // group for all highlight borders
+      const bordersGrp = rootElement
+         .append('g')
+         .attr('transform', `translate(${highlightStrokeWidth / 2 + hMargin / 2}, ${highlightStrokeWidth / 2 + vMargin})`)
+         .attr('fill', 'currentColor')
+         .attr('stroke', highlightStrokeColor)
+         .attr('stroke-width', highlightStrokeWidth)
+
+      const hBordersGrp = bordersGrp
+         .append('g')
+
+      // group for each row of horizontal borders
+      const hBordersRowGrps = hBordersGrp
+         .selectAll('g')
+         .data(d3.range(matrix.i + 1))
+         .enter()
+         .append('g')
+
+      hBordersRowGrps.each(function(d) {
+         d3.select(this)
+            .selectAll('line')
+            .data(d3.range(1, matrix.j + 1).map(j => ({ i: d, j })), d => d.j)
+            .enter()
+            .append('line')
+            .attr('x1', ({j}) => (j - 1) * w)
+            .attr('y1', ({i}) => i * h)
+            .attr('x2', ({j}) => j * w)
+            .attr('y2', ({i}) => i * h)
+            .attr('class', 'matrix-cell-hBorder')
+      });
+
+      const vBordersGrp = bordersGrp
+         .append('g')
+
+      // group for each row of vertical borders
+      const vBordersRowGrps = vBordersGrp
+      .selectAll('g')
+      .data(d3.range(1, matrix.i + 1), i => i)
+      .enter()
+      .append('g')
+
+      vBordersRowGrps.each(function(d) {
+         d3.select(this)
+            .selectAll('line')
+            .data(d3.range(matrix.j + 1).map(j => ({ i: d, j })))
+            .enter()
+            .append('line')
+            .attr('x1', ({j}) => j * w)
+            .attr('y1', ({i}) => (i - 1) * h)
+            .attr('x2', ({j}) => j * w)
+            .attr('y2', ({i}) => i * h)
+            .attr('class', 'matrix-cell-vBorder')
+      });
+
+      return rootElement
+   }
+}
+
+export var setSelection = x1 => x2 => x3 => x4 => x5 => setSelection_(x1, x2, x3, x4, x5)
+export var createElement = x1 => x2 => x3 => createElement_(x1, x2, x3)

package/output-es/App.View.MatrixView/index.js

@@ -0,0 +1,232 @@
+import * as $runtime from "../runtime.js";
+import * as App$dUtil from "../App.Util/index.js";
+import * as App$dUtil$dSelector from "../App.Util.Selector/index.js";
+import * as App$dView$dUtil from "../App.View.Util/index.js";
+import * as Data$dFunctor from "../Data.Functor/index.js";
+import * as Data$dTuple from "../Data.Tuple/index.js";
+import * as Primitive from "../Primitive/index.js";
+import * as Util from "../Util/index.js";
+import * as Web$dEvent$dEventTarget from "../Web.Event.EventTarget/index.js";
+import {createElement, setSelection} from "./foreign.js";
+const $ShadowDirection = tag => tag;
+const North = /* #__PURE__ */ $ShadowDirection("North");
+const South = /* #__PURE__ */ $ShadowDirection("South");
+const East = /* #__PURE__ */ $ShadowDirection("East");
+const West = /* #__PURE__ */ $ShadowDirection("West");
+const None = /* #__PURE__ */ $ShadowDirection("None");
+const MatrixView = x => x;
+const matrixViewHelpers = {
+  hBorderStyles: m => x => {
+    if (x.i === 0) {
+      if (
+        (() => {
+          const $0 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i))(x.j - 1 | 0);
+          const $1 = (() => {
+            if ($0._2.tag === "Inert") { return App$dUtil.None; }
+            if ($0._2.tag === "Reactive") { return $0._2._1.transient; }
+            $runtime.fail();
+          })();
+          if ($1 === "None") { return false; }
+          if ($1 === "Secondary") { return true; }
+          if ($1 === "Primary") { return true; }
+          $runtime.fail();
+        })()
+      ) {
+        return "filter: drop-shadow(0px 1px 1px blue);";
+      }
+      return "visibility: hidden;";
+    }
+    if (x.i === m.i) {
+      if (
+        (() => {
+          const $0 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i - 1 | 0))(x.j - 1 | 0);
+          const $1 = (() => {
+            if ($0._2.tag === "Inert") { return App$dUtil.None; }
+            if ($0._2.tag === "Reactive") { return $0._2._1.transient; }
+            $runtime.fail();
+          })();
+          if ($1 === "None") { return false; }
+          if ($1 === "Secondary") { return true; }
+          if ($1 === "Primary") { return true; }
+          $runtime.fail();
+        })()
+      ) {
+        return "filter: drop-shadow(0px -1px 1px blue);";
+      }
+      return "visibility: hidden;";
+    }
+    if (
+      (() => {
+        const $0 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i))(x.j - 1 | 0);
+        return (() => {
+          const $1 = (() => {
+            if ($0._2.tag === "Inert") { return App$dUtil.None; }
+            if ($0._2.tag === "Reactive") { return $0._2._1.transient; }
+            $runtime.fail();
+          })();
+          if ($1 === "None") { return false; }
+          if ($1 === "Secondary") { return true; }
+          if ($1 === "Primary") { return true; }
+          $runtime.fail();
+        })() && (() => {
+          const $1 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i - 1 | 0))(x.j - 1 | 0);
+          const $2 = (() => {
+            if ($1._2.tag === "Inert") { return App$dUtil.None; }
+            if ($1._2.tag === "Reactive") { return $1._2._1.transient; }
+            $runtime.fail();
+          })();
+          if ($2 === "None") { return true; }
+          if ($2 === "Secondary") { return false; }
+          if ($2 === "Primary") { return false; }
+          $runtime.fail();
+        })();
+      })()
+    ) {
+      return "filter: drop-shadow(0px 1px 1px blue);";
+    }
+    if (
+      (() => {
+        const $0 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i))(x.j - 1 | 0);
+        const $1 = (() => {
+          if ($0._2.tag === "Inert") { return App$dUtil.None; }
+          if ($0._2.tag === "Reactive") { return $0._2._1.transient; }
+          $runtime.fail();
+        })();
+        if ($1 === "None") { return true; }
+        if ($1 === "Secondary") { return false; }
+        if ($1 === "Primary") { return false; }
+        $runtime.fail();
+      })() && (() => {
+        const $0 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i - 1 | 0))(x.j - 1 | 0);
+        const $1 = (() => {
+          if ($0._2.tag === "Inert") { return App$dUtil.None; }
+          if ($0._2.tag === "Reactive") { return $0._2._1.transient; }
+          $runtime.fail();
+        })();
+        if ($1 === "None") { return false; }
+        if ($1 === "Secondary") { return true; }
+        if ($1 === "Primary") { return true; }
+        $runtime.fail();
+      })()
+    ) {
+      return "filter: drop-shadow(0px -1px 1px blue);";
+    }
+    return "visibility: hidden;";
+  },
+  vBorderStyles: m => x => {
+    if (x.j === 0) {
+      if (
+        (() => {
+          const $0 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i - 1 | 0))(x.j);
+          const $1 = (() => {
+            if ($0._2.tag === "Inert") { return App$dUtil.None; }
+            if ($0._2.tag === "Reactive") { return $0._2._1.transient; }
+            $runtime.fail();
+          })();
+          if ($1 === "None") { return false; }
+          if ($1 === "Secondary") { return true; }
+          if ($1 === "Primary") { return true; }
+          $runtime.fail();
+        })()
+      ) {
+        return "filter: drop-shadow(1px 0px 1px blue);";
+      }
+      return "visibility: hidden;";
+    }
+    if (x.j === m.j) {
+      if (
+        (() => {
+          const $0 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i - 1 | 0))(x.j - 1 | 0);
+          const $1 = (() => {
+            if ($0._2.tag === "Inert") { return App$dUtil.None; }
+            if ($0._2.tag === "Reactive") { return $0._2._1.transient; }
+            $runtime.fail();
+          })();
+          if ($1 === "None") { return false; }
+          if ($1 === "Secondary") { return true; }
+          if ($1 === "Primary") { return true; }
+          $runtime.fail();
+        })()
+      ) {
+        return "filter: drop-shadow(-1px 0px 1px blue);";
+      }
+      return "visibility: hidden;";
+    }
+    if (
+      (() => {
+        const $0 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i - 1 | 0))(x.j);
+        return (() => {
+          const $1 = (() => {
+            if ($0._2.tag === "Inert") { return App$dUtil.None; }
+            if ($0._2.tag === "Reactive") { return $0._2._1.transient; }
+            $runtime.fail();
+          })();
+          if ($1 === "None") { return false; }
+          if ($1 === "Secondary") { return true; }
+          if ($1 === "Primary") { return true; }
+          $runtime.fail();
+        })() && (() => {
+          const $1 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i - 1 | 0))(x.j - 1 | 0);
+          const $2 = (() => {
+            if ($1._2.tag === "Inert") { return App$dUtil.None; }
+            if ($1._2.tag === "Reactive") { return $1._2._1.transient; }
+            $runtime.fail();
+          })();
+          if ($2 === "None") { return true; }
+          if ($2 === "Secondary") { return false; }
+          if ($2 === "Primary") { return false; }
+          $runtime.fail();
+        })();
+      })()
+    ) {
+      return "filter: drop-shadow(1px 0px 1px blue);";
+    }
+    if (
+      (() => {
+        const $0 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i - 1 | 0))(x.j);
+        const $1 = (() => {
+          if ($0._2.tag === "Inert") { return App$dUtil.None; }
+          if ($0._2.tag === "Reactive") { return $0._2._1.transient; }
+          $runtime.fail();
+        })();
+        if ($1 === "None") { return true; }
+        if ($1 === "Secondary") { return false; }
+        if ($1 === "Primary") { return false; }
+        $runtime.fail();
+      })() && (() => {
+        const $0 = Util.unsafeArrayArray.unsafeIndex(Util.unsafeArrayArray.unsafeIndex(m.cells)(x.i - 1 | 0))(x.j - 1 | 0);
+        const $1 = (() => {
+          if ($0._2.tag === "Inert") { return App$dUtil.None; }
+          if ($0._2.tag === "Reactive") { return $0._2._1.transient; }
+          $runtime.fail();
+        })();
+        if ($1 === "None") { return false; }
+        if ($1 === "Secondary") { return true; }
+        if ($1 === "Primary") { return true; }
+        $runtime.fail();
+      })()
+    ) {
+      return "filter: drop-shadow(-1px 0px 1px blue);";
+    }
+    return "visibility: hidden;";
+  },
+  eventListener: Web$dEvent$dEventTarget.eventListener,
+  withElement: sel => x => sel((() => {
+    const $0 = App$dUtil.selectionEventData$p(x);
+    return App$dUtil$dSelector.matrixElement($0._1.i)($0._1.j)($0._2);
+  })())
+};
+const viewableMatrixViewUnit = {
+  isLeaf: v => false,
+  createElement: v => createElement(App$dView$dUtil.uiHelpers),
+  setSelection: v => setSelection(matrixViewHelpers)(App$dView$dUtil.uiHelpers)
+};
+const matrixRep = v => (
+  {
+    cells: Data$dFunctor.arrayMap(v1 => Data$dFunctor.arrayMap(v$1 => Data$dTuple.$Tuple(v$1._3.tag === "Int" ? v$1._3._1 : Primitive.typeError(v$1._3)("Int"), v$1._1))(v1))(v._1),
+    i: v._2._1._1,
+    j: v._2._2._1
+  }
+);
+export {$ShadowDirection, East, MatrixView, None, North, South, West, matrixRep, matrixViewHelpers, viewableMatrixViewUnit};
+export * from "./foreign.js";

package/output-es/App.View.MultiView/index.js

@@ -0,0 +1,30 @@
+import * as App$dUtil$dSelector from "../App.Util.Selector/index.js";
+import * as App$dView$dUtil$dD3 from "../App.View.Util.D3/index.js";
+import * as Data$dFoldable from "../Data.Foldable/index.js";
+import * as Data$dFunctor from "../Data.Functor/index.js";
+import * as Data$dFunctorWithIndex from "../Data.FunctorWithIndex/index.js";
+import * as Data$dShow from "../Data.Show/index.js";
+import * as Effect from "../Effect/index.js";
+const $MultiView = _1 => ({tag: "MultiView", _1});
+const sequence_ = /* #__PURE__ */ Data$dFoldable.traverse_(Effect.applicativeEffect)(Data$dFoldable.foldableArray)(Data$dFoldable.identity);
+const MultiView = value0 => $MultiView(value0);
+const viewableMultiViewUnit = {
+  isLeaf: v => false,
+  createElement: v => v1 => parent => {
+    const $0 = v1._1;
+    const $1 = App$dView$dUtil$dD3.createChild(parent)(App$dView$dUtil$dD3.showElementType.show(App$dView$dUtil$dD3.Div))(App$dView$dUtil$dD3.fromFoldable([]));
+    return () => {
+      const rootElement = $1();
+      sequence_(Data$dFunctor.arrayMap(view => view(dictViewable => v1$1 => dictViewable.createElement()(v1$1)(rootElement)))($0))();
+      return rootElement;
+    };
+  },
+  setSelection: v => v1 => select => rootElement => sequence_(Data$dFunctorWithIndex.mapWithIndexArray(i => view => {
+    const $0 = App$dView$dUtil$dD3.select(":scope > :nth-child(" + Data$dShow.showIntImpl(i + 1 | 0) + ")")(rootElement);
+    return () => {
+      const child = $0();
+      return view(dictViewable => v1$1 => dictViewable.setSelection()(v1$1)(x => select(App$dUtil$dSelector.constrArg("MultiView")(0)(App$dUtil$dSelector.listElement(i)(x))))(child))();
+    };
+  })(v1._1))
+};
+export {$MultiView, MultiView, sequence_, viewableMultiViewUnit};

package/output-es/App.View.Paragraph/index.js

@@ -0,0 +1,44 @@
+import * as App$dUtil$dSelector from "../App.Util.Selector/index.js";
+import * as App$dView$dUtil from "../App.View.Util/index.js";
+import * as App$dView$dUtil$dD3 from "../App.View.Util.D3/index.js";
+import * as Data$dFoldable from "../Data.Foldable/index.js";
+import * as Data$dFunctor from "../Data.Functor/index.js";
+import * as Data$dFunctorWithIndex from "../Data.FunctorWithIndex/index.js";
+import * as Data$dShow from "../Data.Show/index.js";
+import * as Data$dTuple from "../Data.Tuple/index.js";
+import * as Effect from "../Effect/index.js";
+const $Paragraph = _1 => ({tag: "Paragraph", _1});
+const all = /* #__PURE__ */ (() => Data$dFoldable.foldableArray.foldMap((() => {
+  const semigroupConj1 = {append: v => v1 => v && v1};
+  return {mempty: true, Semigroup0: () => semigroupConj1};
+})()))();
+const sequence_ = /* #__PURE__ */ Data$dFoldable.traverse_(Effect.applicativeEffect)(Data$dFoldable.foldableArray)(Data$dFoldable.identity);
+const Paragraph = value0 => $Paragraph(value0);
+const viewableParagraphUnit = {
+  isLeaf: v => all(App$dView$dUtil.viewableViewUnit.isLeaf)(v._1),
+  createElement: v => v1 => parent => {
+    const $0 = v1._1;
+    const $1 = App$dView$dUtil$dD3.createChild(parent)(App$dView$dUtil$dD3.showElementType.show(App$dView$dUtil$dD3.Div))(App$dView$dUtil$dD3.fromFoldable([
+      Data$dTuple.$Tuple("class", "para-text")
+    ]));
+    return () => {
+      const rootElement = $1();
+      sequence_(Data$dFunctor.arrayMap(view => {
+        const $2 = App$dView$dUtil$dD3.createText(rootElement)(" ");
+        return () => {
+          $2();
+          return view(dictViewable => v1$1 => dictViewable.createElement()(v1$1)(rootElement))();
+        };
+      })($0))();
+      return rootElement;
+    };
+  },
+  setSelection: v => v1 => select => rootElement => sequence_(Data$dFunctorWithIndex.mapWithIndexArray(i => view => {
+    const $0 = App$dView$dUtil$dD3.select(":scope > :nth-child(" + Data$dShow.showIntImpl(i + 1 | 0) + ")")(rootElement);
+    return () => {
+      const child = $0();
+      return view(dictViewable => v1$1 => dictViewable.setSelection()(v1$1)(x => select(App$dUtil$dSelector.constrArg("Paragraph")(0)(App$dUtil$dSelector.listElement(i)(x))))(child))();
+    };
+  })(v1._1))
+};
+export {$Paragraph, Paragraph, all, sequence_, viewableParagraphUnit};

package/output-es/App.View.ScatterPlot/foreign.js

@@ -0,0 +1,110 @@
+"use strict"
+
+import * as d3 from "d3"
+
+
+function setSelection_ (
+   { point_attrs, eventListener, withScatterPlotPoint },
+   {
+      selState,
+      selClasses,
+      selClassesFor,
+      join
+   },
+   view,
+   select,
+   rootElement
+) {
+   return () => {
+      var newListener = eventListener(withScatterPlotPoint(select))()
+      const { points } = view
+      rootElement.selectAll('.scatterplot-point').each(function (point) {
+         const sel = join(selState(points[point.i].x))(selState(points[point.i].y))
+         d3.select(this) // won't work inside arrow function :/
+            .classed(selClasses, false)
+            .classed(selClassesFor(sel), true)
+            .attrs(point_attrs(view)(point))
+            .on('mousedown', e => { newListener(e) })
+            .on('mouseenter', e => { newListener(e) })
+            .on('mouseleave', e => { newListener(e) })
+      })
+   }
+}
+
+function createElement_ (
+   { val },
+   { caption, points, labels },
+   parent
+) {
+   return () => {
+      var max_width = 280
+      var max_height = 200
+      const x_max = Math.ceil(Math.max(...points.map(point => val(point.x))))
+      const x_min = Math.ceil(Math.min(...points.map(point => val(point.x))))
+      const y_max = Math.ceil(Math.max(...points.map(point => val(point.y))))
+      const y_min = Math.ceil(Math.min(...points.map(point => val(point.y))))
+      const margin = {top: 20, right: 20, bottom: 40, left: 50}
+      const width = max_width - margin.left - margin.right,
+            height = max_height - margin.top - margin.bottom
+
+      const rootElement = parent
+         .append('svg')
+            .classed('center', true)
+            .attr('width', max_width + margin.left + margin.right)
+            .attr('height', max_height + margin.top)
+         .append('g')
+            .attr('transform', `translate(${margin.left}, ${margin.top})`)
+
+      const x = d3.scaleLinear()
+         .domain([Math.min(0, x_min), x_max])
+         .range([0, width])
+      rootElement.append('g')
+         .attr('transform', "translate(0," + height + ")")
+         .call(d3.axisBottom(x).tickSizeOuter(0))
+         .selectAll('text')
+         .style('text-anchor', 'middle')
+
+      const y = d3.scaleLinear()
+         .domain([Math.min(0, y_min), y_max])
+         .range([height, 0])
+      rootElement.append('g')
+         .call(d3.axisLeft(y).tickSizeOuter(0))
+
+      rootElement.append("text")
+         .attr("x", width)
+         .attr("y", height + 25)
+         .style("text-anchor", "end")
+         .style("font-size", "10px")
+         .text(val(labels.x))
+      rootElement.append("text")
+         .attr("transform", "rotate(-90)")
+         .attr("x", -margin.top)
+         .attr("y", -margin.left + 20)
+         .style("text-anchor", "end")
+         .style("font-size", "10px")
+         .text(val(labels.y))
+
+      rootElement.append('g')
+         .selectAll('circle')
+         .data([...points.entries()].map(([i, point]) => { return { i, point } }))
+         .enter()
+         .append('circle')
+         .classed('scatterplot-point', true)
+         .attr('cx', ({ point }) => x(val(point.x)))
+         .attr('cy', ({ point }) => y(val(point.y)))
+         .attr('stroke-width', 0.5)
+
+      rootElement.append('text')
+         .text(val(caption))
+         .attr('x', width / 2)
+         .attr('y', height + 40)
+         .attr('class', 'title-text')
+         .attr('dominant-baseline', 'bottom')
+         .attr('text-anchor', 'middle')
+
+      return rootElement
+   }
+}
+
+export var createElement = x1 => x2 => x3 => createElement_(x1, x2, x3)
+export var setSelection = x1 => x2 => x3 => x4 => x5 => setSelection_(x1, x2, x3, x4, x5)