Assistant Professor in the Information School at the University of Washington // Data science, digital humanities, cultural analytics, contemporary literature, social media
columns = raw_data.columns;
viewof selectedColumns = Inputs.checkbox(columns, {
label: "Select Columns",
value: preselectedColumns
})
preselectedColumns = [
"year",
"gender (if known)",
"published in (city",
"Magazine Type",
"author (first last)",
"venue",
"edited by",
"form (if known)",
"themes",
"second venue",
"published in (city)",
"month"
]
column_data = {
const selected = new Set(selectedColumns);
return summary_data.map(row => {
let newRow = {};
for (let key in row) {
if (selected.has(key)) {
newRow[key] = row[key];
}
}
return newRow;
});
}
// Function to copy text to clipboard
function copyToClipboard(text) {
const tempInput = document.createElement("input");
tempInput.value = text;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}
// Create the copy URL button
viewof copyUrlButton = Inputs.button(
html`Copy Raw Data URL <i class="fas fa-copy"></i>`,
{
reduce: () => {
copyToClipboard(alldataUrl);
alert("URL copied to clipboard: " + alldataUrl);
}
}
)
viewof alltwobuttons = html`
<div class="button-container">
${viewof alltableOptions} ${viewof copyUrlButton}
</div>
`
exploreTableContainer = html `<div id="explore-table-container" style="height: 600px">
</div>`
exploreTable = new Tabulator('#explore-table-container', {
height: 645,
autoColumns: true,
maxWidth: 100,
columnDefaults: {
headerMenu: columnHeaderMenu,
maxWidth: 500
},
columns: [
{
title: "Year",
field: "year",
formatter: function(cell, formatterParams, onRendered) {
const value = cell.getValue();
const date = new Date(value);
const year = date.getFullYear();
return year;
},
}
],
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: dataUrl,
persistentLayout: true,
persistence: {
sort: true,
filter: true,
group: true,
columns: true,
}
});
summary_data = raw_data.map((item) => {
let newItem = { ...item };
Object.keys(newItem).forEach((key) => {
if (key.includes("year")) {
newItem[key] = new Date(newItem[key], 0, 1);
}
if (key.includes("text") && newItem[key] !== null) {
const words = newItem[key].split(" ");
newItem[key] =
words.slice(0, 15).join(" ") + (words.length > 15 ? "..." : "");
}
});
return newItem;
})
table_data = raw_data.map((item) => {
let newItem = { ...item };
Object.keys(newItem).forEach((key) => {
if (key.includes("text") && newItem[key] !== null) {
const words = newItem[key].split(" ");
newItem[key] =
words.slice(0, 15).join(" ") + (words.length > 15 ? "..." : "");
}
});
return newItem;
})
luxon = require("luxon@1/build/amd/luxon.js")
DateTime = luxon.DateTime
import { SummaryTable } from "fcb971390dae8f6d"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
