31:T5b5,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}

${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: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 // }33:[] 2f:{"title":"Proyectos de Ley Colombia","cells":[{"id":0,"value":"md`# Proyectos de Ley Colombia\n\nPodemos usar este notebook para explorar los más de 7000 proyectos de ley y actos legislativos discutidos en el congreso de la república de Colombia entre 1992-2018. Los datos fueron tomados [de la página del senado](http://www.senado.gov.co/az-legislativo/proyectos-de-ley) y los pueden encontrar liberados, junto con el scraper que utilicé [en este repositorio de Github](https://github.com/john-guerra/leyesSenadoColombia)`","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 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 = 25;\n nv.y0 = 180;\n \n console.log(\"data\");\n // Add the data\n nv.data(data);\n \n nv.addCategoricalAttrib(\"Anno\")\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":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 = []\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"// md`# Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"$32","pinned":true,"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":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":"mutable data = d3.csv(\"https://raw.githubusercontent.com/john-guerra/leyesSenadoColombia/master/leyesSenado.csv\", d3.autoType)\n .then(data => { \n data.forEach(d => {\n const tmp = d.Periodo.split(\" \")\n d.Tipo = tmp.slice(0, tmp.length-3).join(\" \");\n d.Anno = tmp.slice(tmp.length-3).join(\" \");\n d.FechaProcesada = timeParse(d[\"Fecha de Presentación:\"]);\n });\n return data;\n })","pinned":true,"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":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 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":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":910,"value":"d3.timeFormatDefaultLocale({\n \"dateTime\": \"%A, %e de %B de %Y, %X\",\n \"date\": \"%d/%m/%Y\",\n \"time\": \"%H:%M:%S\",\n \"periods\": [\"AM\", \"PM\"],\n \"days\": [\"domingo\", \"lunes\", \"martes\", \"miércoles\", \"jueves\", \"viernes\", \"sábado\"],\n \"shortDays\": [\"dom\", \"lun\", \"mar\", \"mié\", \"jue\", \"vie\", \"sáb\"],\n \"months\": [\"enero\", \"febrero\", \"marzo\", \"abril\", \"mayo\", \"junio\", \"julio\", \"agosto\", \"septiembre\", \"octubre\", \"noviembre\", \"diciembre\"],\n \"shortMonths\": [\"ene\", \"feb\", \"mar\", \"abr\", \"may\", \"jun\", \"jul\", \"ago\", \"sep\", \"oct\", \"nov\", \"dic\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":917,"value":"timeParse = d3.timeParse(\"%d %B %Y\")","pinned":true,"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"}