2e:null 2f:["$","title",null,{"children":"Tabular Data Viewer 中 | Taras Novak | Observable"}] 34:T415,dataSets = [ 'airports.csv', 'co2-concentration.csv', 'disasters.csv', 'flights-3m.csv', 'flights-airport.csv', 'gapminder-health-income.csv', 'github.csv', 'iowa-electricity.csv', 'la-riots.csv', 'lookup_groups.csv', 'lookup_people.csv', 'population_engineers_hurricanes.csv', 'seattle-temps.csv', 'seattle-weather.csv', 'sf-temps.csv', 'sp500.csv', 'stocks.csv', 'us-employment.csv', 'weather.csv', 'windvectors.csv', 'zipcodes.csv', 'barley.json', 'birdstrikes.json', 'budget.json', 'budgets.json', 'burtin.json', 'cars.json', 'climate.json', 'countries.json', 'crimea.json', 'driving.json', 'flare-dependencies.json', 'flare.json', 'flights-2k.json', 'flights-5k.json', 'flights-10k.json', 'flights-20k.json', 'flights-200k.json', 'flights-200k.arrow', 'gapminder.json', 'income.json', 'iris.json', 'jobs.json', 'londonCentroids.json', 'monarchs.json', 'movies.json', 'normal-2d.json', 'points.json', 'udistrict.json', 'unemployment-across-industries.json', 'us-state-capitals.json', 'weball26.json', 'wheat.json' ]35:[] 32:{"id":"5ce07683f51a862f","slug":"tabular-data-viewer","title":"Tabular Data Viewer 中","thumbnail":"5b79ba30ff3fb753beca029345ed608893356371519dbdfdb8a64e8911cc6899","access_level":"public","create_time":"$D2021-12-19T12:37:02.703Z","update_time":"$D2022-09-05T09:12:33.442Z","view_time":null,"first_public_time":"$D2021-12-19T13:11:25.259Z","has_unpublished_edits":null,"fork":{"id":"d5a4b7a41937a0af","slug":"data-table-viewer","title":"Data Table Viewer","owner":{"id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak"}},"stars":8,"starred":false,"owner":{"type":"team","id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":"starter_2024"},"version":323,"publish_version":323,"role":null,"authored":false,"authors":[{"type":"individual","id":"17b72db66175b428","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":null}],"members":[{"type":"individual","id":"17b72db66175b428","login":"randomfractals","name":"Taras Novak","avatar_url":"https://avatars-next.observableusercontent.com/57d3bf95c5ecfa9ee3b08dec1a71504412704a6788f769860bf9d5191e789336","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"729de16217a66212","slug":"tables","title":"Tables","owner":{"id":"da0961e4e88ca7cb","login":"randomfractals","name":"Taras Novak"}},"type":"notebook","body":{"title":"Tabular Data Viewer 中","cells":[{"id":0,"value":"# Tabular Data Viewer 中\n\nUse this [Tabular Data Viewer 中](https://twitter.com/hashtag/TabularDataViewer?src=hashtag_click) notebook 📓 to view sample datasets or preview any public\n[Apache Arrow](https://observablehq.com/@randomfractals/apache-arrow), \n**CSV**, [**GeoJSON**](https://www.rfc-editor.org/rfc/rfc7946.html) or **JSON array** data with [Summary Table](https://observablehq.com/@observablehq/summary-table) and [Tabulator](http://tabulator.info/). Just paste your data url to fetch it. \n\nAlso, try our [Data Table](https://github.com/RandomFractals/vscode-data-table/releases) 🈸 notebook 📓 cell ⌗ output renderer extension with [VSCode Notebooks](https://marketplace.visualstudio.com/search?target=VSCode&category=Notebooks&sortBy=Installs) 📚.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"viewof dataSet = Inputs.select(dataSets, {\n label: html`dataset`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"viewof dataUrl = Inputs.text({\n label: html`dataUrl`,\n placeholder: 'type data url and click fetch', \n value: `${dataUrlParam ? dataUrlParam : 'https://raw.githubusercontent.com/vega/vega-datasets/master/data/' + dataSet}`,\n submit: 'fetchData'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"shareLink = md `*share a link to your [data](https://observablehq.com/@randomfractals/tabular-data-viewer?dataUrl=${dataUrl})*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof dataSummaryView = SummaryTable(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"## Tabular Data View","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"viewof tableOptions = Inputs.form([\n Inputs.button('Download', {reduce: () => table.download('csv', 'data.csv')}),\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"tableContainer = html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"table = new Tabulator('#table-container', {\n height: 645,\n autoColumns: true,\n columnDefaults: {\n headerMenu: columnHeaderMenu\n },\n clipboard: true, // eanble clipboard copy and paste\n clipboardPasteAction: 'replace',\n layout: tableLayout,\n layoutColumnsOnNewData: true,\n movableColumns: movableColumns,\n movableRows: movableRows,\n selectable: selectableRows,\n rowContextMenu: rowContextMenu,\n pagination: pagination,\n paginationSize: paginationSize,\n paginationSizeSelector: pageSizes,\n renderVerticalBuffer: 300, // set virtual DOM buffer to 300px\n debugInvalidOptions: true, // tabulator warnings\n debugEventsExternal: ['tableBuilding', 'dataLoaded', 'tableBuilt'], // log specified tabulator events\n \tdata: data,\n persistenceMode: 'local',\n persistenceID: dataUrl,\n persistentLayout: true,\n persistence: {\n sort: true,\n filter: true,\n group: true,\n columns: true,\n }\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"### Table UX Tips\n- Hold **CTRL** or **Shift** key when clicking on column headers to **Sort** table data by multiple columns.\n- See [Clipboard](http://tabulator.info/docs/5.0/clipboard) options for the clipboard copy and paste data options.\n- Use row context menu to **Delete** or **Freeze** a row.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"## Table Toggles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"viewof tableLayout = Inputs.select(tableLayouts, {value: 'fitDataStretch', label: 'Table Layout'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"viewof pagination = Inputs.toggle({label: 'Pagination', value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"viewof paginationSize = Inputs.select(pageSizes, {value: 100000, label: 'Page Size'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"viewof movableColumns = Inputs.toggle({label: 'Movable Columns', value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"viewof movableRows = Inputs.toggle({label: 'Movable Rows', value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"viewof selectableRows = Inputs.toggle({label: 'Selectable Rows', value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"// from: http://tabulator.info/docs/5.0/layout\ntableLayouts = [\n 'fitData',\n 'fitDataFill',\n 'fitDataStretch',\n 'fitDataTable',\n 'fitColumns'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"pageSizes = [20, 100, 1000, 10000, 100000, 1000000, 10000000]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"columnHeaderMenu = [\n {\n label: 'Hide Column',\n action: function (e, column) {\n column.hide();\n }\n },\n {\n label: \"Freeze Column\",\n action: function (e, column) {\n column.updateDefinition({ frozen: true });\n }\n },\n {\n label: 'Delete Column',\n action: function (e, column) {\n column.delete();\n }\n }\n];\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"// row context menu. see: http://tabulator.info/docs/5.0/menu\nrowContextMenu = [\n {\n label: \" Delete Row\",\n action: function(e, row) {row.delete()}\n },\n {\n label: \"Freeze Row\",\n action: function (e, row) { row.freeze(); }\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"data = fetchData(dataUrl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"dataUrlParam = new URLSearchParams(html``.search).get('dataUrl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"async function fetchData(dataUrl) {\n let data = [];\n if (dataUrl.endsWith('.csv')) {\n data = await d3.csvParse(await d3.text(dataUrl), d3.autoType);\n } \n else if (dataUrl.endsWith('.json') || dataUrl.endsWith('.geojson')) {\n data = await d3.json(dataUrl);\n if (data.features) {\n data = flattenGeoData(data);\n }\n }\n else if (dataUrl.endsWith('.arrow')) {\n data = loadArrowData(dataUrl);\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"function flattenGeoData(data) {\n if (data.features) {\n const features = data.features.map(feature => {\n let geometry = {};\n Object.keys(feature?.geometry).forEach(key => {\n geometry[`geometry.${key}`] = feature.geometry[key];\n });\n let properties = {};\n Object.keys(feature?.properties).forEach(key => {\n properties[`${key}`] = feature.properties[key];\n });\n const {geometry: g, properties: p, ...restOfKeys} = feature;\n return {...restOfKeys, ...properties, ...geometry};\n });\n return features;\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"async function loadArrowData(dataUrl){\n const response = await fetch(dataUrl);\n const arrayBuffer = await response.arrayBuffer();\n const table = arrow.Table.from(new Uint8Array(arrayBuffer));\n const rows = Array(table.length);\n const fields = table.schema.fields.map(d => d.name); \n for (let i=0, n=rows.length; i {\n const column = table.getColumnAt(index);\n proto[fieldName] = column.get(i);\n });\n rows[i] = proto;\n }\n return rows;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"## Table Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"tableStyles = html `\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"html`\ntabulator.min.css`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"import {SummaryTable} from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"Tabulator = require('https://unpkg.com/tabulator-tables@5.3.1');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"arrow = require('apache-arrow@6.0.1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"