2c:null 2d:["$","title",null,{"children":"Screen Picker with Links | KyungYeol Kim | Observable"}] 32:T70e,{ const options = data.nodes.map((d, i) => { return html`

` }) return html`

${options}

` } 33:Tba9,linkNextScreen = (root, data, i) => { const _root = d3.select(root.parentNode) const {width,height,top} = root.getBoundingClientRect() let svg = _root.select('svg') let g = svg.select('.links') if (svg.empty()) { svg = _root.append('svg') .attr('width', width) .attr('height', height) .style('pointer-events', 'none') .style('position', 'fixed') .style('top', top) const defs = svg.append('defs') defs.append('marker') .attr('id', 'triangle') .attr('refX', 5) .attr('refY', 0) .attr('markerWidth', 6) .attr('markerHeight', 6) .attr('viewBox', '0 -5 10 10') .attr('orient', 'auto') .append('path') .attr('d', 'M0,-5L10,0L0,5') .style('fill', 'tomato') defs.append('marker') .attr('id', 'circle') .attr('refX', 4) .attr('refY', 4) .attr('markerWidth', 8) .attr('markerHeight', 8) .attr('orient', 'auto') .append('circle') .attr('r', 2) .attr('cx', 4) .attr('cy', 4) .style('stroke', 'tomato') .style('fill', 'white') g = svg.append('g').attr('class', 'links') } const linkX = d => { if (d.source) { if (d.targetRight) { return d.x - 16 } else { return d.x + d.width - 8 } } else { return d.x + d.width / 2 - 8 } } const linkV = d3.linkVertical() .x(linkX) .y(d => d.y + d.height / 2) const linkH = d3.linkHorizontal() .x(linkX) .y(d => d.y + d.height / 2) const items = [...root.querySelectorAll('.item')] const links = data.links .filter(d => d.source === i) .map(d => { const source = _.find(items, (_, i) => i == d.source).getBoundingClientRect().toJSON() const target = _.find(items, (_, i) => i == d.target).getBoundingClientRect().toJSON() const targetRight = source.x + source.width > target.x + target.width / 2 return { source: { ...source, source: true, top: source.top - top, bottom: source.bottom - top, y: source.y - top, targetRight }, target: { ...target, target: true, top: target.top - top, bottom: target.bottom - top, y: target.y - top } } }) const linkSel = g.selectAll('path') .data(links) linkSel.enter() .append('path') .style('fill', 'none') .style('stroke', 'tomato') .style('stroke-width', 3) .attr('marker-start', `url(${window.location.href}#circle)`) .attr('marker-end', `url(${window.location.href}#triangle)`) .attr('d', d => Math.abs(d.source.x - d.target.x) > Math.abs(d.source.y - d.target.y) ? linkH(d) : linkV(d)) linkSel.attr('d', d => Math.abs(d.source.x - d.target.x) > Math.abs(d.source.y - d.target.y) ? linkH(d) : linkV(d)) linkSel.exit().remove() return svg.node() }34:T448,data = ({ nodes: [ {screen: "07370E45-5687-4DDB-97AC-ECAD1DCAF117.png", description: "screen A"}, {screen: "5718D3FC-53E6-4A4C-8EC9-1BDFCE71CD35.png", description: "screen B"}, {screen: "BF02B323-C5D8-4365-90B2-C649D3B6CF83.png", description: "screen C"}, {screen: "2CC85CBA-CD9D-4E10-A7AC-78AFB3C790AB.png", description: "screen D"}, {screen: "8BBF5728-E460-499E-9356-83EAA4DE882B.png", description: "screen E"}, {screen: "2D8340C3-46CD-444E-B559-F44C6B7BFFA7.png", description: "screen F"}, {screen: "9CF05069-BB81-41C5-B727-477357410A09.png", description: "screen G"}, {screen: "3BF551DC-FBD6-43D6-B6E3-550CCCFCCB2D.png", description: "screen H"}, {screen: "538F0F60-F612-435E-897A-1DAA77CDC698.png", description: "screen J"} ], links: [ {source: 0, target: 5}, {source: 0, target: 8}, {source: 1, target: 8}, {source: 2, target: 5}, {source: 2, target: 8}, {source: 3, target: 6}, {source: 4, target: 0}, {source: 5, target: 4}, {source: 6, target: 7}, {source: 8, target: 0}, {source: 8, target: 2} ] })35:[] 30:{"id":"9cc8bc5a3bdd0d29","slug":"screen-picker-with-links","title":"Screen Picker with Links","thumbnail":"78cfb1fdc54c2bfd81ce0e21a82a5daf0ab53ed2e5ba808f4d3f98211e5cdc0a","access_level":"public","create_time":"$D2019-07-26T14:47:35.198Z","update_time":"$D2019-09-01T14:39:21.794Z","view_time":null,"first_public_time":"$D2019-07-26T17:34:58.601Z","has_unpublished_edits":null,"fork":{"id":"7dc4e775aa71a4b3","slug":"screen-picker","title":"Screen Picker","owner":{"id":"56a62604da372f41","login":"chitacan","name":"KyungYeol Kim"}},"stars":4,"starred":false,"owner":{"type":"team","id":"56a62604da372f41","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":"starter_2024"},"version":396,"publish_version":396,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null}],"members":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"be21d50d7f8ad100","slug":"tools","title":"Tools","owner":{"id":"56a62604da372f41","login":"chitacan","name":"KyungYeol Kim"}},"type":"notebook","body":{"titling":"auto","title":"Screen Picker with Links","cells":[{"id":0,"value":"md`# Screen Picker with Links\n\ninspired by awesome [@tmcw/watercolor-versions](https://observablehq.com/@tmcw/watercolor-versions) notebook 💖\nand I put some curves to indicate next screens.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof screen = {\n let options = data.nodes.map((d, i) => {\n let opt = html`

`;\n opt.addEventListener(\"click\", function(e) {\n root.value = d;\n root.dispatchEvent(new CustomEvent(\"input\"));\n for (let im of root.querySelectorAll(\"div\")) {\n im.style.opacity = im === this ? 1 : 0.5;\n }\n linkNextScreen(root, data, i)\n });\n return opt;\n });\n let root = html`

\n${options}\n

`;\n root.value = data.nodes[0];\n setTimeout(() => linkNextScreen(root, data, 0), 1000)\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"md`## How does it work??\n\nWell, I put a svg ${overlay} element over screen picker element and draw curves in it. :)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"md`## Todo\n\nThis big svg ${overlay} technique can be imporved with following techniques.\n\n* http://simblob.blogspot.com/2016/10/outside-box.html\n* https://observablehq.com/@redblobgames/reshaping-distributions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"overlay = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"screen","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"html`