Published
Edited
May 11, 2020
3 forks
8 stars
sampleA = {
const sum = util.aggregatorTemplates.sum;
const numberFormat = util.numberFormat;
const intFormat = numberFormat({ digitsAfterDecimal: 0 });
return {
title: 'Minimal Example',
ui: false,
data: [
{ color: "blue", shape: "circle", value: 1 },
{ color: "red", shape: "triangle", value: 2 },
{ color: "blue", shape: "circle", value: 3 },
{ color: "red", shape: "triangle", value: 4 }
],
params: {
rows: ["color"],
cols: ["shape"],
aggregator: sum(intFormat)(["value"])
}
};
}
sampleB = {
const heatmap = util.renderers["Heatmap"];
const sumOverSum = util.aggregators["Sum over Sum"];
return {
title: 'Canadian MPs',
ui: true,
data: mps,
params: {
rows: ["Province"],
cols: ["Party"],
aggregatorName: "Integer Sum",
vals: ["Age"],
rendererName: "Heatmap",
rendererOptions: {
table: {
clickCallback: function(e, value, filters, pivotData) {
var names = [];
pivotData.forEachMatchingRecord(filters, function(record) {
names.push(record.Name);
});
console.log(names);
}
}
}
}
};
}
sampleC = {
const dateFormat = util.derivers.dateFormat;
const sortAs = util.sortAs;
const tpl = util.aggregatorTemplates;
const fmt = util.numberFormat({ suffix: "°C" });
return {
title: 'Temperatures in Montreal',
ui: true,
data: montreal,
params: {
hiddenAttributes: [
"Date",
"Max Temp (C)",
"Mean Temp (C)",
"Min Temp (C)",
"Total Rain (mm)",
"Total Snow (cm)"
],
derivedAttributes: {
"month name": dateFormat("Date", "%n", true),
"day name": dateFormat("Date", "%w", true)
},
rows: ["day name"],
cols: ["month name"],
sorters: {
"month name": sortAs([
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]),
"day name": sortAs(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"])
},
aggregators: {
"Mean Temperature": function() {
return tpl.average(fmt)(["Mean Temp (C)"]);
},
"Max Temperature": function() {
return tpl.max(fmt)(["Max Temp (C)"]);
},
"Min Temperature": function() {
return tpl.min(fmt)(["Min Temp (C)"]);
}
},
renderers: window.$.extend(util.renderers, util.export_renderers),
rendererName: "Heatmap",
rendererOptions: {
heatmap: {
colorScaleGenerator: function(values) {
return d3
.scaleLinear()
.domain([-35, 0, 35])
.range(["#77F", "#FFF", "#F77"]);
}
}
}
}
};
}
displayTable(sampleB)
displayTable = function(sample) {
console.log(sample);
const { title, ui, data, params } = sample;
const app = document.getElementById('app');
app.innerHTML = '';
const e1 = document.createElement('div');
e1.setAttribute('id', 'pivot');
app.appendChild(e1);
const e2 = document.createElement('div');
e2.innerHTML = `<i>${title}</i>`;
app.appendChild(e2);
if (ui) window.$('#pivot').pivotUI(data, params);
else window.$('#pivot').pivot(data, params);
return true;
}
util = {
console.log(deps); // force data flow -----------------------------------------
return window.$.pivotUtilities;
}
deps = {
const $ = await require("https://code.jquery.com/jquery-3.5.1.min.js");
const jqui = await require('https://code.jquery.com/ui/1.12.1/jquery-ui.min.js');
const pt = await require('https://pivottable.js.org/dist/pivot.js');
return { $, jqui, pt };
}
html`<link href="https://pivottable.js.org/dist/pivot.css" rel="stylesheet" />`
html`<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />`
tipsData = FileAttachment('tips-data.json').json()
mps = FileAttachment('canadian-parliament.json').json()
montreal = d3.csvParseRows(
await FileAttachment('montreal-2014.csv').text(),
d3.autoType
)
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.
