28:null 29:["$","title",null,{"children":"National Parks Tabular Data Viewer 中 (Explore Data) | Melanie Walsh | Observable"}] 2f:T437,alltable = new Tabulator("#alltable-container", { height: 645, autoColumns: true, columnDefaults: { headerMenu: columnHeaderMenu, formatter: generalFormatter, headerFilter: "input", headerFilterPlaceholder: "Search", headerFilterLiveFilter: true // maxWidth: 200 }, clipboard: true, // eanble clipboard copy and paste clipboardPasteAction: "replace", layout: tableLayout, layoutColumnsOnNewData: true, movableColumns: movableColumns, movableRows: movableRows, selectable: selectableRows, rowContextMenu: rowContextMenu, pagination: pagination, paginationSize: paginationSize, paginationSizeSelector: pageSizes, renderVerticalBuffer: 300, // set virtual DOM buffer to 300px debugInvalidOptions: true, // tabulator warnings debugEventsExternal: ["tableBuilding", "dataLoaded", "tableBuilt"], // log specified tabulator events data: table_data, persistenceMode: "local", persistenceID: alldataUrl, persistentLayout: true, persistence: { sort: true, filter: true, group: true, columns: true } })30:T805,function setupFilterRow(alltable) { const table_data = alltable.getData(); if (!Array.isArray(table_data) || table_data.length === 0) { console.error("Table data is empty or not an array."); return; } const filterColumns = Object.keys(table_data[0]).map((key) => ({ title: key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " "), field: key })); // Define variables for input elements const fieldEl = document.getElementById("filter-field"); const typeEl = document.getElementById("filter-type"); const valueEl = document.getElementById("filter-value"); if (!fieldEl || !typeEl || !valueEl) { console.error( "One or more elements not found: filter-field, filter-type, filter-value" ); return; } // Clear previous options fieldEl.innerHTML = ""; typeEl.innerHTML = ""; // Populate filter-field options filterColumns.forEach((col) => { const option = document.createElement("option"); option.value = col.field; option.textContent = col.title; fieldEl.appendChild(option); }); // Populate filter-type options const filterTypes = ["=", "<", "<=", ">", ">=", "!=", "like"]; filterTypes.forEach((type) => { const option = document.createElement("option"); option.value = type; option.textContent = type; typeEl.appendChild(option); }); // Trigger setFilter function with correct parameters function updateFilter() { const filterVal = fieldEl.value; const typeVal = typeEl.value; if (filterVal) { alltable.setFilter(filterVal, typeVal, valueEl.value); } } // Update filters on value change fieldEl.addEventListener("change", updateFilter); typeEl.addEventListener("change", updateFilter); valueEl.addEventListener("keyup", updateFilter); // Clear filters on "Clear Filters" button click document .getElementById("filter-clear") .addEventListener("click", function () { fieldEl.value = ""; typeEl.value = "="; valueEl.value = ""; alltable.clearFilter(); }); }31:[] 2c:{"id":"878f51be5dd541f5","slug":null,"title":"National Parks Tabular Data Viewer 中 (Explore Data)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-07-26T18:07:22.946Z","update_time":"$D2025-03-22T01:09:20.190Z","view_time":null,"first_public_time":"$D2024-07-26T18:21:52.696Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"64cb03831ce357a8","login":"mellymeldubs","name":"Melanie Walsh","avatar_url":"https://avatars-next.observableusercontent.com/b844e0b83b020387c8c7f8e02189c8037f7dda15061c591e49ca2fc69da49fca","tier":"pro_2024"},"version":507,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6342b8ef5215128d","login":"juan-carlos-garcia","name":"Juan Carlos Garcia","avatar_url":"https://avatars-next.observableusercontent.com/a49028003f6484a6da1b44a5ab05fd1c195861117b90e8316427ac6899bc9a45","tier":null}],"members":[{"type":"individual","id":"6342b8ef5215128d","login":"juan-carlos-garcia","name":"Juan Carlos Garcia","avatar_url":"https://avatars-next.observableusercontent.com/a49028003f6484a6da1b44a5ab05fd1c195861117b90e8316427ac6899bc9a45","tier":null,"role":"editor"},{"type":"team","id":"64cb03831ce357a8","login":"mellymeldubs","name":"Melanie Walsh","avatar_url":"https://avatars-next.observableusercontent.com/b844e0b83b020387c8c7f8e02189c8037f7dda15061c591e49ca2fc69da49fca","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"National Parks Tabular Data Viewer 中 (Explore Data)","cells":[{"id":0,"value":"# National Parks Tabular Data Viewer 中 (Explore Data)","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"viewof alldataSet = Inputs.select(dataSets, {\n label: html`Select dataset`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof alldataUrl = Inputs.text({\n label: html`Copy raw data url`,\n placeholder: \"type data url and click fetch\",\n value: `${\n dataUrlParam\n ? dataUrlParam\n : \"https://raw.githubusercontent.com/melaniewalsh/responsible-datasets-in-context/main/datasets/national-parks/\" +\n alldataSet\n }`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"allshareLink = md`*share a link to your [data](https://observablehq.com/@randomfractals/tabular-data-viewer?dataUrl=${alldataUrl})*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"allcolumns = raw_data.columns","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"viewof allselectedColumns = Inputs.checkbox(allcolumns, {\n label: \"View Summary of Selected Columns\",\n value: allcolumns\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"column_data = {\n const selected = new Set(allselectedColumns);\n return summary_data.map(row => {\n let newRow = {};\n for (let key in row) {\n if (selected.has(key)) {\n newRow[key] = row[key];\n }\n }\n return newRow;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"// Function to copy text to clipboard\nfunction copyToClipboard(text) {\n const tempInput = document.createElement(\"input\");\n tempInput.value = text;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand(\"copy\");\n document.body.removeChild(tempInput);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":449,"value":"// Create the copy URL button\nviewof copyUrlButton = Inputs.button(\n html`Copy Raw Data URL `,\n {\n reduce: () => {\n copyToClipboard(alldataUrl);\n alert(\"URL copied to clipboard: \" + alldataUrl);\n }\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"viewof alldataSummaryView = SummaryTable(column_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"## Tabular Data View","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"viewof alltableOptions = Inputs.form([\n Inputs.button(\"Download Data\", {\n reduce: () => alltable.download(\"csv\", alldataSet),\n className: \"custom-button\"\n })\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"viewof alltwobuttons = html`\n

\n ${viewof alltableOptions} ${viewof copyUrlButton}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"filterRow = html`

\n \n \n \n \n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"alltableContainer = html `

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":201,"value":"## Table Toggles","pinned":false,"hidden":false,"mode":"md"},{"id":209,"value":"viewof tableLayout = Inputs.select(tableLayouts, {value: 'fitDataStretch', label: 'Table Layout'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"viewof pagination = Inputs.toggle({label: 'Pagination', value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"viewof paginationSize = Inputs.select(pageSizes, {value: 100000, label: 'Page Size'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"viewof movableColumns = Inputs.toggle({label: 'Movable Columns', value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"viewof movableRows = Inputs.toggle({label: 'Movable Rows', value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"viewof selectableRows = Inputs.toggle({label: 'Selectable Rows', value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":285,"value":"pageSizes = [20, 100, 1000, 10000, 100000, 1000000, 10000000]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":197,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"raw_data = fetchData(alldataUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"summary_data = raw_data.map(item => {\n let newItem = { ...item };\n Object.keys(newItem).forEach(key => {\n if (key.includes('Year')) {\n newItem[key] = new Date(newItem[key], 0, 1);\n }\n });\n return newItem;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"table_data = raw_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"dataUrlParam = new URLSearchParams(html``.search).get('dataUrl')","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"dataSets = [\n \"US-National-Parks_RecreationVisits_1979-2024.csv\",\n \"US-National-Parks_Use_1979-2023_By-Month.csv\",\n \"US-All-National-Parks_RecreationVisits_1979-2024.csv\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":133,"value":"## Table Styles","pinned":false,"hidden":false,"mode":"md"},{"id":93,"value":"tableStyles = html `\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"html`\ntabulator.min.css`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"import {SummaryTable} from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"Tabulator = require('https://unpkg.com/tabulator-tables@5.3.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"arrow = require('apache-arrow@6.0.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"## Formatters","pinned":false,"hidden":false,"mode":"md"},{"id":358,"value":"color = d3\n .scaleLinear()\n .domain([5000000, 1000000, 100000])\n .range([\"#cafcc2\", \"#fce7c2\", \"#eb9494\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"function recreationVisitsFormatter(cell, formatterParams, onRendered){\n var value = cell.getValue();\n return `

${d3.format('.2s')(value)}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"italicFormatter = (cell, formatterParams, onRendered) => {\n var value = cell.getValue();\n return `${value}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"generalFormatter = (cell, formatterParams, onRendered) => {\n var field = cell.getField();\n var value = cell.getValue();\n\n if (field === \"Year\") {\n return yearFormatter(cell, formatterParams, onRendered);\n } else if (field === \"RecreationVisits\") {\n return recreationVisitsFormatter(cell, formatterParams, onRendered);\n // } else if (field === \"State\") { // Replace \"ItalicColumnName\" with the actual column name\n // return italicFormatter(cell, formatterParams, onRendered);\n } else {\n return value; // Default formatting for other columns\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"// Define your custom formatter functions using D3\nfunction yearFormatter(cell, formatterParams, onRendered){\n var value = cell.getValue();\n return value// Adjust the date format as needed\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"## Adding in Filter row","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"setupFilterRow(alltable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"viewof alldataSet.addEventListener(\"change\", () => {\n setupFilterRow(alltable);\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"