30:T6ed,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const {nodes, links} = sankey(data); svg.append("g") .attr("stroke", "#000") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", color) .append("title") .text(d => `${d.name}\n${format(d.value)}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${mapStars(d.source.name)} → ${mapStars(d.target.name)}\n${format(d.value)}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(nodes) .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => `${mapStars(d.name)} x${d.value}`); return svg.node(); }31:T96e,data = { const houses = [ { address: "5816 SE Ramona St", sequence: ["Considered", "Toured", "2★", "Taken"] }, { address: "1000 NE 110th Ave", sequence: ["Considered", "Toured", "3★"] }, { address: "1739 SE Lexington St", sequence: ["Considered", "Toured", "0★", "Too Small"] }, { address: "3315 SE Cesar E Chavez Blvd", sequence: ["Considered", "3★"] }, { address: "6520 SW Florence Ln", sequence: ["Considered", "3★", "Taken"] }, { address: "5100 SW 19th Dr", sequence: ["Considered", "2★", "Taken"] }, { address: "2080 SW 106th Pl", sequence: ["Considered", "Toured", "2★", "Not our style"] }, { address: "8520 SW 20th Ave", sequence: ["Considered", "2★", "Taken"] }, { address: "6060 SW Taylors Ferry Rd", sequence: ["Considered", "Toured", "3★", "Taken"] }, { address: "3614 Nevada Street", sequence: ["Considered", "1★", "Too Small"] }, { address: "8115 SE Yamhill St ", sequence: ["Considered", "2★"] }, { address: "13321 SE Knapp Ct", sequence: ["Considered", "Toured", "0★", "Too Far"] }, { address: "3716 SW Tower Way", sequence: ["Considered", "3★", "Taken"] }, { address: "7205 N Greeley Ave", sequence: ["Considered", "2★", "Too Small"] }, { address: "3040 NE Bryant St", sequence: ["Considered", "2★", "Not our style"] }, { address: "4741 SE 34th Ave", sequence: ["Considered", "2★", "Too Small"] }, { address: "1800 NE 58th Ave", sequence: ["Considered", "Toured", "4★", "Offer", "Taken"] }, { address: "4924 SE 76th Ave", sequence: ["Considered", "Toured", "4★", "Offer", "Bought"] } ]; const linkCounts = new Map(); const links = []; const nodeNames = new Set(); for (const house of houses) { for (let i = 0; i < house.sequence.length - 1; i++) { let key = `${house.sequence[i]}::${house.sequence[i + 1]}`; linkCounts.set(key, (linkCounts.get(key) ?? 0) + 1); } } for (const [key, value] of linkCounts) { let [source, target] = key.split("::"); nodeNames.add(source); nodeNames.add(target ?? null); links.push({ source, target, value }); } const nodes = Array.from(nodeNames).map((name) => ({ name })); return { nodes, links, linkCounts, nodeNames }; }32:[] 2e:{"title":"House Sankey","cells":[{"id":0,"value":"md`# House Sankey`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof align = Object.assign(html``, {\n value: new URLSearchParams(html``.search).get(\"align\") || \"left\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"d3 = require(\"d3@6\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"width = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"sankey = {\n const defaultAlign = d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`];\n let layers = {\"0★\":2, \"1★\":2, \"2★\":2, \"3★\":2, \"4★\":2, \"5★\":2}; \n const sankey = d3.sankey()\n .nodeId(d => d.name)\n .nodeAlign(d => layers[d.name] ?? defaultAlign(d))\n .nodeWidth(15)\n .nodePadding(10)\n .extent([[1, 5], [width - 1, height - 5]])\n .nodeSort((a, b) => {\n let ranks = {\n \"0★\": 5,\n \"1★\": 4,\n \"2★\": 3,\n \"3★\": 2,\n \"4★\": 1,\n \"5★\": 0,\n \"Offer\": -1,\n \"Too Small\": 2,\n \"Too Far\": 3,\n };\n let aRank = ranks[a.name] ?? 0;\n let bRank = ranks[b.name] ?? 0;\n return aRank - bRank;\n });\n ;\n return ({nodes, links}) => sankey({\n nodes: nodes.map(d => Object.assign({}, d)),\n links: links.map(d => Object.assign({}, d))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"mapStars = (s) => {\n let match = s.match(/(\\d+)(.)/);\n if (match) { \n let [, count, star] = match;\n count = Number(count);\n if (count == 0) {\n return \"☆\";\n }\n let rv = \"\";\n while (rv.length < count) {\n rv += star;\n }\n return rv;\n } else {\n return s;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"color = {\n const color = d3.scaleOrdinal(d3.schemeCategory10);\n return d => color(d.category === undefined ? d.name : d.category);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"format = {\n const format = d3.format(\",.0f\");\n return data.units ? d => `${format(d)} ${data.units}` : format;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}