Navio / John Alexis Guerra Gómez

John Alexis Guerra Gómez

I love to build dataviz for insight discovery. I also love to put technology to the service of humanity

Workspace

Public

Edited

Apr 25

Paused

2 forks

Importers

18 stars

viewof selected = navio(data, { attribWidth: 20, addAllAttribsIncludeObjects: true, addAllAttribsRecursionLevel: 0 })

async function navio(data, _options = {}) {

const options = {

height: 300, // Navio's height

attribs: undefined, // array of attrib names to be used, leave as null for all of them

x0: 0, //Where to start drawing navio in x

y0: 100, //Where to start drawing navio in y, useful if your attrib names are too long

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();

}

const widget = ReactiveWidget(div, {

value: data,

showValue

});

function showValue() {

// TODO update navio selection

// nv.data(data);

// nv.addAllAttribs(options.attribs);

// nv.hardUpdate();

}

nv.updateCallback(() => {

widget.setValue(nv.getVisible());

// div.value = nv.getVisible();

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

// notify(div);

});

showValue();

// widget.addEventListener("input", () => {

// showValue();

// });

// div.value = data;

widget.nv = nv;

return widget;

}

// 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

})

Inputs.bind(Inputs.table(data), viewof selected)

d3 = require("d3@7")

navio_npm = {

// return directly from npm

// return require("navio@0.0.75")

try {

const navio =

await require(`http://localhost:8080/dist/navio.js?${Date.now()}`);

console.log("Loading navio from localhost");

return navio;

} catch {

return require("navio@0.0.75");

}

// navio = require('navio@0.0.67') // for d3@4

// navio = require("navio@0.0.75")

import { Table } from "@observablehq/inputs"

ReactiveWidget = require("reactive-widget-helper")

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