29:null 2a:["$","title",null,{"children":"10 minutes dashboard: vegaSync guide | Chris Lindgren | Observable"}] 2f:T5a7,viewof dateView = vegaSync({ facts, dims: d => { let birthdate = new Date(d.date_of_birth); let riodate = new Date(2016, 8, 5); let diff = new Date(riodate - birthdate); return [Math.abs(diff.getUTCFullYear() - 1970)]; }, interactivity: "brush", counts: true, normalized: true, spec: { title: "Age of athletes in 2016", width: w, layer: [ { mark: "line", data: { name: "counts" }, encoding: { x: { field: "key", type: "quantitative", title: "Age" }, y: { field: "value", type: "quantitative", title: "Proportion of athletes" }, color: { value: "#aaa" } } }, { mark: "bar", data: { name: "counts" }, selection: { brush: { name: "brush", type: "interval", encodings: ['x'] } }, encoding: { x: { field: "key", type: "quantitative" }, y: { field: "filtered", type: "quantitative" }, color: { condition: { selection: "brush", value: colorVega }, value: "#bbb" } } } ] }, // specifique observable invalidation, visibility })30:T63a,viewof nationality = vegaSync({ facts, dims: d => [d.nationality], interactivity: "selection", counts: true, normalized: true, spec: { title: "Top 20 countries with most athletes", width: w, data: { name: "counts" }, transform: [ { window: [ { op: "rank", as: "rank" } ], sort: [{ field: "filtered", order: "descending" }] }, { filter: "datum.rank <= 20 && datum.filtered > 0" } ], layer: [ { mark: "bar", encoding: { x: { field: "key", type: "ordinal", title: null, sort: "-filtered", axis: { labelAngle: 0 } }, y: { field: "value", type: "quantitative", title: "Proportion of athletes" }, color: { value: "#ddd" } } }, { mark: "bar", selection: { selection: { type: "multi", toggle: "!event.shiftKey", fields: ["key"] } }, encoding: { x: { field: "key", type: "ordinal", sort: "-y" }, y: { field: "filtered", type: "quantitative" }, color: { condition: { selection: "selection", value: colorVega }, value: "#aaa" } } } ] }, // specifique observable invalidation, visibility })31:T4e1,viewof weight = vegaSync({ facts, dims: d => [d.weight], interactivity: "brush", counts: true, normalized: true, spec: { title: "Weight of athletes", width: w, data: { name: "counts" }, transform: [{ filter: "datum.key > 0" }], layer: [ { mark: 'bar', encoding: { x: { field: "key", type: "quantitative", title: "Weight in kilos" }, y: { field: "value", type: "quantitative", title: "Proportion of athletes" }, color: { value: "#ddd" } } }, { mark: 'bar', selection: { brush: { name: "brush", type: "interval", encodings: ['x'] } }, encoding: { x: { field: "key", type: "quantitative" }, y: { field: "filtered", type: "quantitative" }, color: { condition: { selection: "brush", value: colorVega }, value: "#aaa" } } } ] }, // specifique observable invalidation, visibility })32:T4f3,viewof sport = vegaSync({ facts, dims: d => [d.sport], interactivity: "selection", counts: true, spec: { title: "Sports", width: w, layer: [ { mark: "bar", data: { name: "counts" }, encoding: { x: { field: "key", type: "ordinal", title: null, axis: { labelAngle: 45 } }, y: { field: "value", type: "quantitative", title: "Number of athletes" }, color: { value: "#ddd" } } }, { mark: "bar", data: { name: "counts" }, selection: { selection: { type: "multi", toggle: "!event.shiftKey", fields: ["key"] } }, encoding: { x: { field: "key", type: "ordinal" }, y: { field: "filtered", type: "quantitative" }, color: { condition: { selection: "selection", value: colorVega }, value: "#aaa" } } } ] }, // specifique observable invalidation, visibility })33:Tb20,viewof sankeyView = { const width = 600; const dim = facts.dimension((d) => [d.sex, d.sport]), // dimCountries = facts.dimension(identifyCountries, MULTIVALUED), id = dim.id(); const group = dim.group().reduceCount(); var sankey = d3 .sankey() .nodeId((d) => d.name) .nodeSort((a, b) => a - b) .nodeWidth(1) .extent([ [0, 5], [width, height_sankey - 5] ]); const color = d3.scaleOrdinal(["male"], ["#b5ffc6"]).unknown("#ebcfff"); var svg = d3.create("svg").attr("viewBox", [0, 0, width, height_sankey]); function render() { redraw(); } function getGraph(group) { const links = group.all().map((d) => Object.assign({ names: d.key, value: d.value, source: d.key[0], target: d.key[1] }) ); const nodes = [ ...new Set(links.reduce((acc, val) => acc.concat(val.names), [])) ].map((name) => Object.assign({ name })); return { links, nodes }; } function redraw(immediate) { if (!sankey) return; var graph = getGraph(group), nodes = graph.nodes, links = graph.links; // mutable debug = graph; svg.selectAll("g").remove(); // mutable debug = graph; if (links.length === 0) return; sankey({ nodes, links }); svg .append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", (d) => d.x0) .attr("y", (d) => d.y0) .attr("height", (d) => d.y1 - d.y0) .attr("width", (d) => d.x1 - d.x0) .append("title") .text((d) => `${d.name}\n${d.value.toLocaleString()}`); svg .append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", (d) => color(d.names[0])) .attr("stroke-width", (d) => d.width) .style("mix-blend-mode", "multiply") .append("title") .text((d) => `${d.names.join(" → ")}\n${d.value.toLocaleString()}`); svg .append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", (d) => (d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6)) .attr("y", (d) => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", (d) => (d.x0 < width / 2 ? "start" : "end")) .text((d) => d.name) .append("tspan") .attr("fill-opacity", 0.7) .text((d) => ` ${d.value.toLocaleString()}`); } function reset() { redraw(); } invalidation && invalidation.then(() => { dim.filterAll().dispose(); group.dispose(); facts.dispatch.on("redraw.view" + id, null).on("reset.view" + id, null); }); facts.dispatch .on("redraw.view" + id, debounce(redraw, 10)) .on("reset.view" + id, reset); redraw(); return svg.node(); }34:T1757,async function vegaSync({ facts = null, dims = [], multivalued = false, actions = false, renderer = "canvas", spec = {}, sample = 1000, interactivity = false, filter = null, counts = false, debug = false, normalized = false, scrollbar = false, group = null, reduce = null, top = Infinity, invalidation, visibility }) { if (!facts) return vegalite(spec); await visibility(); const dimension = typeof dims === "function" ? dims : dims instanceof Array ? d => dims.map(key => d[key]) : d => [dims].map(key => d[key]); if (reduce !== null || group !== null) counts = true; // our dimension, with filter const xy = facts.dimension(dimension, multivalued); // same dimension unfiltered const xyUnfiltered = counts && facts.unfiltered.dimension(dimension, multivalued); //groups filtered/unfiltered const groupUnfiltered = counts && (group !== null ? xyUnfiltered.group(group) : xyUnfiltered.group()); const groupFiltered = counts && (group !== null ? xy.group(group) : xy.group()); //reduce options const reduceUnfiltered = counts && (reduce !== null ? reduce(groupUnfiltered) : groupUnfiltered.reduceCount()); const reduceFiltered = counts && (reduce !== null ? reduce(groupFiltered) : groupFiltered.reduceCount()); //counts function let getCounts = function() { const resultFiltered = top === Infinity ? reduceFiltered.all() : reduceFiltered.top(top), resultUnfiltered = top === Infinity ? reduceUnfiltered.all() : reduceUnfiltered.top(top); if (debug) console.log({ resultFiltered, resultUnfiltered }); const getKey = d => (Array.isArray(d.key) ? d.key.join(',') : d.key); const lookup = new Map(resultFiltered.map(d => [getKey(d), d.value])); if (debug) console.log(lookup); const unfilteredSize = normalized ? facts.size() : 1, filteredSize = normalized ? resultFiltered.reduce((acc, d) => acc + d.value, 0) : 1; const result = resultUnfiltered.map(d => { let o = { key: getKey(d), value: normalized ? d.value / unfilteredSize : d.value, filtered: normalized ? lookup.get(getKey(d)) / filteredSize : lookup.get(getKey(d)) }; return o; }); if (debug) console.log(result); return result; }; // feed the spec with initials values if (!spec.datasets) spec.datasets = {}; if (!counts && !spec.datasets.all) spec.datasets.all = sampleArray(facts.all(), sample); if (!counts && !spec.datasets.filtered) spec.datasets.filtered = sampleArray(facts.allFiltered([xy]), sample); if (counts && !spec.datasets.counts) spec.datasets.counts = getCounts(); const view = await vegalite(spec, { actions, renderer }), e = view.value, resetButton = d3 .select(view) .append("a") .attr("href", "#void") .attr("class", "reset") .style("font-size", "small") .style('font-align', 'middle') .style("top", "0.3em") .style('left', `${w}px`) .style("position", "absolute") .on("click", reset); //remove scroll bars if (!scrollbar) d3.select(view).attr('style', 'overflow : hidden'); const id = xy.id(); invalidation && invalidation.then(() => { xy.filterAll().dispose(); xyUnfiltered && xyUnfiltered.dispose(); reduceUnfiltered && reduceUnfiltered.dispose(); reduceFiltered && reduceFiltered.dispose(); e.finalize(); facts.dispatch.on("redraw.view" + id, null); facts.dispatch.on("reset.view" + id, null); facts.dispatch.call('redraw'); }); if (interactivity) { e.addSignalListener(interactivity, function(name, value) { let chartFilter = null; //default interactions behaviors if (debug) console.log({ name, value, interactivity }); if (filter === null) { switch (interactivity) { case "brush": if (value && Object.values(value).length > 0) chartFilter = RangedMultiDimensionalFilter(Object.values(value)); else chartFilter = null; break; case "selection": const f = "key" in value ? value.key : value[dims[0]]; if (f && f.length > 0) chartFilter = d => f.includes(d[0]); else chartFilter = null; break; } } else chartFilter = filter(name, value); xy.filter(chartFilter); facts.dispatch.call("redraw", undefined, { sourceId: id }); resetButton.html(chartFilter ? "Reset" : ""); }); } // redraw: add filtered data let drawn = 0; async function redraw(args = {}) { const selfCalled = args !== undefined && args.sourceId !== undefined && id === args.sourceId; if (selfCalled) return; if (drawn++) return; await (visibility ? visibility() : Promises.delay(800)); if (debug) console.log(spec.title, args, selfCalled, id); const viewData = e._runtime.data; let run = false; // if dataset has changed update "all" if (!counts && args.updateAll && viewData.hasOwnProperty('data')) { e.data("all", sampleArray(facts.all(), sample)); run = true; } if (!counts && viewData.hasOwnProperty('filtered')) { e.data("filtered", sampleArray(facts.allFiltered([xy]), sample)); run = true; } if (counts && viewData.hasOwnProperty('counts')) { e.data("counts", getCounts()); run = true; } run && (await e.runAsync()); drawn = 0; } function reset() { const { signals } = e.getState(); if (signals['brush_x']) e.signal('brush_x', []); if (signals['brush_y']) e.signal('brush_y', []); if (interactivity === "selection") e.signal('selection_tuple', []); e.runAsync(); } // redraw when notified facts.dispatch.on("redraw.view" + id, redraw); facts.dispatch.on("reset.view" + id, reset); redraw(); drawn = 0; return view; }35:T489,viewof vegaCountsSport = vegaSync({ facts, dims: d => [d.sport], counts: true, spec: { width: w, layer: [ { mark: "bar", data: { name: "counts" }, encoding: { x: { field: "key", type: "ordinal", title: "sport", axis: { labelAngle: 45 } }, y: { field: "value", type: "quantitative", title: "Number of athletes" }, color: { value: "#ddd" } } }, { mark: "bar", data: { name: "counts" }, selection: { selection: { type: "multi", toggle: "!event.shiftKey", fields: ["key"] } }, encoding: { x: { field: "key", type: "ordinal" }, y: { field: "filtered", type: "quantitative" }, color: { value: colorVega } } } ] }, // specifique observable invalidation, visibility })36:T4c1,viewof vegaInteractivitySport = vegaSync({ facts, dims: d => [d.sport], interactivity: "selection", counts: true, spec: { title: "Sports", width: w, data: { name: "counts" }, layer: [ { mark: "bar", encoding: { x: { field: "key", type: "ordinal", title: null, axis: { labelAngle: 45 } }, y: { field: "value", type: "quantitative", title: "Number of athletes" }, color: { value: "#ddd" } } }, { mark: "bar", selection: { selection: { type: "multi", toggle: "!event.shiftKey", fields: ["key"] } }, encoding: { x: { field: "key", type: "ordinal" }, y: { field: "filtered", type: "quantitative" }, color: { condition: { selection: "selection", value: colorVega }, value: "#aaa" } } } ] }, // specifique observable invalidation, visibility })37:T58a,viewof age2 = vegaSync({ facts, dims: d => { let birthdate = new Date(d.date_of_birth); let riodate = new Date(2016, 8, 5); let diff = new Date(riodate - birthdate); return [Math.abs(diff.getUTCFullYear() - 1970)]; }, interactivity: "brush", counts: true, spec: { title: "Age of athletes in 2016", width: w, layer: [ { mark: "bar", data: { name: "counts" }, encoding: { x: { field: "key", type: "quantitative", title: "Age" }, y: { field: "value", type: "quantitative", title: "Number of athletes" }, color: { value: "#ddd" } } }, { mark: "bar", data: { name: "counts" }, selection: { brush: { name: "brush", type: "interval", encodings: ['x'] } }, encoding: { x: { field: "key", type: "quantitative" }, y: { field: "filtered", type: "quantitative" }, color: { condition: { selection: "brush", value: colorVega }, value: "#aaa" } } } ] }, // specifique observable invalidation, visibility })38:Tefa,function fullscreen({ className = 'custom-fullscreen', style = null, breakLayoutAtCell = 2, hideAfter = 9999, hideBefore = 0, left = 66, right = 33, button } = {}) { //WORK INITIALLY FROM @mootari/fullscreen-layout-demo //THEN ADAPTED IN @severo/two-columns-layout-in-fullscreen-mode function hide({ hideAfter = Infinity, hideBefore = 0, reset = false } = {}) { let cells = document.getElementsByClassName('observablehq'); for (let i = 0; i < cells.length; i++) { if ((i < hideBefore || i > hideAfter) && !reset) cells[i].style.display = "none"; else cells[i].style.display = "block"; } // console.log("Hide", cells); return cells; } // Superfluous bling. const buttonStyle = style != null ? style : 'font-size:1rem;font-weight:bold;padding:8px;background:hsl(50,100%,90%);border:5px solid hsl(40,100%,50%); border-radius:4px;box-shadow:0 .5px 2px 1px rgba(0,0,0,.2);cursor: pointer'; button = button || html`