missing-coordinates
v1.1.1
Published
Draw parallel coordinates with missing values.
Downloads
6
Readme
Missing Coordinates
Implementation of a novel extension to Parallel Coordinates, introcuded in the Paper:
Where did my Lines go? Visualizing Missing Data in Parallel Coordinates
presented at EuroVis 2022. Created by Alex Bäuerle, Christian van Onzenoodt, Simon der Kinderen, Jimmy Johansson Westberg, Daniel Jönsson, and Timo Ropinski.
For a demo of missing-coordinates, check out our storybook example.
Usage
After installing the package from npm via:
npm install --save missing-coordinates
Using our Parallel Coordinates implementation is as simple as:
Plain JS
script.js
import { PC } from "./node_modules/missing-coordinates/dist/index.mjs";
// if you are using a bundler, this would be import { PC } from "missing-coordinates";
new PC({
target: document.body,
props: {
data: {
name: "sample",
axes: [
{ name: "A", data: ["A", "A", "A", "A", "B", "B"] },
{ name: "B", data: [0.0, null, 0.4, null, 0.8, 1.0] },
{ name: "C", data: [0.0, 0.2, 0.4, 0.6, 0.8, 1.0] },
],
},
},
});index.html
<!DOCTYPE html>
<html lang="en">
<style></style>
<body>
<script src="script.js" type="module"></script>
</body>
</html>Svelte
<script>
import { PC } from "missing-coordinates";
</script>
<main>
<PC
data={{
name: "sample",
axes: [
{ name: "A", data: ["A", "A", "A", "A", "B", "B"] },
{ name: "B", data: [0.0, null, 0.4, null, 0.8, 1.0] },
{ name: "C", data: [0.0, 0.2, 0.4, 0.6, 0.8, 1.0] },
],
}}
/>
</main>