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

parcoord-es

v2.2.10

Published

ES6 module of Parallel Coordinates, based on d3 v5 modules

Downloads

6,283

Readme

parcoords-es

ES6 module of Syntagmatic's Parallel Coordinates (aka. parcoords). This library is completely based on D3 V5 API.

Features

Please refer to Parallel Coordinates's project page for concepts and API usage

All examples of the original project has been verified. You can play with them via running:

npm install
npm run dev

API

This section only lists api that are deviated from the original parallel coordinates.

# parcoords.brushExtents(extents) supports 1D multi brushes:

1D brush <>

  .brushMode("1D-axes")
  .brushExtents({"2": [3,4]});

1D multi brush <>

  .brushMode("1D-axes-multi")
  .brushExtents({"2": [[3,4], [6,8], [10, 14]]});

when parameter extents is not provided, this function returns

const extents = parcoords.brushExtents();
// format is:
{
    extents,
    selection: {
        raw, //raw coordinate
        scaled //y-scale transformed
    }
}

# parcoords.mark([values]) allows user to permanently highlight a data element in chart

const data = [...];
const pc = ParCoords().data(data)...;
parcoords.mark(data.filter(d => d.volume > 10));

Please refer to marking demo for details

# parcoords.unmark() clears all permanently highlighted data that is added by mark([values])

# parccords.on(function(brushed, args){}) adds brush arguments to brushstart, brush, and brushend events.

parcoords.on('brushstart', function(brushed, args){
    const {
        selection: {
            raw, //raw coordinate
            scaled //y-scale transformed
        },
        node, // svg node
        axis // dimension name
    } = args;
})

Please refer to brushing with arguments demo for details

Usage

ES6

  1. Install library in your project
npm install parcoord-es --save
  1. import module
import 'parcoord-es/parcoords.css';
import ParCoords from 'parcoord-es';

const chart = ParCoords()....

Standalone

parcoords.standalone.js contains all dependencies and can be used directly in your html page. Please note that only essential D3 V5 modules are bundled, your global namespace won't be polluted.

<link rel="stylesheet" type="text/css" href="./parcoords.css">
<script src="./parcoords.standalone.js"></script>

var parcoords = ParCoords()("#example")

You are free to use either D3 V3 or D3 V5 in your html. demo/superformula.html demonstrates how to use parcoords-es with d3 V3.

Development

Follow this instruction to setup development environment for parcoords-es

Prerequisites

npm

Installing

npm install

Building

npm run build

Development

Internal server will be launched, hosting all demos at localhost:3004

npm run dev

Testing (Coverage)

run all unit tests and generate test coverage report.

npm run test:cover

Built With

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Contributors

This project gets supports from open-source community. Many thanks to our contributors

Contribution Notes

Run npm run pretty before committing.

Acknowledgments

This project is based on Parallel Coordinates v0.7.0. Many thanks to parcoords contributors for such a complicated and useful D3 visualization.