@cnrs/hecate-views-charts 0.4.0 → 0.5.0

package/package.json

@@ -19,7 +19,7 @@
   "files": [
     "src/**/*.js"
   ],
-  "version": "0.4.0",
+  "version": "0.5.0",
   "keywords": [
     "dataviz",
     "research",

package/src/init.js

@@ -1,8 +1,8 @@
 import {
     BarChart,
     Histogram,
-    ScatterPlot,
     LineChart,
+    ScatterChart,
     StackedAreaChart,
     Streamgraph,
   } from './views/index.js';  // eslint-disable-line no-unused-vars

package/src/util.js

@@ -0,0 +1,13 @@
+function getMetadata(item, pid) {
+  for (const meta of item['metadata']) {
+    if (pid != null && meta['pid'] == pid) return meta['value'];
+  }
+  return null;
+}
+function getProperty(db, pid) {  // TODO why can't I use await db.getProperty?
+  // faster than return db.properties.filter(e => e.id == pid)[0];
+  // we use find(...), which stops as soon as it finds our special something
+  return db.properties.find(e => e.id == pid);
+}
+
+export { getProperty, getMetadata, };

package/src/views/all.js

@@ -1,5 +1,6 @@
 import './barchart.js';
 import './histogram.js';
 import './linechart.js';
-import './scatterplot.js';
+import './scatterchart.js';
 import './stackedareachart.js';
+import './streamgraph.js';

package/src/views/cartesianchart.js

@@ -1,5 +1,6 @@
 import { View } from '@cnrs/hecate-views';
 import * as d3 from 'd3';
+import { getProperty, getMetadata, } from '../util.js';
 
 
 
@@ -17,7 +18,18 @@ class CartesianChart extends View {
 
   getItemX(item) { return getMetadata(item, this.settings.x?.pid); }
   getItemY(item) { return getMetadata(item, this.settings.y?.pid); }
-  getItemCategory(item) { return getMetadata(item, this.settings.category?.pid); }
+  getItemColor(item) { return getMetadata(item, this.settings.color?.pid); }
+
+  plotX(item, plot, parsers) {
+    return plot.vx(parsers.x(this.getItemX(item))) + plot.padding.left;
+  }
+  plotY(item, plot, parsers) {
+    return plot.vy(parsers.y(this.getItemY(item))) + plot.padding.top;
+  }
+  plotColor(item, plot, parsers) {
+    const color = plot.color(parsers.color(this.getItemColor(item)));
+    return color ? color : this.settings.color?.value;
+  }
 
   renderView() {
     // cleanup
@@ -31,7 +43,7 @@ class CartesianChart extends View {
 
     const xProperty = getProperty(this.db, this.settings.x?.pid);
     const yProperty = getProperty(this.db, this.settings.y?.pid);
-    const cProperty = getProperty(this.db, this.settings.category?.pid);
+    const cProperty = getProperty(this.db, this.settings.color?.pid);
     const xType = xProperty?.type || 'text';
     const yType = yProperty?.type || 'text';
     const cType = cProperty?.type || 'text';
@@ -90,8 +102,8 @@ class CartesianChart extends View {
   prepare(parsers, scales) { }
 
   renderData(svg, plot, parsers) {
-    //const { x, y, category } = this.settings;
-    const message = //([x, y, c].every(v => v !== undefined)) ?
+    //const { x, y, color } = this.settings;
+    const message = //([x, y, color].every(v => v !== undefined)) ?
         `${this.constructor.name} should implement renderData()`
     //  : "Missing settings"
       ;
@@ -135,15 +147,19 @@ class CartesianChart extends View {
   }
   createColorScale(parsers, scale) {
     const cats = new Set();
-    for (const item of this.db.items) cats.add(this.getItemCategory(item));
+    for (const item of this.db.items) cats.add(this.getItemColor(item));
     const categories = [...cats];  // Set -> Array
     const domain = this.createColorDomain(categories);
     const range = this.createColorRange();
     return scale().domain(domain).range(range);
   }
 
-  createXDomain(parsers) { return [0, 1]; }
-  createYDomain(parsers) { return [0, 1]; }
+  createXDomain(parsers) {
+    return d3.extent(this.db.items, item => parsers.x(this.getItemX(item)));
+  }
+  createYDomain(parsers) {
+    return d3.extent(this.db.items, item => parsers.y(this.getItemY(item)));
+  }
   createColorDomain(categories) { return categories; }
   createXRange(plot) { return this.vertical ? [plot.height, 0] : [0, plot.width]; }
   createYRange(plot) { return this.vertical ? [0, plot.width] : [plot.height, 0]; }
@@ -275,16 +291,6 @@ const SCALES = {
 function getParser(type) { return PARSERS[type]; }
 function getScale(type) { return SCALES[type]; }
 
-function getMetadata(item, pid) {
-  for (const meta of item['metadata']) {
-    if (pid != null && meta['pid'] == pid) return meta['value'];
-  }
-  return null;
-}
-function getProperty(db, pid) {  // TODO why can't I use await db.getProperty?
-  return db.properties.filter(e => e.id == pid)[0];
-}
-
 export { CartesianChart };
 
 /**

package/src/views/index.js

@@ -1,7 +1,7 @@
 export * from './barchart.js';
 export * from './histogram.js';
 export * from './linechart.js';
-export * from './scatterplot.js';
+export * from './scatterchart.js';
 export * from './stackedareachart.js';
 export * from './streamgraph.js';
 

package/src/views/linechart.js

@@ -1,4 +1,4 @@
-import { View } from '@cnrs/hecate-views';
+import { CartesianChart } from './cartesianchart.js';
 import * as d3 from 'd3';
 
 
@@ -7,192 +7,91 @@ import * as d3 from 'd3';
  * LineChart web component.
  * @see https://en.wikipedia.org/wiki/Line_chart
  */
-class LineChart extends View {
-
-  get pidx() { return this.settings.x || 'x'; }
-  get pidy() { return this.settings.y || 'y'; }
-
-  get padding() {
-    return this.settings.padding
-        || { top: 70, right: 30, bottom: 40, left: 80};
-  }
-
-  renderView() {
-    // cleanup
-    while (this.viewRoot.lastChild.name !== 'view') { // <slot />
-      this.viewRoot.removeChild(this.viewRoot.lastChild);
+class LineChart extends CartesianChart {
+
+  get style() { return this.settings.style; }
+  get curve() { return CURVES[this.settings.mark?.curve] ?? d3.curveMonotoneX; }
+
+  prepare() {
+    const map = new Map();
+    if (this.settings.color?.pid) {
+      // mode: multiple path lines
+      this._multiple = true;
+      for (const item of this.db.items) {
+        const key = this.getItemColor(item);
+        const values = map.get(key) || [];
+        values.push(item);
+        map.set(key, values);
+      }
+    } else {
+      // mode: single path line
+      this._multiple = false;
+      const key = this.settings.mark?.tooltip || null;
+      map.set(key, this.db.items);
     }
-
-    var dataset = this.prepareData();
-   
-        var {sceneWidth, sceneHeight, svg} = this.createscene(this.padding, 600, 1200);
-        
-        var {x_scale, y_scale} = this.createAxisScales(sceneHeight, sceneWidth, dataset)
-        this.addAxises(sceneWidth, sceneHeight, this.padding, x_scale, y_scale, svg);
-
-        this.displayChart(x_scale, y_scale, dataset, svg);
+    this._items_by_c = map;
   }
 
-  /**
-   * Prepare the data by giving it the correct format
-   * Creates a javascript object that contains the elements of metadata, each key representing a different pid
-   * @param {Hera} data - Hera-formatted data parameter
-   * @param {Object} settings - Settings parameter
-   * @returns {Object} JS object containing the elements of metadata,
-   * x (resp. y) key contains the value for x (resp. y) axis
-   */
-    prepareData() {
-        var yValues = [];
-        var xValues = [];
-        this.db.items.forEach(item => {
-            item.metadata.forEach(meta => {
-                if (meta.pid === this.pidy) {
-                    yValues.push(parseInt(meta.value));
-                }
-               if (meta.pid === this.pidx){
-                    xValues.push(parseInt(meta.value));
-                }
-            });
-        });
-        const dataset = xValues.map((x, index) => ({
-            x: x,
-            y: yValues[index]
-        }));
-       return dataset;
-    }
-
-  /**
-   * Creates a svg element that will contain the viewer.
-   * @param {Object} margin - Space for the axes
-   * @param {number} width - Desired int width for the svg
-   * @param {number} height - Desired int height for the svg
-   * @returns The svg and its height, width and the width of each bars
-   */
-    createscene(margin, height, width){
-        const lineWidth = width - margin.left - margin.right;
-        const lineHeight = height - margin.top - margin.bottom;
-
-        // create svg and append it
-        const divElem = document.createElement('div');
-        this.viewRoot.appendChild(divElem);
-        const container = d3.select(divElem);
 
-        const svg = container.append("svg")
-            .attr("width", lineWidth + margin.left + margin.right)
-            .attr("height", lineHeight + margin.top + margin.left)
-            .append("g")
-            .attr("transform", `translate(${margin.left},${margin.top})`);
-        return {
-            sceneWidth : lineWidth,
-            sceneHeight : lineHeight,
-            svg : svg
-        }
-    }
-    
-    /**
-     * creates and sets x and y linear scales
-     * @param {*} sceneHeight 
-     * @param {*} sceneWidth 
-     * @param {*} dataset 
-     * @return x and y linear scales
-     */
-    createAxisScales(sceneHeight, sceneWidth, dataset){
-        //set x and y scales
-        var x_scale = d3.scaleLinear()
-            .range([0,sceneWidth])
-            .domain([0,d3.max(dataset, d => d.x)]);
-        var y_scale = d3.scaleLinear()
-            .range([sceneHeight,0])
-            .domain([0,d3.max(dataset, d => d.y)]);
-
-        return{
-            x_scale : x_scale,
-            y_scale : y_scale 
-        }
-        
-    }
-
-
-  /**
-   * add the left and bottom axises, with their Label
-   * @param sceneWidth - Scene width
-   * @param x_scale - Linear scale for the X axis
-   * @param y_scale - Linear scale for the Y axis
-   * @param {*} sceneHeight
-   * @param {*} sceneWidth
-   * @param {*} margin
-   * @param {*} svg
-   */
-    addAxises(sceneWidth, sceneHeight, margin, x_scale, y_scale, svg)
-    {
-            //add axises
-            var x_axis = d3.axisBottom(x_scale);
-            var y_axis = d3.axisLeft(y_scale);
-        const labels = this.getAxesLabels();
-    
-            //x axis
-            svg.append("g")
-                .attr("transform", `translate(0,${sceneHeight})`)
-                .call(x_axis)
-                .call((g) => g.append("text")
-                .attr("x", sceneWidth)
-                .attr("y", margin.bottom - 4)
-                .attr("fill", "currentColor")
-                .attr("text-anchor", "end")
-                .text(labels.x));
-    
-    
-            //y axis    
-            svg.append("g")
-                .call(y_axis)
-                .call((g) => g.append("text")
-                .attr("x", -margin.left)
-                .attr("y",-10)
-                .attr("fill", "currentColor")
-                .attr("text-anchor", "start")
-                .text(labels.y));
+  renderData(svg, plot, parsers) {
+    const line = d3.line()
+      .curve(this.curve)
+      .x(item => this.plotX(item, plot, parsers))
+      .y(item => this.plotY(item, plot, parsers))
+      ;
 
-    }
-    /**
-     * display the line chart
-     * @param {*} x_scale 
-     * @param {*} y_scale 
-     * @param {*} dataset 
-     * @param {*} svg 
-     */
-    displayChart(x_scale, y_scale, dataset, svg){
-            //draw lines
-            const line = d3.line()
-                .x(d => x_scale(d.x))
-                .y(d => y_scale(d.y));
-    
-            //add line path to svg
-            svg.append("path")
-                .datum(dataset)
-                .attr("fill", "none")
-                .attr("stroke", this.color)
-                .attr("stroke-width", 1)
-                .attr("d", line);
-    }
-
-  getAxesLabels() {
-    const px = this.getProperty(this.pidx);
-    const py = this.getProperty(this.pidy);
-    return {
-      x: px ? px.name : `Missing property '${this.pidx}'`,
-      y: py ? py.name : `Missing property '${this.pidy}'`,
-    };
+      for (const [key, items] of this._items_by_c) {
+        const color = this._multiple ?
+              plot.color(parsers.color(key))
+            : this.settings.color?.value || '#7b4c98';
+        this.renderPath(svg, items, line, color, key);
+      }
   }
 
-  getProperty(pid) {
-    const found = this.db.properties.find((p) => p['id'] === pid);
-    return found ? found : null;
+  renderPath(svg, items, line, color, text=null) {
+    const klass = 'series';
+    //add line path to svg
+    const path = svg.append('path')
+       .datum(items)
+       .attr('class', klass)
+       .attr('fill', 'none')
+       .attr('stroke', color)
+       .attr('stroke-width', this.style?.normal?.strokeWidth || 2)
+       .attr('opacity', this.style?.normal?.opacity || 2)
+       .attr('d', line)
+      ;
+    // add tooltip appearing when line path is hovered, if any
+    if (text) path.append('title').text(text);
+    path  // embiggen hovered line path to make it more visible
+      .on('mouseenter', (event) => {
+        svg.selectAll(`.${klass}`)
+          .attr('stroke-width', this.style?.nothover?.strokeWidth || 2)
+          .attr('opacity', this.style?.nothover?.opacity || 0.25);
+        d3.select(event.currentTarget)
+          .attr('stroke-width', this.style?.hover?.strokeWidth || 4)
+          .attr('opacity', this.style?.hover?.opacity || 1)
+          .raise();
+      })  // make non-hovered line path less visible
+      .on('mouseleave', (event) => {
+        svg.selectAll(`.${klass}`)
+          .attr('stroke-width', this.style?.normal?.strokeWidth || 2)
+          .attr('opacity', this.style?.normal?.opacity || 1);
+      });
   }
 
 }
 
 
 
+const CURVES = {
+  'basis': d3.curveBasis,
+  'cardinal': d3.curveCardinal,
+  'catmullrom': d3.curveCatmullRom,
+  'monotoneX': d3.curveMonotoneX,
+  'linear': d3.curveLinear,
+  'step': d3.curveStep,
+};
+
 customElements.define('hecate-linechart', LineChart);
 
 export { LineChart };

package/src/views/scatterchart.js

@@ -0,0 +1,87 @@
+import { CartesianChart } from './cartesianchart.js';
+import * as d3 from 'd3';
+
+
+
+/**
+ * Scatterplot web component.
+ * @see https://en.wikipedia.org/wiki/Scatter_plot
+ * @see https://scottmurray.org/tutorials/d3/
+ */
+class ScatterChart extends CartesianChart {
+
+  prepare() {
+    const map = new Map();
+    if (this.settings.color?.pid) {
+      // mode: multiple path lines
+      this._multiple = true;
+      for (const item of this.db.items) {
+        const key = this.getItemColor(item);
+        const values = map.get(key) || [];
+        values.push(item);
+        map.set(key, values);
+      }
+    } else {
+      // mode: single path line
+      this._multiple = false;
+      const key = this.settings.mark?.tooltip || null;
+      map.set(key, this.db.items);
+    }
+    this._items_by_c = map;
+  }
+
+  renderData(svg, plot, parsers) {
+    for (const [key, items] of this._items_by_c) {
+      this.renderGroup(svg, items, key, plot, parsers);
+    }
+  }
+
+  renderGroup(svg, items, key, plot, parsers) {
+    const klass = 'series';
+    const group = svg.append('g').attr('class', klass);//.attr('data-key', key);
+    // create a dot for each item in items
+    const color = this._multiple ?
+            plot.color(parsers.color(key))
+        : this.settings.color?.value || '#7b4c98';
+    const circles = group.selectAll('circle')
+       .data(items)
+         .enter()
+         .append('circle')
+           .attr('cx', item => this.plotX(item, plot, parsers))
+           .attr('cy', item => this.plotY(item, plot, parsers))
+           .attr('r',  item => this.getItemRadius(item))
+           .attr('fill',  item => color)
+      ;
+    circles.append('title').text(item => this.getItemLabel(item));
+
+    group  // embiggen hovered line path to make it more visible
+      .on('mouseenter', (event) => {
+        svg.selectAll(`.${klass}`)
+          .attr('opacity', this.style?.nothover?.opacity || 0.25);
+        d3.select(event.currentTarget)
+          .attr('opacity', this.style?.hover?.opacity || 1)
+          .raise();
+      })  // make non-hovered line path less visible
+      .on('mouseleave', (event) => {
+        svg.selectAll(`.${klass}`)
+          .attr('opacity', this.style?.normal?.opacity || 1);
+      });
+  }
+
+  getItemRadius(item) {  // eslint-disable-line no-unused-vars
+    return 5;
+  }
+  getItemLabel(item) {
+    const x = this.getItemX(item);
+    const y = this.getItemY(item);
+    const c = this.getItemColor(item);
+    const mc = c ? ` for ${c}` : '';
+    return `${y} for ${x}${mc}`
+  }
+}
+
+
+
+customElements.define('hecate-scatterchart', ScatterChart);
+
+export { ScatterChart };

package/src/views/stackedareachart.js

@@ -46,25 +46,25 @@ class StackedAreaChart extends CartesianChart {
 
   prepare(parsers, scales) {
     // (1) compute pivot table:
-    //     category1  category2  category3  …
-    // x1     y11        y12        y13     …
-    // x2     y21        y32        y33     …
-    // x3     y31        y32        y33     …
-    //  …      …          …          …      …
+    //        c1    c2    c3    …
+    // x1    y11   y12   y13    …
+    // x2    y21   y32   y33    …
+    // x3    y31   y32   y33    …
+    //  …     …     …     …     …
     this._table_pivot = new Map();
     for (const item of this.db.items) {
       const x = asKey(parsers.x(this.getItemX(item)));
       const y = parsers.y(this.getItemY(item));
-      const category = this.getItemCategory(item);
+      const c = this.getItemColor(item);
       if (!this._table_pivot.has(x)) this._table_pivot.set(x, new Map());
-      this._table_pivot.get(x).set(category, y);
+      this._table_pivot.get(x).set(c, y);
     }
-    // (2) compute categories
-    // [ category1, category2, category 3, … ]
+    // (2) compute colors (ie. categories)
+    // [ c1, c2, c3, … ]
     const cats = new Set();
     for (const [, values] of this._table_pivot) {
-      for (const category of values.keys()) {
-        cats.add(category);
+      for (const c of values.keys()) {
+        cats.add(c);
       }
     }
     this._categories = [...cats];
@@ -74,7 +74,7 @@ class StackedAreaChart extends CartesianChart {
         .offset(this.createStackOffset())
         .order(this.createStackOrder())
         .keys(this._categories)
-        .value(([, values], category) => values.get(category) ?? 0)(rows);
+        .value(([, values], c) => values.get(c) ?? 0)(rows);
   }
 
   createStackOffset() {

package/src/views/scatterplot.js

@@ -1,180 +0,0 @@
-import { View } from '@cnrs/hecate-views';
-import * as d3 from 'd3';
-
-
-
-/**
- * Scatterplot web component.
- * @see https://en.wikipedia.org/wiki/Scatter_plot
- * @see https://scottmurray.org/tutorials/d3/
- */
-class ScatterPlot extends View {
-
-  get pidx() { return this.settings.x || 'x'; }
-  get pidy() { return this.settings.y || 'y'; }
-  get pidlabel() { return this.settings.label || 'label'; }
-
-  get padding() {
-    return this.settings.padding
-        || { top: 3, right: 0, bottom: 10, left: 30 };
-  }
-
-  renderView() {
-    // cleanup
-    while (this.viewRoot.lastChild.name !== 'view') { // <slot />
-      this.viewRoot.removeChild(this.viewRoot.lastChild);
-    }
-
-    this.width = this.parentElement.clientWidth;
-    this.height = this.parentElement.clientHeight;
-    const svgWidth = this.width + this.padding.right + this.padding.left;
-    const svgHeight = this.height + this.padding.top + this.padding.bottom;
-
-    /* TODO
-      <svg role="img">
-        <title>Weight by age scatter plot</title>
-        <desc>
-          Scatter plot showing weight distribution by age.
-          X axis ranges from 0 to 100 years.
-          Y axis ranges from 0 to 200 kilograms.
-        </desc>
-      </svg>
-    */
-
-    const container = document.createElement('div');
-    this.viewRoot.appendChild(container);
-    const svg = d3.select(container)
-        .append('svg')
-          .attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`)
-      ;
-    const viewport = this.viewport;
-
-    // create a dot for each item in this.items
-    svg.selectAll('circle')
-       .data(this.db.items)
-         .enter()
-         .append('circle')
-           .attr('cx', (item) => viewport.vx(this.getItemX(item)))
-           .attr('cy', (item) => viewport.vy(this.getItemY(item)))
-           .attr('r',  (item) => this.getItemRadius(item))
-           .attr('fill',  (item) => this.getItemColor(item))
-           .append('title')
-             .text((item) => this.getItemLabel(item))
-      ;
-    svg.selectAll('circle')
-      .on('click', (event) => console.log(event));
-
-    this.addAxes(svg, viewport);
-  }
-
-
-  addAxes(svg, viewport) {
-    const labels = this.getAxesLabels();
-    this.addXAxis(svg, viewport, labels.y);
-    this.addYAxis(svg, viewport, labels.x);
-  }
-  addXAxis(svg, viewport, label) {
-    var xAxis = d3.axisBottom(viewport.vx).ticks(11);
-    svg.append('g')
-      .attr('transform', `translate(0,${this.height-this.padding.top})`)
-      .call(xAxis)
-      .call((g) => g.append('text')
-        .attr('x', this.width)
-        .attr('y', 0)
-        .attr('fill', 'black')
-        .attr('text-anchor', 'end')
-        .text(label))
-      ;
-  }
-  addYAxis(svg, viewport, label) {
-    var yAxis = d3.axisLeft(viewport.vy).ticks(2);
-    svg.append('g')
-      .attr('transform', `translate(${this.padding.left},0)`)
-      .call(yAxis)
-      .call((g) => g.append('text')
-        .attr('x', 0)
-        .attr('y', '1em')
-        .attr('fill', 'currentColor')
-        .attr('text-anchor', 'start')
-        .text(label))
-      ;
-  }
-
-  /**
-   * @callback scale
-   * @property {number} n - A number inside the scale's domain
-   * @see https://d3js.org/d3-scale
-   */
-
-  /**
-   * This object is a wrapper for two d3.scale objects, which can be used to
-   * convert coordinates from the graph space to this viewer viewport space.
-   * @typedef {Object} Viewport
-   * @property {scale} vx - A scale returning the x (horizontal) coordinate
-   * @property {scale} vy - A scale returning the y (vertical) coordinate
-   * @see https://d3js.org/d3-scale
-   */
-
-  /**
-   * Property returning this element viewport.
-   * The viewport is composed of two scale functions, which can be used to
-   * convert x (resp. y) to a number between 0 and the width (resp. height)
-   * of the viewer.
-   * @returns {Viewport} This viewer current viewport
-   */
-  get viewport() {
-    const xMax = d3.max(this.db.items, (item) => this.getItemX(item));
-    const yMax = d3.max(this.db.items, (item) => this.getItemY(item));
-    // a scale is a function, domain is its input and range is its output
-    const vx = d3.scaleLinear()
-          .domain([0, xMax])
-          .range([this.padding.left, this.width-this.padding.right]);
-    const vy = d3.scaleLinear()
-          .domain([0, yMax])
-          .range([this.height-this.padding.top, this.padding.bottom]);
-    // y is inverted because having the origin (0;0) of the scatter graph
-    // in the bottom left corner feels more natural than the top left origin
-    // which is standard in SVG.
-    return { vx, vy };
-  }
-
-  getItemX(item) {
-    return this.getItemMetadata(item, this.pidx);
-  }
-  getItemY(item) {
-    return this.getItemMetadata(item, this.pidy);
-  }
-  getItemRadius(item) {  // eslint-disable-line no-unused-vars
-    return 5;
-  }
-  getItemColor(item) {  // eslint-disable-line no-unused-vars
-    return this.color;
-  }
-  getItemLabel(item) {
-    const name = this.getItemMetadata(item, this.pidlabel);
-    return name ? name : `Missing property '${this.pidlabel}'`;
-  }
-  getAxesLabels() {
-    const px = this.getProperty(this.pidx);
-    const py = this.getProperty(this.pidy);
-    return {
-      x: px ? px.name : `Missing property '${this.pidx}'`,
-      y: py ? py.name : `Missing property '${this.pidy}'`,
-    };
-  }
-
-  getItemMetadata(item, pid) {
-    const found = item.metadata.find((m) => m.pid === pid);
-    return found ? found.value : null;
-  }
-  getProperty(pid) {
-    const found = this.db.properties.find((p) => p['id'] === pid);
-    return found ? found : null;
-  }
-}
-
-
-
-customElements.define('hecate-scatterplot', ScatterPlot);
-
-export { ScatterPlot };