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

@nebula.js/sn-scatter-plot

v3.57.1

Published

A scatter plot.

Downloads

3,640

Readme

CircleCI Maintainability Test Coverage

sn-scatter-plot

A scatter plot for nebula.js.

The scatter plot uses bubbles or dots to represent values of two or three measures over a dimension. The first measure is for bubble's position on the horizontal axis, the second measure is for the bubble's position on the vertical axis, and the third measure (if any) is for the bubble's size. The scatter plot is normally used to observe relationships among measures.

Scatter plot example

Requirements

Requires @nebula.js/stardust version 2.3.0 or later.

Installing

If you use npm: npm install @nebula.js/sn-scatter-plot. You can also load through the script tag directly from https://unpkg.com.

Development

Instructions on how to release and patch.

Usage

import { embed } from '@nebula.js/stardust';
import scatterplot from '@nebula.js/sn-scatter-plot';

// 'app' is an enigma app model
const nuked = embed(app, {
  types: [
    {
      // register the scatterplot
      name: 'scatterplot',
      load: () => Promise.resolve(scatterplot),
    },
  ],
});

// Rendering a scatter plot on the fly
nuked.render({
  type: 'scatterplot',
  element,
  fields: ['Alpha', '=Sum(Expression1)', '=Sum(Expression2)', '=Sum(Expression3)'],
  options: {
    direction: 'ltr',
    freeResize: true,
  },
  properties: {
    color: { mode: 'byDimension' }, // overrides default properties
  },
});

Options

  • direction - ltr/rtl
  • freeResize - in conjunction with snapshotData on layout, lets the chart ignore size set on snapshotData

More examples

Color bubbles by an expression

scatter plot color by expression

nuked.render({
  element: document.getElementById('object'),
  type: 'scatterplot',
  fields: ['Alpha', '=Sum(Expression2)'],
  properties: {
    qHyperCubeDef: {
      qMeasures: [
        {
          qDef: {
            qDef: 'Sum(Expression1)',
          },
          qAttributeExpressions: [
            {
              // Insert color expression
              qExpression: "if(sum(Expression2) > 0.0096*sum(Expression1), 'red', 'green')",
              id: 'colorByExpression',
            },
          ],
        },
      ],
    },
    color: {
      auto: false,
      mode: 'byExpression',
      expressionIsColor: true,
    },
  },
});

Navigation panel can be turned on to make browsing chart easier

scatter plot navigation

nuked.render({
  element: document.getElementById('object'),
  type: 'scatterplot',
  fields: ['Alpha', '=Sum(Expression1)', '=Sum(Expression2)'],
  properties: {
    navigation: true,
  },
});

Binned data is turned on automatically if there are more than 1000 data points

When zoomed in or panned outside of the home view, the chart shows an interactive mini map and home button to help with navigating and resetting the view.

scatter plot binned data

nuked.render({
  element: document.getElementById('object'),
  type: 'scatterplot',
  fields: ['TransID', '=Sum(Expression1)', '=Sum(Expression2)'],
  properties: {
    compressionResolution: 2, // queryLevel of bins, smaller number <-> more points per bin
  },
});

Best fit line can be turned on

Supported types:

  • Linear
  • Average
  • Second degree polynomial
  • Third degree polynomial
  • Forth degree polynomial
  • Exponential
  • Logarithmic
  • Power

scatter plot best fit line

const nuked = window.stardust.embed(app, {
  context: { theme: 'light' },
  types: [
    {
      name: 'scatterplot',
      load: () => Promise.resolve(window['sn-scatter-plot']),
    },
  ],
  flags: { BEST_FIT_LINE: true }, // Still experimental
});

