parcoord-es-fork-with-domain
v2.3.1
Published
Fork of ES6 module of Parallel Coordinates, based on d3 v5 modules, with custom domains
Downloads
6
Maintainers
Readme
parcoords-es
ES6 module of Syntagmatic's Parallel Coordinates (aka. parcoords). This library is completely based on D3 V5 API.
This fork adds a feature that allows passing custom domains, allowing custom dimension order.
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
- Install library in your project
npm install parcoord-es --save
- import module
import 'parcoord-es/dist/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.