29:null 2a:["$","title",null,{"children":"📊 Post45 Data Viewer | Melanie Walsh | Observable"}] 2f:T631,# 📊 Post45 Data Viewer The **Post45 Data Viewer** is a fast, filterable, and pretty data table that you can easily embed in your Quarto website. Just plug in a dataset (CSV file), choose which columns you want to show, and customize a few options. It’s powered by [Tabulator](http://tabulator.info/) and Observable, originally developed by Melanie Walsh and Juan Carlos Garcia with support from the **Post45 Data Collective** and the **Mozilla Responsible Computing Challenge**. --- ### ✨ What Can These Tables Do? #### Easy to Customize You can choose: - Which columns to display (and in what order) - What each column should say when you hover (tooltips!) - How wide each column should be - Which columns to sort, filter, and link --- #### Interactive Features This table will support: - **Filtering** by dropdowns for category columns like `genre`, `medium`, or `source` - **Sorting** by clicking any column header - **Search** across columns - **Column resizing** and reordering for user convenience - **Links** by making any URL into a hyperlink --- #### Download + Share Each table comes with built-in buttons so users can: - **Download the data** as a CSV - **Copy a raw data URL** Perfect for sharing filtered subsets or saving views for later. --- ### Built With - [Tabulator](http://tabulator.info/) - Observable JavaScript - Inspired by [#TabularDataViewer](https://twitter.com/hashtag/TabularDataViewer) Originally developed by Melanie Walsh and Juan with support from the **Post45 Data Collective** and the **Mozilla Responsible Computing Challenge**. 30:Ta67,generateTabulatorTableFromCSV("#table-container1", datapath, { // preloadedData: allData // displayedColumns: ["last_name", "first_name"] displayedColumns: [ "wikidata_work_qid", "title", "creator", "year_set", "released", "years_distant", "medium", "genre", "multiyears", "wikipedia_pg", "verify_yr", "notes", "is_series", "predictions", "source", "record_id" ], columnPopups: [ "Wikidata QID for the work", // wikidata_work_qid "Title of the work.", // title "Creator (author, director, etc.) of the work.", // creator "Future year in which the work takes place. For multi-year works, typically the median year.", "Year the work was originally released.", // released "How far in the future the work is set (year_set minus released).", // year_set // years_distant "Medium: fiction, film, television, video game, radio, comics, tabletop games, drama, theme park rides, illustrations.", // medium "Genre from Wikidata (e.g., science fiction, cyberpunk, crime, etc.).", // genre "If the work takes place over a wide range of years, all those years (e.g., '1992-1996' or '1992, 1996').", // multiyears "URL to the work’s Wikipedia page, if available.", // wikipedia_pg "URL/source for verifying the year the work is set. Populated when Wikipedia/Wikidata are unclear.", // verify_yr "Any clarifying notes or extra sources for the work or its temporal setting.", // notes "If the work is part of a series, the Wikidata ID for that series.", // is_series "Text from Wikipedia users about predictions: describes plot elements and whether they came true.", // predictions "Where information was sourced: wikidata, wikipast, wikifilm, wikicategory, wikitext (may be multiple sources per work).", // source "Dataset’s unique ID: creator’s last name, first word of title, year released (e.g., butler_parable_1993)." // record_id ], columnWidths: { title: "30px", creator: "40px", medium: "40px", genre: "30px", verify_yr: "40px", notes: "30px" // Add others if you want }, numericColumns: ["year_set", "released", "years_distant"], // Groupings for dropdowns/filters (customize as needed) categoryColumns: ["medium", "genre", "source"], linkColumns: ["wikipedia_pg", "verify_yr"], // Sort primarily by year set, then released date sortColumns: ["year_set"], sortOrders: ["desc"], buttonContainerId: "#button-container1", rawButtonId: "#download-raw1", urlCopyButtonId: "#copy-url1" })31:T4e65,function generateTabulatorTableFromCSV( containerId, dataPath, { preloadedData = null, displayedColumns = null, columnWidths = {}, currencyColumns = [], categoryColumns = [], numericColumns = [], linkColumns = [], rangeSliderColumns = [], // numeric range slider columns (e.g. "year") rangeSliderRanges = {}, // optional { col: {min, max} } overrides dateSliderColumns = [], // date range slider columns (e.g. "publication_date") dateSliderRanges = {}, // optional { col: {min, max} } in epoch ms rangeValues = {}, sortColumns = [], sortOrders = [], columnPopups = [], buttonContainerId = "#button-container", rawButtonId = "#download-raw", urlCopyButtonId = "#copy-url" } = {} ) { // Inject slider styles once per page if ( typeof document !== "undefined" && !document.getElementById("tab-range-filter-styles") ) { const style = document.createElement("style"); style.id = "tab-range-filter-styles"; style.textContent = ` .tab-range-filter { position: relative; width: 100%; height: 100%; padding: 4px 6px 0; box-sizing: border-box; font-family: inherit; display: flex; align-items: center; gap: 4px; background: #455B64; } /* Match the sort-arrow color on range-slider columns to the other column arrows */ .tabulator .tabulator-col[data-rangeslider="1"] .tabulator-arrow { border-bottom: 6px solid #bbb !important; border-top: none !important; } .tabulator .tabulator-col[data-rangeslider="1"][aria-sort="descending"] .tabulator-arrow { border-bottom: none !important; border-top: 6px solid #bbb !important; } .tabulator .tabulator-col[data-rangeslider="1"], .tabulator .tabulator-col[data-rangeslider="1"] .tabulator-header-filter, .tabulator .tabulator-col .tab-range-filter { background: #455B64 !important; } .tabulator .tabulator-header.has-rangeslider { background: #455B64 !important; border-bottom-color: #455B64 !important; } .tabulator .tabulator-col[data-rangeslider="1"]:hover, .tabulator .tabulator-col[data-rangeslider="1"]:hover .tabulator-col-content, .tabulator .tabulator-col[data-rangeslider="1"] .tabulator-col-content:hover { background: #455B64 !important; } .tab-range-filter .trf-end { font-size: 10px; color: #222; font-weight: 600; line-height: 1; white-space: nowrap; background: #fff; border: 1px solid rgba(0,0,0,0.15); padding: 2px 3px; min-width: 36px; max-width: 64px; text-align: center; border-radius: 3px; outline: none; box-sizing: border-box; cursor: text; } .tab-range-filter .trf-track-wrap { position: relative; flex: 1; height: 18px; } .tab-range-filter .trf-track { position: absolute; top: 50%; left: 0; right: 0; height: 3px; margin-top: -1.5px; background: #ccc; border-radius: 2px; } .tab-range-filter .trf-range { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; background: #c8102e; border-radius: 2px; } .tab-range-filter input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 18px; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; margin: 0; } .tab-range-filter input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: transparent; } .tab-range-filter input[type="range"]::-moz-range-track { height: 3px; background: transparent; } .tab-range-filter input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; height: 12px; width: 12px; border-radius: 50%; background: #c8102e; border: 2px solid white; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.3); margin-top: -5px; } .tab-range-filter input[type="range"]::-moz-range-thumb { pointer-events: auto; height: 12px; width: 12px; border-radius: 50%; background: #c8102e; border: 2px solid white; cursor: pointer; } `; document.head.appendChild(style); } if (preloadedData) { processData(preloadedData, dataPath); } else { fetch(dataPath) .then(async (response) => { const reader = response.body.getReader(); const contentLength = +response.headers.get("Content-Length"); let receivedLength = 0; const chunks = []; const progressBar = document.getElementById("progress-bar"); const progressText = document.getElementById("progress-text"); if (progressBar) { progressBar.max = contentLength; progressBar.value = 0; progressText.textContent = "Data loading..."; } while (true) { const { done, value } = await reader.read(); if (done) break; chunks.push(value); receivedLength += value.length; if (progressBar) { progressBar.value = receivedLength; progressText.textContent = `Loading data...`; } } const blob = new Blob(chunks); const text = await blob.text(); let data; if (dataPath.endsWith(".csv")) data = d3.csvParse(text); else if (dataPath.endsWith(".tsv")) data = d3.tsvParse(text); else throw new Error( "Unsupported file format. Only CSV and TSV are supported." ); if (progressBar) { progressBar.value = contentLength; setTimeout(() => { progressText.textContent = ""; progressBar.style.display = "none"; }, 1000); } processData(data, dataPath); }) .catch((error) => { console.error("Error loading data:", error); const progressText = document.getElementById("progress-text"); if (progressText) progressText.textContent = "Error loading data."; }); } // Generic dual-handle range slider header filter editor. // opts: { step, formatLabel(value), parseLabel(text, isMax) } function makeRangeSliderEditor(columnName, rangeMin, rangeMax, opts) { opts = opts || {}; const step = opts.step || 1; const fmt = opts.formatLabel || String; const parseLabel = opts.parseLabel || ((s) => { const n = parseFloat(s); return isNaN(n) ? null : n; }); return function rangeSliderEditor(cell, onRendered, success) { const wrap = document.createElement("div"); wrap.className = "tab-range-filter"; wrap.innerHTML = `` + `

