30:T731,wishes = d3.csvParse(`Emerged,Started,Finished,Kind,Idea ,,,"refactor","Refactor to fluent interface." ,,,"story","Replace d3.js with pure svg." 2019-02-06,,,"story","Toggle display of section and entries (by clicking its origin." 2019-02-06,,,"story","Display dot grid as CSS or SVG pattern." ,,,"story","Show grid as dots." ,,,"story","Pad dimensions are multiple of µ(4)." ,,,"story","Size of view box adapts to text lengths of entries." ,,,"story","Save clean JSON data—that is, without any derived data—including linked entries." 2019-01-22,,2020-03-08,"story","Show multiple distinct x-matrices in same notebook." 2019-02-01,2020-01-01,2020-03-08,"story","Draw a plain x-matrix in a cell of the same height." 2019-02-01,2019-02-01,2019-02-01,"story","Draw a plain x-matrix, without header or footer." 2019-12-31,2020-01-31,2020-02-01,"story","Import x-matrix in another notebook." 2019-01-22,2019-01-22,2019-01-25,"story","Maintain this whish list as a proper table, with dates for when the idea surfaced, implementation started and Finished." 2018,2019-01-05,2019-01-22,"story","Render thumbnail correctly." ,,2019-01-22,"story","Color a matrix in its own color if specified." ,,2019-01-21),"story","Shrink AardRock logo and move to footer area." ,,2019-01-21,"story","Show name of author in right footer." ,,2019-01-21,"story","Show name of driver in left footer." ,,2019-01-20,"story","Cross reference or link orthogonal entries as none, weak, or strong." ,,2019-01-19,"story","Display an x-matrix full screen." ,,2019-01-18,"story","Upload x-matrix as JSON." ,,2019-01-18,"story","Download x-matrix as JSON." ,,2019-01-17,"story","Download SVG." ,,2018,"story","Show Creative Commons BY-SA license" ,,2018,"story","Show AardRock logo." ,,2018,"story","Show Kind." ,,2018,"story","Show subtitle." ,,2018,"story","Show title. `)31:T747,// settheStage() sets up a nifty data structure that makes rendering a breeze. // The orignal data is kept clean, except for the addition of the clicker strips if they’re absent in // the source. This allows for easy downloading and uploading of clean data files. function setTheStage(x) { // const gap = x.gap + gapper; const {padding = 0, arm, gap = 0 } = x const legs = [legLength(x, x.zag) / 2, legLength(x, x.zig) / 2]; if (!x.klikkers) x.klikkers = clickerMap(x); let a = 0; let b = 0; const r = [x.zig, x.zag] .map( (lane, l) => lane.panels .map( (panel, p) => { const side = l % 2; // 0 for zig, 1 for zag const leg = legs[side] const anchor = panel.anchor; const slope = flipflop(side)// switches between zig) and zag const root = [2 * a, 2 * b]; // capture coordinates before we calculate the next endpoint const mirror = nudge(root, [-2 * leg, 2 * (slope * leg)]); const offset = lineOffset(slope, anchor); const panelOffset = side == 0 ? [padding, -padding] : [padding, padding]; // calculate origin for next iteration/panel // += gap if not the last block const e = (panel.entries?.length ?? 0) + (p < lane.panels.length - 1 ? gap : 0); a += e * slope; b += e; // Return an object containing everything we need for easy rendering, including a flattened object // with paths for the head, body, and transformation to the right position and angle. return { origin: [root, mirror], slope, leg, ...paths( nudge(root, panelOffset), slope, anchor, 2 * (panel.entries?.length ?? 0), 2 * (leg + padding), arm ), panel }; } ) ); return r; }32:T7a9,function showLines(matrix) { const lines = matrix.paper.append("g").attr("class", "hairline"); const lanes = lines .selectAll("_") .data(matrix.model) .enter(); const lattice = lanes .selectAll("_") .data(d => d) .enter() .append("g") .attr("id", d => `lines-${d.panel.section}`) .attr("transform", d => `translate(${d.origin[d.slope == +1 ? 0 : 1]})`); lattice // Hash the middle field .append("path") .attr("class", "hairline") .attr("d", function(d) { const slope = d.slope; const anchor = d.panel.anchor; const length = 2 * (d.leg + matrix.padding); const shift = slope * length; let l = ""; for (let i = (d.panel.entries?.length ?? 0); i >= 0; i--) { const x0 = slope * (2 * i + matrix.padding); const y0 = 2 * i - matrix.padding; l += `M${x0} ${y0}l${-shift} ${length}`; } return l; }); const blacks = lanes .selectAll("_") .data(d => d) .enter() .append("g") .attr("id", d => `lines-blacks-${d.panel.section}`) .attr("transform", d => { const slope = d.slope; const root = d.panel.anchor; const origin = d.origin[root == "start" ? 0 : 1]; const offset = lineOffset(slope, root, matrix.padding); const flip = eastHalf(slope, root) ? 1 : -1; return `translate(${nudge(origin, offset)}) scale(${flip},1)`; }); blacks .append("g") .selectAll("_") .data(d => (d.panel.entries ?? []).map(entry => ({ dx: southHalf(d.slope, d.panel.anchor) ? -1 : +1, entry })) ) .enter() .append("path") .attr("class", "fader") // v.01 does not show, yet is needed to show line at all due to render bugs .attr("d", (d, i) => { // Underlines start at first entry. We also need a line under the section title. const a = i == 0 ? `M${2 * d.dx * i} ${2 * i}h${matrix.arm}v.01` : ""; return `${a}M${2 * d.dx * (i + 1)} ${2 * (i + 1)}h${matrix.arm}v.01`; }); return matrix; }33:T5b0, function showText(matrix) { const text = matrix.paper.append("g").attr("class", "text"); if (baselineShift) text.attr("transform", `translate(0,${baselineShift})`); const lanes = text .selectAll("_") .data(matrix.model) .enter(); const blocks = lanes .selectAll("_") .data(d => d) .enter() .append("g") .attr("id", d => `text-${d.panel.section}`) .attr("class", d => `entry-${d.panel.anchor}`) .attr("transform", d => { const slope = d.slope; const root = d.panel.anchor; const origin = d.origin[root == "start" ? 0 : 1]; const offset = textOffset(slope, root, matrix.padding); return `translate(${nudge(origin, offset)})`; }); blocks .append("text") .attr("class", "section") .text(d => d.panel.section); const entries = blocks .selectAll("_") .data(d => (d.panel.entries ?? []).map(k => ({ dx: southHalf(d.slope, d.panel.anchor) ? 3 : 1, // entry: k.entry, entry: entry(k), slope: d.slope })) ) .enter(); entries .append("text") .attr("x", (d, i) => 2 * d.slope * (i + 1)) .attr("y", (d, i) => 2 * (i + 1)) .text(d => entry(d.entry)) entries .append("text") .attr("class", "index") .attr("x", (d, i) => d.slope * (2 * i + d.dx)) .attr("y", (d, i) => 2 * (i + 1)) .text((d, i) => i + 1); return matrix; } 34:T48a,function drawFoot(patch, m) { const footer = patch .append("svg") .attr("width", "100%") .attr("height", canvas.grid.vertical.µ(3)) .attr("y", canvas.grid.vertical.m(8 * 4 + 3)); footer .append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "black") .attr("opacity", 0.2); let footerLeftText = ""; footerLeftText += `Hoshin Kanri X-Matrix » ${m.title}`; if (m.driver) footerLeftText += ` | ${m.driver}`; if (m.revision) footerLeftText += ` | R${m.revision}`; footerLeftText += ` | ${new Date().toDateString()}`; text( footer, canvas.margin.left, -2, canvas.grid.horizontal.µ(3), "footer-left", footerLeftText ); let footerRigthText = ""; if (m.author) footerRigthText += `author: ${m.author}`; text( footer, canvas.grid.horizontal.M(14) + canvas.margin.left, -2, canvas.grid.horizontal.µ(3), "footer-right", footerRigthText ); return patch; function text(p, x, y, dy, kind, string) { p.append("text") .attr("x", x) .attr("y", y) .attr("dy", dy) .attr("class", kind) .text(string); } }35:T534,canvas = canvasMaker() // { // const aspect = { wide: 16, high: 9 }; // const µ = (n = 1) => 3 * n; // const m = (n = 1) => 9 * n; // const M = (n = 1) => 36 * n; // 36 is an abundant number // // identical horizontal and vertical grid // const grid = { horizontal: { µ, m, M }, vertical: { µ, m, M } }; // // user space // const box = { // x: 0, // y: 0, // width: M(aspect.wide), // height: M(aspect.high), // toString: function() { // return `0 0 ${this.width} ${this.height}`; // } // }; // // stuff for header, footer, and exes go into margin; left and right for aestethics // const margin = { left: µ(3), right: µ(3), top: µ(18), bottom: µ(3) }; // const pad = { // x: box.x + margin.left, // y: box.y + margin.top, // width: box.width - margin.left - margin.right, // height: box.height - margin.top - margin.bottom, // toString: function() { // return `0 0 ${this.width} ${this.height}`; // }, // color: showPad ? showPad : "none" // }; // const w = Math.trunc(width / aspect.wide); // const port = { x: 0, y: 0, width: w * aspect.wide, height: w * aspect.high }; // return { // aspect, // grid, // box, // pad, // margin, // port, // w: w * aspect.wide, // h: w * aspect.high // }; // }36:T4b3,canvasMaker = () => { const aspect = { wide: 16, high: 9 }; const µ = (n = 1) => 3 * n; const m = (n = 1) => 9 * n; const M = (n = 1) => 36 * n; // 36 is an abundant number // identical horizontal and vertical grid const grid = { horizontal: { µ, m, M }, vertical: { µ, m, M } }; // user space const box = { x: 0, y: 0, width: M(aspect.wide), height: M(aspect.high), toString: function() { return `0 0 ${this.width} ${this.height}`; } }; // stuff for header, footer, and exes go into margin; left and right for aestethics const margin = { left: µ(3), right: µ(3), top: µ(18), bottom: µ(3) }; const pad = { x: box.x + margin.left, y: box.y + margin.top, width: box.width - margin.left - margin.right, height: box.height - margin.top - margin.bottom, toString: function() { return `0 0 ${this.width} ${this.height}`; }, color: showPad ? showPad : "none" }; const w = Math.trunc(width / aspect.wide); const port = { x: 0, y: 0, width: w * aspect.wide, height: w * aspect.high }; return { aspect, grid, box, pad, margin, port, w: w * aspect.wide, h: w * aspect.high }; }37:T77a,function style() { return ` .fader { stroke: ${fader}; stroke-width: .05; stroke-linecap: round; } .title, .explanation, .footer, .footer-left, .footer-right, .index, .section, .entry, .entry-start, .entry-end { font-family: Sun, "Avenir Next", sans-serif; } .title { font-weight: 900; font-size: ${canvas.grid.vertical.µ(10)}px; text-transform: uppercase; } .explanation { font-weight: 300; font-size: ${canvas.grid.vertical.µ(3)}px; } .index { font-size: .7pt; fill: gray; text-anchor: center; } .section { font-weight: 900; font-size: 1pt; fill: rgb(237,23,35); text-transform: uppercase; } .entry, .entry-end, .entry-start { font-size: 1pt; } .entry-end { text-anchor: end; } .direction { fill: inherit; opacity: 0.1 } .north-east, .north-west, .south-west, .south-east { opacity: ${transluceny}; } .footer, .footer-left, .footer-right { font-size: ${canvas.grid.vertical.µ(2.5)}px; fill: black; } .footer-left { font-weight: 500; font-variant: small-caps; } .footer-right { text-anchor: end; } .grid, .grid-major { stroke-width: .1%; fill: steelblue; stroke: steelblue; } .hairline { stroke: steelblue; stroke-width: .01mm; display: initial; fill: none; } svg-content { display: inline-block; position: absolute; top: 0; left: 0; } .dot-default { fill: inherit; } .outline { stroke: steelblue; stroke-width: 0.01mm; fill: none; display: initial; } .home { fill: red; pointer-events: all; /* SVG only */ } .home:hover { stroke: steelblue; stroke-width: 0.01mm; } .gap { fill: none; } .dot:hover { stroke: steelblue; stroke-width: 0.05mm; } .dot { fill: none; stroke-width: 0.09mm; pointer-events: all; /* SVG only */ } .dot.none { fill: none; } .dot.weak { stroke: black; stroke-width: 0.1mm; } .dot.strong { stroke: black; fill: black; } .anchor, .origin { fill: red; } `; }38:T827,health = { const a = "end"; const b = "start"; return [ { title: "Stay healthy", kind: "hoshin kanri x-matrix so I am in good health to watch my kids grow up", driver: "Charlie Bunker", author: "Martien van Steenbergen", revision: "03", gap: 1, padding: 1, color: "lime", arm: 27, klikkers: healthKlikkers, zig: { panels: [ { section: "1—aspire", anchor: b, entries: [ { entry: "Run half a marathon before age 45" }, { entry: "Sustainably lose weight until < 80 kg for 1 year" }, { entry: "Maintain healthy cholesteral < 5 mmol/l for 1 year" } ] }, { section: "3—tactic", anchor: a, entries: [ { entry: "Do the Coach to 5K program" }, { entry: "Plan meals weekly" }, { entry: "Portion food on to the plate" }, { entry: "Run via park to do pull ups twice a week" }, { entry: "Keep a food diary" } ] } ] }, zag: { panels: [ { section: "2—strategy", anchor: a, entries: [ { entry: "Increase running distance over time" }, { entry: "Eat a mediterranian diet" }, { entry: "Improve general strength" }, { entry: "Be aware of calorie intake" } ] }, { section: "4—evidence", anchor: b, entries: [ { entry: "Run 3 times per week" }, { entry: "Can run 5 km without walking" }, { entry: "Eat ≥ 2 vegetarian meals per week" }, { entry: "Eat fish twice per week" }, { entry: "Average daily calories < 2,500" }, { entry: "Max pull ups > 10" }, { entry: "Weekly blood tests show normal cholesterol" } ] } ] } } ] }39:T831,sectionLess = { const a = "end"; const b = "start"; return [ { title: "Stay healthy", kind: "hoshin kanri x-matrix so I am in good health to watch my kids grow up", driver: "Charlie Bunker", author: "Martien van Steenbergen", revision: "03", gap: 1, padding: 1, color: "lime", arm: 27, klikkers: healthKlikkers, zig: { panels: [ { direction: "north-east", anchor: b, entries: [ { entry: "Run half a marathon before age 45" }, { entry: "Sustainably lose weight until < 80 kg for 1 year" }, { entry: "Maintain healthy cholesteral < 5 mmol/l for 1 year" } ] }, { direction: "south-west", anchor: a, entries: [ { entry: "Do the Coach to 5K program" }, { entry: "Plan meals weekly" }, { entry: "Portion food on to the plate" }, { entry: "Run via park to do pull ups twice a week" }, { entry: "Keep a food diary" } ] } ] }, zag: { panels: [ { direction: "north-west", anchor: a, entries: [ { entry: "Increase running distance over time" }, { entry: "Eat a mediterranian diet" }, { entry: "Improve general strength" }, { entry: "Be aware of calorie intake" } ] }, { direction: "south-east", anchor: b, entries: [ { entry: "Run 3 times per week" }, { entry: "Can run 5 km without walking" }, { entry: "Eat ≥ 2 vegetarian meals per week" }, { entry: "Eat fish twice per week" }, { entry: "Average daily calories < 2,500" }, { entry: "Max pull ups > 10" }, { entry: "Weekly blood tests show normal cholesterol" } ] } ] } } ]; }3a:T5f9,Karl = [ { title: "ACME, Inc. IT Dept.", kind: "hoshin kanri x-matrix", period: "2019 summer", gap: 1, padding: 1, arm: 18, zig: { panels: [ { direction: "north-east", section: "1—strategies", anchor: "start", entries: [ { entry: "Give best user experience" }, { entry: "Be first to market" }, { entry: "Let value flow" } ] }, { direction: "south-west", section: "3—outcomes", anchor: "end", entries: [ { entry: "⬇ Lead Time" }, { entry: "⬆ Throughput" }, { entry: "⬆ NPS" }, { entry: "⬇ Support Cases" }, { entry: "⬆ Innovation" } ] } ] }, zag: { panels: [ { direction: "north-west", section: "2—tactics", anchor: "end", entries: [ { entry: "Reporting" }, { entry: "BizDevOps across the board" }, { entry: "Passioned Product Ownership" }, { entry: "Hack Days" } ] }, { direction: "south-east", section: "4—key results (evidence)", anchor: "start", entries: [ { entry: "Innovation epic leadtime 7↓4 quarters" }, { entry: "Costs €3M↓€2M" }, { entry: "Customer churn 0.75↑1.50" } ] } ] } } ]3b:T555,Peter = [ { title: "ACME, Inc. IT Dept.", kind: "hoshin kanri x-matrix", period: "2019 summer", gap: 1, padding: 1, arm: 18, zig: { panels: [ { direction: "north-east", section: "1—strategies", anchor: "start", entries: [ "Give best user experience", "Be first to market", "Let value flow" ] }, { direction: "south-west", section: "3—outcomes", anchor: "end", entries: [ "⬇ Lead Time", "⬆ Throughput", "⬆ NPS", "⬇ Support Cases", "⬆ Innovation" ] } ] }, zag: { panels: [ { direction: "north-west", section: "2—tactics", anchor: "end", entries: [ "Reporting", "BizDevOps across the board", "Passioned Product Ownership", "Hack Days" ] }, { direction: "south-east", section: "4—key results (evidence)", anchor: "start", entries: [ "Innovation epic leadtime 7↓4 quarters", "Costs €3M↓€2M", "Customer churn 0.75↑1.50" ] } ] } } ]3c:Tff3,artOfArt = [ { title: "Art of Art Flow Team", kind: "Hoshin kanri x-matrix » Dromen → Durven → Doen → Demo", period: "2018 Q1", color: "honeydew", gap: 1.5, padding: 1, arm: 36, zig: { panels: [ { direction: "north-east", section: "1—dromen", anchor: "start", entries: [ { entry: "Wij creëren voortdurend topteams met continue verbetercyclus" }, { entry: "Iedereen is blij en enthousiast om bij ons te werken." }, { entry: "Onze klanten zijn superblij met wat we doen en hoe we samenwerken." } ] }, { direction: "south-west", section: "3—doen (Objectives)", anchor: "end", entries: [ { entry: "Wij ademen flow." }, { entry: "Wij rekenen af op basis van resultaat." }, { entry: "Stop met starten, start met finishen." }, { entry: "Wij publiceren onze ‘uitblinkgids’" }, { entry: "Creëer en leef een heldere, bedrijfsbrede consistente en samenhangende manier van werken." } ] } ] }, zag: { panels: [ { direction: "north-west", section: "2—durven", anchor: "end", entries: [ { entry: "Onze klanten zijn blij met onze bedrijfsbrede, consistente, coherente en complete workflow." }, { entry: "De Product Owners van onze klanten zijn enorm gewild in de markt." }, { entry: "Het Flow Team loopt voorop en toont de weg." }, { entry: "Wij leven ons Flow Manifesto." }, { entry: "Klantkaizen zit in ons DNA." } ] }, { direction: "south-east", section: "4—demo (Key Results)", anchor: "start", entries: [ { entry: "100% van alle opdrachten is gepland in blokken van tenminste één dag." }, { entry: "Doorstroomvolume, voorspelbaarheid en doorlooptijd worden ‘gratis’ gegenereerd." }, { entry: "90% van onze opdrachten worden op tijd en volgens verwachting opgeleverd." }, { entry: "100% van alle releases zijn live voordat met een volgende begonnen wordt." }, { entry: "Elk team is met maximaal één hoofdzaak bezig." }, { entry: "Iedereen houdt zich aan het expliciete beleid voor standaard, prioriteit en spoed." }, { entry: "Factureren gaat op basis van opgeleverde resultaten en uitkomsten." }, { entry: "Gemiddelde groei doorstroomvolume tenminste 20% per jaar." }, { entry: "80% van onze collega’s vindt dat onze werkwijze het beste in ons naar boven haalt." }, { entry: "Team happiness is gemiddeld constant een 8 of hoger." }, { entry: "WIP limits zijn op de juiste plekken ingesteld, worden gehandhaafd en genereren inzichten voor verbeteringen." }, { entry: "Onze Klantleiding is gedeeld met al onze klanten." }, { entry: "De concept van onze ‘uitblinkgids’ ligt ter recensie bij 10 relevante klanten." } ] }, { direction: "north-east", section: "4—team", anchor: "start", entries: [ { entry: "John" }, { entry: "Paul" }, { entry: "George" }, { entry: "Ringo" } ] } ] } } ]3d:T780,brandInMokum = [ { title: "Brand in Mokum", gap: 1, padding: 1, arm: 27, zig: { panels: [ { direction: "north-east", section: "1—aspiratie", anchor: "start", entries: [ { entry: "Digitale slagkracht en wendbaarheid" }, { entry: "Game changer" } ] }, { direction: "south-west", section: "3—tactiek", anchor: "end", entries: [ { entry: "Uitblinken in slank en lenig werkplezier" }, { entry: "Transformeren naar lange termijn strategische speelregelaars" }, { entry: "Magneet worden voor inheemse digitalen" }, { entry: "Veel meer doorlopende trajecten scoren" } ] } ] }, zag: { panels: [ { direction: "north-west", section: "2—strategie", anchor: "end", entries: [ { entry: "Leidend voorbeeld" }, { entry: "Scherpe processen" }, { entry: "Experimenteercultuur" } ] }, { direction: "south-east", section: "4—bewijs (vóór half 2019)", anchor: "start", entries: [ { entry: "Trajecten opschroeven: €10k → €25k" }, { entry: "Trajecten verkorten: 6–8 → 4 weken" }, { entry: "Doorlopende/kop-staart trajecten: 90/10 → 50/50" }, { entry: "5 digital natives aan boord" }, { entry: "Inkopen/zelf ontwikkelen: 100/0 → 50/50" }, { entry: "Martien pitcht glashelder waar BrandInMokum voor staat en waarom" } ] } ] } } ]3e:Tc89,risky = [ { title: "Risky", gap: 2, padding: 1, arm: 36, zig: { panels: [ { direction: "north-east", section: "1—imagine", anchor: "start", entries: [ { entry: "Our bank’s reputation is at an all time high." }, { entry: "Our bank is not only resilient, it is anti-fragile." }, { entry: "Our bank innovates and leads law and regulations." } ] }, { direction: "south-west", section: "3—objectives", anchor: "end", entries: [ { entry: "Align all hands with a crystal clear shared vision and unity of purpose." }, { entry: "Use agility to outmaneuvre our ever changing environment." }, { entry: "Visualise all our work and manage it likewise." }, { entry: "Make our working agreements fully explicit and transparent." }, { entry: "Cultivate and foster our own stunning autonomous Flow Team." }, { entry: "Shift to a product mindset." } ] } ] }, zag: { panels: [ { direction: "north-west", section: "2—strategy", anchor: "end", entries: [ { entry: "Embrace, propel, and extend agility and lean across the board." }, { entry: "Slash negative news items about non-financial risk." }, { entry: "Boost our work-energy index." } ] }, { direction: "south-east", section: "4—evidence", anchor: "start", entries: [ { entry: "Five non-financial risk ambassadors are out in the field." }, { entry: "Average customer lead time for regulatory requests dropped from 7 to 4 weeks." }, { entry: "Compliance failures reduced from 27 to 10 per year." }, { entry: "Costs for litigation, compensation claims, and operational mishaps halved to 50 million per year." }, { entry: "Early warning system preventions increased from 70 to 100 per year." }, { entry: "Number of parallel and duplicate efforts down to zero from 20." }, { entry: "Fire-fighting below 80% of capacity for the first time ever." } ] }, { direction: "north-east", section: "4—team", anchor: "start", entries: [ { entry: "John" }, { entry: "Paul" }, { entry: "George" }, { entry: "Ringo" } ] } ] } } ]3f:[] 2e:{"title":"Martien Matrix","cells":[{"id":117,"value":"md`# Martien Matrix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"mainChart = showY(x).node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"fullscreen(mainChart)","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`Victory is the realisation of the vision or aspiration. \nIn a complex world, there are multiple paths to victory.\nStrategy is the chosen path to victory.\nThe tactics are the initatives you take to implement the strategy. The evidence shows up as a trail of implementing the tactics.\n\nA ${p.hk} relates the vision to its strategy: click in the cells to relate strategy to vision, tactic to strategy and evidence to tactics. Finally, you can relate the evidence to the vision or aspiration. Clicks loop through ‘none’, ‘moderate’, and ‘strong’.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof hoshinKanri = Inputs.range([0, xMatrix.length - 1], {label: \"Hoshin Kanri\", step: 1, value: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`### About ${p.hk}\nFor more information and background on ${p.hk}, please see:\n* [AardRock » Hoshin Kanri X-Matrix](http://aardrock.com/hoshin-kanri-x-matrix/)\n* [Pareltaal » Hoshin Kanri](http://pareltaal.nl/Hoshin_kanri)\n* [Pearl Language » Hoshin Kanri](http://pearllanguage.org/Hoshin_kanri)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`### Create your own ${p.mm}\nTo create your own ${p.mm}, download, edit and upload one of the samples. They’re easy to understand JSON text files.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"downloadJSON(x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"viewof json = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`### Convert a ${p.mm} to PDF\nTo use a ${p.mm} as PDF in other applications like Keynote, Pages, PowerPoint, Word, InDesign and the like:\n1. Set Opacity to 0 when using Chrome and Firefox, as they have trouble rendering opaque areas.\n1. Download the current ${p.mm} as an SVG file.\n1. Open it in Safari, Chrome or Firefox.\n1. Save the page as PDF.\n1. Use Preview, Acrobat or Illustrator to trim the white space (aspect ratio is 16:9).\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"viewof showDotGrid = checkbox({\n options: [\n {\n value: \"show pad grid\",\n label: \"Show pad grid\"\n }\n ],\n value: \"hide dot grid\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof showPad = checkbox({\n options: [\n {\n value: \"red\",\n label: \"Show pad\"\n }\n ],\n value: \"none\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof ƒ = slider({\n min: 1,\n max: 12,\n step: 1,\n value: 6,\n title: \"Grid Frequency\"\n // description: \"The chance of getting everything done by a certain time or date.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`Grid resolution: ${canvas.grid.vertical.M() / canvas.grid.vertical.µ() / ƒ}µ`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"viewof transluceny = slider({\n min: 0,\n max: .8,\n step: .05, \n value: .1, \n title: \"Opacity\", \n description: \"Opacity of panel colors.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`# Wish`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"{\n return table(\n wishes.map(k => {\n const Kind = k.Kind;\n const Emerged = k.Emerged ? k.Emerged : \"\";\n const Started = k.Started ? k.Started : \"\";\n const Finished = k.Finished ? k.Finished : \"\";\n const Elapsed = elapsed(k);\n const Idea = Finished ? `~~${k.Idea}~~` : k.Idea;\n return { Kind, Idea, Emerged, Started, Finished, Elapsed };\n\n function elapsed(k) {\n const started = k.Started ? new Date(k.Started) : k.Started;\n const finished = k.Finished ? new Date(k.Finished) : Date.now();\n return k.Started && k.Finished\n ? (finished - started) / (24 * 60 * 60 * 1000) + 1\n : \"\";\n }\n }),\n {\n sortable: true,\n style: \"compact\",\n columns: {\n Idea: {\n formatter(val, i) {\n return html`${val}`;\n }\n },\n Elapsed: {\n type: \"number\"\n }\n }\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`# Draw`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`\\`showY()\\`: Show a full ${p.mm}, including header, footer, and identity.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"function showY(x, canvas = canvasMaker()) {\n const sheet = d3\n .select(DOM.svg(canvas.port.width, canvas.port.height))\n .attr(\"viewBox\", canvas.box.toString());\n // A couple of layers, with the identity drawn on top, so drawn as last.\n drawPaper(sheet, x);\n // drawGrid(sheet);\n mm(x, canvas, sheet)\n drawHead(sheet, x);\n drawFoot(sheet, x);\n drawIdentity(sheet, x);\n return sheet;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`Just the ${p.mm}, without header and footer.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"mm(x).paper.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"viewof peddle = slider({\n min: 0,\n max: 10,\n step: 1,\n value: 1,\n title: \"Padding width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"viewof gapper = slider({\n min: 0,\n max: 10,\n step: 1,\n value: 1,\n title: \"Gap width adjustment\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof armer = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 18,\n title: \"Arm length adjustment\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"function mm(x = {}, canvas, sheet) {\n const {\n kind = \"Martien Matrix\",\n gap = 0,\n padding = 0,\n opacity = transluceny,\n arm = 18,\n color = \"none\",\n anchor = \"start\"\n } = x;\n\n if (canvas === undefined) canvas = canvasMaker()\n \n const matrix = {\n ...makePaper(x, canvas, sheet),\n model: setTheStage(x),\n clickers: clacquer(x),\n padding,\n arm,\n opacity,\n };\n \n injectDefinitionsAndStyles(matrix);\n showPanels(matrix);\n grids(matrix);\n showText(matrix);\n showLines(matrix);\n showAnchors(matrix);\n showClickers(matrix);\n\n return matrix; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"makePaper = (x, canvas, sheet) => {\n\n const minX = -widthInUnits(x, x.zag)\n const minY = -2 - (x.padding ?? 0)\n const width = makeEven(widthInUnitsTotal(x))\n const height = makeEven(heightInUnits(x))\n const viewBox = `${minX} ${minY} ${width} ${height}`\n const paper = sheet === undefined\n ? d3.select(DOM.svg(canvas.pad.width, (height * canvas.pad.width) / width))\n .attr(\"name\", \"sheet (undefined)\")\n .attr(\"viewBox\", viewBox)\n .attr(\"preserveAspectRatio\", \"xMinYMin meet\")\n : sheet\n .append(\"svg\")\n .attr(\"height\", canvas.grid.vertical.m(36) - canvas.grid.vertical.m(6) - canvas.grid.vertical.m(1))\n .attr(\"y\", canvas.grid.vertical.m(6))\n .attr(\"viewBox\", viewBox)\n .attr(\"preserveAspectRatio\", \"xMidYMin meet\")\n\n return ({ paper, minX, minY, width, height, viewBox })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`#### CSS defs & styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"function injectDefinitionsAndStyles(matrix) {\n const {opacity} = matrix\n matrix.paper.append(\"style\").html(style());\n // Horizontal lines fade into transparent, yet not in Safari (bug).\n matrix.paper.append(\"defs\").html(`\n\n\n\n\n`);\n\n const fadingColors = gradients(palette);\n matrix.paper.append(\"defs\").html(defs(fadingColors));\n matrix.paper.append(\"style\").html(gradientStyles(matrix, fadingColors));\n\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"function defs(gradients) {\n let g = \"\";\n g += ``;\n g += ` `;\n g += ``;\n gradients.forEach((gradient, i) => {\n g += ``;\n g += ` `;\n g += ` `;\n g += ``;\n });\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md`#### Gradients`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"function gradients(palette, offset = 0) {\n return palette.map((color, i) => ({\n uid: DOM.uid(\"block\"),\n color: palette[(i + offset) % palette.length]\n }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"function gradientStyles(matrix, elements) {\n let s = \"\\n\";\n s += \".transparent { stop-color: rgba(255,255,250,0); }\\n\";\n elements.forEach((element, i) => {\n s += `.block-${i} { fill: ${element.color}; opacity: ${matrix.opacity}}\\n`;\n s += `.block-${i}-color { stop-color: ${element.color}; }\\n`;\n s += `.block-${i}.gradient { fill: ${element.uid}; }\\n`;\n });\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"// paths() returns an object containing as attributes the SVG paths for:\n// 1. the body (45˚ titled rectangle);\n// 2. the head (45˚ sheared rectangle, hence parallellogram); and\n// 3. the translate & rotate strings to poisition each of them properly.\nfunction paths(origin, slope, anchor, width, leg, arm) {\n const toPath = a => `M0,0${a.map(k => `l${k}`).join(\"\")}Z`; // turn array of points to svg path\n return {\n body: toPath([\n [-leg, slope * leg],\n [slope * width, width],\n [leg, -slope * leg]\n ]),\n head: toPath([[arm, 0], [slope * width, width], [-arm, 0]]),\n transform: `translate(${\n eastHalf(slope, anchor)\n ? origin\n : nudge(nudge(origin, [-leg, slope * leg]), [slope * width, width])\n }) rotate(${eastHalf(slope, anchor) ? 0 : 180})`\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"function showPanels(matrix) {\n const panels = matrix.paper\n .append(\"g\")\n .attr(\"class\", \"panel\")\n .selectAll(\"_\")\n .data(matrix.model.flat()) // Flatten it so we can do all panels in one go *and* with unique color\n .enter()\n .append(\"g\")\n .attr(\"id\", (d, i) => `panel-${i}-${d.panel.section}`)\n .attr(\"transform\", d => d.transform);\n panels\n .append(\"path\")\n .attr(\"class\", (d, i) => `block-${i}`)\n .attr(\"d\", d => d.body);\n panels\n .append(\"path\")\n .attr(\"class\", (d, i) => `block-${i} gradient`)\n .attr(\"d\", (d, i) => d.head);\n return matrix;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"md`#### Lines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"lineOffset = (slope, anchor, padding) => [\n eastHalf(slope, anchor) ? +padding : -padding,\n northHalf(slope, anchor) ? -padding : +padding\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"md`#### Clickers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"// clickerMap() creates an empty clicker map\nfunction clickerMap(x) {\n return x.zig.panels // for all panels\n .map(k => k.entries ?? []) // for all entries\n .flat() // return al entries as a single, flat array\n .map(\n // now run through all entries of the flattened zag panels\n k =>\n x.zag.panels\n .map(k => k.entries ?? [])\n .flat()\n .map(k => 0) // and simply return 0\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"function clacquer(matrix) {\n const zag = clickers(matrix, matrix.zag, strip, -1);\n return {\n zig: clickers(matrix, matrix.zig, strip, +1).map((origin, i) => ({\n origin,\n clickers: matrix.klikkers[i],\n zag\n })),\n zag\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"function clickers(matrix, edge, f, dx) {\n let i = 0; // running count, total #iterations\n return edge.panels\n .map((p, pI) => (p.entries ?? []).map((e, eI) => f(matrix, i++, pI, dx)))\n .flat();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"// showClickers() renders all clickers and registers an event listener that increments a clicker on each click\nfunction showClickers(matrix) {\n\n const binding = [\"none\", \"weak\", \"strong\"]\n const strips = matrix.paper.append(\"g\").attr(\"class\", \"clicker\")\n\n matrix.clickers.zig.forEach(\n (strip, i) => {\n const clickerGroup = strips\n .append(\"g\")\n .attr(\"transform\", `translate(${strip.origin})`);\n strip.zag.forEach(\n (clicker, c) => {\n clickerGroup\n .append(\"circle\")\n .attr(\"r\", 0.7)\n .attr(\"class\", `dot ${binding[strip.clickers[c] % binding.length]}`)\n .attr(\"cx\", clicker[0])\n .attr(\"cy\", clicker[1])\n .on(\"click\", \n function(d) {\n d3.select(this).attr(\"class\", `dot ${binding[++strip.clickers[c] % binding.length]}`)\n }\n )\n }\n )\n }\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"function strip(matrix, i, gaps, dx) {\n const v = 2 * (i + gaps * (matrix.gap ?? 0))\n return [dx * v, v + 1];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"md`#### Hemispheres and tetraspheres`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"md`Some conveniences to know where we are so we can nudge texts and lines properly and easily.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"northHalf = (slope, anchor) => northEast(slope, anchor) || northWest(slope, anchor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"eastHalf = (slope, anchor) => northEast(slope, anchor) || southEast(slope, anchor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"southHalf = (slope, anchor) => southEast(slope, anchor) || southWest(slope, anchor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"westHalf = (slope, anchor) => northWest(slope, anchor) || southWest(slope, anchor)","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"northEast = (slope, anchor) => slope == +1 && anchor == \"start\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"northWest = (slope, anchor) => slope == -1 && anchor == \"end\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"southEast = (slope, anchor) => slope == -1 && anchor == \"start\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"southWest = (slope, anchor) => slope == +1 && anchor == \"end\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"md`#### Texts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"baselineShift = 6 / 12; // nudge down a fraction in 12ths to hover text just above line grid","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"// Offsets for text and gridlines, depending on which quadrant or half.\ntextOffset = (slope, anchor, padding) => {\n if (northEast(slope, anchor)) return [padding + 1, -(padding + 1)];\n if (southEast(slope, anchor)) return [padding + 3, padding - 1];\n if (northWest(slope, anchor)) return [-(padding + 1), -(padding + 1)];\n if (southWest(slope, anchor)) return [-(padding + 3), padding - 1];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"function showAnchors(matrix) {\n // .model.map(k => k.map(l => l.origin).flat()).flat()\n matrix.paper\n .append(\"g\")\n .attr(\"class\", \"anchor\")\n .selectAll(\"_\")\n .data(matrix.model.map(k => k.map(l => l.origin).flat()).flat())\n .enter()\n .append(\"circle\")\n .attr(\"r\", 0.3)\n .attr(\"cx\", d => d[0])\n .attr(\"cy\", d => d[1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"function grids(matrix) {\n\n if (showDotGrid) {\n \n const layer = matrix.paper\n .append(\"g\")\n .attr(\"name\", \"pad-grid\")\n .attr(\"class\", \"grid\")\n .attr(\"transform\", `translate(${matrix.minX},${matrix.minY})`)\n \n layer.html(\n grid({\n horizon: matrix.width,\n type: \"dotted\",\n wide: matrix.width,\n tall: matrix.height,\n frequency: 1,\n radius: 1,\n }).svg\n )\n\n }\n\n return matrix\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"entry = (x) => typeof x === \"string\" ? x : x.entry","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"nudge = (a, s) => a.map((k, i) => k + s[i]) // For all i in a, add s[i] to a[i].","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"legLength = (m, side) =>\n2 * (\n stripCount(side).reduce(sum) + \n (side.panels.length - 1) * (m.gap ?? 0)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"function drawPaper(sheet, x) {\n sheet\n .append(\"rect\")\n .attr(\"width\", canvas.box.width)\n .attr(\"height\", canvas.box.height)\n .attr(\"fill\", x.color ? x.color : \"peachpuff\")\n .attr(\"opacity\", .1);\n return sheet;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"function drawHead(sheet, m) {\n const head = sheet.append(\"svg\").attr(\"height\", canvas.grid.vertical.m(6));\n head\n .append(\"rect\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .attr(\"fill\", \"peachpuff\")\n .attr(\"opacity\", 0.2);\n\n let explanation = `${m.kind ? m.kind : \"hoshin kanri x-matrix\"}`;\n explanation += `${m.period ? \"—\" + m.period : \"\"}`;\n text(\n head,\n canvas.margin.left,\n canvas.grid.vertical.m(4),\n -2,\n \"title\",\n m.title\n );\n text(\n head,\n canvas.margin.left,\n canvas.grid.vertical.m(5),\n -2,\n \"explanation\",\n explanation\n );\n return sheet;\n\n function text(p, x, y, dy, kind, string) {\n p.append(\"text\")\n .attr(\"x\", x)\n .attr(\"y\", y)\n .attr(\"dy\", dy)\n .attr(\"class\", kind)\n .text(string);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"function drawIdentity(sheet, x) {\n sheet\n .append(\"svg\")\n .attr(\"width\", canvas.grid.horizontal.m(3))\n .attr(\"height\", canvas.grid.vertical.m(3))\n .attr(\"x\", canvas.box.width - canvas.grid.vertical.m(5))\n .attr(\"y\", canvas.grid.vertical.m(1))\n .append(\"g\")\n .attr(\"id\", \"AardRock Logo\")\n .html(AardRockLogo.xml);\n sheet\n .append(\"svg\")\n .attr(\"x\", canvas.grid.vertical.µ(3))\n .attr(\"y\", canvas.grid.vertical.m(35))\n .attr(\"height\", canvas.grid.vertical.µ(3))\n .attr(\"width\", canvas.pad.width)\n .attr(\"viewBox\", \"0 0 90 18\")\n .attr(\"preserveAspectRatio\", \"xMaxYMid meet\")\n .append(\"g\")\n .attr(\"id\", \"creative-commons-by-sa\")\n .html(ccbysastrip.xml);\n return sheet;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"palette = \nd3.schemeDark2\n// d3.schemePastel1\n// d3.schemeSet1\n// d3.schemeSet3","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`# Canvas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"fader = DOM.uid(\"fader\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`# Conveniences`","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"flipflop = x => 1 - 2 * x // [0, 1] => [-1, +1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"makeEven = x => Math.ceil(x / 2) * 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"entryfy = (a) => a.map(k => ({ entry: k }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"function fullscreen (cell) {\n const button = html`