2b:null 2c:["$","title",null,{"children":"Lifecycle | Yaroslav Sergienko | Observable"}] 31:T6f2,html` ${myLabel('Sort order:', mySelect('sortOrder', sortOrder, {vals: ['sum', 'max', 'label']}))} ${myLabel('Left panel formula:', mySelect('rowRectsVals', rowRectsVals, {vals: ['sumH', 'maxH', 'sumV', 'maxV', 'sumSquare', 'maxSquare', 'meanMax', 'maxMean', 'bubbles']}))} ${myLabel('Left panel text:', mySelect('leftPanelText', leftPanelText, {vals: ['absolute', 'percentage', 'absolute + percentage']}))} ${myLabel('Left panel ratio:', myNumber('leftPanelRatio', leftPanelRatio, {width: 50}))} ${myLabel('Item width:', myNumber('itemWidth', itemWidth, {width: 50}))} ${myLabel('Item height:', myNumber('itemHeight', itemHeight, {width: 50}))} ${myLabel('Item rel width:', myNumber('itemRelW', itemRelW, {width: 50}))} ${myLabel('Item rel height:', myNumber('itemRelH', itemRelH, {width: 50}))} ${myLabel('Font:', myText('font', font, {width: 100, submit: 1}))} ${myLabel('Left panel title:', myText('leftTitle', leftTitle, {width: 100}))} ${myLabel('Left panel label width:', myNumber('leftPanelLabelWidth', leftPanelLabelWidth, {width: 50}))} ${myLabel('Left panel font size:', myNumber('leftPanelFontSize', leftPanelFontSize, {width: 50}))} ${myLabel('Left panel font dy:', myNumber('leftPanelFontDY', leftPanelFontDY, {width: 50}))} ${myLabel('Year font size:', myNumber('yearFontSize', yearFontSize, {width: 50}))} ${myLabel('Year font dy:', myNumber('yearFontDY', yearFontDY, {width: 50}))} ${myLabel('Right label font size:', myNumber('rowFontSize', rowFontSize, {width: 50}))} ${myLabel('Right label font dy:', myNumber('rowFontDY', rowFontDY, {width: 50}))} `32:Tdf4,function getStats(data, params) { if (!data) return undefined; if (!params) params = {}; params = R.mergeDeepRight({ rowRectsVals: 'sumSquare', rowsRectsRatio: 0.25, rowsRectsPad: 0.1, sortRows: 'sum', leftPanelText: 'absolute', }, params); const datesOrder = R.sortBy(R.identity, R.uniq(R.pluck('date', data))); const dateMax = R.last(datesOrder); let rowsOrder = R.uniq(R.pluck('row', data)).sort(); let rowVals = rowsOrder.map(row => ({label: row, ...arrayStats(R.pluck('val', R.filter(R.propEq('row', row), data)))})); if (params.sortRows !== 'initial') { rowVals = R.sort((params.sortRows === 'label' ? R.ascend : R.descend)(R.prop(params.sortRows)), rowVals); rowsOrder = R.pluck('label', rowVals); } const rowRectsVals = { sumH: () => R.pluck('sum', rowVals).map(x => [x, 1, x]), maxH: () => R.pluck('max', rowVals).map(x => [x, 1, x]), sumV: () => R.pluck('sum', rowVals).map(x => [1, x, x]), maxV: () => R.pluck('max', rowVals).map(x => [1, x, x]), sumSquare: () => R.pluck('sum', rowVals).map(x => [Math.sqrt(x), Math.sqrt(x), x]), maxSquare: () => R.pluck('max', rowVals).map(x => [Math.sqrt(x), Math.sqrt(x), x]), meanMax: () => R.transpose([R.pluck('max', rowVals), rowVals.map(item => item.sum / item.max), rowVals.map(R.prop('sum'))]), maxMean: () => R.transpose([rowVals.map(item => item.sum / item.max), R.pluck('max', rowVals), rowVals.map(R.prop('max'))]), }[params.rowRectsVals](); const rowsHSum = R.sum(R.pluck(1, rowRectsVals)); let rowsHNormed = R.pluck(1, rowRectsVals).map(v => v / rowsHSum); const rowsHAccum = []; const rowsHMid = []; let sum = 0; const rectsPad = params.rowsRectsPad / rowsHNormed.length / 2; rowsHNormed.forEach((v, no) => { rowsHMid.push(sum / (1 + params.rowsRectsPad)); sum += rectsPad; rowsHAccum.push(sum / (1 + params.rowsRectsPad)); sum += v; sum += rectsPad; }); rowsHNormed = rowsHNormed.map(v => v / (1 + params.rowsRectsPad)) const rowsWMax = R.apply(Math.max, R.pluck(0, rowRectsVals)); let wFun = null; if (R.contains(params.rowRectsVals, ['sumH', 'maxH', 'maxMean', 'meanMax'])) { wFun = v => v / rowsWMax * params.rowsRectsRatio; } else if (R.contains(params.rowRectsVals, ['sumV', 'maxV'])) { wFun = v => v / rowsWMax * params.rowsRectsRatio / rowsOrder.length * 3 } else { wFun = v => v / rowsHSum; } const rowsWNormed = R.pluck(0, rowRectsVals).map(wFun); const leftPanelSum = R.sum(R.pluck(params.rowRectsVals.indexOf('max') != -1 ? 'max' : 'sum', rowVals)); return { item: data, date: { years: R.sortBy(R.identity, R.uniq(datesOrder.map(date => +date.split('-')[0]))), byYear: R.groupBy(date => +date.split('-')[0], datesOrder), order: datesOrder, missing: R.difference(datesRange(datesOrder[0], dateMax), datesOrder), min: datesOrder[0], max: dateMax, }, row: { order: rowsOrder, vals: R.fromPairs(R.zip(rowsOrder, rowVals)), maxSum: R.sum(R.pluck('max', rowVals)), rect: rowRectsVals.map(([w, h, val], no) => ({ w, h, nw: rowsWNormed[no], nh: rowsHNormed[no], ny: rowsHAccum[no], nym: rowsHMid[no], val, text: { 'absolute': val, 'percentage': (val / leftPanelSum * 100).toFixed(1) + '%', 'absolute + percentage': val + '(' + (val / leftPanelSum * 100).toFixed(1) + '%)', }[params.leftPanelText], })) }, vals: arrayStats(R.pluck('val', data)), }; }33:T1a8b,function getChart(stats, params) { const p = R.mergeDeepRight({ item: { width: 10, height: 20, hRel: 0.9, wRel: 0.9, }, row: { rect: { mode: 'sumSquare', lines: true, ratio: 0.3, }, rectLabel: { title: '', width: 100, font: { family: 'Calibri', size: 0.6, dy: 50, dx: 10, }, }, font: { family: 'Calibri', size: 0.8, dy: -20, dx: 10, }, }, date: { font: { family: 'Calibri', size: 1, dy: 50, dx: 10, }, angle: 45, } }, params || {}); console.log(p); const svg = d3.select(DOM.svg(1, 1)); const g = svg.append('g'); const x = date => stats.date.order.indexOf(date) * p.item.width; const y = row => (stats.row.order.indexOf(row) + 1) * p.item.height; const h = ({row, val}) => p.item.height * p.item.hRel * val / stats.row.vals[row].max; const color = (row) => d3.interpolateRainbow(stats.row.order.indexOf(row) / stats.row.order.length); const maxX = x(stats.date.max); const maxY = y(R.last(stats.row.order)); const width = stats.date.order.length * p.item.width; const height = stats.row.order.length * p.item.height; const rowMid = g.append('g') .selectAll('g') .data(R.range(-1, stats.row.order.length)) .enter().append('g') ; const rectLabelX = -p.row.rectLabel.width / 2; const linesX1 = -p.row.rectLabel.width; const rectsX = linesX1 - (R.contains(params.row.rect.mode, ['sumH', 'maxH']) ? 0 : 30); rowMid.append('line') .attr('x1', linesX1) .attr('y1', (no) => no === -1 ? 0 : y(stats.row.order[no])) .attr('x2', width) .attr('y2', (no) => no === -1 ? 0 : y(stats.row.order[no])) .attr('stroke', 'gray') .attr('stroke-width', 0.5) .attr('fill', 'none'); const rowR = g.append('g') .selectAll('g') .data(stats.row.order) .enter().append('g') .attr('transform', row => `translate(${maxX + 20}, ${y(row)})`); rowR.append('text') .attr('dy', p.row.font.dy * p.item.height) .style('font-family', p.row.font.family) .style('font-size', p.row.font.size * p.item.height + 'px') .text(row => row); const rowRectLabel = g.append('g') .selectAll('g') .data(stats.row.order) .enter().append('g'); rowRectLabel.append('text') .text((_, no) => stats.row.rect[no].text) .style('text-anchor', 'middle') .attr('x', rectLabelX) .attr('y', (_, no) => (y(stats.row.order[no]) + y(stats.row.order[no])) / 2) .attr('dy', p.row.rectLabel.font.dy * p.item.height) .style('font-family', p.row.rectLabel.font.family) .style('font-size', p.row.rectLabel.font.size * p.item.height + 'px') .attr('fill', 'black'); g.append('text') .text(p.row.rectLabel.title || (R.contains(p.row.rect.mode, ['maxH', 'maxV', 'maxSquare']) ? 'Max' : 'Sum')) .style('text-anchor', 'middle') .attr('x', rectLabelX) .attr('y', 0) .attr('dx', 0) .attr('dy', p.row.rectLabel.font.dy * p.item.height) .style('font-weight', 'bold') .style('font-family', p.row.rectLabel.font.family) .style('font-size', p.row.rectLabel.font.size * p.item.height + 'px') .attr('fill', 'black'); if (p.row.rect.mode === 'bubbles') { g.append('rect') .attr('x', -height * p.row.rect.ratio) .attr('y', 0) .attr('width', 1) .attr('height', 1) .attr('fill', 'white') .attr('stroke', 'none') const rowRect = svg.append('g') .selectAll('g') .data(stats.row.rect) .enter().append('g').lower(); const bubbleY = w => linesX1 - Math.sqrt(1 + w) / Math.sqrt(1 + stats.vals.max) * 300; rowRect.append('circle') .attr('cy', (_, no) => y(stats.row.order[no]) - p.item.height / 2) .attr('cx', ({nw, w}, no) => bubbleY(w) - nw * height) .attr('r', ({nw}) => nw * height) .attr('stroke', (_, no) => color(stats.row.order[no])) .attr('stroke-width', 2) .attr('fill', 'none'); rowRect.append('line') .attr('y1', (_, no) => y(stats.row.order[no]) - p.item.height / 2) .attr('x1', ({nw}, no) => linesX1) .attr('y2', (_, no) => y(stats.row.order[no]) - p.item.height / 2) .attr('x2', ({w}) => bubbleY(w)) .attr('stroke', (_, no) => color(stats.row.order[no])) .attr('stroke-width', 2) .attr('fill', 'none'); } else { const rowRect = g.append('g') .selectAll('g') .data(stats.row.rect) .enter().append('g'); rowRect.append('rect') .attr('y', ({ny}) => ny * height) .attr('x', ({nw}) => rectsX - nw * height) .attr('width', ({nw}) => nw * height) .attr('height', ({nh}) => nh * height) .attr('fill', (_, no) => color(stats.row.order[no])) .attr('stroke', 'none') .attr('stroke-width', 0.5); if (p.row.rect.lines) { rowRect.append('line') .attr('y1', (_, no) => no > 0 ? y(stats.row.order[no - 1]) : 0) .attr('x1', linesX1) .attr('y2', ({nym}) => nym * height) .attr('x2', rectsX) .attr('stroke', 'gray') .attr('stroke-width', 0.5); g.append('line') .attr('y1', maxY) .attr('x1', linesX1) .attr('y2', maxY) .attr('x2', rectsX) .attr('stroke', 'gray') .attr('stroke-width', 0.5); } } const year = g.append('g') .selectAll('g') .data(stats.date.years) .enter().append('g'); year.append('text') .text(R.identity) .style('text-anchor', 'middle') .attr('x', year => (x(stats.date.byYear[year][0]) + x(R.last(stats.date.byYear[year]))) / 2) .attr('y', maxY + 25) .attr('dx', 0) .attr('dy', p.date.font.dy * p.item.height) .style('font-family', p.date.font.family) .style('font-size', p.date.font.size * p.item.height + 'px') .attr('fill', 'black'); year.append('line') .attr('x1', year => x(R.last(stats.date.byYear[year]) ) + p.item.width) .attr('y1', 0) .attr('x2', year => x(R.last(stats.date.byYear[year])) + p.item.width) .attr('y2', maxY + 15) .attr('stroke', (year, no) => no === stats.date.years.length - 1 ? 'none' : 'gray') .attr('stroke-width', 0.5); const item = g.append('g') .selectAll('g') .data(stats.item) .enter().append('g') .attr('transform', ({date, row}) => `translate(${x(date)}, ${y(row)})`); item.append('rect') .attr('width', p.item.width * p.item.wRel) .attr('height', h) .attr('x', p.item.width * (1 - p.item.wRel) / 2) .attr('y', item => -h(item)) .attr('fill', ({row}) => color(row)) .attr('stroke', 'none') .attr('stroke-width', 0.5); return clipBg(svg, g, 'white', 2); }34:T901,$ = { const res = {}; const vars = {}; const path2str = path => path.join('/'); let changed = {}; const val2str = value => { let text = null; if (typeof(value) === 'string') { text = '`' + value + '`'; } else { text = JSON.stringify(value); } if (text.length > 200) { return text.slice(0, 200).replace(/\n/g, '↵') + '...'; } return text; }; const set = (...args) => { const [path, val] = [R.init(args), R.last(args)]; let pathSplit = 0; R.range(1, path.length + 1).forEach(i => { if (path2str(path.slice(0, i)) in vars) { pathSplit = i; } }); if (pathSplit > 0) { const pathStr = path2str(path.slice(0, pathSplit)); const entry = vars[pathStr]; if (pathSplit < path.length) { entry.value = R.assocPath(path.slice(pathSplit), val, entry.value); } else { entry.value = val; } entry.children[1].innerHTML = ` = ${val2str(entry.value)}`; changed[pathStr] = entry; } res.store = R.assocPath(path, val, res.store); }; const commit = () => { res.storeView.value = res.store; R.values(changed).map(entry => entry.dispatchEvent(new CustomEvent('input'))); res.storeView.dispatchEvent(new CustomEvent('input')); changed = {}; const focus = res.focus; }; res.store = {}; res.storeView = html`store`; res.dispatch = fun => { fun(set); commit(); }; res.var = (...args) => { const [path, val] = [R.init(args), R.last(args)]; const entry = html`${path.join('.')}`; vars[path2str(path)] = entry; entry.value = val; entry.children[1].innerHTML = ` = ${val2str(entry.value)}`; res.store = R.assocPath(path, val, res.store); res.storeView.value = res.store; res.storeView.dispatchEvent(new CustomEvent('input')); return entry; }; res.set = (...args) => { res.dispatch(set => { set(...args); }); }; res.registerInput = elem => { if (res.focus && R.equals(elem.path, res.focus.path)) { setTimeout(() => elem.focus(), 0); } elem.onfocus = () => { res.focus = elem; } elem.onblur = () => { if (res.focus === elem) { res.focus = null; } } } commit(); return res; }35:[] 2f:{"id":"f66b754907b68589","slug":"lifecycle","title":"Lifecycle","thumbnail":"7c5baecc4f8c161725f7d7dbe714342522f1a42f69fd7e122933ad58d23d3d37","access_level":"public","create_time":"$D2018-10-10T11:41:26.373Z","update_time":"$D2019-03-05T12:38:12.485Z","view_time":null,"first_public_time":"$D2018-10-10T12:29:38.941Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ae7dadfe8dcf0cbe","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":"starter_2024"},"version":770,"publish_version":770,"role":null,"authored":false,"authors":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null}],"members":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Lifecycle","cells":[{"id":0,"value":"md`# Lifecycle`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":729,"value":"viewof demo = secureDownload('787be219eb850b87a70a1f9d0ff1b1ef5a0e4c41b518b91d7c806fe0ed96994932ccc916d65aae7b69962e177a3455dc36cac8306210857a18bf85d3503e36ddb9b511d831c4e3b5e0a200ada41c58d6781dd7f9e8fb07c72e55c799edf5b5ad9ed75ffe6233a2d6274fca45a7bde29c8b8ff1108f1724de881c4d50bad5346eaf752779ceca31c4d6a1', '\"keyword\";\"pubdate\";\"freq\"\\nTest;2014-01-01;1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":712,"value":"html`${myFileUpload('file')}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":709,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":715,"value":"chart = getChart(stats, {\n item: { width: itemWidth, height: itemHeight, hRel: itemRelH / 100, wRel: itemRelW / 100},\n row: {\n rect: {mode: rowRectsVals, ratio: leftPanelRatio / 100},\n rectLabel: {\n font: {family: font, size: leftPanelFontSize / 100, dy: leftPanelFontDY / 100},\n title: leftTitle, width: leftPanelLabelWidth},\n font: {family: font, size: rowFontSize / 100, dy: rowFontDY / 100},\n },\n date: {font: {family: font, size: yearFontSize / 100, dy: yearFontDY / 100}},\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":718,"value":"exportImage(chart, {}, `lifecycle_${rowRectsVals}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"md`\n-----------\n\n-----------\n\n-----------\n# Internals\n-----------\n\n-----------\n\n-----------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"function myText(...args) {\n const [path, val, params] = [args.slice(0, -2), args[args.length - 2], R.last(args)];\n const res = html``;\n params.width && (res.style.width = params.width + 'px');\n res.value = val;\n res.path = path;\n const oninput = () => {\n $.set(...path, res.value);\n }\n if (params.submit) {\n res.onchange = oninput;\n } else {\n res.oninput = oninput; \n }\n $.registerInput(res);\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"function myNumber(...args) {\n const [path, val, params] = [args.slice(0, -2), args[args.length - 2], R.last(args)];\n const res = html``;\n params.width && (res.style.width = params.width + 'px');\n res.value = val;\n res.path = path;\n res.oninput = () => {\n $.set(...path, +res.value);\n }\n $.registerInput(res);\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":585,"value":"function myRange(...args) {\n const [path, val, params] = [args.slice(0, -2), args[args.length - 2], R.last(args)];\n const res = html``;\n params.width && (res.style.width = params.width + 'px');\n params.min && (res.min = params.min);\n params.max && (res.max = params.max);\n params.step && (res.step = params.step);\n res.value = val;\n res.path = path;\n res.oninput = () => {\n $.set(...path, +res.value);\n }\n $.registerInput(res);\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"function mySelect(...args) {\n const [path, value, params] = [args.slice(0, -2), args[args.length - 2], R.last(args)];\n const res = html``;\n res.value = value;\n res.path = path;\n res.onchange = () => {\n $.set(...path, res.value);\n };\n $.registerInput(res);\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"function myFileUpload(...path) {\n const res = html``;\n res.path = path;\n res.addEventListener('change', function() {\n if (this.files.length == 0) {\n $.set(...path, null);\n } else {\n Files.text(this.files[0]).then(text => {\n $.set(...path, text);\n });\n }\n });\n $.registerInput(res);\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":605,"value":"function myLabel(text, content) {\n return html`

${text} ${content}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"viewof file = $.var('file', null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"function parseFile(text) {\n if (!text) return undefined;\n return d3.dsvFormat(';').parse(text).map(({keyword, pubdate, freq}) => ({\n row: keyword, date: pubdate.slice(0, 7), val: +freq})).filter(({date}) => date > '');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"data = parseFile(file || demo)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":235,"value":"twoDigits = (number) => (number < 10 ? '0' : '') + number","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"function datesRange(minDate, maxDate) {\n let [minYear, minMonth] = minDate.split('-');\n let [maxYear, maxMonth] = maxDate.split('-');\n minYear = +minYear;\n minMonth = +minMonth;\n maxYear = +maxYear;\n maxMonth = +maxMonth;\n let curYear = minYear;\n let curMonth = minMonth;\n const res = [];\n while (curYear < maxYear || curYear === maxYear && curMonth <= maxMonth) {\n res.push(`${curYear}-${twoDigits(curMonth)}`);\n if (curMonth === 12) {\n curMonth = 1;\n curYear += 1;\n } else {\n curMonth += 1;\n }\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"arrayStats = (values) => ({\n vals: values,\n sortedVals: R.sortBy(R.identity, values),\n min: R.apply(Math.min, values),\n max: R.apply(Math.max, values),\n mean: R.mean(values),\n sum: R.sum(values),\n median: R.median(values),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"viewof rowRectsVals = $.var('rowRectsVals', 'sumSquare')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":545,"value":"viewof sortOrder = $.var('sortOrder', 'sum')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":573,"value":"viewof font = $.var('font', 'Calibri')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":555,"value":"viewof leftPanelRatio = $.var('leftPanelRatio', 20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"viewof leftTitle = $.var('leftTitle', '')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":630,"value":"viewof leftPanelLabelWidth = $.var('leftPanelLabelWidth', 60)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":640,"value":"viewof leftPanelFontSize = $.var('leftPanelFontSize', 60)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"viewof leftPanelFontDY = $.var('leftPanelFontDY', -25)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":658,"value":"viewof yearFontSize = $.var('yearFontSize', 60)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":662,"value":"viewof yearFontDY = $.var('yearFontDY', -30)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":674,"value":"viewof rowFontDY = $.var('rowFontDY', -25)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":676,"value":"viewof rowFontSize = $.var('rowFontSize', 70)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":684,"value":"viewof itemWidth = $.var('itemWidth', 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"viewof itemHeight = $.var('itemHeight', 20)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":689,"value":"viewof itemRelW = $.var('itemRelW', 90)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":691,"value":"viewof itemRelH = $.var('itemRelH', 90)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":748,"value":"viewof leftPanelText = $.var('leftPanelText', 'absolute')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"stats = getStats(data, {\n rowRectsVals: R.propOr(rowRectsVals, rowRectsVals, {bubbles: 'sumSquare'}),\n sortRows: sortOrder,\n rowsRectsRatio: leftPanelRatio / 100,\n leftPanelText: leftPanelText,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":268,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"md`## Boilerplate`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import {R, d3, exportImage, clipBg, secureDownload} from \"@pallada-92/visualization-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"viewof store = $.storeView","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"store","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"