30:[] 2e:{"title":"Helpers","cells":[{"id":0,"value":"md`# Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`\\`import {helpers} from \"@git-ashish/helpers\"\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`## Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`\\`helpers.signature\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"signature = md`*Feedback? Comments? Questions? You can contact me on [Twitter](https://twitter.com/ashish_k_singh) or [Email](mailto:code@iashishsingh.com)!*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"function labeledSlider(options) {\n \n const DEFAULTS = {\n value: 1,\n min: 1,\n max: 10,\n step: 1,\n label: null\n }\n \n options = Object.assign({}, DEFAULTS, options);\n \n let slider = html``\n let valueBox = html`${options.value}`\n let div = html`

`\n \n if (options.label) div.appendChild(html`

${options.label}

`)\n div.appendChild(slider)\n div.appendChild(valueBox)\n \n slider.addEventListener('input', event => update(parseFloat(slider.value)))\n \n function update(value) {\n div.value = value\n slider.value = value\n valueBox.innerHTML = value\n div.dispatchEvent(new CustomEvent('input'));\n }\n \n div.value = options.value\n\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof foo = helpers.labeledSlider({\n value: 3,\n min: 1,\n max: 5,\n step: 0.1,\n label: \"A Slider:\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"function labeledInput(options, type=\"number\") {\n \n const DEFAULTS = {\n value: 1,\n min: 1,\n max: 10,\n step: 1,\n label: null\n }\n \n options = Object.assign({}, DEFAULTS, options);\n \n let input = html``\n let div = html`

`\n \n if (options.label) div.appendChild(html`${options.label}`)\n div.appendChild(input)\n \n input.addEventListener('input', event => update(parseFloat(input.value)))\n \n function update(value) {\n div.value = value\n input.value = value\n div.dispatchEvent(new CustomEvent('input'));\n }\n \n div.value = options.value\n\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"viewof foo2 = helpers.labeledInput({\n value: 3,\n min: 1,\n max: 5,\n label: \"An Input Box:\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"function JSONView(data, prefix='',indent=2) {\n let view = html`${prefix}

${JSON.stringify(data,null,indent)}

`\n view.value = data\n return view\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"helpers.JSONView({\n foo: \"bar\",\n baz: 0\n},'⇒ ',2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`Color Box: ${helpers.colorBox('#ff0000')}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"function colorBox(color, options) {\n options = Object.assign({},{\n size: '0.8em',\n offset: '-0.4em'\n }, options);\n return html` `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`\\`\\`\\`js\nimport {tweet} from \"@git-ashish/helpers\"\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`${tweet(\"991517711250305024\")}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"function tweet(id, options) {\n \n options = Object.assign({},{\n cards: 'hidden',\n width: 350\n }, options);\n \n const div = html`

`;\n twttr.widgets.createTweet(id, div, options).then(() => div.dispatchEvent(new CustomEvent(\"load\")));\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"// https://beta.observablehq.com/@mbostock/saving-svg\nmd`To use this in your own notebook, import from this notebook:\n\n\\`\\`\\`js\nimport {rasterize} from \"@git-ashish/helpers\"\n\\`\\`\\`\n\nThen display the download button:\n\n\\`\\`\\`js\nDOM.download(await rasterize(chart), null, \"Download as PNG\")\n\\`\\`\\`\n\n\\`\\`\\`js\nDOM.download(serialize(chart), null, \"Download as SVG\")\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"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 return function serialize(svg) {\n svg = svg.cloneNode(true);\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\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":161,"value":"function rasterize(svg) {\n let resolve, reject;\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, rect.height);\n context.drawImage(image, 0, 0, rect.width, rect.height);\n context.canvas.toBlob(resolve);\n };\n image.src = URL.createObjectURL(serialize(svg));\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"// https://beta.observablehq.com/@trebor/download-json\nfunction createJsonDownloadButton(data, filename = 'data.json', buttonTitle = 'Download JSON') {\n const blob = new Blob([JSON.stringify(data, null, 2)], {type: \"text/json\"});\n return DOM.download(blob, filename, buttonTitle);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`## CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`\\`helpers.defaultCSS\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"defaultCSS = html`\n[CSS style declaration]\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`\\`\\`\\`js\nimport {usCongressionalDistrictTopo_113} from \"@git-ashish/helpers\"\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`##### US 113 Congressional Distrcit Topo JSON`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"usCongressionalDistrictTopo_113_ = d3.json('https://gist.githubusercontent.com/git-ashish/abd8e142e2bb72ecf41e674ce665901f/raw/dae6c31491b46252e37ae41af99f57033266ce54/usCongressionalDistrict113.topo.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"usCongressionalDistrictTopo_113 = d3.json('https://gist.githubusercontent.com/git-ashish/009cf3bd7beb61d9f54ccdc3e84e1b50/raw/59bb0fa72cf48533169d956c1961d26950f243ad/data.topo.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`## Export`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"helpers = ({\n signature: signature,\n defaultCSS: defaultCSS,\n labeledSlider: labeledSlider,\n labeledInput: labeledInput,\n JSONView: JSONView,\n colorBox: colorBox,\n topo: {\n usdt113: usCongressionalDistrictTopo_113\n },\n text: text,\n rasterize,\n serialize,\n createJsonDownloadButton\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"twttr = require(\"https://platform.twitter.com/widgets.js\").catch(() => window.twttr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}