31:Ta5a,function fileUpload(formats, title, defaultValue, enabled) { if (enabled !== undefined && !enabled) return html``; const result = html`

${title}

Using demo data

` const info = result.children[1]; const fileUpload = result.children[2]; const formatSelection = result.children[3]; const formatInfo = result.children[4]; let format = formats[0]; function updateFormatInfo() { formatInfo.innerHTML = `

Info about format "${format.title}":

` if (format.info) { formatInfo.innerHTML += `

${format.info}

`; } if (format.example) { formatInfo.innerHTML += `

Example:

${format.example}

`; } } let file = null; function setValue(value) { value.format = format.id; result.value = value; result.dispatchEvent(new CustomEvent("input")); } function printMessage(color, text, value) { info.style.color = color; info.innerHTML = text; if (typeof(value) === 'undefined') { setValue(defaultValue); } else { setValue(value); } } function processRawData(rawData) { try { let data = null; if (format.form === 'lines') { data = rawData.split('\n'); } else if (format.form === 'json') { data = JSON.parse(rawData); } else if (format.form === 'csv') { data = d3.csvParse(rawData); } const finalValue = format.importer(data); printMessage('green', 'Done', finalValue); } catch (e) { printMessage('red', e.message); throw e; }; } function update() { if (!file) { return printMessage('gray', 'Using demo data', defaultValue); } Files.text(file).then(processRawData); } fileUpload.addEventListener('change', function() { if (this.files.length == 0) { file = null; } else { file = this.files[0]; } update(); }); formatSelection.addEventListener('change', function() { format = formats[+formatSelection.value]; update(); updateFormatInfo(); }); updateFormatInfo(); setValue(defaultValue); return result; }32:T5c7,function wrap(text, width, font, relH, res) { text.each(function (d, textNo) { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, x = text.attr("x"), y = text.attr("y"), dy = font.dy / 100, dx = font.dx, lines = ['']; while (word = words.pop()) { line.push(word); let curText = line.join(" "); lines[lines.length - 1] = curText; if (font.getWidth(curText) > width) { line.pop(); curText = line.join(" "); lines[lines.length - 1] = curText; line = [word]; lines.push(word); } } if (res) { if (!(textNo in res)) { res[textNo] = {}; } res[textNo].count = lines.length; } dy -= font.lineHeight / 100 * (lines.length - 1) * relH; var tspan = text.text(null) .append("tspan") .attr("x", x) .attr("y", y) .attr("dy", dy + "em"); lines.forEach((line, lineNo) => text.append("tspan") .attr("x", x) .attr("y", y) .attr("dy", (lineNo * font.lineHeight / 100 + dy) + "em") .attr("dx", dx) .text(line)); }); }33:T1886,function fontsSelection(keys, initial, presets) { if (presets) { presets = R.concat(presets, defaultFontsPresets); } else { presets = defaultFontsPresets; } const canvas = DOM.element('canvas'); const context = canvas.getContext('2d'); const divs = {}; let data = R.fromPairs(keys.map(key => [key, { familyPreset: 0, weight: presets[0].weights[0], size: 20, color: '#000000', strokeWidth: 2, dx: 0, dy: 40, lineHeight: 100, }])); if (initial) { R.forEachObjIndexed(item => item.fontFamily && (item.familyPreset = Math.max(0, R.findIndex(R.propEq('title', item.fontFamily), presets))), initial); data = R.mergeDeepRight(data, initial); } const result = DOM.element('div'); const imports = DOM.element('style'); result.appendChild(imports); result.style = 'border: 1px solid gray; border-radius: 5px; padding: 10px; font-family: sans-serif; font-size: 16px' const title = DOM.element('div'); title.style = 'font-weight: bold'; title.innerHTML = 'Fonts'; result.appendChild(title); function update() { const importsTxt = R.uniq(R.values(data).map(({familyPreset}) => `@import url('${presets[familyPreset].url}')`)).join(';\n'); imports.innerHTML = importsTxt; keys.forEach(key => { const datum = data[key]; const preset = presets[datum.familyPreset]; const css = `${datum.weight % 100 ? 'italic' : ''} ${Math.floor(datum.weight / 100) * 100} ${datum.size}px '${preset.name}'`; divs[key].preview.style.font = css; divs[key].preview.style.color = datum.color; if (0) { divs[key].preview.style.fontFamily = preset.name; divs[key].preview.style.fontWeight = Math.floor(datum.weight / 100) * 100; divs[key].preview.style.fontStyle = datum.weight % 100 ? 'italic' : 'normal'; divs[key].preview.style.fontSize = datum.size + 'px'; } divs[key].family.value = datum.familyPreset; divs[key].weight.innerHTML = preset.weights.map(weight => ``); divs[key].weight.value = data[key].weight; divs[key].size[0].value = data[key].size; divs[key].color.value = data[key].color; divs[key].strokeWidth[0].value = data[key].strokeWidth; divs[key].lineHeight[0].value = data[key].lineHeight; divs[key].dxInput[0].value = data[key].dx; divs[key].dyInput[0].value = data[key].dy; result.value[key] = { css, color: datum.color, strokeWidth: datum.strokeWidth, dx: datum.dx, dy: datum.dy, lineHeight: datum.lineHeight, size: datum.size, getWidth: text => { context.font = css; return context.measureText(text).width; }, d3text: (sel, color) => { let temp = sel.style('font', css).attr('dx', datum.dx).attr('dy', datum.dy / 100 + 'em'); if (datum.strokeWidth) { temp = temp.attr('fill', 'none').attr('stroke-width', datum.strokeWidth).attr('stroke-linejoin', 'bevel').attr('stroke', 'white').clone(true); } return temp.attr('stroke', 'none').attr('fill', color || datum.color); }, d3wrap: (sel, width, relH, res, color) => sel.call(wrap, width, result.value[key], relH, res).call(result.value[key].d3text, color), }; }); result.value.imports = importsTxt; result.dispatchEvent(new CustomEvent("input")); } keys.forEach(key => { const datum = data[key]; const div = DOM.element('div'); result.appendChild(div); const preview = DOM.element('div'); preview.style.padding = '10px'; preview.style.display = 'inline-block'; preview.style.width = '50px'; preview.style.height = '25px'; preview.style.overflow = 'hidden'; preview.style.verticalAlign = 'middle'; // preview.style.backgroundColor = 'gray'; preview.innerHTML = key; const family = DOM.element('select'); family.onchange = function() { data[key].familyPreset = +this.value; data[key].weight = presets[+this.value].weights[0]; update(); }; family.innerHTML = defaultFontsPresets.map(({ title }, fontNo) => ``).join(''); const weight = DOM.element('select'); weight.onchange = function() { data[key].weight = +this.value; update(); } weight.style.width = '150px'; const size = number(); size.style.display = 'inline-block'; size[0].style.width = '50px'; size[0].oninput = function() { data[key].size = +this.value; update(); } const color = DOM.input('color'); color.addEventListener('change', function() { data[key].color = this.value; update(); }); const strokeWidth = number(); strokeWidth[0].oninput = function() { data[key].strokeWidth = +this.value; update(); } strokeWidth.style.display = 'inline-block'; strokeWidth[0].style.width = '50px'; const lineHeight = number(); lineHeight[0].oninput = function() { data[key].lineHeight = +this.value; update(); } lineHeight.style.display = 'inline-block'; lineHeight[0].style.width = '50px'; const dxInput = number(); dxInput[0].oninput = function() { data[key].dx = +this.value; update(); } dxInput.style.display = 'inline-block'; dxInput[0].style.width = '50px'; const dyInput = number(); dyInput[0].oninput = function() { data[key].dy = +this.value; update(); } dyInput.style.display = 'inline-block'; dyInput[0].style.width = '50px'; div.appendChild(preview); div.appendChild(family); div.appendChild(weight); div.appendChild(size); div.appendChild(color); div.appendChild(html` stroke:`) div.appendChild(strokeWidth); div.appendChild(html` lineHeight:`) div.appendChild(lineHeight); div.appendChild(html` dx:`) div.appendChild(dxInput); div.appendChild(html` dy:`) div.appendChild(dyInput); div.style = 'margin: 10px'; divs[key] = { div, preview, family, weight, size, color, strokeWidth, lineHeight, dxInput, dyInput }; }); result.value = {}; update(); return result; }34:T4dd,function makeFont(params) { const datum = R.mergeDeepRight(params, { color: '#000000', strokeWidth: 0, dx: 0, dy: 0, lineHeight: 100, size: 20, family: 'Arial', weight: 400, }); const canvas = DOM.element('canvas'); const context = canvas.getContext('2d'); const css = `${datum.weight % 100 ? 'italic' : ''} ${Math.floor(datum.weight / 100) * 100} ${datum.size}px '${datum.family}'`; const res = { css, color: datum.color, strokeWidth: datum.strokeWidth, dx: datum.dx, dy: datum.dy, lineHeight: datum.lineHeight, size: datum.size, getWidth: text => { context.font = css; return context.measureText(text).width; }, d3text: (sel, color) => { let temp = sel.style('font', css).attr('dx', datum.dx).attr('dy', datum.dy / 100 + 'em'); if (datum.strokeWidth) { temp = temp.attr('fill', 'none').attr('stroke-width', datum.strokeWidth).attr('stroke-linejoin', 'bevel').attr('stroke', 'white').clone(true); } return temp.attr('stroke', 'none').attr('fill', color || datum.color); }, } res.d3wrap = (sel, width, relH, writeTo, color) => sel.call(wrap, width, res, relH, writeTo).call(res.d3text, color); return res; }35:T466,function secureDownload(encrypted, defaultValue) { const pass = text({placeholder: "Password", submit: "Download demo file"}); pass.style.display = 'inline-block'; const res = panel(pass); res.value = defaultValue; pass.addEventListener('input', () => { const url = decrypt(encrypted, pass.value); if (url.slice(0, 4) !== 'http') { pass.children[1].value = 'invalid password'; return; } const h = `

${url}

`; if (pass.children.length === 2) { pass.appendChild(html`${h}`); } else { pass.children[2].innerHTML = h; } pass.children[1].value = 'downloading...'; function reqListener () { pass.children[1].value = 'done'; try { res.value = JSON.parse(this.responseText); } catch (e) { res.value = this.responseText; } res.dispatchEvent(new CustomEvent("input")); } var oReq = new XMLHttpRequest(); oReq.addEventListener("load", reqListener); oReq.open("GET", url); oReq.send(); }); return res; }36:[] 2f:{"title":"Visualization utilities","cells":[{"id":0,"value":"md`# Visualization utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"R = require(\"ramda@0.25.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"import {number, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"md`## File upload`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof file = fileUpload([\n {id: 'format1', title: 'format1', form: 'csv', info: 'Description1', example: 'line1\\n\\tline2', importer: data => data()},\n {id: 'format2', title: 'format2', form: 'lines', info: 'Description2', importer: data => data},\n], 'Import file', {hello: 'world'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"md`## Text wrap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`## Font selection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"viewof fonts = fontsSelection(['font1', 'font2'], {font1: {fontFamily: 'Roboto', weight: 450, size: 22, color: '#ff0000', strokeWidth: 3}}, [])","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"fonts","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"defaultFontsPresets = [\n {\n title: 'Arial',\n url: '',\n weights: [400, 450, 700, 750],\n name: 'Arial',\n }, {\n title: 'Calibri',\n url: '',\n weights: [400, 450, 700, 750],\n name: 'Calibri',\n }, {\n title: 'Roboto',\n url: 'https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i&subset=cyrillic',\n weights: [400, 450, 500, 550],\n name: 'Roboto',\n }, {\n title: 'Roboto Condensed',\n url: 'https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&subset=cyrillic',\n weights: [300, 350, 400, 450, 700, 750],\n name: 'Roboto Condensed',\n }, {\n title: 'Ubuntu Mono',\n url: 'https://fonts.googleapis.com/css?family=Ubuntu+Mono:400&subset=cyrillic',\n weights: [400],\n name: 'Ubuntu Mono',\n }, {\n title: 'Charmonman',\n url: 'https://fonts.googleapis.com/css?family=Charmonman',\n weights: [400],\n name: 'Charmonman',\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"defaultPresetsByTitle = R.indexBy(R.prop('title'), defaultFontsPresets)","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"fontWeightNames = ({\n 100: 'thin',\n 150: 'thin italic',\n 300: 'light',\n 350: 'light italic',\n 400: 'regular',\n 450: 'regular italic',\n 500: 'medium',\n 550: 'medium italic',\n 700: 'bold',\n 750: 'bold italic',\n 900: 'black',\n 950: 'black italic',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`## Save as png / svg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"viewof rectW = DOM.range(1, 500)","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"viewof relH = DOM.range(0, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"chart = {\n const svg = d3.select(DOM.svg(500, 100));\n svg.append('rect').attr('transform', `translate(${250 - rectW / 2}, 20)`).attr('fill', 'red').attr('width', rectW).attr('height', 10);\n const res = {};\n svg.append('text').attr('x', 250).attr('y', 20).attr('text-anchor', 'middle').text('Hello, world world world world world world world world world world').call(fonts.font1.d3wrap, rectW, relH, res);\n // console.log(res.count);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"exportImage(chart, fonts, 'mychart', 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"function rasterize(svg, fonts, upscale) {\n let resolve, reject;\n if (!upscale) upscale = 1;\n const promise = new Promise((y, n) => (resolve = y, reject = n));\n const image = new Image;\n image.onerror = reject;\n image.onload = () => {\n const rect = svg.getBoundingClientRect();\n const context = DOM.context2d(rect.width * upscale, rect.height * upscale);\n context.drawImage(image, 0, 0, rect.width * upscale, rect.height * upscale);\n setTimeout(() => context.canvas.toBlob(resolve), 0);\n };\n //setTimeout(image.onload_, 0);\n image.src = URL.createObjectURL(serialize(svg, fonts));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n const sodipodi = \"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\";\n return function serialize(svg, fonts) {\n svg = svg.cloneNode(true);\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n svg.setAttributeNS(xmlns, \"xmlns:sodipodi\", sodipodi);\n const defs = document.createElement('defs');\n defs.innerHTML = ``;\n svg.insertBefore(defs, svg.firstChild);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"function download(callback, fname, label, label2) {\n const result = html``;\n const button = html``;\n result.appendChild(button);\n button.onclick = () => {\n callback(data => {\n result.innerHTML = '';\n result.appendChild(DOM.download(data, fname, label2 || 'Download'))\n });\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"function exportImage(svg, fonts, fname) {\n let upscale = 1;\n let rerender = () => {};\n const res = panel(\n download(fun => fun(serialize(svg, fonts)), fname + '.svg', '.svg'),\n () => download(fun => rasterize(svg, fonts, upscale).then(fun), fname + '.png', `.png x${upscale}`, 'Non-system fonts will be ignored. Are you sure?'),\n myNumber({initial: 1, onChange: val => {upscale = Math.max(0.1, val); rerender()}, width: 50, label: 'png upscale'})\n );\n rerender = res.rerender;\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"md`## Multislider`","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"md`## Panel`","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"function panel(...widgets) {\n const res = html`

`;\n const render = () => {\n res.innerHTML = '';\n widgets.forEach(widget => {\n if (typeof widget === 'function') {\n widget = widget();\n }\n if (widget.style) {\n widget.style.display = 'inline-block';\n }\n res.appendChild(widget)\n });\n }\n res.rerender = render;\n render();\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"panel(\n myNumber({width: 40, initial: 4, onChange: console.log}),\n myNumber({width: 40, initial: 4, onChange: console.log, label: 'Hello'}),\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"function myNumber(props) {\n const {initial, label, width, onChange} = props;\n const res = html``;\n res.value = typeof initial === 'undefined' ? 0 : initial;\n if (onChange) {\n onChange(res.value);\n res.oninput = () => onChange(res.value);\n }\n if (width) {\n res.style.width = width + 'px';\n }\n let withLabel = res;\n if (label) {\n withLabel = html`

${label}:

`\n withLabel.appendChild(res);\n }\n return withLabel;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"md`## Clip and bg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"function clipBg(svg, g, background, pad) {\n background = background || 'white';\n pad = pad || 0;\n document.body.appendChild(svg.node());\n const box = g.node().getBBox();\n svg.remove()\n .attr(\"width\", box.width + pad * 2)\n .attr(\"height\", box.height + pad * 2)\n .attr(\"viewBox\", `${box.x - pad} ${box.y - pad} ${box.width + pad * 2} ${box.height + pad * 2}`)\n .append('rect')\n .attr('fill', background)\n .attr('x', box.x - pad).attr('y', box.y - pad)\n .attr('width', box.width + pad * 2).attr('height', box.height + pad * 2)\n .lower();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":747,"value":"md`## Encryption`","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"md5 = require('blueimp-md5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"function encrypt(text, key) {\n const padZero = a => a.length === 1 ? '0' + a : a;\n const bytes = new TextEncoder(\"utf-8\").encode(text);\n const encrypted = [];\n bytes.forEach((byte, no) => encrypted.push(padZero(((byte + parseInt(md5(key + no).slice(0, 2), 16)) % 256).toString(16))));\n return encrypted.join('');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"function decrypt(text, key) {\n const res = new Uint8Array(text.length / 2);\n for (let no=0; nosecureDownload('${encrypt(url, pass)}')`","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"viewof f = secureDownload('787be219eb850b87a70a1f9d0ff1b1ef5a0e4c41b518b91d7c806fe0ed96994932ccc916d65aae7b69962e177a345bd8359bc53231df5c74198baf08204037dabedededa2c92e1dfada6cfdf75ed58d6781dd7f7e2ff039b3356c997e9f3b3ab6ad45e346106cfde2450fd4775ed116f895c1d118a4822b485f04a50b3cc3d78c27b358b8e9766d4d9', {h: 'w'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"md`\n-----------\n\n-----------\n\n-----------\n# Internals\n-----------\n\n-----------\n\n-----------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"md`import { secureDownload} from '@pallada-92/visualization-utilities'`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}