31: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"]); } } } } }; }32:[{"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}] 2f:{"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"},{"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"},{"id":300,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"samples = [sampleA, sampleB, sampleC]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":380,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"md`\n---\n## Annex\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"displayTable(sampleB)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":454,"value":"util = {\n console.log(deps); // force data flow -----------------------------------------\n return window.$.pivotUtilities;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":26,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"tipsData = FileAttachment('tips-data.json').json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"mps = FileAttachment('canadian-parliament.json').json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"montreal = d3.csvParseRows(\n await FileAttachment('montreal-2014.csv').text(),\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}