UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk.
Data Utilities
/**
* Returns the types in the table. Assumes header row. By default uses row 1 for type values.
*
* @param {Array} data the data table
* @param {number} useRowIndex the index to use for type inference
*/
function printTableTypes(data, verticalOrientation = true, useRowIndex = 1, maxWidth = 250){
//debugger;
const header = (data[0] && Object.keys(data[0]));
if(useRowIndex < data.length){
const row = (data[useRowIndex] && Object.values(data[useRowIndex]));
let types = {};
for(let i = 0; i < row.length; i++){
if(row[i] instanceof Date){
types[header[i]] = "date";
}else{
types[header[i]] = typeof(row[i]);
}
}
if(verticalOrientation){
let listOfFieldsAndTypes = [];
for(let type in types){
listOfFieldsAndTypes.push({'field' : type, 'data type' : types[type]});
console.log(type);
}
return printTable(listOfFieldsAndTypes, undefined, maxWidth, false);
}else{
return printTable([types], undefined, undefined, false);
}
}
}
mdTable(fromColumns({
u: 'abcdefgh',
v: [2, 8, 3, 7, 5, 4, 6, 1]
}))
function mean(data, field) {
// Alternatively, we could use d3's simple stats: https://observablehq.com/@d3/d3-mean-d3-median-and-friends
// or this lovely simple stats package: http://simple-statistics.github.io/
// But trying to reduce external dependencies
const rawNumbers = data.map(item => item[field]);
const total = rawNumbers.reduce((accumulator, curVal) => accumulator + curVal);
return total / rawNumbers.length;
}
function median(data, field) {
// Alternatively, we could use d3's simple stats: https://observablehq.com/@d3/d3-mean-d3-median-and-friends
// or this lovely simple stats package: http://simple-statistics.github.io/
// But trying to reduce external dependencies
// Modified from https://stackoverflow.com/a/53660837
const rawNumbers = data.map(item => item[field]);
const sortedNumbers = Array.from(rawNumbers).sort((a, b) => a - b);
const middleIndex = Math.floor(sortedNumbers.length / 2);
if (sortedNumbers.length % 2 === 0) {
return (sortedNumbers[middleIndex - 1] + sortedNumbers[middleIndex]) / 2;
}
return sortedNumbers[middleIndex];
}
function standardDeviation(data, field) {
// Alternatively, we could use d3's simple stats: https://observablehq.com/@d3/d3-mean-d3-median-and-friends
// or this lovely simple stats package: http://simple-statistics.github.io/
// But trying to reduce external dependencies
// Modified from https://stackoverflow.com/a/53577159
const rawNumbers = data.map(item => item[field]);
const n = rawNumbers.length
const mean = rawNumbers.reduce((a, b) => a + b) / n
return Math.sqrt(rawNumbers.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n)
}
// Counts occurrences of a given property in an array
// Returns a sorted count of occurrences as an array of [{k:'a'}, {k:'b'}, {k:'c'}, {k:'c'}, {k:'a'}]
// Author: Jon E. Froehlich
function countOccurrencesMap(arr, prop){
const mapItemToCount = new Map();
for(const item of arr){
const key = item[prop];
if(!mapItemToCount.has(key)){
mapItemToCount.set(key, 1);
}else{
mapItemToCount.set(key, mapItemToCount.get(key) + 1);
}
}
// Sort hashmap by count https://stackoverflow.com/a/61957932/388117
const sortedMap = new Map([...mapItemToCount.entries()].sort((a,b) => b[1] - a[1]));
return sortedMap;
}
// Counts occurrences of a given property in an array
// Returns a sorted count of occurrences as an array of [{k:'a'}, {k:'b'}, {k:'c'}, {k:'c'}, {k:'a'}]
// Author: Jon E. Froehlich
function countOccurrences(arr, prop){
// Sort hashmap by count https://stackoverflow.com/a/61957932/388117
const sortedMap = countOccurrencesMap(arr, prop);
let sortedArryCnts = new Array();
for(const [key, value] of sortedMap.entries()){
// Use computed property name: https://stackoverflow.com/a/3153983/388117
sortedArryCnts.push({[prop]: key, count: value});
}
return sortedArryCnts;
}
countOccurrences([{k:'a'}, {k:'b'}, {k:'c'}, {k:'c'}, {k:'a'}], 'k')
downloadLink('Download Dummy Text!', 'dummy.txt', 'dummy')
unique([1, 2, 1, 2, 3, 3])
unique([{k:'a'}, {k:'b'}, {k:'c'}, {k:'c'}, {k:'a'}], d => d.k)
uniqueValid([3, 1, 2, null, undefined, NaN, 1, 2, 3])
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.
