2d:null 2e:["$","title",null,{"children":"Navio vs Parallel Coordinates | John Alexis Guerra Gómez | Observable"}] 33:Tb32,vegaEmbed( { "$schema": "https://vega.github.io/schema/vega/v5.json", "width": width - 150, "height": height, "padding": 5, "config": { "axisY": { "titleX": -2, "titleY": height, "titleAngle": -45, "titleAlign": "right", "titleBaseline": "top" } }, "data": [ { "name":"data", "values": (selected, data.slice(0,maxRowsForParallel)), }, { "name": "fields", "values": selectedAttributes } ], // "signals": [ // { // "name": "hover", // "value": "gray", // "on": [ // {"events": "*:mouseover", "encode": "hover"}, // {"events": "*:mouseout", "encode": "leave"} // ] // } // ], "scales": [ { "name": "ord", "type": "point", "range": "width", "round": true, "domain": {"data": "fields", "field": "data"} }, { "name": "color", "type": "ordinal", "domain": [false, true], "range": ["gray", "steelblue"] }, ...selectedAttributes.map( a => ( { "name": a, "type": isNumerical(a) ? "linear" : "point", "range": "height", "zero": false, "nice": true, "domain": {"data": "data", "field": a} } )) ], "axes": selectedAttributes.map( a => ( { "orient": "left", "zindex": 1, "scale": a, "title": a, "ticks": true, "labels": isNumerical(a), "offset": {"scale": "ord", "value": a, "mult": -1} } )), "marks": [ { "type": "group", "from": {"data": "data"}, "marks": [ { "type": "line", "from": {"data": "fields"}, "encode": { "enter": { "x": {"scale": "ord", "field": "data"}, "y": { "scale": {"datum": "data"}, "field": {"parent": {"datum": "data"}} }, "strokeWidth": {"value": 1.01}, "stroke": { "scale": "color", "field": {"parent": "selected"}}, "strokeOpacity": {"value": 100/data.length} }, // enter "update" : { "stroke": { "scale": "color", "field": {"parent": "selected"}} } // "hover": { // "stroke": {"value": "firebrick"}, // "strokeOpacity": {"value": 1} // }, // "leave": { // "stroke": {"value": "gray"}, // "strokeOpacity": {"value": 0.2} // }, } } ] } ] } ) 34:T49f,drawTable = { const attributesToShow = selectedAttributes.slice(0,numAttribsForTable); const headers = attributesToShow.map(a =>`${a}`).join('\n'); const div = html`

Rows Selected

Export your selection ${viewof save}

${headers}

` 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=> { if (a === "image") { trs.append("td") .append("img") .attr("height", "80px") .attr("src", d=> d[a]); } else { trs.append("td").text(d=> d[a]) } }); return div; }35:[] 31:{"id":"5e064bedbaaf144b","slug":"navio-vs-parallel-coordinates","title":"Navio vs Parallel Coordinates","thumbnail":"746708def7eb351651abde62d1357efd30b3c5ab287bbfd5199aec221d45de02","access_level":"public","create_time":"$D2019-04-16T15:08:26.621Z","update_time":"$D2023-11-21T04:47:42.406Z","view_time":null,"first_public_time":"$D2019-04-23T19:53:36.488Z","fork":{"id":"761f7cd5b415563e","slug":"navio-load","title":"Navio Load","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":6,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":1162,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"c8880bbaf7be4d0c","slug":"navio","title":"Navio","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"title":"Navio vs Parallel Coordinates","cells":[{"id":0,"value":"md`# Navio vs Parallel Coordinates\n\nThis notebook compares [Navio](https://navio.dev) and [parallel coordinates](https://en.wikipedia.org/wiki/Parallel_coordinates) for summarizing large multivariate data. The notebook loads by default the [IEEEVIS Publication Dataset](https://sites.google.com/site/vispubdata/home) that isn't too big, but you can test it with your own data. This vega implementation of the Parallel Coordinates chart breaks with medium size datasets, even though it uses canvas for rendering.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"html`\n

\n Load your own CSV/JSON data: ${viewof delimiter} ${viewof myFile} \n

\n
\n\n${viewof selectedAttributes}\n${viewof noneButton} ${viewof allButton}\n\n

Navio with ${(mutable data, data.length)} rows, ${selectedAttributes.length} attributes

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

`\n \n mutable 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 nv.attribWidth = 15;\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);\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\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"html `

Parallel coordinates with ${maxRowsForParallel} rows, ${selectedAttributes.length} attributes

\nWith many columns and rows, parallel coordinates start to struggle, so use this slider to control how many rows you want the chart to show\n${viewof maxRowsForParallel}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"$33","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":956,"value":"viewof maxRowsForParallel = slider({\n min: 1, \n max: data.length, \n value: data.length>1000 ? 1000 : data.length,\n step: 1, \n description: \"How many rows to show in the parallel coordinates chart\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"height=450","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 = 10","pinned":false,"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":739,"value":"viewof selectedAttributes = checkbox({\n title: \"Attributes\",\n description: \"What attributes to use\",\n options: attributes.map(a => ({value:a, label:a})),\n submit: attributes.length>10 ? true :false ,\n value: attributes,\n form: html``\n })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"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":1019,"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":9,"value":"mutable data = d3.csv(\"https://raw.githubusercontent.com/john-guerra/navio/master/example_vispubdata/IEEE%20VIS%20papers%201990-2018%20-%20Main%20dataset.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"attributes = {\n mutable data;\n return d3.keys(data[0]).filter(a => [\"__seqId\", \"selected\", \"__i\"].indexOf(a)===-1);\n}","pinned":false,"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 {value:\"\\t\", label:\"Tab\"}],\n value:\",\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"viewof myFile = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"Files.text(myFile).then(data => {\n try {\n mutable data = JSON.parse(data); \n \n } catch (e) { \n mutable data = d3.dsvFormat(delimiter).parse(data, d3.autoType);\n }\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(selected)], {type: \"text/csv\"}),\n \"export.csv\",\n `Export ${selected.length} selected rows`\n\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"isNumerical = (attr) => typeof(data[0][attr]) === typeof(0)","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.38')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"vegaEmbed = require(\"vega-embed@4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"d3 = require(\"d3@5\")","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"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"