` + `

` + `` + `` + `

` + ``; const minIn = wrap.querySelector(".trf-min"); const maxIn = wrap.querySelector(".trf-max"); const loInput = wrap.querySelector(".trf-lo"); const hiInput = wrap.querySelector(".trf-hi"); const rangeBar = wrap.querySelector(".trf-range"); const span = rangeMax - rangeMin; function paint(lo, hi) { rangeBar.style.left = ((lo - rangeMin) / span) * 100 + "%"; rangeBar.style.right = ((rangeMax - hi) / span) * 100 + "%"; if (document.activeElement !== loInput) loInput.value = fmt(lo); if (document.activeElement !== hiInput) hiInput.value = fmt(hi); minIn.title = fmt(lo); maxIn.title = fmt(hi); wrap.title = `${columnName}: ${fmt(lo)} – ${fmt(hi)}`; } function fire() { let lo = Number(minIn.value); let hi = Number(maxIn.value); if (lo > hi) { const tmp = lo; lo = hi; hi = tmp; minIn.value = lo; maxIn.value = hi; } paint(lo, hi); success({ min: lo, max: hi }); } function commitLabel(inputEl, isMax) { const text = inputEl.value.trim(); const parsed = parseLabel(text, isMax); const cur = Number(isMax ? maxIn.value : minIn.value); if (parsed == null || isNaN(parsed)) { inputEl.value = fmt(cur); return; } let v = Math.max(rangeMin, Math.min(rangeMax, parsed)); if (isMax) { if (v < Number(minIn.value)) v = Number(minIn.value); maxIn.value = v; } else { if (v > Number(maxIn.value)) v = Number(maxIn.value); minIn.value = v; } fire(); } minIn.addEventListener("input", fire); maxIn.addEventListener("input", fire); loInput.addEventListener("change", () => commitLabel(loInput, false)); hiInput.addEventListener("change", () => commitLabel(hiInput, true)); [loInput, hiInput].forEach((inp, i) => { inp.addEventListener("focus", () => inp.select()); inp.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); inp.blur(); } else if (e.key === "Escape") { inp.value = fmt(Number(i === 0 ? minIn.value : maxIn.value)); inp.blur(); } }); }); // Don't let click/mousedown on the slider trigger column sort wrap.addEventListener("mousedown", (e) => e.stopPropagation()); wrap.addEventListener("click", (e) => e.stopPropagation()); paint(rangeMin, rangeMax); return wrap; }; } function rangeSliderFilterFunc(headerValue, rowValue) { if (!headerValue) return true; const v = parseFloat(rowValue); if (isNaN(v)) return false; return v >= headerValue.min && v <= headerValue.max; } function dateSliderFilterFunc(headerValue, rowValue) { if (!headerValue) return true; const t = Date.parse(rowValue); if (isNaN(t)) return false; return t >= headerValue.min && t <= headerValue.max; } function makeDateLabelFormatter(rangeMin, rangeMax) { return (ms) => { const d = new Date(ms); return `${d.getUTCMonth() + 1}/${d.getUTCFullYear()}`; }; } // Parser for typed date labels. Accepts: "1980", "5/1985", "5/1/1985", "1985-05". // `isMax` controls whether ambiguous inputs ("1985", "5/1985") snap to the // start (Jan 1 / 1st of month) or end (Dec 31 / last day of month). function parseDateLabel(str, isMax) { str = (str || "").trim(); if (!str) return null; let m; if ((m = str.match(/^(\d{4})$/))) { const y = +m[1]; return isMax ? Date.UTC(y, 11, 31) : Date.UTC(y, 0, 1); } if ((m = str.match(/^(\d{1,2})\/(\d{4})$/))) { const month = +m[1] - 1, year = +m[2]; return isMax ? Date.UTC(year, month + 1, 0) : Date.UTC(year, month, 1); } if ((m = str.match(/^(\d{4})-(\d{1,2})$/))) { const year = +m[1], month = +m[2] - 1; return isMax ? Date.UTC(year, month + 1, 0) : Date.UTC(year, month, 1); } if ((m = str.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/))) return Date.UTC(+m[3], +m[1] - 1, +m[2]); if ((m = str.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/))) return Date.UTC(+m[1], +m[2] - 1, +m[3]); const t = Date.parse(str); return isNaN(t) ? null : t; } function processData(data, dataPath) { // Coerce numeric/range-slider columns to numbers const numericLike = new Set([...numericColumns, ...rangeSliderColumns]); if (numericLike.size > 0) { data.forEach((row) => { numericLike.forEach((column) => { if (row[column] !== undefined && typeof row[column] === "string") { row[column] = parseFloat(row[column].replace(/,/g, "")); } }); }); } if (!displayedColumns) displayedColumns = Object.keys(data[0]); // Auto-detect min/max for numeric slider columns const sliderRanges = {}; rangeSliderColumns.forEach((col) => { if (rangeSliderRanges[col]) { sliderRanges[col] = rangeSliderRanges[col]; } else { let min = Infinity, max = -Infinity; for (const row of data) { const v = parseFloat(row[col]); if (!isNaN(v)) { if (v < min) min = v; if (v > max) max = v; } } sliderRanges[col] = { min: Math.floor(min), max: Math.ceil(max) }; } }); // Auto-detect min/max for date slider columns (epoch ms, day-aligned) const DAY_MS = 86400000; const dateRanges = {}; dateSliderColumns.forEach((col) => { if (dateSliderRanges[col]) { dateRanges[col] = dateSliderRanges[col]; } else { let min = Infinity, max = -Infinity; for (const row of data) { const t = Date.parse(row[col]); if (!isNaN(t)) { if (t < min) min = t; if (t > max) max = t; } } dateRanges[col] = { min: Math.floor(min / DAY_MS) * DAY_MS, max: Math.ceil(max / DAY_MS) * DAY_MS }; } }); // Pre-compute value counts so dropdowns can show "fiction (1,525)" const categoryCounts = {}; categoryColumns.forEach((col) => { const counts = new Map(); for (const row of data) { const v = row[col]; if (v === undefined || v === null || v === "") continue; counts.set(v, (counts.get(v) || 0) + 1); } categoryCounts[col] = Array.from(counts.entries()) .sort((a, b) => b[1] - a[1]) .map(([value, n]) => ({ label: String(value), value, count: n })); }); function categoryItemFormatter(label, value, item) { const count = item && item.count; const countStr = count != null ? count.toLocaleString() : ""; return `${label}${countStr}`; } const filename = dataPath ? dataPath .split("/") .pop() .replace(/\.(csv|tsv)$/, "") : "table-data"; const tabulatorColumns = displayedColumns.map((column, index) => { const colDef = { title: column, field: column, resizable: true, headerPopupIcon: "", headerPopup: columnPopups[index] || null }; if (columnWidths[column]) colDef.width = columnWidths[column]; const autoLinkCol = /(^|_)(wikidata|viaf|lccn|qid|isbn)(_|$)/i.test(column) || /^oclc$|_oclc$/i.test(column); if (linkColumns.includes(column) || autoLinkCol) { colDef.formatter = linkFormatter; colDef.formatterPrint = "plaintext"; } if (rangeSliderColumns.includes(column)) { const r = sliderRanges[column]; colDef.sorter = "number"; colDef.headerFilter = makeRangeSliderEditor(column, r.min, r.max); colDef.headerFilterFunc = rangeSliderFilterFunc; colDef.headerFilterLiveFilter = false; colDef.minWidth = Math.max(colDef.width || 220, 220); if (!colDef.width) colDef.width = 220; } else if (dateSliderColumns.includes(column)) { const r = dateRanges[column]; colDef.sorter = (a, b) => (Date.parse(a) || 0) - (Date.parse(b) || 0); colDef.headerFilter = makeRangeSliderEditor(column, r.min, r.max, { step: DAY_MS, formatLabel: makeDateLabelFormatter(r.min, r.max), parseLabel: parseDateLabel }); colDef.headerFilterFunc = dateSliderFilterFunc; colDef.headerFilterLiveFilter = false; colDef.minWidth = Math.max(colDef.width || 220, 220); if (!colDef.width) colDef.width = 220; } else if (categoryColumns.includes(column)) { colDef.headerFilter = "list"; colDef.headerFilterParams = { values: categoryCounts[column] || [], autocomplete: true, listOnEmpty: true, clearable: true, freetext: false, placeholderEmpty: "Type to filter…", itemFormatter: categoryItemFormatter }; } else if (numericColumns.includes(column)) { colDef.headerFilter = "input"; colDef.headerFilterFunc = ">="; colDef.sorter = "number"; colDef.headerFilterPlaceholder = `Filter by min ${column}`; if (rangeValues[column]) colDef.editorParams = rangeValues[column]; } else { colDef.headerFilter = "input"; colDef.headerFilterParams = { placeholder: `Filter ${column}`, freetext: true }; } if (currencyColumns.includes(column)) { colDef.formatter = "money"; colDef.formatterParams = { symbol: "$", precision: 0 }; } return colDef; }); const table = new Tabulator(containerId, { height: 645, data: data, columns: tabulatorColumns, layout: "fitData", pagination: true, paginationSize: 1000, paginationSizeSelector: [10, 100, 1000, 10000], paginationCounter: function ( pageSize, currentRow, currentPage, totalRows ) { const lastRow = Math.min(currentRow + pageSize - 1, totalRows); return `Showing ${currentRow.toLocaleString()}-${lastRow.toLocaleString()} of ${totalRows.toLocaleString()} rows`; }, persistenceMode: false, initialSort: sortColumns.map((col, idx) => ({ column: col, dir: sortOrders[idx] || "asc" })) }); table.on("tableBuilt", () => { const ctn = typeof containerId === "string" ? document.querySelector(containerId) : containerId; [...rangeSliderColumns, ...dateSliderColumns].forEach((col) => { const headerEl = ctn?.querySelector( `.tabulator-col[tabulator-field="${col}"]` ); if (headerEl) headerEl.setAttribute("data-rangeslider", "1"); }); // Tag the .tabulator-header so our CSS can color the 1px gray strip teal const hdr = ctn?.querySelector(".tabulator-header"); if (hdr && (rangeSliderColumns.length || dateSliderColumns.length)) { hdr.classList.add("has-rangeslider"); } }); document.addEventListener("fullscreenchange", () => { table.setHeight( document.fullscreenElement ? window.innerHeight - 50 : 645 ); }); document .querySelectorAll(`${buttonContainerId} button`) .forEach((button) => { button.addEventListener("click", () => { const type = button.id.replace("download-", ""); const downloadFilename = `${filename}.${type}`; if (type === "xlsx") table.download("xlsx", downloadFilename, { sheetName: "Sheet1" }); else if (type === "pdf") table.download("pdf", downloadFilename, { orientation: "portrait", title: "Table Data" }); else if (type === "html") table.download("html", downloadFilename, { style: true }); else table.download(type, downloadFilename); }); }); const rawDownloadButton = document.querySelector(rawButtonId); if (rawDownloadButton && dataPath) { rawDownloadButton.addEventListener("click", () => { download(dataPath, `${filename}.csv`); }); } const urlCopyButton = document.querySelector(urlCopyButtonId); if (urlCopyButton && dataPath) { urlCopyButton.addEventListener("click", () => { const tempInput = document.createElement("input"); tempInput.value = dataPath; document.body.appendChild(tempInput); tempInput.select(); document.execCommand("copy"); document.body.removeChild(tempInput); alert("URL copied to clipboard: " + dataPath); }); } return table; } }32:T56f,function linkFormatter(cell, formatterParams, onRendered) { const value = cell.getValue(); if (value === undefined || value === null || value === "") return ""; const v = String(value); const field = cell.getField() || ""; if (v.startsWith("http")) { return `${v}`; } if (/^Q\d+$/.test(v)) { return `${v}`; } if (/viaf/i.test(field) && /^\d+$/.test(v)) { return `${v}`; } if (/lccn/i.test(field) && /^[a-z]+\d+$/i.test(v)) { return `${v}`; } if (/(^|_)isbn(_|$)/i.test(field)) { const stripped = v.replace(/^(\d+)\.0+$/, "$1"); const clean = stripped.replace(/[\s\-]/g, ""); if (/^(\d{9}[\dXx]|\d{13})$/.test(clean)) { return `${stripped}`; } } if (/^oclc$|_oclc$/i.test(field)) { const m = v.match(/^(\d+)(?:\.0+)?$/); if (m) { const oclcId = m[1]; return `${oclcId}`; } } return v; }33:[{"id":"1ccb0f34d0cc6d9809395dd1c46edf87a238a0b9fa6b2241dd62d08f011aee73068d7f32180787e0751282168b1d04a8e4057cf6459a092a47409d40268160a4","href":"https://static.observableusercontent.com/files/1ccb0f34d0cc6d9809395dd1c46edf87a238a0b9fa6b2241dd62d08f011aee73068d7f32180787e0751282168b1d04a8e4057cf6459a092a47409d40268160a4","name":"ALL DATA.csv","type":"text/csv","lastModified":1753122218767.316,"size":37842660}] 2d:{"id":"8bb63a6cde9addff","slug":null,"title":"📊 Post45 Data Viewer","thumbnail":"e24099d199574579867709ffb1471bdad44c96daf6e9df0a6ab57262bc9d3e75","access_level":"public","create_time":"$D2024-11-08T04:09:58.422Z","update_time":"$D2026-05-13T20:54:56.084Z","view_time":null,"first_public_time":"$D2026-02-26T03:36:34.719Z","fork":false,"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":632,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e1772ab3096311b8","login":"mellymeldubs","name":"Melanie Walsh","avatar_url":"https://avatars-next.observableusercontent.com/b844e0b83b020387c8c7f8e02189c8037f7dda15061c591e49ca2fc69da49fca","tier":null}],"members":[{"type":"team","id":"64cb03831ce357a8","login":"mellymeldubs","name":"Melanie Walsh","avatar_url":"https://avatars-next.observableusercontent.com/b844e0b83b020387c8c7f8e02189c8037f7dda15061c591e49ca2fc69da49fca","tier":"pro_2024","role":"editor"},{"type":"individual","id":"e1772ab3096311b8","login":"mellymeldubs","name":"Melanie Walsh","avatar_url":"https://avatars-next.observableusercontent.com/b844e0b83b020387c8c7f8e02189c8037f7dda15061c591e49ca2fc69da49fca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"📊 Post45 Data Viewer","cells":[{"id":489,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":502,"value":"# Example Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":70,"value":"datapath = \"https://responsible-datasets-in-context.s3.us-west-2.amazonaws.com/top_500_spl_df.csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"You can create a data table by running the `generateTabulatorTableFromCSV()` function, specifying the id of an HTML `div` where you want to display the table, and passing in a CSV file — either through a raw data URL or a filename that is accessible.\n\nYou can also specify HTML divs for download buttons, and you can set other options, like which columns to show, and which to filter as categories vs. numbers, etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":439,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":511,"value":"To actually show the table, you need an HTML `div` container. For example:\n\n```

