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(dataUrl);
alert("URL copied to clipboard: " + dataUrl);
}
}
)
viewof twobuttons = html`
<div class="button-container">
${viewof tableOptions} ${viewof copyUrlButton}
</div>
`
filterRow = html`<div>
<select id="filter-field"></select>
<select id="filter-type"></select>
<input id="filter-value" type="text" placeholder="value to filter">
<button id="filter-clear">Clear Filter</button>
</div>`
viewof datasetHeader = html`<div>${md`Featured Dataset: **${dataSet}**`}</div>`
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"
function setupFilterRow(table) {
const table_data = table.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) {
table.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 = "";
table.clearFilter();
});
}
setupFilterRow(table)
viewof dataSet.addEventListener("change", () => {
setupFilterRow(table);
})
window.addEventListener("load", () => {
setupFilterRow(table);
})
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.
