Use it to summarize, explore and navigate your multivariate data using three simple interactions:
Sort | Filter a Range | Filter By Value |
---|---|---|
Click on a header to sort |
Drag to select a range |
Click on a value to select all instances |
You can test Navio right now with your own CSV or JSON data (less than 200MB), using:
Obervable Notebook | Shipyard | Jupyter Notebook |
---|---|---|
Other demos:
Why using something else for summarizing your data?. Here is how Navio compares with other alternatives:
Navio vs Parallel Coordinates
You can use this Notebook to compare Navio with Parallel Coordinates, using your own data. Please be aware that the Vegalite implementation of Parallel Coordinates will break with a few thousand rows (on the image below it broke with 500 rows and 86 attributes of the fifa19 Kaggle Dataset)
Navio vs Scatterplot Matrix
Use this Notebook to compare Navio with a Scatterplot Matrix, using your own data. Please be aware that the Vegalite implementation of the Scatterplot Matrix only support quantitative attributes and will also break with a dozen attributes and a few hundred rows), therefore the image below only displayed 8 attributes (out of the 28) on the scatterplot matrix.
npm install navio
Or use it from unpkg
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/popper.js@1.14/dist/umd/popper.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/navio/dist/navio.min.js"></script>
Requires ^popper.js@0.14, ^d3@4.13. If you want to use d3@4 use navio@0.0.67
TLDR
<!DOCTYPE html>
<body>
<!-- Placeholder for the widget -->
<div id="navio"></div>
<!-- NAVIO Step 0: Load the libraries -->
<script type="text/javascript" src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://unpkg.com/popper.js@1.14/dist/umd/popper.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/navio/dist/navio.min.js"></script>
<script>
// NAVIO Step 1. Create a Navio passing a d3 selection to place it and an optional height
var nv = navio(d3.select("#navio"), 600);
d3.csv(YOUR_DATA).then(data) => {
// NAVIO Step 2. Load your data!
nv.data(data);
// NAVIO Step 3. Detect your attributes (or load them manually)
nv.addAllAttribs();
// Optional, setup a selection callback
nv.updateCallback( selected => console.log("selected in Navio: ", selected.length));
});
</script>
</body>
</html>
HTML. Start with this template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Usage</title>
</head>
<body>
// Your Navio widget goes here
<div id="Navio"></div>