Navio

A d3 visualization widget to help summarizing, exploring and navigating large network visualizations

Generate Convert Improve

Install / Use

/learn @john-guerra/Navio

About this skill

Quality Score

0/100

README

<div align="center"> <h1> <a href="https://observablehq.com/@john-guerra/navio-load"><img src="imgs/navio_thumb_v4.gif" alt="Moma Explorer" max-height="300"></a> Navio: <small><div style="font-style: italic; margin-bottom: 1.3em" align="center">A visualization widget to understand and explore your data</div></small> </h1> </div>

Use it to <strong>summarize</strong>, <strong>explore</strong> and <strong>navigate</strong> your multivariate data using three simple interactions:

| Sort | Filter a Range | Filter By Value| | -----| --- | ---| | Click on a header to sort <br> <a href="https://navio.dev/example_vispubdata"><img src="imgs/navio_sort.gif" alt="Navio sort on les miserables network" width="300"></a> | Drag to select a range <br> <a href="https://john-guerra.github.io/momaExplorer"><img src="imgs/navio_range.gif" alt="Moma Explorer" width="300"></a> | Click on a value to select all instances <br> <a href="https://navio.dev/example_vispubdata"> <img src="imgs/navio_value.gif" alt="Navio select a value with the vispubdata" width="300"></a> |

Try it!

You can test Navio right now with your own CSV or JSON data (less than 200MB), using:

| Obervable Notebook | Shipyard | Jupyter Notebook | | ---- | --- | --- | | <a href="https://beta.observablehq.com/@john-guerra/navio-load"> <img src="imgs/navio_observable.gif" alt="Navio-load Observable" width="400"></a> | <a href="https://shipyard.navio.dev"> <img src="imgs/shipyard_loading.gif" alt="Shipyard loading data" width="400"></a> | <a href="https://github.com/john-guerra/navio_jupyter"> <img src="imgs/Navio_jupyter.png" alt="Navio Jupyter Notebooks" width="400"></a>

Other demos:

Comparing

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.

Install

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

Usage

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>

Step by step

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>

</body>
</html>

Import Navio. Create and import a new JavaScript file below the scripts (d3 and Navio) or right in the html like in the example below.

<script src="https://d3js.org/d3.v6.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/navio/dist/navio.min.js"></script>
<script type="text/javascript">
  //   YOUR_JS_CODE_HERE
</script>

Create a Navio Instance

var nv = navio(d3.select("#Navio"), 600); //height 600

[Optional] Configure navio to your liking

// Default parameters
nv.x0 = 0;  //Where to start drawing navio in x
nv.y0 = 100; //Where to start drawing navio in y, useful if your attrib names are too long
nv.maxNumDistictForCategorical = 10; // addAllAttribs uses this for deciding if an attribute is categorical (has less than nv.maxNumDistictForCategorical categories) or ordered
nv.maxNumDistictForOrdered = 90; // addAllAttribs uses this for deciding if an attribute is ordered (has less than nv.maxNumDistictForCategorical categories) or text. Use nv.maxNumDistictForOrdered = Infinity for never choosing Text

nv.howManyItemsShouldSearchForNotNull = 100; // How many rows should addAllAttribs search to decide guess an attribute type
nv.margin = 10; // Margin around navio

nv.levelsSeparation = 40; // Separation between the levels
nv.divisionsColor = "white"; // Border color for the divisions
nv.levelConnectionsColor = "rgba(205, 220, 163, 0.5)"; // Color for the conections between levels
nv.divisionsThreshold = 4; // What's the minimum row height needed to draw divisions
nv.fmtCounts = d3.format(",.0d"); // Format used to display the counts on the bottom
nv.legendFont = "14px sans-serif"; // The font for the header
nv.nestedFilters = true; // Should navio use nested levels?

nv.showAttribTitles = true; // Show headers?
nv.attribWidth = 15; // Width of the columns
nv.attribRotation = -45; // Headers rotation
nv.attribFontSize = 13; // Headers font size
nv.attribFontSizeSelected = 32; // Headers font size when mouse over

nv.filterFontSize = 10; // Font size of the filters explanations on the bottom

nv.tooltipFontSize = 12; // Font size for the tooltip
nv.tooltipBgColor = "#b2ddf1"; // Font color for tooltip background
nv.tooltipMargin = 50; // How much to separate the tooltip from the cursor
nv.tooltipArrowSize = 10; // How big is the arrow on the tooltip

nv.digitsForText = 2; // How many digits to use for text attributes

nv.id("attribName"); // Shows this id on the tooltip, should be unique

nv.addAllAttribsRecursionLevel = Infinity; // How many levels depth do we keep on adding nested attributes
nv.addAllAttribsIncludeObjects = false; // Should addAllAttribs include objects
nv.addAllAttribsIncludeArrays = false; // Should addAllAttribs include arrays

// Default colors for values
nv.nullColor = "#ffedfd"; // Color for null values
nv.defaultColorInterpolator = d3.interpolateBlues;
nv.defaultColorInterpolatorDate = d3.interpolatePurples;
nv.defaultColorInterpolatorDiverging = d3.interpolateBrBG;
nv.defaultColorInterpolatorOrdered = d3.interpolateOranges;
nv.defaultColorInterpolatorText = d3.interpolateGreys;
nv.defaultColorRangeBoolean = ["#a1d76a", "#e9a3c9", "white"]; //true false null
nv.defaultColorRangeSelected = ["white", "#b5cf6b"];
nv.defaultColorCategorical = d3.schemeCategory10;

// // Discouraged: If you want to break perceptual rules to have many more categories use
// // the following "Piñata mode 🎉"
// nv.defaultColorCategorical = d3.schemeCategory10
//   .concat(d3.schemeAccent)
//   .concat(d3.schemePastel1)
//   .concat(d3.schemeSet2)
//   .concat(d3.schemeSet3);
// nv.maxNumDistictForCategorical = nv.defaultColorCategorical.length;

[Optional] Add your attributes manually. Navio supports six types of attributes: categorical, sequential (numerical), diverging (numerical with negative values), text, date and boolean. You can either add them manually or use `nv.addA

Related Skills

node-connect

345.4k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

104.6k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

345.4k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

345.4k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。