Public
Edited
Jul 15, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
columns = raw_data.columns;
Insert cell
viewof selectedColumns = Inputs.checkbox(columns, {label: "Select Columns", value: columns})
Insert cell
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;
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
summary_data = raw_data.map(item => {
let newItem = { ...item };
Object.keys(newItem).forEach(key => {
if (key.includes('author_birth') || key.includes('author_death') || key.includes('pub_year')) {
newItem[key] = new Date(newItem[key], 0, 1);
}
});
return newItem;
});
Insert cell
table_data = raw_data.map(item => {
let newItem = { ...item };
Object.keys(newItem).forEach(key => {
if (key.includes('title')) {
newItem[key] = `<i>${newItem[key]}</i>`;
}
});
return newItem;
});
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
color = d3
.scaleLinear()
.domain([5000000, 1000000, 100000])
.range(["#cafcc2", "#fce7c2", "#eb9494"])
Insert cell
function recreationVisitsFormatter(cell, formatterParams, onRendered){
var value = cell.getValue();
return `<div style='background:${color(value)}'>${d3.format('.2s')(value)}</div>`;
}
Insert cell
italicFormatter = (cell, formatterParams, onRendered) => {
var value = cell.getValue();
return `<i>${value}</i>`;
}
Insert cell
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
}
}

Insert cell
// Define your custom formatter functions using D3
function yearFormatter(cell, formatterParams, onRendered){
var value = cell.getValue();
return d3.timeFormat("%Y")(new Date(value)); // Adjust the date format as needed
}

Insert cell

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.
Learn more