Visiting Research at NYU Shanghai; previously @ Nest, Apple, AOL; faculty @ Olin College, NYU Shanghai.
sin() basics for Creative Coding
P5.js Pixel Manipulation Timings
// {
// let d = filterByMethod(data, copyMethods);
// let sizesByComputer = {};
// d.forEach(row => {
// let computer = row.Computer;
// let sizes = sizesByComputer[computer] = sizesByComputer[computer] || new Set();
// sizes.add(row["Image width"])
// });
// return vl
// .markBar()
// .data(d.filter(row => sizesByComputer[row.Computer].size > 2))
// .encode(
// vl.column().fieldO("Method").sort(methodNames),
// vl.row().fieldN("Computer"),
// vl
// .x()
// .fieldQ("Image width")
// ,
// vl.y().average("FPS"),
// vl
// .tooltip()
// .average("FPS")
// .format(",")
// )
// .render()
// }
data = {
let hasData = row => row.Computer && row.Method && row['ms/copy'] > 0;
function normalizeRow(row) {
row.Computer = row.Computer.replace(/macbook/i, "MacBook").trim();
row.FPS = Number(String(row.FPS).replace(/,/g, ''));
}
let p5data = await FileAttachment("p5.js pixel timings - Sheet1@3.csv").csv({
typed: true
});
let processingData = await FileAttachment(
"p5.js pixel timings - Sheet2.csv"
).csv({
typed: true
});
let data = [...p5data, ...processingData.slice(0, 18)].filter(hasData);
data.forEach(normalizeRow);
data = data.filter(row => row.FPS !== 121_225); // FIXME
return data;
}
p5data = filterByField(data, 'Platform', 'p5.js')
(await FileAttachment("p5.js pixel timings - Sheet2.csv").csv({
typed: true
})).slice(0, 16)
standardWidthData = filterByField(p5data, 'Image width', 200)
// a list of method names, in order of initial occurrence
methodNames = Array.from(new Set(data.map(r => r.Method)))
pixelCopyMethods = methodNames.filter(name => !name.match(/10%/))
pixelMethods = pixelCopyMethods.filter(name => !name.match(/image/))
nonCopyMethods = methodNames.filter(name => !pixelCopyMethods.includes(name))
methodReporterCounts = {
let methodReporters = {};
data.forEach(row => {
let key = row.Method;
methodReporters[key] = methodReporters[key] || new Set();
methodReporters[key].add(row.Reporter);
});
return Object.fromEntries(
Object.entries(methodReporters).map(([k, v]) => [k, v.size])
);
}
filterByMethod = (data, methods) => filterByField(data, 'Method', methods);
function filterByField(data, fieldName, value) {
const test = Array.isArray(value)
? row => value.includes(row[fieldName])
: row => row[fieldName] === value;
return data.filter(test);
}
// `rows` is an Array of Objects with property `key`. Return a copy of the array
// that includes only those objects whose `key` is fewer than three standard deviations from the mean.
function removeOutliers(rows, key = "FPS") {
let values = rows.map(row => row[key]);
let mean = d3.mean(values);
let sd = d3.deviation(values);
return rows.filter(row => Math.abs(row[key] - mean) < 3 * sd);
}
import { vl } from "@vega/vega-lite-api"
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.
