31:T768,vegaEmbed( { "$schema": "https://vega.github.io/schema/vega-lite/v3.json", "width": width - 150, "height": height, "repeat": { "row": quantitativeAttributes.slice(0,maxAttribsForMatrix), "column": quantitativeAttributes.slice(0,maxAttribsForMatrix), }, "config": { // Configuration Object "repeat": { // - Repeat Configuratio "spacing": 0, } }, "spec": { "data": {"values": data.slice(0,maxRowsForMatrix)}, "mark": {"type": "point", size: 10, opacity: 0.9}, "width": Math.max(10,(Math.min(width,height)-100)/maxAttribsForMatrix), "height":Math.max(10,(Math.min(width,height)-100)/maxAttribsForMatrix), "selection": { "brush": { "type": "interval", "resolve": "union", "on": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!", "translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!", "zoom": "wheel![event.shiftKey]" }, "grid": { "type": "interval", "resolve": "global", "bind": "scales", "translate": "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!", "zoom": "wheel![!event.shiftKey]" } }, "encoding": { "x": { "field": {"repeat": "column"}, "type": "quantitative", "scale": {"zero": false}, // "axis": { // ...(maxRowsForMatrix>7 ? {"title": null} : {"":""}) // } }, "y": { "field": {"repeat": "row"}, "type": "quantitative", "scale": {"zero": false}, "axis": {"minExtent": 30, // ...(maxRowsForMatrix>7 ? {"title": null} : {"":""}) } }, "color": { "condition": { "selection": "brush", "field": c_attrib, "type": c_type }, "value": "grey" } } } }) 32: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; }33:[] 2f:{"title":"Navio vs Scatterplot Matrix","cells":[{"id":0,"value":"md`# Navio vs Scatterplot Matrix\n\nThis notebook compares [Navio](https://navio.dev) and a [scatterplot matrix](https://en.wikipedia.org/wiki/Scatter_plot#Scatterplot_matrices) for summarizing large multivariate data. Scatterplot matrixes usually load only quantitative data, so for this comparison we use a small NBA Dataset containing few rows, but many quantitative attributes. This vega-lite implementation of the scatterplot matrix, offers some interactions but breaks with a few hundred rows when displaying a dozen of attributes.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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 nv.y0=80;\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"},{"id":930,"value":"html `

Scatterplot matrix ${maxRowsForMatrix} rows, ${maxAttribsForMatrix} attributes

\n\nUnfortunately you can only show quantitative values on a scatterplot matrix, and we have to restrict the number of rows and attributes to show for avoiding breaking the notebook. Play with the parameters below\n\n\n\n\n

${viewof maxRowsForMatrix}	${viewof maxAttribsForMatrix}
${viewof c_attrib}	${viewof c_type}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"md `Here are all the selected items`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"mutable selected = []\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"quantitativeAttributes = selectedAttributes.filter(d=> typeof(data[0][d]) === typeof(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"viewof maxRowsForMatrix = slider({\n min: 1, \n max: data.length, \n value: data.length>200 ? 200 : data.length,\n step: 1, \n description: \"How many rows to show in the matrix\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1152,"value":"viewof maxAttribsForMatrix = slider({\n min: 1, \n max: quantitativeAttributes.length, \n value: quantitativeAttributes.length > 6 ? 6 : quantitativeAttributes.length,\n step: 1, \n description: \"How many attributes to include in the matrix\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"height=450","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"numToShow = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"numAttribsForTable = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":1174,"value":"viewof c_attrib = select({\n title: \"color_attrib\",\n options: selectedAttributes,\n value: selectedAttributes[2]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1172,"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"},{"id":767,"value":"md`### The data`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":9,"value":"mutable data = d3.csv(\"https://gist.githubusercontent.com/john-guerra/567e499938aff19b567900ed9313ef8d/raw/d4bb1559c58ba573726fcc9782bc706e7ea58093/nba-data-totals.csv\", d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":734,"value":"md`### Setup for file inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":544,"value":"viewof myFile = html``","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":897,"value":"isNumerical = (attr) => typeof(data[0][attr]) === typeof(0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"navio = require('navio@0.0.52')","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"vegaEmbed = require(\"vega-embed@4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":725,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"import {checkbox, select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}