Assistant Professor in the Information School at the University of Washington // Data science, digital humanities, cultural analytics, contemporary literature, social media
Public
Edited
Mar 22
Paused
allcolumns = raw_data.columns
viewof allselectedColumns = Inputs.checkbox(allcolumns, {
label: "View Summary of Selected Columns",
value: allcolumns
})
column_data = {
const selected = new Set(allselectedColumns);
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>
`
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>`
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);
}
});
return newItem;
});
table_data = raw_data
color = d3
.scaleLinear()
.domain([5000000, 1000000, 100000])
.range(["#cafcc2", "#fce7c2", "#eb9494"])
function recreationVisitsFormatter(cell, formatterParams, onRendered){
var value = cell.getValue();
return `<div style='background:${color(value)}'>${d3.format('.2s')(value)}</div>`;
}
italicFormatter = (cell, formatterParams, onRendered) => {
var value = cell.getValue();
return `<i>${value}</i>`;
}
generalFormatter = (cell, formatterParams, onRendered) => {
var field = cell.getField();
var value = cell.getValue();
if (field === "Year") {
return yearFormatter(cell, formatterParams, onRendered);
} else if (field === "RecreationVisits") {
return recreationVisitsFormatter(cell, formatterParams, onRendered);
// } else if (field === "State") { // Replace "ItalicColumnName" with the actual column name
// return italicFormatter(cell, formatterParams, onRendered);
} else {
return value; // Default formatting for other columns
}
}
// Define your custom formatter functions using D3
function yearFormatter(cell, formatterParams, onRendered){
var value = cell.getValue();
return value// Adjust the date format as needed
}
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();
});
}
setupFilterRow(alltable)
viewof alldataSet.addEventListener("change", () => {
setupFilterRow(alltable);
})
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.
