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.
After installing the package from npm via:
npm install --save missing-coordinates
Using our Parallel Coordinates implementation is as simple as:
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><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>