A d3 visualization widget to help summarizing, exploring and navigating large network visualizations
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
example_d3v3 adding back the examples Sep 14, 2018
example_vastChallenge2017
imgs
src improving readme Oct 4, 2018
.gitignore
.npmignore
LICENSE
README.md
npm-debug.log log debug Oct 30, 2017
package-lock.json
package.json
rollup.config.js improving readme Oct 4, 2018

README.md

Navio

Navio is a d3 visualization widget to help summarizing, exploring and navigating large datasets. It supports three main interactions, click on a header to sort the data, click on a value to select it, or drag to select a range. Navio Demo with the MoMa Collection

Try it on Observable:

You can explore your own data very easily on ObervableHQ. Just fork this base Navio notebook, change your data and attributes.

Use it with Shipyard:

If you have data and just want a quick way of summarize it, explore it or filter it, you can try Shipyard, our stand-alone application for Navio. (You can also export template code to use it)

Try Shipyard Shipyard demo

Demos:

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://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/navio/dist/navio.min.js"></script>

Requires d3 v4 or higher and d3-scale-chromatic.

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.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/navio/dist/navio.min.js"></script>
<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);

  // NAVIO Step 2. Add the Categorical and Sequential attributes you want to use
  var catColumns = [ YOUR_CATEGORICAL_ATTRIBUTE_NAMES_HERE ];
  var seqColumns = [ YOUR_SEQUENTIAL_ATTRIBUTE_NAMES_HERE ];
  catColumns.forEach((c) => nv.addCategoricalAttrib(c));
  seqColumns.forEach((c) => nv.addSequentialAttrib(c));

  // NAVIO Step 3. Load your data!
  d3.csv(YOUR_DATA, function (err, data) {
    if (err) throw err;

    nv.data(data);
  });
</script>
</body>
</html>

Step by step

  1. 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>
  1. 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.v4.min.js"></script>
<script type="text/javascript" src="https://john-guerra.github.io/navio/Navio.js"></script>
<script type="text/javascript">
  //   YOUR_JS_CODE_HERE
</script>
  1. Create an array with the columns that are categorical and another for the sequential.
var catColumns = [
  "car-type",
  "gate-name",
  "dayOfTheWeek"
];
var seqColumns = [
  "minutes",
  "hours",
  "day",
  "month"
];
  1. Set the Navio and its attributes
var nv = navio(d3.select("#Navio"), 600);
catColumns.forEach((c) => nv.addCategoricalAttrib(c));
seqColumns.forEach((c) => nv.addSequentialAttrib(c));

// You can also pass custom Attributes
var color = d3.scaleOrdinal(d3.schemeSet3)
nv.addAttrib("cluster", color);
  1. Read CSV dataset and set the data
d3.csv("./dataset.csv", function (err, data) {
  if (err) throw err;
  nv.data(data);
});

License

Navio.js is licensed under the MIT license. (http://opensource.org/licenses/MIT)