2e:null 2f:["$","title",null,{"children":"Navio Load, Reactive Brushing | Declan Naughton | Observable"}] 34:T5d0,drawTable = { const attributesToShow = selectedAttributes.slice(0,numAttribsForTable); const headers = attributesToShow.map(a =>`${a}`).join('\n'); const onDemandVis = showDemand ? html` ${vegalite(onDemandVisualization)}` : ""; console.log(headers); const div = html`

Rows Selected

Export your selection ${viewof save} ${viewof saveJSON}

${headers}

${viewof showDemand}

${viewof x_attrib}	${viewof x_type}
${viewof y_attrib}	${viewof y_type}
${viewof c_attrib}	${viewof c_type}

${onDemandVis}

` d3.select(div).select("#count").text(`Showing ${numToShow} out of ${selected.length}`); d3.select(div) .select("tbody") .selectAll("tr.data").remove(); let trs = d3.select(div) .select("tbody") .selectAll("tr.data") .data(selected .slice(0,numToShow)) .enter() .append("tr") .attr("class", "data"); attributesToShow.forEach( a=> trs.append("td").text(d=> d[a])); return div; }35:T782,// { // 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 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.nullColor = "#ffedfd"; // Color for null values // 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.linkColor = "#ccc"; // Color used for network links if provided with nv.links() // nv.nestedFilters = true; // Should navio use nested levels? // nv.showAttribTitles = true; // Show headers? // nv.attribWidth = 55; // 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.id("attribName"); // Shows this id on the tooltip, should be unique // }36:[] 32:{"id":"859956ff61df2335","slug":"navio-load-reactive-brushing","title":"Navio Load, Reactive Brushing","thumbnail":"f399edf88c200dd77c3011b237b2b8cf22aad2047b0252c5140e538e237bfa2f","access_level":"public","create_time":"$D2025-05-30T14:31:13.864Z","update_time":"$D2025-05-30T14:36:37.665Z","view_time":null,"first_public_time":"$D2025-05-30T14:34:37.937Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"fa28dcfb9c2f53ce","login":"declann","name":"Declan Naughton","avatar_url":"https://avatars-next.observableusercontent.com/b36edfd0f90184ac4c0a8d8726969fe861a1d1fe9417e998413c8a47e6163983","tier":"starter_2024"},"version":1307,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fca367047a53a31f","login":"declann","name":"Declan Naughton","avatar_url":"https://avatars-next.observableusercontent.com/b36edfd0f90184ac4c0a8d8726969fe861a1d1fe9417e998413c8a47e6163983","tier":null}],"members":[{"type":"team","id":"fa28dcfb9c2f53ce","login":"declann","name":"Declan Naughton","avatar_url":"https://avatars-next.observableusercontent.com/b36edfd0f90184ac4c0a8d8726969fe861a1d1fe9417e998413c8a47e6163983","tier":"starter_2024","role":"editor"},{"type":"individual","id":"fca367047a53a31f","login":"declann","name":"Declan Naughton","avatar_url":"https://avatars-next.observableusercontent.com/b36edfd0f90184ac4c0a8d8726969fe861a1d1fe9417e998413c8a47e6163983","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Navio Load, Reactive Brushing","cells":[{"id":0,"value":"md`# Navio Load, Reactive Brushing\n\nFork of [Navio Load](https://observablehq.com/@john-guerra/navio-load) by John Guerra. Try brushing!\n\n---\n\nUse this Notebook to load your data using [Navio](https://github.com/john-guerra/navio). Try interacting with the Widget below, creating range filters by dragging on the rows, select values by clicking them, and sort attributes by clicking on the headers.\n\nFor using navio in your notebooks check [@john-guerra/navio](https://observablehq.com/@john-guerra/navio)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"controls = html`

Navio with ${data.length} records with ${\n selectedAttributes.length\n} attributes