nuked.render({
  element: document.getElementById('object'),
  type: 'scatterplot',
  properties: {
    qHyperCubeDef: {
      qDimensions: [
        {
          qDef: {
            qFieldDefs: ['Alpha'],
          },
        },
      ],
      qMeasures: [
        {
          qDef: {
            qDef: 'Sum(Expression1)',
          },
        },
        {
          qDef: {
            qDef: 'Sum(Expression2)',
          },
          qTrendLines: [
            {
              qType: 'LINEAR',
              qXColIx: 1, // The column in the hypercube to be used as x axis.
              style: {
                autoColor: true,
                dashed: true,
                lineDash: '8, 4',
              },
            },
          ],
        },
      ],
    },
  },
});

Scatter plot plugins

A plugin can be passed into a scatter plot to add or modify its capability or visual appearance. A plugin needs to be defined before it can be rendered together with the chart.

// Step 1: define the plugin
const pointPlugin = {
  info: {
    name: 'point-plugin',
    type: 'component-definition',
  },
  fn: ({ layout, keys }) => {
    const componentDefinition = {
      key: keys.COMPONENT.POINT,
      type: 'point',
      settings: {
        strokeWidth: '2px',
        stroke: 'black',
        size: (d) => getSizeInLogarithmScale(d, layout),
        fill: (d) => getColorBasedOnMedian(d),
      },
    };
    return componentDefinition;
  },
};

// Step 2: passing the plugin definition into the render function
nuked.render({
  type: 'scatterplot',
  element: document.querySelector('.scatterplot'),
  properties: chartProperties,
  plugins: [pointPlugin],
});

The plugin definition is an object, with two properties info and fn. The fn returns a picasso.js component. To build this component, some important chart internals are passed into the argument object of fn.

// Structure of the argument object of fn
const pluginArgs = {
    layout,
    keys: {
      SCALE:
        X,
        Y,
      },
      COMPONENT: {
        X_AXIS,
        Y_AXIS,
        POINT,
      },
    },
  };

With plugins, you can either add new components or modify existing components of the scatter plot.

Add new components

For example, a line component can be added on top of a scatter plot to highlight the slopes between data points.

scatter plot plugin (adding)

// Definition of the line plugin
const linePlugin = {
  info: {
    name: 'line-plugin',
    type: 'component-definition',
  },
  fn: ({ keys }) => {
    const componentDefinition = {
      key: 'new-linecomp',
      type: 'line',
      data: {
        extract: {
          field: 'qDimensionInfo/0',
          props: {
            x: { field: 'qMeasureInfo/0' },
            y: { field: 'qMeasureInfo/1' },
          },
        },
        sort: (a, b) => (a.x.value > b.x.value ? 1 : -1), // sort ascending
      },
      settings: {
        coordinates: {
          minor: {
            scale: keys.SCALE.Y,
            ref: 'y',
          },
          major: {
            scale: keys.SCALE.X,
            ref: 'x',
          },
        },
        layers: {
          line: {
            stroke: 'red',
            strokeWidth: 3,
          },
        },
      },
    };
    return componentDefinition;
  },
};

Modify existing components

As an example, the positions and the appearance of the axes can be modified completely by plugins.

scatter plot plugin (modifying)

To overide an existing component, fn should returns a picasso.js component that has the same key as the existing component (key: 'x-axis' in this example)

// Definition of the x-axis plugin
const xAxisPlugin = {
  info: {
    name: 'x-axis-plugin',
    type: 'component-definition',
  },
  fn: ({ keys }) => {
    const componentDefinition = {
      type: 'axis',
      key: keys.COMPONENT.X_AXIS,
      layout: {
        dock: 'top',
      },
      settings: {
        labels: {
          fontFamily: 'Cambria, Cochin, Georgia, Times, "Times New Roman", serif',
          fontSize: '15px',
          fill: 'red',
        },
        line: { stroke: 'green', strokeWidth: 2 },
        ticks: { stroke: 'blue', strokeWidth: 2 },
      },
    };
    return componentDefinition;
  },
};

// y-axis plugin can be defined with similar code
// ...

More details can be found in the examples folder.

Plugins disclaimer

  • The plugins API is still experimental.
  • We can not guarantee our charts to be compatible with all different settings, especially when modifying existing components.