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

Mar 22

Paused

2 forks

Importers

17 stars

viewof selected = navio(data, { attribWidth: 20 })

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

const options = {

height: 300, // Navio's height

attribs: null, // 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();

}

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"

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more