2d:null 2e:["$","title",null,{"children":"pivottable.js example | oscar6echo | Observable"}] 33:T6af,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"]); } } } } }; }34:[{"id":"ffae6d62139d43effee8fb7364f2fe1a064b821bbff498e7d429f1e7a24b551d951982203ca9afebc44448c50f83736fc88e64f868a09266dbf0eb65d3861ef5","href":"https://static.observableusercontent.com/files/ffae6d62139d43effee8fb7364f2fe1a064b821bbff498e7d429f1e7a24b551d951982203ca9afebc44448c50f83736fc88e64f868a09266dbf0eb65d3861ef5","name":"tips-data.json","type":"application/json","lastModified":1588949463910.624,"size":14034},{"id":"74a581853027acbb598a22ff4e4f918ff713d87901b37647c6a5251d0792ad37de6bf9974349545aa4bb6d07df02a86c48cb41eee55f1da4dd90fd34a539c38a","href":"https://static.observableusercontent.com/files/74a581853027acbb598a22ff4e4f918ff713d87901b37647c6a5251d0792ad37de6bf9974349545aa4bb6d07df02a86c48cb41eee55f1da4dd90fd34a539c38a","name":"canadian-parliament.json","type":"application/json","lastModified":1588959453152.136,"size":40171},{"id":"9d4b140956cd843633ddfba9ca5bdc5966cd6dd042a1d30c90d405d0b9b399e419640770e0b5cbcc228da23ef62606bbd09189aa914e3eccef53d97f08a8cb1c","href":"https://static.observableusercontent.com/files/9d4b140956cd843633ddfba9ca5bdc5966cd6dd042a1d30c90d405d0b9b399e419640770e0b5cbcc228da23ef62606bbd09189aa914e3eccef53d97f08a8cb1c","name":"montreal-2014.csv","type":"text/csv","lastModified":1588965929156.848,"size":11029}] 31:{"id":"ed8ad1a483b9fb4a","slug":"pivottable-js-example","title":"pivottable.js example","thumbnail":"236efd3c6f219cf0aab5a830da59cfbc36feda7a4ab709e009a9a30ccf978444","access_level":"public","create_time":"$D2020-05-08T14:35:31.707Z","update_time":"$D2020-05-11T11:30:53.923Z","view_time":null,"first_public_time":"$D2020-05-08T20:17:20.106Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"caa24eaf0dba3b8c","login":"oscar6echo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b9c6f536a16e403a7143c5cf9ef43970ec3b956fd7f1fb31d74113cc741e32ac","tier":"starter_2024"},"version":688,"publish_version":688,"role":null,"authored":false,"authors":[{"type":"individual","id":"375c413046669a50","login":"oscar6echo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b9c6f536a16e403a7143c5cf9ef43970ec3b956fd7f1fb31d74113cc741e32ac","tier":null}],"members":[{"type":"individual","id":"375c413046669a50","login":"oscar6echo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b9c6f536a16e403a7143c5cf9ef43970ec3b956fd7f1fb31d74113cc741e32ac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"pivottable.js example","cells":[{"id":0,"value":"md`# pivottable.js example\n\nSee https://github.com/nicolaskruchten/pivottable\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"btn = {\n const buttons = samples.map(\n (e, i) => ``\n );\n const form = html``;\n samples.map((e, i) => {\n form[i].onclick = () => {\n const sample = samples[i];\n // const { ui, data, params } = sample;\n\n displayTable(sample);\n };\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"samples = [sampleA, sampleB, sampleC]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"sampleA = {\n const sum = util.aggregatorTemplates.sum;\n const numberFormat = util.numberFormat;\n const intFormat = numberFormat({ digitsAfterDecimal: 0 });\n return {\n title: 'Minimal Example',\n ui: false,\n data: [\n { color: \"blue\", shape: \"circle\", value: 1 },\n { color: \"red\", shape: \"triangle\", value: 2 },\n { color: \"blue\", shape: \"circle\", value: 3 },\n { color: \"red\", shape: \"triangle\", value: 4 }\n ],\n params: {\n rows: [\"color\"],\n cols: [\"shape\"],\n aggregator: sum(intFormat)([\"value\"])\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"sampleB = {\n const heatmap = util.renderers[\"Heatmap\"];\n const sumOverSum = util.aggregators[\"Sum over Sum\"];\n return {\n title: 'Canadian MPs',\n ui: true,\n data: mps,\n params: {\n rows: [\"Province\"],\n cols: [\"Party\"],\n aggregatorName: \"Integer Sum\",\n vals: [\"Age\"],\n rendererName: \"Heatmap\",\n rendererOptions: {\n table: {\n clickCallback: function(e, value, filters, pivotData) {\n var names = [];\n pivotData.forEachMatchingRecord(filters, function(record) {\n names.push(record.Name);\n });\n console.log(names);\n }\n }\n }\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"md`\n---\n## Annex\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"displayTable(sampleB)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"displayTable = function(sample) {\n console.log(sample);\n const { title, ui, data, params } = sample;\n const app = document.getElementById('app');\n app.innerHTML = '';\n\n const e1 = document.createElement('div');\n e1.setAttribute('id', 'pivot');\n app.appendChild(e1);\n\n const e2 = document.createElement('div');\n e2.innerHTML = `${title}`;\n app.appendChild(e2);\n\n if (ui) window.$('#pivot').pivotUI(data, params);\n else window.$('#pivot').pivot(data, params);\n\n return true;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"util = {\n console.log(deps); // force data flow -----------------------------------------\n return window.$.pivotUtilities;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"deps = {\n const $ = await require(\"https://code.jquery.com/jquery-3.5.1.min.js\");\n const jqui = await require('https://code.jquery.com/ui/1.12.1/jquery-ui.min.js');\n const pt = await require('https://pivottable.js.org/dist/pivot.js');\n return { $, jqui, pt };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"tipsData = FileAttachment('tips-data.json').json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"mps = FileAttachment('canadian-parliament.json').json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"montreal = d3.csvParseRows(\n await FileAttachment('montreal-2014.csv').text(),\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"