31: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; }32:T475,mutable data = d3.json("https://raw.githubusercontent.com/john-guerra/leyesSenadoColombia/master/hojasDeVidaSenado.json") // .then(parsedData => { // parsedData.forEach(d => { // d["Última experiencia"] = d["Experiencia Laboral"] ? d["Experiencia Laboral"][0].Cargos : undefined; // d["Último contrato"] = d["Contratos Vigentes"] ? +d["Contratos Vigentes"][0].Monto.replace(new RegExp(",", 'g'), "").split(".")[0] : undefined; // d["Última formación"] = d["Formacion Académica"] ? d["Formacion Académica"][0] : undefined; // try { // const formacion = d["Última formación"].split("-"); // d["Grado"] = formacion[0].trim(); // d.Area = formacion[1].trim(); // d.Graduado = formacion[formacion.length-1].trim(); // } catch(_) { // } // try { // const mun = d["Municipio de Nacimiento"].split(","); // d["Municipio de Nacimiento (solo)"] = mun[0].trim(); // d["Departamento de Nacimiento"] = mun.slice(1).join(",").trim(); // } catch(_) { // } // }); // return parsedData; // })33:[] 2f:{"title":"Hojas de vida senado","cells":[{"id":0,"value":"md`# Hojas de vida senado\n\nUna pequeña interfaz para navegar las hojas de vida de los funcionarios del senado de Colombia`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"html`

Navio with ${(mutable data, data.length)} records

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"div = {\n const div = html`

`\n \n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"$31","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 = []","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":605,"value":"nv = {\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\n nv.attribWidth = 20;\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 return nv;\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 = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"md`### Details on Demmand Visualization`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":787,"value":"viewof y_type = select({\n title: \"y_type\",\n options: [\"quantitative\", \"ordinal\", \"nominal\", \"date\"],\n value: typeof(data[0][y_attrib]) === typeof(0) ? \"quantitative\": \"nominal\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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})","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"attributes = {\n mutable data;\n // Use the first 100 to get the attributes\n return d3.set(data.slice(0,100).reduce((res,d) => res.concat(d3.keys(d)), [])).values().filter(a => [\"__seqId\", \"selected\", \"__i\"].indexOf(a)===-1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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 const parsedData = JSON.parse(data); \n mutable data = parsedData;\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(copyOnlySelectedAttrs(selected))], {type: \"text/csv\"}),\n \"export.csv\",\n `Export ${selected.length} selected rows as CSV`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":941,"value":"viewof saveJSON = DOM.download(\n new Blob([JSON.stringify(copyOnlySelectedAttrs(data))], {type: \"text/json\"}),\n \"export.json\",\n `Export ${selected.length} selected rows as JSON`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"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"},{"id":732,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"navio = require('navio@0.0.38')","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"vegalite = require(\"@observablehq/vega-lite@0.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"import {checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}