\n Load your own CSV/JSON data: ${viewof data} ${viewof delimiter} ${viewof checkRecursive} ${\n checkRecursive ? viewof recursionLevel : \"\"\n}\n
\n ${viewof selectedAttributes}\n \n \n \n \n \n \n \n \n \n\n

\n ${viewof noneButton} ${viewof allButton}\n	\n ${viewof pinnataMode}\n
\n ${viewof attribWidth}\n	\n ${viewof height}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"div = {\n const div = html`

`;\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"md `Here are all the selected items`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"mutable selected = []\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md `\n## How to implement Navio?\nTo create a navio you just need to import d3 (and d3-scale-chromatic if you are using version 4), then create a navio on the selection where you want it to draw, define the attributes and finally setup a update callback. See below for the code running this notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"nv = {\n data; // This is to force this cell to redraw when data changes. Only for observable\n\n const nv = navio(d3.select(div), height);\n\n nv.y0 = 180;\n nv.margin = 30;\n nv.attribWidth = attribWidth;\n if (pinnataMode) {\n nv.defaultColorCategorical = d3.schemeCategory10\n .concat(d3.schemeAccent)\n .concat(d3.schemePastel1)\n .concat(d3.schemeSet2)\n .concat(d3.schemeSet3);\n nv.maxNumDistictForCategorical = nv.defaultColorCategorical.length;\n }\n \n console.log(\"data\");\n // Add the data\n nv.data(data);\n \n // Add these attribs, based on their types\n nv.addAllAttribs(selectedAttributes.map(attr => dAttribs.get(attr)));\n \n // Set the initial visible elements, and setup a callback for when selecting new items\n mutable selected = nv.getVisible();\n nv.updateCallback(() => mutable selected = nv.getVisible());\n return nv;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"viewof height=slider({\n min: 200,\n max: 1200,\n value: 600,\n step: 10,\n title: \"Navio height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"numToShow = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"numAttribsForTable = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"md`### Details on Demmand Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"viewof showDemand = checkbox({\n title: \"On Demand Visualization?\",\n options: [{ value: true, label: \"On\" }],\n value:false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"viewof x_attrib = select({\n title: \"x_attrib\",\n options: selectedAttributes,\n value: selectedAttributes[0]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"viewof y_attrib = select({\n title: \"y_attrib\",\n options: selectedAttributes,\n value: selectedAttributes[1]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"viewof c_attrib = select({\n title: \"color_attrib\",\n options: selectedAttributes,\n value: selectedAttributes[2]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"viewof x_type = select({\n title: \"x_type\",\n options: [\"quantitative\", \"ordinal\", \"nominal\"],\n value: typeof(data[0][x_attrib]) === typeof(0) ? \"quantitative\": \"nominal\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"viewof y_type = select({\n title: \"y_type\",\n options: [\"quantitative\", \"ordinal\", \"nominal\", \"temporal\"],\n value: typeof(data[0][y_attrib]) === typeof(0) ? \"quantitative\": \"nominal\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"viewof c_type = select({\n title: \"color_type\",\n options: [\"quantitative\", \"ordinal\", \"nominal\"],\n value: typeof(data[0][c_attrib]) === typeof(0) ? \"quantitative\": \"nominal\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"onDemandVisualization = ({\n data : { values: selected},\n mark: \"circle\",\n title: \"Selected rows\",\n encoding: {\n x : { field: x_attrib, type: x_type},\n y : { field: y_attrib, type: y_type},\n color : { field: c_attrib, type: c_type}\n }\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"md`### The data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1259,"value":"viewof data = dataInput({\n value: (await require(\"vega-datasets@2.4\"))[\"penguins.json\"](),\n delimiter,\n format: \"auto\" // Optional, one of MongoExport, JSON, CSV, CSVNoAutoType\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"dAttribs = {\n\n const dAttribs = new Map();\n \n // Try to get the attributes from the first 100 records\n const attributes = data.slice(0,100)\n .reduce((res,d) => \n res.concat(checkRecursive ? navio.getAttribsFromObjectAsFn(d, recursionLevel) : Object.keys(d)), []) \n .filter(a => [\"__seqId\", \"selected\", \"__i\"].indexOf(a)===-1);\n\n // console.log(\"***attribs\", attributes, data[0]);\n \n for (let attr of attributes) { \n if (typeof(attr)===\"function\") \n dAttribs.set(attr.name, attr);\n else \n dAttribs.set(attr, attr);\n }\n return dAttribs;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"attributes = Array.from(dAttribs.keys());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"viewof selectedAttributes = searchCheckbox(attributes, {\n value: attributes,\n label: \"Attributes\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"viewof noneButton = {\n const button = html``;\n d3.select(button)\n .on(\"click\", () => {\n console.log(\"click\");\n d3.select(viewof selectedAttributes).selectAll(\"input\").property(\"checked\", false);\n (viewof selectedAttributes).dispatchEvent(new Event('change'));\n });\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"viewof allButton = {\n const button = html``;\n d3.select(button)\n .on(\"click\", () => {\n console.log(\"click\");\n d3.select(viewof selectedAttributes).selectAll(\"input\").property(\"checked\", true);\n (viewof selectedAttributes).dispatchEvent(new Event('change'));\n });\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"viewof attribWidth = slider({\n min: 1,\n max: 50,\n value: 15,\n step: 1,\n title: \"Attribute width\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"viewof pinnataMode = checkbox({\n title: \"More categorical Colors (Piñata mode 🎉)\",\n options:[{value:true, label:\"☢️\"}]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"md`### Setup for file inputs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"viewof delimiter = select({\n title: \"Delimiter\",\n options:[\n \",\",\n \";\",\n \"¬\",\n {value:\"\\t\", label:\"Tab\"}],\n value:\",\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1059,"value":"viewof checkRecursive = checkbox({\n options:[{value:false, label:\"Exand object attributes recursively\"}]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"viewof recursionLevel = slider({\n value:1,\n max:10,\n step:1,\n title: \"Recursion Level\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"viewof save = DOM.download(\n new Blob([d3.csvFormat(copyOnlySelectedAttrs(selected))], {type: \"text/csv\"}),\n \"export.csv\",\n `Export ${selected.length} selected rows`\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"viewof saveJSON = DOM.download(\n new Blob([JSON.stringify(copyOnlySelectedAttrs(selected))], {type: \"text/json\"}),\n \"export.json\",\n `Export ${selected.length} selected rows as JSON`\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"copyOnlySelectedAttrs = (data) => data.map((d) => {\n let res = {};\n for (let att in d) {\n if (d.hasOwnProperty(att) && selectedAttributes.indexOf(att)!=-1)\n res[att] = d[att];\n }\n return res;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"// navio = require('navio@0.0.67') // for d3@4\n// navio = require(`http://localhost:8080/dist/navio.js?${Date.now()}`)\n//navio = require(\"navio@0.0.75\")\nnavio = require(\"https://cdn.jsdelivr.net/gh/declann/navio@main/dist/navio.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"vegalite = require(\"@observablehq/vega-lite@0.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"import {checkbox, select,slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"// import {dataInput} from \"@john-guerra/file-input-with-default-value\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"import {searchCheckbox} from \"@john-guerra/search-checkbox\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"import {dataInput} from \"@john-guerra/data-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"