```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":441,"value":"tableContainer = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":477,"value":"# Data Table Generator\nHere's the function that creates the data table:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":536,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":451,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"async function download(dataurl, fileName) {\n const response = await fetch(dataurl);\n const blob = await response.blob();\n\n const link = document.createElement(\"a\");\n link.href = URL.createObjectURL(blob);\n link.download = fileName;\n link.click();\n URL.revokeObjectURL(link.href); // Clean up\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"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","author":"$undefined","summary":"$undefined"},{"id":82,"value":"html`

\n \n

Data loading...

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"## How to Include Download Buttons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":55,"value":"html`

\n \n \n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"html`

\n \n \n \n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"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 } else if (dataUrl.endsWith(\".tsv\")) {\n data = await d3.tsvParse(await d3.text(dataUrl), d3.autoType);\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 } else if (dataUrl.endsWith(\".arrow\")) {\n data = loadArrowData(dataUrl);\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"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; ++i) {\n const proto = {};\n fields.forEach((fieldName, index) => {\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"},{"id":24,"value":"# Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":26,"value":"html`\ntabulator.min.css`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"tableStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"# Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"Tabulator = require(\"https://unpkg.com/tabulator-tables@6.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"import { SummaryTable } from \"fcb971390dae8f6d\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"import { interval } from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"arrow = require(\"apache-arrow@6.0.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"