30:T78c,input = [ { "Step": 1, "Name": "Ideation", "Color": "#4c78a8", "Icon": "md-lightbulb-on-outline", "Description": "The seminal idea for STOIC\noriginated at the Office 2.0 conference,\nwhich was organized in San Francisco in the Spring of 2006.", "Offset": 0.75 }, { "Step": 2, "Name": "Incorporation", "Color": "#f58518", "Icon": "md-file-document-edit-outline", "Description": "Sutoiku, Inc. was incorporated\nby Ismaël Ghalimi in March 2012,\nwith initial funding from Roger Sippl and VMware, Inc.", "Offset": 1 }, { "Step": 3, "Name": "Socialization", "Color": "#e45756", "Icon": "md-account-group", "Description": "The very first product prototype was backed\nby a small Kickstarter campaign organized in the Winter of 2013\nwith a few hundred enthusiastic backers.", "Offset": 0.5 }, { "Step": 4, "Name": "Positioning", "Color": "#72b7b2", "Icon": "md-strategy", "Description": "The fundamental focus on business intelligence\nand very large datasets was adopted in 2014,\nfollowing the advice of early adopters and industry veterans.", "Offset": 0 }, { "Step": 5, "Name": "Evaluation", "Color": "#54a24b", "Icon": "md-bank", "Description": "The initial enterprise evaluations were all conducted\nby large banking institutions from 2015 to 2016,\nproviding critical product insight.", "Offset": 0.75 }, { "Step": 6, "Name": "Refinement", "Color": "#eeca3b", "Icon": "md-autorenew", "Description": "The core product was refined in partnership\nwith a government agency from 2017 to 2019,\nleading to the final product design and architecture.", "Offset": 0.5 }, { "Step": 7, "Name": "Release", "Color": "#b279a2", "Icon": "md-alert-decagram", "Description": "The first public release is scheduled for 2020,\neight years after the company creation.\nTrue innovation is a lengthy process, but the result will be worth the wait.", "Offset": 0 } ]31:T9cf,icons = ({ "md-lightbulb-on-outline": "M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z", "md-file-document-edit-outline": "M8,12H16V14H8V12M10,20H6V4H13V9H18V12.1L20,10.1V8L14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H10V20M8,18H12.1L13,17.1V16H8V18M20.2,13C20.3,13 20.5,13.1 20.6,13.2L21.9,14.5C22.1,14.7 22.1,15.1 21.9,15.3L20.9,16.3L18.8,14.2L19.8,13.2C19.9,13.1 20,13 20.2,13M20.2,16.9L14.1,23H12V20.9L18.1,14.8L20.2,16.9Z", "md-account-group": "M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z", "md-strategy": "M6.91 5.5L9.21 7.79L7.79 9.21L5.5 6.91L3.21 9.21L1.79 7.79L4.09 5.5L1.79 3.21L3.21 1.79L5.5 4.09L7.79 1.79L9.21 3.21M22.21 16.21L20.79 14.79L18.5 17.09L16.21 14.79L14.79 16.21L17.09 18.5L14.79 20.79L16.21 22.21L18.5 19.91L20.79 22.21L22.21 20.79L19.91 18.5M20.4 6.83L17.18 11L15.6 9.73L16.77 8.23A9.08 9.08 0 0 0 10.11 13.85A4.5 4.5 0 1 1 7.5 13A4 4 0 0 1 8.28 13.08A11.27 11.27 0 0 1 16.43 6.26L15 5.18L16.27 3.6M10 17.5A2.5 2.5 0 1 0 7.5 20A2.5 2.5 0 0 0 10 17.5Z", "md-bank": "M11.5,1L2,6V8H21V6M16,10V17H19V10M2,22H21V19H2M10,10V17H13V10M4,10V17H7V10H4Z", "md-autorenew": "M12,6V9L16,5L12,1V4A8,8 0 0,0 4,12C4,13.57 4.46,15.03 5.24,16.26L6.7,14.8C6.25,13.97 6,13 6,12A6,6 0 0,1 12,6M18.76,7.74L17.3,9.2C17.74,10.04 18,11 18,12A6,6 0 0,1 12,18V15L8,19L12,23V20A8,8 0 0,0 20,12C20,10.43 19.54,8.97 18.76,7.74Z", "md-alert-decagram": "M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z" })32:T56c,blockPoints = { var stepBlockPoints = []; for (var c = 0; c < build.length; c++) { stepBlockPoints[c] = []; for (var r = 0; r < structure.length; r++) { var points = [ { "x": c == 0 && flatLeft ? 0 : anchorsX[r] + c * blockWidth, "y": anchorsY[r] }, { "x": c == steps - 1 && flatRight ? cw : anchorsX[r] + (c + 1) * blockWidth, "y": anchorsY[r] } ]; if (r == backbone) { points.push( { "x": c == steps - 1 && flatRight ? cw : anchorsX[r] + (c + 1) * blockWidth + 0.5 * structure[r].height * ch * slope / flowHeight, "y": backboneY } ); } points.push( { "x": c == steps - 1 && flatRight ? cw : anchorsX[r+1] + (c + 1) * blockWidth, "y": anchorsY[r+1] }, { "x": c == 0 && flatLeft ? 0 : anchorsX[r+1] + c * blockWidth, "y": anchorsY[r+1] } ); if (r == backbone) { points.push( { "x": c == 0 && flatLeft ? 0 : anchorsX[r] + c * blockWidth + 0.5 * structure[r].height * ch * slope / flowHeight, "y": backboneY } ); } stepBlockPoints[c][r] = points; } } return stepBlockPoints; }33:T4b7,function drawTexts(svg) { structure.map(function(row, r) { if (row.type != "text") { return; } const fontSize = row.font.size * defaultFontSize; for (var c = 0; c < build.length; c++) { const lines = getLines(dataset[c][row.column], row.lines); for (var l = 0; l < lines.length; l++) { const offsetY = (lines.length / 2 - l - 1) * row["line-spacing"] * fontSize; const offsetX = ((c == 0 && flatLeft) || (c == steps - 1 && flatRight)) ? dataset[c].Offset * fontSize : ((r < backbone) ? -1 : 1) * offsetY * slope + dataset[c].Offset * fontSize; svg.append("text") .attr("transform", `translate(${px}, ${py})`) .attr("x", getBlockCenter(c, r).x - blockWidth / 2 + fontSize + offsetX) .attr("y", getBlockCenter(c, r).y + row.font.size - offsetY) .style("fill", getTextColor(c)) .style("font-family", fontProportional) .style("font-size", fontSize + "px") .style("font-weight", row.font.weight) .style("dominant-baseline", "middle") .style("text-align", "left") .style("text-anchor", "start") .text(lines[l]); } } }); }34:[] 2e:{"title":"Process Flow","cells":[{"id":0,"value":"md`# Process Flow`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"slide = {\n const svg = d3.select(DOM.svg(width, height))\n .style(\"height\", \"auto\")\n .style(\"max-width\", \"100%\")\n \n drawBackground(svg);\n drawBlocks(svg);\n drawIcons(svg);\n drawNames(svg);\n drawTexts(svg);\n drawFocus(svg);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"viewof selection = slider({\n min: 0, \n max: steps + 1, \n step: 1, \n value: 0, \n title: \"Selection\", \n description: \"Selected step of the dataset\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"viewof incremental = checkbox({\n title: \"Build\",\n description: \"Whether the slide build is incremental\",\n options: [{ value: \"toggle\", label: \"Incremental\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"viewof flatLeft = checkbox({\n title: \"Left\",\n description: \"Whether the left side of the process is flat\",\n options: [{ value: \"toggle\", label: \"Flat\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"viewof flatRight = checkbox({\n title: \"Right\",\n description: \"Whether the right side of the process is flat\",\n options: [{ value: \"toggle\", label: \"Flat\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof darkMode = checkbox({\n title: \"Mode\",\n description: \"Whether the slide is displayed in dark mode\",\n options: [{ value: \"toggle\", label: \"Dark Mode\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`## Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"viewof steps = slider({\n min: 1, \n max: input.length, \n step: 1, \n value: 7, \n title: \"Steps\", \n description: \"Number of steps of the dataset displayed\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"dataset = input.slice(0, steps)","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"build = {\n if (incremental && selection > 0) { return dataset.slice(0, selection); }\n if (incremental && selection == 0) { return []; }\n return dataset;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"md`## Structure`","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"structure = [\n {\n \"column\": \"Step\",\n \"type\": \"name\",\n \"height\": 10,\n \"background\": { \"type\": \"color\", \"color\": [\"#6baed6\", \"#37708c\"] },\n \"font\": { \"size\": 2.5, \"weight\": \"bold\" }\n },\n {\n \"column\": \"Name\",\n \"type\": \"name\",\n \"height\": 20,\n \"background\": { \"type\": \"default\" },\n \"font\": { \"size\": 1.5, \"weight\": \"bold\" }\n },\n {\n \"column\": \"Icon\",\n \"type\": \"icon\",\n \"height\": 40,\n \"background\": { \"type\": \"column\", \"column\": \"Color\" }\n },\n {\n \"column\": \"Description\",\n \"type\": \"text\",\n \"height\": 30,\n \"background\": { \"type\": \"default\" },\n \"font\": { \"size\": 0.9, \"weight\": \"normal\" },\n \"line-spacing\": 1.5,\n \"lines\": 8\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"viewof backbone = slider({\n min: 0, \n max: structure.length - 1, \n step: 1, \n value: 2, \n title: \"Backbone Row\", \n description: \"Index of the row used as structure backbone\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1291,"value":"focus = 3 // Index of the row used as selection focus","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"focusLines = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":1345,"value":"focusFontSize = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`## Layout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof canvasPadding = slider({\n min: 0,\n max: 0.2,\n step: 0.01,\n format: \".0%\",\n value: 0.1,\n title: \"Canvas Padding\",\n description: \"Horizontal and vertical canvas padding as a percentage of the slide's dimensions\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"viewof blockPadding = slider({\n min: 1,\n max: 25,\n step: 1,\n format: v => `${v}px`,\n value: 5,\n title: \"Block Padding\",\n description: \"Block padding in pixels\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":801,"value":"viewof stepAngle = slider({\n min: 0,\n max: 90,\n step: 1,\n format: v => `${v}°`,\n value: 10,\n title: \"Step Angle\",\n description: \"Step angle in degrees\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"viewof backgroundColorLight = color({\n value: \"#f9f9f9\",\n title: \"Background Color Light\",\n description: \"Background color in light mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"viewof backgroundColorDark = color({\n value: \"#333333\",\n title: \"Background Color Dark\",\n description: \"Background color in dark mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"viewof iconColorLight = color({\n value: \"#eeeeee\",\n title: \"Icon Color Light\",\n description: \"Icon color in light mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"viewof iconColorDark = color({\n value: \"#eeeeee\",\n title: \"Icon Color Dark\",\n description: \"Icon color in dark mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"viewof iconColorSelectedLight = color({\n value: \"#ffffff\",\n title: \"Icon Color Selected Light\",\n description: \"Selected icon color in light mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"viewof iconColorSelectedDark = color({\n value: \"#ffffff\",\n title: \"Icon Color Selected Dark\",\n description: \"Selected icon color in dark mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"viewof textColorLight = color({\n value: \"#1d4d71\",\n title: \"Text Color Light\",\n description: \"Text color in light mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"viewof textColorDark = color({\n value: \"#dddddd\",\n title: \"Text Color Dark\",\n description: \"Text color in dark mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"viewof textColorSelectedLight = color({\n value: \"#f9f9f9\",\n title: \"Text Color Selected Light\",\n description: \"Selected text color in light mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"viewof textColorSelectedDark = color({\n value: \"#f9f9f9\",\n title: \"Text Color Selected Dark\",\n description: \"Selected text color in dark mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"viewof blockColorLight = color({\n value: \"#dddddd\",\n title: \"Block Color Light\",\n description: \"Block color in light mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"viewof blockColorDark = color({\n value: \"#666666\",\n title: \"Block Color Dark\",\n description: \"Block color in dark mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"viewof blockColorSelectedLight = color({\n value: \"#999999\",\n title: \"Block Color Selected Light\",\n description: \"Selected block color in light mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"viewof blockColorSelectedDark = color({\n value: \"#888888\",\n title: \"Block Color Selected Dark\",\n description: \"Selected block color in dark mode\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## Fonts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"fontProportional = \"Roboto\" // Default proportional font","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"fontMonospace = \"Roboto Mono\" // Default monospace font","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"defaultFontSize = 10 // Default font size in pixels","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"nameFontSize = 2 // Name font size as a multiple of the default font size","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"descriptionFontSize = 1 // Description font size as a multiple of the default font size","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"md`## Icons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"iconDimension = 24 // Nominal icon width and height","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"iconSize = 2.25 // Icon size as a multiple of the nominal icon size","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`## Slide`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"width = 1024 // Slide width","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"height = 576 // Slide height","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`## Canvas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"cw = (1 - 2 * canvasPadding) * width // Canvas width","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"ch = (1 - 2 * canvasPadding) * height // Canvas height","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"px = width * canvasPadding // Horizontal canvas padding","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"py = height * canvasPadding // Vertical canvas padding","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`## Scheme`","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"scheme = [\"#4c78a8\", \"#f58518\", \"#e45756\", \"#72b7b2\", \"#54a24b\", \"#eeca3b\", \"#b279a2\", \"#ff9da6\", \"#9d755d\", \"#bab0ac\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"backgroundColor = darkMode ? backgroundColorDark : backgroundColorLight // Background color","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"blockColor = darkMode ? blockColorDark : blockColorLight // Block color","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"blockColorSelected = darkMode ? blockColorSelectedDark : blockColorSelectedLight // Selected block color","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"iconColor = darkMode ? iconColorDark : iconColorLight // Icon color","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"iconColorSelected = darkMode ? iconColorSelectedDark : iconColorSelectedLight // Selected icon color","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"textColor = darkMode ? textColorDark : textColorLight // Text color","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"textColorSelected = darkMode ? textColorSelectedDark : textColorSelectedLight // Selected text color","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"md`## Computations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"backboneY = (anchorsY[backbone] + anchorsY[backbone + 1]) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"chevronOffset = Math.max(backboneY, ch - backboneY) * slope","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"slope = Math.tan(stepAngle * Math.PI / 180)","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"blockWidth = (cw - chevronOffset) / steps","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"flowHeight = structure.reduce(function(sum, row) { return sum + row.height; }, 0);","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"anchorsX = {\n var anchors = [chevronOffset - backboneY * slope];\n for (var i = 0; i < structure.length; i++) {\n anchors.push(anchors[i] + deltaSign(backbone, i) * structure[i].height * ch * slope / flowHeight);\n }\n return anchors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"anchorsY = {\n var anchors = [0];\n var rowsHeight = 0;\n for (var i = 0; i < structure.length; i++) {\n anchors.push(rowsHeight += structure[i].height * ch / flowHeight);\n }\n return anchors;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"blocks = {\n var stepBlocks = [];\n for (var c = 0; c < build.length; c++) {\n for (var r = 0; r < structure.length; r++) {\n stepBlocks.push({\n \"points\": blockPoints[c][r],\n \"color\": getBlockColor(c, r)\n });\n }\n }\n return stepBlocks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"function getBlockCenter(c, r) {\n const p = blockPoints[c][r];\n return p.length == 4 ?\n { \"x\": (p[0].x + p[2].x) / 2, \"y\": (p[1].y + p[3].y) / 2 } :\n { \"x\": (p[2].x + p[5].x) / 2, \"y\": (p[0].y + p[4].y) / 2 }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1012,"value":"function getBlockColor(c, r) {\n switch (structure[r].background.type) {\n case \"color\":\n return getBlockHighlight(c, structure[r].background.color[darkMode ? 1 : 0], 1);\n case \"column\":\n return getBlockHighlight(c, dataset[c][structure[r].background.column], 0.4);\n case \"default\":\n return selected(c) ? blockColorSelected : blockColor;\n }\n return blockColor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1031,"value":"function getBlockHighlight(c, color, level) {\n if (!selected(c)) { return color; }\n return darkMode ? d3.rgb(color).brighter(level) : d3.rgb(color).darker(level);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"function getIconColor(i) {\n return i == selection - 1 ? d3.rgb(dataset[selection - 1].Color).darker(1) : iconColor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"function getTextColor(i) {\n return i == selection - 1 ? textColorSelected : textColor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"function selected(c) {\n return c == selection - 1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"function textAlign(side) {\n return (side == -1) ? \"right\" : \"left\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"function textAnchor(side) {\n return (side == -1) ? \"end\" : \"start\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"md`## Drawings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"function drawBackground(svg) {\n svg.append(\"rect\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .attr(\"fill\", backgroundColor);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"function drawBlocks(svg) {\n svg.selectAll(\"blocks\")\n .data(blocks)\n .enter().append(\"polygon\")\n .attr(\"transform\", `translate(${px}, ${py})`)\n .style(\"fill\", d => d.color)\n .style(\"stroke\", backgroundColor)\n .style(\"stroke-width\", blockPadding)\n .attr(\"points\", function(d) {\n return d.points.map(function(d) {\n return [d.x, d.y].join(\",\");\n }).join(\" \");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1083,"value":"function drawIcons(svg) {\n structure.map(function(row, r) {\n if (row.type != \"icon\") { return; }\n for (var c = 0; c < build.length; c++) {\n const offset = 0.5 * row.height * ch * slope / flowHeight;\n const tx = (getBlockCenter(c, r).x + px) / iconSize - iconDimension / 2 - offset / iconDimension;\n const ty = (getBlockCenter(c, r).y + py) / iconSize - iconDimension / 2;\n svg.append(\"path\")\n .attr(\"transform\", `scale(${iconSize}) translate(${tx}, ${ty})`)\n .attr(\"fill\", getIconColor(c))\n .attr(\"d\", icons[dataset[c][row.column]]); \n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"function drawNames(svg) {\n structure.map(function(row, r) {\n if (row.type != \"name\") { return; }\n for (var c = 0; c < build.length; c++) {\n svg.append(\"text\")\n .attr(\"transform\", `translate(${px}, ${py})`)\n .attr(\"x\", getBlockCenter(c, r).x)\n .attr(\"y\", getBlockCenter(c, r).y + row.font.size)\n .style(\"fill\", getTextColor(c))\n .style(\"font-family\", fontProportional)\n .style(\"font-size\", row.font.size * defaultFontSize + \"px\")\n .style(\"font-weight\", row.font.weight)\n .style(\"dominant-baseline\", \"middle\")\n .style(\"text-align\", \"center\")\n .style(\"text-anchor\", \"middle\")\n .text(dataset[c][row.column]); \n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1182,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"function drawFocus(svg) {\n if (incremental || selection == 0 || selection == steps + 1) { return; }\n const points = [\n blockPoints[0][focus][0],\n blockPoints[steps - 1][focus][1],\n blockPoints[steps - 1][focus][2],\n blockPoints[0][focus][3]];\n svg.append(\"polygon\")\n .attr(\"transform\", `translate(${px}, ${py})`)\n .style(\"fill\", getBlockColor(selection - 1, focus))\n .style(\"stroke\", backgroundColor)\n .style(\"stroke-width\", blockPadding)\n .attr(\"points\", points.map(function(d) { return [d.x, d.y].join(\",\"); }).join(\" \"));\n getLines(dataset[selection - 1][structure[focus].column]).map(function(line, index) {\n drawFocusLine(svg, line, index);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"function drawFocusLine(svg, line, index) {\n const fontSize = focusFontSize * defaultFontSize;\n const offsetY = ((focusLines - 1) / 2 - index) * 1.5 * fontSize;\n svg.append(\"text\")\n .attr(\"transform\", `translate(${px}, ${py})`)\n .attr(\"x\", (blockPoints[0][focus][0].x + blockPoints[steps - 1][focus][2].x) / 2)\n .attr(\"y\", getBlockCenter(0, focus).y - offsetY)\n .style(\"fill\", getTextColor(selection - 1))\n .style(\"font-family\", fontProportional)\n .style(\"font-size\", fontSize + \"px\")\n .style(\"font-weight\", structure[focus].font.weight)\n .style(\"dominant-baseline\", \"middle\")\n .style(\"text-align\", \"center\")\n .style(\"text-anchor\", \"middle\")\n .text(line);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"function deltaSign (i, j) {\n if (i < j) { return -1; }\n if (i > j) { return 1; }\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"function getWords(sentence) {\n const words = sentence.split(/ /g);\n if (!words[words.length - 1]) words.pop();\n if (!words[0]) words.shift();\n return words;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"function getLines(text, count) {\n if (!count) { return text.split(\"\\n\"); }\n const sentence = text.replace(/\\n/g, \" \");\n const limit = Math.ceil(sentence.length / count);\n var lines = [];\n var words = getWords(sentence);\n for (var i = 0; i < count; i++) {\n var line = [];\n var length = 0;\n while (length < limit) {\n const word = words.shift();\n if (!word) { break; }\n length += word.length + 1;\n line.push(word);\n }\n lines.push(line.join(\" \"));\n }\n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"md`© ${new Date().getFullYear()} Sutoiku, Inc. All Rights reserved.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}