Navio / John Alexis Guerra Gómez

maxNumDistictForCategorical: 10, // addAllAttribs uses this for deciding if an attribute is categorical (has less than maxNumDistictForCategorical categories) or ordered

maxNumDistictForOrdered: 90, // addAllAttribs uses this for deciding if an attribute is ordered (has less than maxNumDistictForCategorical categories) or text. Use maxNumDistictForOrdered : Infinity for never choosing Text

howManyItemsShouldSearchForNotNull: 100, // How many rows should addAllAttribs search to decide guess an attribute type

margin: 10, // Margin around navio

levelsSeparation: 40, // Separation between the levels

divisionsColor: "white", // Border color for the divisions

levelConnectionsColor: "rgba(205, 220, 163, 0.5)", // Color for the conections between levels

divisionsThreshold: 4, // What's the minimum row height needed to draw divisions

fmtCounts: d3.format(",.0d"), // Format used to display the counts on the bottom

legendFont: "14px sans-serif", // The font for the header

nestedFilters: true, // Should navio use nested levels?

showAttribTitles: true, // Show headers?

attribWidth: 15, // Width of the columns

attribRotation: -45, // Headers rotation

attribFontSize: 13, // Headers font size

attribFontSizeSelected: 32, // Headers font size when mouse over

filterFontSize: 10, // Font size of the filters explanations on the bottom

tooltipFontSize: 12, // Font size for the tooltip

tooltipBgColor: "#b2ddf1", // Font color for tooltip background

tooltipMargin: 50, // How much to separate the tooltip from the cursor

tooltipArrowSize: 10, // How big is the arrow on the tooltip

digitsForText: 2, // How many digits to use for text attributes

addAllAttribsRecursionLevel: Infinity, // How many levels depth do we keep on adding nested attributes

addAllAttribsIncludeObjects: true, // Should addAllAttribs include objects

addAllAttribsIncludeArrays: true, // Should addAllAttribs include arrays

nullColor: "#ffedfd", // Color for null values

defaultColorInterpolator: d3.interpolateBlues,

defaultColorInterpolatorDate: d3.interpolatePurples,

defaultColorInterpolatorDiverging: d3.interpolateBrBG,

defaultColorInterpolatorOrdered: d3.interpolateOranges,

defaultColorInterpolatorText: d3.interpolateGreys,

defaultColorRangeBoolean: ["#a1d76a", "#e9a3c9", "white"], //true false null

defaultColorRangeSelected: ["white", "#b5cf6b"],

defaultColorCategorical: d3.schemeCategory10,

showSelectedAttrib: true, // Display the attribute that shows if a row is selected

showSequenceIDAttrib: true, // Display the attribute with the sequence ID

..._options

};

let div = html`<div style="display:block; overflow-x:scroll"></div>`;

// Create the navio

const nv = navio_npm(d3.select(div), options.height);

for (let opt in options) {

if (opt === "id") {

nv.id(options[opt]);

} else if (opt !== "attribs") {

nv[opt] = options[opt];

}

// Add the data

nv.data(data);

if (options.attribs) {

nv.addAllAttribs(options.attribs);

} else {

nv.addAllAttribs();

}

nv.updateCallback(() => {

div.value = nv.getVisible();

div.dispatchEvent(new Event("input", { bubbles: true }));

// notify(div);

});

div.value = data;

div.nv = nv;

return div;

}

// data = d3.csv("https://raw.githubusercontent.com/john-guerra/visPubNetwork/master/IEEE%20VIS%20papers%201990-2018%20-%20Main%20dataset.csv", d3.autoType)

data = FileAttachment("IEEE VIS papers 1990-2024 - Main dataset.csv").csv({

typed: true

})

d3 = require("d3@7")

navio_npm = require("navio@0.0.75")

// navio_npm = require(`http://localhost:8080/dist/navio.js?t=${performance.now()}`)

import { Table } from "@observablehq/inputs"

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more