npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@inb/oeb-widgets

v1.1.0

Published

Collection of visualisers for benchmarking.

Downloads

82

Readme

OpenEBench Widgets

oeb-widgets is a collection of easy-to-use Vue components for benchmarking, initially designed for OpenEBench but also usable in other projects, making it a flexible tool. It includes two essential visualizers: a Bar Plot and a Scatter Plot, both capable of handling metrics and classifications. This package has been crafted with scalability in mind, allowing for seamless addition of more visualizers in future updates.

Features

  • Bar Plot: Create bar charts to compare different categories.
  • Scatter Plot: Generate scatter plots to visualize relationships between variables.
  • Extensible Design: Built to support additional visualizers in future versions.

Installation

To install the package run:

npm i @inb/oeb_visualizations

How to Use

Import

import LoaderWidgets from '@inb/oeb-widgets/components/LoaderWidgets.vue';

Usage

<LoaderWidgets :data-chart="data"></LoaderWidgets>

Firstly, import the LoaderWidgets component, which receives and processes data and displays either a bar plot or a scatter plot based on the provided data.

Bar Plot

Bar plot shows the results of a benchmarking challenge that uses one single evaluation metric in the form of a Barplot. Challenge participants are shown in the X axis, while the value of their metric is shown in the Y axis.

Classification

The results of this plot format can be transformed into a tabular format by sorting the participants in descending/ascending order according to their metrics and applying a quartile classification over that linear set of values. This classification splits the participants into four different groups/clusters depending on their performance. Clusters are separated in the plot with vertical lines and shown in the right table together with a green color-scale, which is easier to interpret for both experts and non-expert users.

This is an alt text.

Example Data Structure in Bar Plot

{
  "_id": "OEBD003000002S",
  "dates": {
    "creation": "2018-04-09T00:00:00Z",
    "modification": "2020-04-05T14:00:00Z"
  },
  "dataset_contact_ids": ["Name.Lastname"],
  "inline_data": {
    "challenge_participants": [
      {
        "tool_id": "group01",
        "metric_value": 0.932
      },
      {
        "tool_id": "group02",
        "metric_value": 0.9279
      },
    ],
    "visualization": {
      "metric": "F-Measure",
      "type": "bar-plot"
    }
  }
}

Scatter Plot

Scatter plot muestra los resultados de experimentos científicos de evaluación comparativa en formato de gráfico, y aplicar varios métodos de clasificación para transformarlos a formato tabular.

Classification methods

  • Square quartiles - divide the plotting area in four squares by getting the 2nd quartile of the X and Y metrics.

Square quartiles.

  • Diagonal quartiles - divide the plotting area with diagonal lines by assigning a score to each participant based in the distance to the 'optimal performance'.

Diagonal quartiles.

  • Clustering - group the participants using the K-means clustering algorithm and sort the clusters according to the performance. Clustering.

Example Data Structure for Scatter Plot

{
  "_id": "OEBD0080000U6A",
  "dates": {
    "creation": "2023-05-04T16:00:26Z",
    "modification": "2023-11-05T13:09:13Z",
    "public": null
  },
  "dataset_contact_ids": ["Name.Lastname", "Name.Lastname"],
  "inline_data": {
    "challenge_participants": [
      {
        "tool_id": "Domainoid+",
        "metric_x": 220046,
        "stderr_x": 0,
        "metric_y": 0.91590127,
        "stderr_y": 0.00081763741
      },
      {
        "tool_id": "OMA_Groups",
        "metric_x": 99657,
        "stderr_x": 0,
        "metric_y": 0.97144131,
        "stderr_y": 0.00071919219
      },
    ],
    "visualization": {
      "type": "2D-plot",
      "x_axis": "NR_ORTHOLOGS",
      "y_axis": "avg Schlicker",
      "optimization": "top-right"
    }
  }
}

Box Plot

Box plot shiw the results of a benchmarking challenge that uses a graphical representation of the distribution of a dataset on a seven-number summary of datapoints. The challenge metrics is represented in Y axis by default.

Classification

The result of the plot can be ordened by maximum or minimum median value.

Example Data Structure in Box Plot

{
  "_id": "OEBD003000002S",
  "dates": {
    "modification": "2024-04-05T14:00:00Z"
  },
  "dataset_contact_ids": ["Name.Lastname"],
  "inline_data": {
    "challenge_participants": [
      {
        "name": "rnaSPAdes 2",
        "metric_id": "length of transcripts",
        "q1": 4.028134794028789,
        "mean": 4.6573958631434174,
        "median": 4.574031267727719,
        "q3": 4.92020145948564,
        "lowerfence": 3.8400347958435121,
        "upperfence": 5.408301457670917
      },
    ],
    "visualization": {
      "type": "box-plot",
      "y_axis": "length of transcripts",
      "optimization": "minimum"
    }
  }
}

This is an alt text.