30:T696,semantics = grammar.createSemantics().addOperation("ast", { Epoch: stanzas => ({stanzas: stanzas.asIteration().ast()}), Epochs: epochs => epochs.asIteration().ast(), stanza: (header, _1, _2, props) => { let h = header.ast() // console.log("header.source", header.source) return { name: h.name, deps: h.deps, props: props.ast()[0], } }, propertyAssignments: l => l.asIteration().ast(), locationNoDigit: function(_1, name, _2) { return [name.sourceString, 0.5] }, locationWithDigit: function(_1, name, _2, digit) { // console.log("location", name.sourceString, _2.child(0), _2.child(0) && _2.child(0).sourceString, _3.child(0), _3.child(0) && _3.child(0).sourceString) return [name.sourceString, parseInt(digit.child(0).sourceString) / 10.] }, // location: function(_1, name, _2, digit) { // // console.log("location", name.sourceString, _2.child(0), _2.child(0) && _2.child(0).sourceString, _3.child(0), _3.child(0) && _3.child(0).sourceString) // let digitChild = digit.child(0) // return [name.sourceString, digitChild ? parseInt(digitChild.sourceString) / 10. : 0.5] // }, locationAssignment: function(_1, location, _2, _3) { return { name: "phase", value: location.ast(), source: location.source, } }, componentDependency: (name) => ({ name: name.ast(), }), componentDependencies: l => l.asIteration().ast(), stanzaHeaderWithDeps: (name, _1, _2, deps) => ({ name: name.ast(), deps: deps.ast()[0], }), stanzaHeaderNoDeps: (name, _1) => ({ name: name.ast(), deps: [], }), componentName: function(_) { return this.sourceString }, })31:T60f,function textarea(value) { const textarea = html``; textarea.style.display = "block"; textarea.style.boxSizing = "border-box"; textarea.style.width = "calc(100% - 6.8vw)"; // textarea.style.font = "var(--mono_fonts)"; textarea.style.fontFamily = "Menlo, Consolas, monospace"; textarea.style.fontSize = "14px"; textarea.style.minHeight = "60px"; textarea.style.border = "none"; textarea.style.padding = "4px 10px"; textarea.style.margin = "0 3.4vw"; // textarea.style.background = "rgb(247,247,249)"; textarea.style.tabSize = 2; // textarea.onkeypress = event => { // if (event.key !== "Enter" || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return; // let i = textarea.selectionStart; // let j = textarea.selectionEnd; // let v = textarea.value; // if (i === j) { // let k = 0; // while (i > 0 && v[--i - 1] !== "\n"); // while (i < j && v[i] === " ") ++i, ++k; // textarea.value = v.substring(0, j) + "\n" + new Array(k + 1).join(" ") + v.substring(j); // textarea.selectionStart = textarea.selectionEnd = j + k + 1; // textarea.dispatchEvent(new CustomEvent("input")); // event.preventDefault(); // } // }; textarea.oninput = () => textarea.style.height = `${textarea.value.match(/^/gm).length * 21 + 8}px`; textarea.oninput(); return { form: textarea, setValue: function(value) { textarea.value = value textarea.dispatchEvent(new CustomEvent("input")); }, }; }32:T153f,cheatsheet = ({ "undefined": { "characteristics": {}, "general properties": {} }, "genesis": { "label": "Genesis", "characteristics": { "ubiquity": [ "rare" ], "certainty": [ "poorly understood" ], "publication types": [ "normally describe the wonder of the thing" ] }, "general properties": { "market": [ "undefined market" ], "knowledge management": [ "uncertain" ], "market perception": [ "chaotic (non linear)" ], "user perception": [ "different", "confusing", "exciting", "surprising" ], "perception in industry": [ "competitive advantage", "unpredictable", "unknown" ], "focus of value": [ "high future worth" ], "understanding": [ "poorly understood", "unpredictable" ], "comparison": [ "constantly changing", "a differential", "unstable" ], "failure": [ "high", "tolerated", "assumed" ], "market action": [ "gambling", "driven by gut" ], "efficiency": [ "reducing the cost of change (experimentation)" ], "decision drivers": [ "heritage", "culture" ] } }, "custom": { "label": "Custom", "characteristics": { "ubiquity": [ "slowly increasing consumption" ], "certainty": [ "rapid increases in learning" ], "publication types": [ "build", "construct", "awareness and learning" ] }, "general properties": { "market": [ "forming market" ], "knowledge management": [ "learning on use" ], "market perception": [ "domain of experts" ], "user perception": [ "leading edge", "emerging" ], "perception in industry": [ "competitive advantage", "ROI", "case examples" ], "focus of value": [ "seeking profit", "ROI?" ], "understanding": [ "increasing understanding", "development of measures" ], "comparison": [ "learning from others", "testing the water", "some evidential support" ], "failure": [ "moderate", "unsurprising but disappointed" ], "market action": [ "exploring a 'found' value" ], "efficiency": [ "reducing cost of waste" ], "decision drivers": [ "analysis & synthesis" ] } }, "product": { "label": "Product (+ Rental)", "characteristics": { "ubiquity": [ "rapidly increasing consumption" ], "certainty": [ "rapid increases in use", "fit for purpose" ], "publication types": [ "maintenance", "operations", "installation", "feature" ] }, "general properties": { "market": [ "growing market" ], "knowledge management": [ "learning on operation" ], "market perception": [ "increasing expectation of use" ], "user perception": [ "common", "disappointed if not used or available" ], "perception in industry": [ "advantage through implementation", "features" ], "focus of value": [ "high profitability" ], "understanding": [ "increasing education", "constant refinement of needs", "measures" ], "comparison": [ "feature difference" ], "failure": [ "not tolerated, focus on constant improvment" ], "market action": [ "market analysis", "listening to customers" ], "efficiency": [ "reducing cost of waste (learning)" ], "decision drivers": [ "analysis & synthesis" ] } }, "utility": { "label": "Commodity (+ Utility)", "characteristics": { "ubiquity": [ "widespread and stabilising" ], "certainty": [ "commonly understood (in terms of use)" ], "publication types": [ "focused on use" ] }, "general properties": { "market": [ "mature market" ], "knowledge management": [ "known", "accepted" ], "market perception": [ "ordered (appearance of being linear)", "trivial" ], "user perception": [ "standard", "expected" ], "perception in industry": [ "cost of doing business", "accepted" ], "focus of value": [ "high volume", "reducing margin" ], "understanding": [ "believed to be well defined", "stable", "measurable" ], "comparison": [ "essential", "operational advantage" ], "failure": [ "operational efficiency and surprised by failure" ], "market action": [ "metric driven", "build what is needed" ], "efficiency": [ "reducing cost of deviation (volume)" ], "decision drivers": [ "previous experience" ] } } })33:T446,orient = ({ top: text => text .attr("class", "topish") .style("text-anchor", "middle") .style("alignment-baseline", "baseline") .style("dominant-baseline", "middle") .attr("dx", 0) .attr("x", 0) .attr("dy", "-0.4em") .attr("y", -12), right: text => text .attr("class", "rightish") .style("text-anchor", "start") .style("alignment-baseline", "middle") .style("dominant-baseline", "middle") .attr("y", 0) .attr("dy", "0.1em") .attr("dx", 0) .attr("x", 12), bottom: text => text .attr("class", "bottomish") .style("text-anchor", "middle") .style("alignment-baseline", "hanging") .style("dominant-baseline", "middle") .attr("dy", 0) .attr("dx", 0) .attr("x", 0) .attr("y", 12), left: text => text .attr("class", "leftish") .style("text-anchor", "end") .style("alignment-baseline", "middle") .style("dominant-baseline", "middle") .attr("y", 0) .attr("dy", "0.1em") .attr("dx", 0) .attr("x", -12) }) 34:T20d1,chart = { const svg = d3.select(DOM.svg(width, height)) .attr("font-family", "BlinkMacSystemFont") .attr("font-size", 12) .attr("font-weight", "normal") .attr("shape-rendering", "geometricPrecision") .style("user-select", "none") svg.append("defs") .call(defs => defs.append("linearGradient") .attr("id", "bg") .call(lg => lg.append("stop").attr("offset", "0%").attr("stop-color", "#dadada")) .call(lg => lg.append("stop").attr("offset", "20%").attr("stop-color", "#fbfbfb")) .call(lg => lg.append("stop").attr("offset", "80%").attr("stop-color", "#fbfbfb")) .call(lg => lg.append("stop").attr("offset", "100%").attr("stop-color", "#dadada")) ) .call(defs => defs.append("marker") .attr("id", "arrowhead") .attr("viewBox", "0 -5 10 11") .attr("refX", 9) .attr("refY", 0) .attr("markerWidth", "1em") .attr("markerHeight", "1em") .attr("markerUnits", "userSpaceOnUse") .attr("orient", "auto-start-reverse") .append("path") .attr("d", "M0,-5L11,0,L0,5") ) ; svg.append("rect") .attr("x", xAxisPadding) .attr("width", width - 2*xAxisPadding) .attr("y", height * 0.08) .attr("height", height * 0.84) .attr("fill", "url(#bg)") svg.append("g") .attr("class", "yaxis") svg.append("g") .attr("class", "xaxis") svg.append("g") .attr("class", "meridians") const linkGroup = svg.append("g") .attr("stroke", "#000") .attr("stroke-width", 1.5) .attr("stroke-opacity", 0.3); const nodeGroup = svg.append("g") .style("text-shadow", "rgba(255, 255, 255, 1) 0 0 5px") .attr("stroke", "#fff") .attr("stroke-width", 2); var voronoiEdges = svg.append("g") .style("stroke", "red") .style("fill", "none") .attr("class", "voronoi-edges"); var voronoiCentroids = svg.append("g") .attr("stroke", "orange") .attr("class", "voronoi-centroids"); svg.append("g") .append("text") .attr("class", "xaxis-title"); svg.append("g") .append("text") .attr("class", "yaxis-title"); svg.on("click", function() { console.log("click") }); let setSelection = (values) => { svg.node().value = values svg.node().dispatchEvent(new CustomEvent("input")) } function updateData(data, xScale) { linkGroup .selectAll("line") .data(data.links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)) .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y) const node = nodeGroup .selectAll("g") .data(data.nodes) .join( enter => enter.append("g") .call(drag(simulation, xScale)) .call(enter => enter.append('circle')) .call(enter => enter.append('text')), update => update, exit => exit.remove(), ) ; node .attr("transform", d => translate(d.x, d.y)) .style("cursor", d => d.props.phase[0] === undefined ? "arrow" : "ew-resize") .on("click", function() { data.nodes.forEach(d => (d.selected = false)) var selected = d3.select(this).data() selected.forEach(d => (d.selected = true)) setSelection(selected) }); ; node.select("circle") .attr("r", 7) .attr("fill", "white") .attr("stroke", color) .attr("stroke-width", d => d.selected ? 4 : 2) .append("title") .text(d => d.id); node.select("text") .attr("dy", 15) .attr("y", 0) .attr("font-weight", 500) .attr("stroke", "none") .text(d => d.id) .each(function(d) { if (!d.polygon) { d3.select(this).call(orient.botton) return } const {x, y} = d, [cx, cy] = d3.polygonCentroid(d.polygon); const angle = Math.round(Math.atan2(cy - y, cx - x) / Math.PI * 2); // console.log("angle", angle, d) d3.select(this).call( angle === 0 ? orient.right : angle === -1 ? orient.top : angle === 1 ? orient.bottom : orient.left); }) ; const meridians = xScale.stops() let shownMeridians = (meridians.length === 1 && meridians[0] === undefined) ? [] : meridians.map(d => ({ x: xScale(d), value: d, stroke: "#aaa", strokeDasharray: "1 2", })) data.nodes.forEach(d => { if (!d.dragging) { return } let phase = d.dragging console.log("phase", phase) d3.range(0, 1, 0.1).forEach( i => { let x = xScale([phase, i]) shownMeridians.push( { x, stroke: x == d.fx ? "#000" : "#ccc", strokeDasharray: x == d.fx ? "1" : "1 2", } ) } ) }) // console.log("shownMeridians", shownMeridians, meridians) svg.select("g.meridians") .selectAll("line") .data(shownMeridians) .join("line") .attr("stroke", d => d.stroke) .attr("stroke-dasharray", d => d.strokeDasharray) .attr("x1", d => d.x) .attr("x2", d => d.x) .attr("y1", 2*yAxisPadding) .attr("y2", height - yAxisPadding) ; if (debugVoronoi) { voronoiEdges.selectAll("path") .data(data.nodes) .join("path") .attr("d", d => `M${d.polygon.join("L")}Z`) ; voronoiCentroids.selectAll("path") .data(data.nodes) .join("path") .attr("d", d => `M${d3.polygonCentroid(d.polygon)}L${d.x},${d.y}`); } } function updateAll(data, xScale, yScale) { svg.select("text.yaxis-title") .attr("transform", translate(xAxisPadding, height/2 - yAxisPadding) + " rotate(-90)") .attr("text-anchor", "middle") .attr("font-size", 16) .attr("font-weight", "bold") .attr("alignment-baseline", "baseline") .attr("dy", "-0.5em") .text(yScale.title()) ; svg.select("text.xaxis-title") .attr("transform", translate(width - xAxisPadding, height - 2*yAxisPadding)) .attr("text-anchor", "end") .attr("font-size", 16) .attr("font-weight", "bold") .attr("alignment-baseline", "hanging") .attr("dy", "1.5em") .text(xScale.title()) ; let tickValues = xScale.stops() if (tickValues.length === 1 && tickValues[0][0] === undefined) { tickValues = [] } svg.select("g.xaxis") .attr("transform", translate(0, yScale(d3.max(yScale.domain())))) .call( d3.axisBottom(xScale) .tickValues(tickValues) .tickSize(0) .tickFormat(d => { switch (d[0]) { case undefined: return "unknown" default: return d[0] } }) ) .call(g => g.select("path") .style("dominant-baseline", "central") .attr("stroke-width", d => xScale.title() ? 2 : 0) .attr("marker-end", d => xScale.title() ? "url(#arrowhead)" : undefined) ) .call(g => g.selectAll("text") .attr("font-size", 12) .attr("font-style", "italic") .attr("dx", "0.5em") .attr("y", "0.5em") .style("text-transform", "capitalize") .style("text-anchor", "start") .style("user-select", "none") ) ; svg.select("g.yaxis") .call( d3.axisLeft(yScale) .tickValues(d3.extent(yScale.domain())) .tickFormat(d => d === 0 ? "Visible" : "Invisible") .tickSize(0) ) .call(g => g.selectAll("text") .attr("transform", "rotate(-90)") .attr("dy", "-0.75em") .attr("dx", d => d === 0 ? "-0.5em" : "0.5em") .attr("font-size", 12) // .attr("font-style", "italic") .attr("text-anchor", d => { // console.log("text-anchor", d) return d === 0 ? "end" : "start" }) ) .attr("transform", translate(xScale(xScale.stops()[0]), 0)) .call(g => g.select("path") .style("dominant-baseline", "central") .attr("stroke-width", 2) .attr("marker-start", "url(#arrowhead)") ) ; updateData(data, xScale) } return {svg, updateAll, updateData} }35:T551,xScale = { function newXScale() { let innerWidth = width - 2*xAxisPadding let totalWeight = d3.sum(xDomain.weights) let scaledWeights = xDomain.weights.map(d => d / totalWeight) let rollingWeights = scaledWeights.reduce((acc, v, i) => { acc.push(acc[i]+v); return acc }, [0]) let evoScale = scaleOrdinal() .domain(xDomain.stops); evoScale.range(d3.range(0, evoScale.domain().length)); // console.log("evoScale", evoScale.domain(), evoScale.range(), evoScale.invert) let evoWidths = scaleOrdinal() .domain(xDomain.stops) .range(scaledWeights.map(d => d * innerWidth)) console.log("evoWidths", evoWidths.domain(), evoWidths.range()) let innerScale = evoScale if (evoScale.range().length !== 1) { innerScale = chain( evoScale, d3.scaleLinear() .range(rollingWeights)) } let chained = chain( innerScale, d3.scaleLinear() .range([xAxisPadding, width - xAxisPadding])) let f = d => { return chained(d[0]) + evoWidths(d[0]) * d[1] } f.invert = d => chained.invert(d) f.range = () => chained.range() f.stops = () => xDomain.stops.map(d => [d, 0]) f.copy = newXScale f.width = d => evoWidths(d) f.title = d => xDomain.title f.round = () => undefined return f } return newXScale() }36:T876,class NodeResolver { constructor() { this.nodesById = new Map() this.backup = new Map() } flip() { this.backup = this.nodesById this.nodesById = new Map() } expunge() { let newNodes = [] this.nodesById.forEach(node => node.x === undefined && newNodes.push(node)) this.backup.forEach(node => { let newNode = newNodes.pop() if (newNode) { newNode.x = node.x newNode.y = node.y newNode.vx = node.vx newNode.vy = node.vy // newNode.index = node.index console.log("recovered", newNode, newNode.x) } }) this.backup = new Map() } resolve(id) { let node = this.nodesById.get(id) if (node === undefined) { node = this.backup.get(id) if (node !== undefined) { this.nodesById.set(id, node) this.backup.delete(id) node.parents = new Set() node.children = new Set() node.props = {} node.propIntervals = {} // console.log("reusing", node, node.x, node.dragx) } else { node = { id: id, group: 1, props: {}, propIntervals: {}, parents: new Set(), children: new Set(), } this.nodesById.set(id, node) console.log("new", node, node.x) } node.props.phase = [undefined, 0.5] } return node } nodeDependsOn(id, depId) { let node = this.resolve(id) let depNode = this.resolve(depId) node.children.add(depNode) depNode.parents.add(node) } nodeHasProperty(id, property, value, interval) { // console.log("nodeHasProperty", id, mod, property, value, interval) let node = this.resolve(id) node.props[property] = value node.propIntervals[property] = interval } nodes() { return Array.from(this.nodesById.values()).sort(d => d.index) } links() { let links = [] this.nodesById.forEach( node => node.children.forEach( ch => links.push({source: node, target: ch}))) return links } data() { return { links: this.links(), nodes: this.nodes(), } } }37:T447,class EpochViewer { constructor() { this.nr = new NodeResolver() } setEpoch(epoch) { let validPhases = ["genesis", "custom", "product", "utility"] this.nr.flip() console.log("epoch", epoch) epoch.stanzas.forEach(({name, deps, props}) => { // console.log("each", name, deps) this.nr.resolve(name) deps && deps.forEach(dep => this.nr.nodeDependsOn(name, dep.name)) props && props.forEach(prop => { let value = prop.value value[0] = validPhases.find(p => p.startsWith(value[0])) || value[0] this.nr.nodeHasProperty(name, prop.name, value, prop.source) }) }) this.nr.expunge() } data() { let data = this.nr.data() let cache = {} function nodeDepth(node) { if (cache[node.id] === undefined) { let depth = 1+Array.from(node.parents).reduce( (acc, child) => Math.max(acc, nodeDepth(child)), 0) cache[node.id] = depth node.depth = depth } return cache[node.id] } data.nodes.forEach(nodeDepth) return data } }38:T467,drag = (simulation, xScale) => { function dragstarted(d) { if (d.props.phase[0] === undefined) { return } if (!d3.event.active) simulation.alphaTarget(0.3).restart(); let p = xScale.invert(d3.event.x) d.dragging = p[0] d.fx = xScale(p) // d.fy = d.y; } function dragged(d) { if (d.props.phase[0] === undefined) { return } // d.fx = d3.event.x; // d.fy = d3.event.y; let p = xScale.invert(d3.event.x) d.dragging = p[0] d.fx = xScale(p) } function dragended(d) { if (d.props.phase[0] === undefined) { return } if (!d3.event.active) { simulation.alphaTarget(0); } console.log("dragended", d.x, d.fx) if (d.propIntervals.phase) { updateSource("phase", d.propIntervals.phase, xScale.invert(d.fx)) d.props.phase = xScale.invert(d.fx) } d.x = d.fx; d.dragx = d.x simulation.force("x", simulation.force("x")) delete d.fx; delete d.dragging; // d.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }39:[] 2e:{"title":"MapScript Editor 2","cells":[{"id":0,"value":"md`# MapScript Editor 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"viewof selectedNode = chart.svg.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":"viewof source = input.form","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"grammar = ohm.grammar(`\nMapScript {\n Epochs\n = ListOf\n\n Epoch\n = ListOf\n\n componentName = ident\n componentDependency\n = componentName\n componentDependencies\n = listOf\n\n indent = \" \" | \" \" | \" \" | \"\\t\"\n locationWithDigit = \"@\" ident \":\" digit\n locationNoDigit = \"@\" ident \":\"?\n location\n = locationWithDigit\n | locationNoDigit\n locationAssignment\n = indent location ws* (nl | end)\n propertyAssignment\n = locationAssignment\n propertyAssignments\n = nonemptyListOf\n\n stanzaHeaderNoDeps\n = componentName \":\"?\n stanzaHeaderWithDeps\n = componentName \":\" (ws+ componentDependencies)?\n stanzaHeader\n = stanzaHeaderWithDeps\n | stanzaHeaderNoDeps\n\n stanza\n = stanzaHeader ws* (nl propertyAssignments)?\n\n ws = \" \"\n nl = \"\\\\n\"\n\n ident (an identifier)\n = letter (alnum | \"-\")* \n}\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"input = textarea(`user: cup-of-tea\n @custom\n\ncup-of-tea: pour cup\n @custom\n\ncup:\n @product\n\npour: brew barista\n @custom\n\nbrew: tea hot-water\n @custom\n\nbarista:\n @custom\n\ntea:\n @product\n\nhot-water: kettle water\n @custom\n\nkettle: power\n @product\n\npower:\n @utility\n\nwater:\n @utility\n\ncup-of-tea: milk\n\nmilk:\n @product\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1725,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"simulation = {\n let simulation = d3.forceSimulation()\n // .force(\"link\", d3.forceLink().id(d => d.id).distance().strength(.0002))\n .force(\"charge\", d3.forceManyBody().strength(-100).distanceMax(50))\n .force(\"gravity\", d3.forceY().y(height).strength(.01))\n\n invalidation.then(() => simulation.stop());\n \n return simulation\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2177,"value":"selectedNode","pinned":false,"hidden":false,"mode":"ojs"},{"id":2189,"value":"section = {\n function list(l) {\n return html`

${t}

`\n }\n\n function section(h, p) {\n return html`

${h}

${Object.entries(p).map(([k, v]) => html`

${k}

${list(v)}`)}

`\n }\n \n return section\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2219,"value":"{\n if (!selectedNode || !selectedNode[0]) {\n return;\n }\n \n let v = selectedNode[0]\n \n return section('Characteristics', cheatsheet[v.props.phase[0]]['characteristics'])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"{\n if (!selectedNode || !selectedNode[0]) {\n return;\n }\n \n let v = selectedNode[0]\n \n return section('General Properties', cheatsheet[v.props.phase[0]]['general properties'])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1718,"value":"function updateSource(prop, sourceInterval, newValue) {\n console.log(\"updateSource\", prop, sourceInterval, newValue)\n input.setValue(input.form.value.substring(0, sourceInterval.startIdx) + `@${newValue[0]}:${newValue[1]*10}` + input.form.value.substring(sourceInterval.endIdx))\n // input.form.focus()\n // input.form.setSelectionRange(sourceInterval.startIdx, sourceInterval.endIdx)\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2162,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1243,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1215,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"yStrength = .1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2311,"value":"debugVoronoi = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"width","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1848,"value":"function scaleOrdinal() {\n let scale = d3.scaleOrdinal()\n\n scale.invert = function(y) {\n let range = this.range()\n let yInt = Math.floor(y)\n let yFrac = y - yInt\n yFrac = Math.round(yFrac * 10.) / 10.0\n if (yFrac > 0.9) {\n yFrac = 0.9\n }\n if (yInt < range[0]) {\n yInt = range[0]\n yFrac = 0\n } else if (yInt > range[range.length - 1]) {\n yInt = range[range.length - 1]\n yFrac = 0.9\n }\n // console.log(\"invert ordinal yFrac\", y, yFrac, yInt)\n let v = [this.domain().find((d, i) => yInt == range[i]), yFrac]\n // console.log(\"invert ordinal\", y, v, range, this.domain())\n return v\n }\n let oldCopy = scale.copy\n scale.copy = function() {\n let n = oldCopy.apply(this)\n n.invert = this.invert\n return n\n }\n return scale\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1846,"value":"function composeScales(f, g) {\n let h = d => {\n let v = g(f(d))\n // console.log(\"compose\", d, f(d), g(f(d)))\n return v !== undefined ? v : g(f(undefined))\n }\n h.domain = () => f.domain()\n h.range = () => g.range()\n h.copy = () => {\n console.log(\"copy\")\n return composeScales(f.copy(), g.copy())\n }\n if (f.invert !== undefined && g.invert !== undefined) {\n h.invert = d => {\n // console.log(\"invert\", d, \"g.invert\", g.invert(d), \"f.invert\", f.invert(g.invert(d)))\n return f.invert(g.invert(d))\n }\n } else {\n console.log(\"f\", f, \".invert\", f.invert, f.domain(), f.range())\n console.log(\"g\", g, \".invert\", g.invert, f.domain(), f.range())\n }\n return h\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1850,"value":"function chain(scale1, scale2) {\n let range1 = scale1.range()\n if (range1.length !== 2 && scale2.range().length === 2) {\n range1 = d3.extent(range1)\n if (range1[0] === range1[1]) {\n range1[1] += 0.01\n }\n }\n scale2.domain(range1)\n\n return composeScales(scale1, scale2)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1830,"value":" widthsByDepthByPhase = d3array.rollup(data.nodes, v => v.length, d => d.props.phase ? d.props.phase[0] : undefined, d => d.depth)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":" hDomain = [undefined, \"genesis\", \"custom\", \"product\", \"utility\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1828,"value":"regionMaxWidths = hDomain.map(d => {\n let m = widthsByDepthByPhase.get(d)\n return m === undefined ? 0 : d3.max(Array.from(m.values()))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1874,"value":"xDomain = {\n let totalRawWeights = d3.sum(regionMaxWidths)\n let title = undefined\n let hRegions = hDomain\n\n if (regionMaxWidths[0] === totalRawWeights) {\n hRegions = [undefined]\n }\n if (regionMaxWidths[0] !== totalRawWeights) {\n title = \"Evolution\"\n }\n\n if (totalRawWeights > 0 && regionMaxWidths[0] === 0) {\n hRegions = hRegions.slice(1)\n }\n\n // widthWeights = xDomain.values.map(d => {\n // let m = widthsByDepthByPhase.get(d)\n // return m === undefined ? 0 : d3.max(Array.from(m.values()))\n // }).map(d => d3.max([0.5, d])).map(d => 1)\n\n return {\n title: title,\n stops: hRegions,\n weights: new Array(hRegions.length).fill(1),\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1826,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1841,"value":" yScale = {\n let scale = d3.scaleLinear()\n .domain([0, d3.max([5, 2 + d3.max(data.nodes, d => d.depth)])])\n .range([0 + yPadding, height - yPadding])\n ;\n scale.title = d => \"Value Chain\"\n return scale\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"yPadding = 0.08 * height","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"yAxisPadding = 0.04 * height","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"xAxisPadding = 0.04 * width","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":740,"value":"ev = new EpochViewer()","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"data = {\n let match = grammar.match(source)\n let epochs = semantics(match).ast()\n epochs[0] && ev.setEpoch(epochs[0])\n return ev.data()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2000,"value":"function refreshPolygons(nodes) {\n try {\n let voronoisPolygons = d3delaunay.Delaunay.from(nodes.map(d => [d.x, d.y]))\n .voronoi([xAxisPadding, 0, width + 1, height + 1]);\n nodes.forEach((d, i) => {\n d.polygon = voronoisPolygons.cellPolygon(i)\n })\n } catch (e) {\n console.log(\"nodes\", nodes)\n data.nodes.forEach(n => n.polygon = [])\n console.error(e)\n return\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2010,"value":"function xAnchor(d, i) {\n let phase = d.props.phase\n let v = xScale(phase)\n return v\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2015,"value":"function yAnchor(d) {\n return yScale(d.depth)\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2022,"value":"function initNodePositions(nodes) {\n nodes.forEach(d => {\n if (d.x === undefined) {\n d.x = xAnchor(d)\n }\n if (d.y === undefined) {\n d.y = yAnchor(d)\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1833,"value":"update = {\n initNodePositions(data.nodes)\n refreshPolygons(data.nodes)\n\n simulation\n .nodes(data.nodes)\n // .force('link').links(data.links)\n ;\n\n simulation\n .force(\"y\", d3.forceY().y(yAnchor).strength(yStrength))\n .force(\"x\", d3.forceX()\n .x(xAnchor)\n .strength(d => d.props.phase[0] === undefined ? 0.04 : 1))\n ;\n \n simulation.on(\"tick\", () => {\n refreshPolygons(data.nodes)\n chart.updateData(data, xScale)\n })\n \n chart.updateAll(data, xScale, yScale)\n\n simulation\n .alpha(1.0)\n .alphaTarget(0)\n .restart()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"ohm = require(\"https://unpkg.com/ohm-js@latest/dist/ohm.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"function translate(x, y) {\n if (isNaN(x) || isNaN(y)) {\n console.log(\"translate\", x, y)\n return \"\"\n }\n return `translate(${x},${y})`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1515,"value":"d3array = require(\"d3-array@2\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1950,"value":"d3delaunay = require(\"d3-delaunay\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"data2 = parseDeps `\nprediction-system/1 -> prediction, monitoring\nprediction/2 -> trained-model\ntrained-model/2 -> training-algo, optimizer-impl, test-accuracy, train-accuracy, untrained-model, training-data\nuntrained-model/3 -> model-impl\noptimizer-impl/4 -> ml-framework, optimizer-theory\nmodel-impl/3 -> model-arch, ml-framework\nmonitoring -> train-accuracy\ntrain-accuracy/2 -> domain-accuracy\nmodel-arch -> accepted-benchmark\naccepted-benchmark/4 -> domain-accuracy\ntraining-algo/4\noptimizer-impl/1\ntest-accuracy/2\ntrain-accuracy/2\nuntrained-model/2\ntraining-data/2\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}