2c:null 2d:["$","title",null,{"children":"comicstrip | Loredana Cirstea | Observable"}] 32:T4ac,function cstrip(domid, cstripObj) { const DEFAULT_OPTIONS = { box: {opacity: 0.6, radius: 10}, svg: {width: 960, height: 500, viewBox: {width: 960, height: 500}}, text: {fontSize: 30, fontFamily: "sans-serif"}, }; const options = { box: Object.assign({}, DEFAULT_OPTIONS.box, cstripObj.options.box || {}), text: Object.assign({}, DEFAULT_OPTIONS.text, cstripObj.options.text || {}), svg: Object.assign({}, DEFAULT_OPTIONS.svg, cstripObj.options.svg || {}), } d3.select(domid).html('') var svg = d3.select(domid).append("svg") svg.attr("width", "100%").attr("height", "100%") .attr("viewBox","0 0 " + options.svg.viewBox.width +" " + options.svg.viewBox.height) .attr("preserveAspectRatio", "xMinYMin meet") options.id = domid.substring(1); cstripImages(svg, cstripObj.images, options); cstripComments(svg, cstripObj.comments, options); toggleControls(svg, false); svg.on('dblclick', function() { cstripObj.comments.push(newComment(d3.mouse(this))); cstripComments(svg, cstripObj.comments, options); }) svg.on('mouseenter', () => {toggleControls(svg, true)}); svg.on('mouseleave', () => {toggleControls(svg, false)}); }33:T719,function cstripImages(svg, images, options) { const getimageid = i => `panel_${options.id}_csimage_${i}`; svg.selectAll(".csimage") .data(images) .join("image") .attr("xlink:href", cobj => cobj.url) .attr("id", (cobj, i) => getimageid(i)) .attr("class", "csimage") .attr("aratio", function(cobj) { const inibbox = this.getBoundingClientRect(); const w = inibbox.width || 200; const h = inibbox.height || 200; return String(w / h); }) .attr("width", function(cobj) { // setImageBbox(this, cobj, i) const bbox = getImageBbox(this, cobj); d3.select(this) .attr("x", bbox.x) .attr("y", bbox.y) .attr("width", bbox.width) .attr("height", bbox.height) .attr('transform', `rotate(${bbox.angle}, ${cobj.center.x}, ${cobj.center.y})`); return bbox.width; }) svg.selectAll(".imagemove") .data(images) .join("rect") .attr("class", "imagemove") .attr("id", (cobj, i) => `${getimageid(i)}_imagemove`) .attr("imageid", (cobj, i) => getimageid(i)) .attr("x", d => d.center.x - 5) .attr("y", d => d.center.y - 5) .attr("width", 10) .attr("height", 10) .attr("fill", "yellow") .attr("stroke", "black") .attr("stroke-width", 2) .call(dragImageMove()) svg.selectAll(".imageresrot") .data(images) .join("circle") .attr("class", "imageresrot") .attr("id", (cobj, i) => `${getimageid(i)}_imageresrot`) .attr("imageid", (cobj, i) => getimageid(i)) .attr("cx", d => d.circle.x) .attr("cy", d => d.circle.y) .attr("r", 10) .attr("fill", "blue") .attr("stroke", "black") .attr("stroke-width", 2) .call(dragImageResRot()) }34:Tcd3,function cstripComments(svg, comments, options) { const getwidth = p => p.bottomright.x - p.topleft.x; const getheight = p => p.bottomright.y - p.topleft.y; const getboxid = i => `panel_${options.id}_box_${i}`; function removeComment(cobj, i) { d3.event.stopPropagation(); comments.splice(i, 1); cstripComments(svg, comments, options); } svg.selectAll("path") .data(comments) .join("path") .attr("stroke", "black") .attr("stroke-width", 2) .attr("fill", "white") .attr("opacity", String(options.box.opacity)) .attr("id", (cobj, i) => getboxid(i)) .attr("d", (cobj, i) => { return commentPath(cobj, options.box) }) svg.selectAll(".boxmove") .data(comments) .join("circle") .attr("class", "boxmove") .attr("id", (cobj, i) => `${getboxid(i)}_boxmove`) .attr("boxid", (cobj, i) => getboxid(i)) .attr("cx", d => d.topleft.x) .attr("cy", d => d.topleft.y) .attr("r", options.box.radius) .attr("fill", "black") .call(dragBox()) .on('dblclick', (cobj, i) => removeComment(cobj, i)); svg.selectAll(".boxsource") .data(comments) .join("circle") .attr("class", "boxsource") .attr("id", (cobj, i) => `${getboxid(i)}_boxsource`) .attr("boxid", (cobj, i) => getboxid(i)) .attr("cx", d => d.source.x) .attr("cy", d => d.source.y) .attr("r", options.box.radius) .attr("fill", "black") .call(dragBoxSource()); svg.selectAll(".boxresize") .data(comments) .join("circle") .attr("class", "boxresize") .attr("id", (cobj, i) => `${getboxid(i)}_boxresize`) .attr("boxid", (cobj, i) => getboxid(i)) .attr("cx", d => d.bottomright.x) .attr("cy", d => d.bottomright.y) .attr("r", options.box.radius) .attr("fill", "black") .call(dragBoxResize()); svg.selectAll(".boxtext") .data(comments) .join("foreignObject") .attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility') .attr("id", (cobj, i) => `${getboxid(i)}_boxtext`) .attr("class", "boxtext") .attr("boxid", (cobj, i) => getboxid(i)) .attr('width', d => getwidth(d)) .attr('height', d => getheight(d)) .attr("x", d => d.topleft.x) .attr("y", d => d.topleft.y) .attr("font-size", options.text.fontSize) .attr("font-family", options.text.fontFamily) .attr("text-anchor", "middle") .attr("font-weight", "normal") .html('') .append('xhtml:div') .attr("class", "boxtextdiv") .style("padding-left", `${options.box.radius}px`) .style('width', d => getwidth(d)) .style('height', d => getheight(d)) .style('max-width', d => getwidth(d)) .style('max-height', d => getheight(d)) .style('min-width', d => getwidth(d)) .style('min-height', d => getheight(d)) .attr("id", (cobj, i) => `${getboxid(i)}_boxtextdiv`) .attr("boxid", (cobj, i) => getboxid(i)) .attr("contenteditable", true) .html(d => d.text) .on('input', function (cobj) { const newtext = d3.select(this).node().innerHTML; cobj.text = newtext; }); }35:T45e,function dragBox() { function dragstarted(d) { d3.select(this).raise().attr("stroke", "black"); } function dragged(d) { let coords= d3.mouse(this); const diff = {x: coords[0] - d.topleft.x, y: coords[1] - d.topleft.y} d3.select(this).attr("cx", d.topleft.x = coords[0]).attr("cy", d.topleft.y = coords[1]); const boxid = d3.select(this).attr("boxid"); const box = d3.select(`#${boxid}`) .attr("d", commentPath(d, {radius: 10})); // const boxsource = d3.select(`#${boxid}_boxsource`) // .attr("cx", d.source.x = d.source.x + diff.x) // .attr("cy", d.source.y = d.source.y + diff.y); const boxresize = d3.select(`#${boxid}_boxresize`) .attr("cx", d.bottomright.x = d.bottomright.x + diff.x) .attr("cy", d.bottomright.y = d.bottomright.y + diff.y); const boxtext = d3.select(`#${boxid}_boxtext`) .attr("x", d.topleft.x) .attr("y", d.topleft.y) } function dragended(d) { d3.select(this).attr("stroke", null); } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }36:T58a,function commentPath(obj, options) { const {topleft, bottomright, source, text} = obj; const {radius} = options; const width = bottomright.x - topleft.x; const height = bottomright.y - topleft.y; const hw = width / 2; const hh = height / 2; const sw = width - (2 * radius); const sh = height - (2 * radius); const hsw = sw / 2; const hsh = sh / 2; const tl = {x: topleft.x + radius, y: topleft.y}; const center = {x: tl.x + hsw, y: tl.y + hh}; let linkup = "", linkdown = ""; if (center.y < source.y) { linkdown = "h" + - sw / 3 + "L "+ source.x + "," + source.y + "L "+ (tl.x + sw / 3) + "," + (tl.y + height) + "h" + - sw / 3 } else { linkup = "h" + sw / 3 + "L "+ source.x + "," + source.y + "L "+ (tl.x + 2 * sw / 3) + "," + tl.y + "h" + sw / 3 } const start = "M" + tl.x + "," + tl.y const rside = 'L' + (tl.x + sw) + "," + tl.y + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius + "v" + sh + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius const lside = 'L' + tl.x + "," + (tl.y + height) + "a" + - radius + "," + - radius + " 0 0 1 " +- radius + "," + - radius + "v" + - sh + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + - radius return start + linkup + rside + linkdown + lside + "z"; }37:[] 30:{"id":"a18defe165221361","slug":"comicstrip","title":"comicstrip","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-01-05T17:08:02.069Z","update_time":"$D2020-01-07T17:12:11.559Z","view_time":null,"first_public_time":"$D2020-01-05T17:18:21.513Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8e473715edf43be0","login":"loredanacirstea","name":"Loredana Cirstea","avatar_url":"https://avatars-next.observableusercontent.com/30df6a9b49f501ce4283eb407d3b1d74a80067b46312b7c55030e732e7f5f045","tier":"starter_2024","bio":"https://github.com/loredanacirstea\nhttps://twitter.com/lorecirstea"},"version":601,"publish_version":601,"role":null,"authored":false,"authors":[{"type":"individual","id":"63ee3dcd02874821","login":"loredanacirstea","name":"Loredana Cirstea","avatar_url":"https://avatars-next.observableusercontent.com/30df6a9b49f501ce4283eb407d3b1d74a80067b46312b7c55030e732e7f5f045","tier":null,"bio":"https://github.com/loredanacirstea\nhttps://twitter.com/lorecirstea"}],"members":[{"type":"individual","id":"63ee3dcd02874821","login":"loredanacirstea","name":"Loredana Cirstea","avatar_url":"https://avatars-next.observableusercontent.com/30df6a9b49f501ce4283eb407d3b1d74a80067b46312b7c55030e732e7f5f045","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"comicstrip","cells":[{"id":586,"value":"md`# comicstrip`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"html`image url`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`# share link:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"html`https://observablehq.com/@loredanacirstea/comicstrip#${btoa(jsontoyaml.stringify(JSON.stringify(cstripobj)))}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"md`# Share image:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"html`${svgToDataUri(document.querySelector('svg'))}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`## Actions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"run()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"{\n document.getElementById('addImage').onclick = () => {\n const url = document.getElementById('imageUrl').value;\n if (url) addImge(url);\n }\n document.getElementById('clearGraph').onclick = () => {\n cstripobj.images = [];\n cstrip.comments = [];\n run();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`## Globals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"mutable cstripobj = ({\n title: '',\n description: '',\n images: [],\n comments: [],\n options: {box: {opacity: 0.6, radius: 10}, text: {fontSize: 18, fontFamily: \"Gloria Hallelujah\"}, svg: {width: 960, height: 500}},\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`## Internals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"function run() {\n let loadedObj = window.location.hash.substring(1);\n if (loadedObj) {\n try {\n const obj = JSON.parse(yamltojson.load(atob(loadedObj))); \n cstripobj.title = obj.title;\n cstripobj.description = obj.description;\n cstripobj.images = obj.images;\n cstripobj.comments = obj.comments;\n cstripobj.options = obj.options || cstripobj.options || {};\n } catch (e) {}\n }\n cstrip('#ex', cstripobj)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"function addImge(url) {\n console.log('url', url)\n const newimage = {\n url,\n center: {x: 300, y: 150},\n circle: {x: 300, y: 100},\n }\n cstripobj.images.push(newimage);\n run();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"function toggleControls(svg, visible) {\n const visibility = visible ? \"visible\" : \"hidden\";\n svg.selectAll(\".imagemove\").attr(\"visibility\", visibility);\n svg.selectAll(\".imageresrot\").attr(\"visibility\", visibility);\n svg.selectAll(\".boxmove\").attr(\"visibility\", visibility);\n svg.selectAll(\".boxsource\").attr(\"visibility\", visibility);\n svg.selectAll(\".boxresize\").attr(\"visibility\", visibility);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"function newComment(coords) {\n return {\n topleft: {x: coords[0], y: coords[1]},\n bottomright: {x: coords[0] + 150, y: coords[1] + 100},\n source: {x: coords[0] + 50, y: coords[1] + 150},\n text: 'Placeholder',\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"function dist(a, b) {\n const pozitive = (a) => a * Math.sign(a);\n const s1 = pozitive(b.x - a.x);\n const s2 = pozitive(b.y - a.y);\n return Math.sqrt(s1**2 + s2**2);\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"function getImageBbox(elem, cobj) {\n const aratio = parseFloat(d3.select(elem).attr('aratio'));\n const height = dist(cobj.center, cobj.circle) * 5;\n const width = height * aratio;\n const angle = getAngle(cobj.center, cobj.circle) * 180 / Math.PI;\n return {x: cobj.center.x - width/2, y: cobj.center.y - height/2, width, height, angle};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"function setImageBbox(elem, cobj) {\n const bbox = getImageBbox(elem, cobj);\n d3.select(elem)\n .attr(\"x\", bbox.x)\n .attr(\"y\", bbox.y)\n .attr(\"width\", bbox.width)\n .attr(\"height\", bbox.height)\n .attr('transform', `rotate(${bbox.angle}, ${cobj.center.x}, ${cobj.center.y})`);\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"function getAngle(center, p1) {\n var p0 = {x: center.x, y: center.y - Math.sqrt(Math.abs(p1.x - center.x) * Math.abs(p1.x - center.x) + Math.abs(p1.y - center.y) * Math.abs(p1.y - center.y))};\n return (2 * Math.atan2(p1.y - p0.y, p1.x - p0.x));// * 180 / Math.PI;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"function dragImageResRot() {\n\n function dragstarted(d) {\n d3.select(this).raise().attr(\"stroke\", \"black\");\n }\n\n function dragged(d) {\n const coords = d3.mouse(this);\n const imageid = d3.select(this).attr(\"imageid\");\n const scimage = d3.select(`#${imageid}`);\n \n d3.select(this).attr(\"cx\", d.circle.x = coords[0]).attr(\"cy\", d.circle.y = coords[1]);\n setImageBbox(scimage.node(), d);\n }\n\n function dragended(d) {\n d3.select(this).attr(\"stroke\", null);\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"function dragImageMove() {\n\n function dragstarted(d) {\n d3.select(this).raise().attr(\"stroke\", \"black\");\n }\n\n function dragged(d) {\n let coords= d3.mouse(this);\n const diff = {x: coords[0] - d.center.x, y: coords[1] - d.center.y}\n \n d3.select(this).attr(\"x\", coords[0] - 5).attr(\"y\", coords[1] - 5);\n \n d.center.x = coords[0];\n d.center.y = coords[1];\n d.circle.x += diff.x;\n d.circle.y += diff.y;\n \n const imageid = d3.select(this).attr(\"imageid\");\n const csimage = d3.select(`#${imageid}`)\n setImageBbox(csimage.node(), d);\n d3.select(`#${imageid}_imageresrot`).attr(\"cx\", d.circle.x).attr(\"cy\", d.circle.y)\n }\n\n function dragended(d) {\n d3.select(this).attr(\"stroke\", null);\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function dragBoxSource() {\n\n function dragstarted(d) {\n d3.select(this).raise().attr(\"stroke\", \"black\");\n }\n\n function dragged(d) {\n let coords= d3.mouse(this);\n d3.select(this).attr(\"cx\", d.source.x = coords[0]).attr(\"cy\", d.source.y = coords[1]);\n \n const boxid = d3.select(this).attr(\"boxid\");\n const box = d3.select(`#${boxid}`)\n .attr(\"d\", commentPath(d, {radius: 10}))\n }\n\n function dragended(d) {\n d3.select(this).attr(\"stroke\", null);\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function dragBoxResize() {\n\n function dragstarted(d) {\n d3.select(this).raise().attr(\"stroke\", \"black\");\n }\n\n function dragged(d) {\n let coords= d3.mouse(this);\n d3.select(this).attr(\"cx\", d.bottomright.x = coords[0]).attr(\"cy\", d.bottomright.y = coords[1]);\n d.width = coords[0] - d.topleft.x;\n d.height = coords[1] - d.topleft.y;\n \n const boxid = d3.select(this).attr(\"boxid\");\n const box = d3.select(`#${boxid}`)\n .attr(\"d\", commentPath(d, {radius: 10}))\n const boxtext = d3.select(`#${boxid}_boxtext`)\n .attr('width', d.width)\n .attr('height', d.height)\n }\n\n function dragended(d) {\n d3.select(this).attr(\"stroke\", null);\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"// function getTextBounds(svg, obj, options) {\n// let height = 50;\n// const width = textWidth(svg, obj, {ratio: options.text.ratio});\n\n// const faketext = commentText(svg, obj, width);\n// height = faketext.node().getBoundingClientRect().height;\n// faketext.remove();\n \n// obj.width = width;\n// obj.height = height;\n// return obj;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"// function textWidth(svg, obj, options) {\n// var text = svg.append(\"text\")\n// .text(obj.text)\n// .attr(\"x\", obj.topleft.x)\n// .attr(\"y\", obj.topleft.y)\n// .attr(\"font-size\", 12)\n// .attr(\"font-family\", \"Gloria Hallelujah\")\n// .attr(\"text-anchor\", \"middle\")\n// .attr(\"font-weight\", \"normal\")\n \n// const textlen = text.node().getComputedTextLength()\n// text.remove()\n \n// return Math.ceil(options.ratio * Math.sqrt(textlen / options.ratio));\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"function svgToDataUri(svg){\n const img = new Image(),\n serializer = new XMLSerializer();\n \n try {\n const svgStr = serializer.serializeToString(svg);\n return 'data:image/svg+xml;base64,' + window.btoa(svgStr);\n } catch(e) {\n return 'data:image/svg+xml;base64,';\n }\n\n // You could also use the actual string without base64 encoding it:\n //return \"data:image/svg+xml;utf8,\" + svgStr;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"// function svgToCanvas(svg){\n// const img = new Image(),\n// serializer = new XMLSerializer(),\n// svgStr = serializer.serializeToString(svg);\n\n// img.src = 'data:image/svg+xml;base64,' + window.btoa(svgStr);\n\n// // You could also use the actual string without base64 encoding it:\n// //img.src = \"data:image/svg+xml;utf8,\" + svgStr;\n\n// var canvas = document.createElement(\"canvas\");\n// document.body.appendChild(canvas);\n\n// canvas.width = w;\n// canvas.height = h;\n// canvas.getContext(\"2d\").drawImage(img,0,0,w,h);\n// // Now save as png or whatever\n// };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5.15.0/dist/d3.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"yamltojson = require('js-yaml@3.13.1/dist/js-yaml.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"jsontoyaml = require('https://bundle.run/json-to-pretty-yaml@1.2.2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## Font`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html ` `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"