31:T95f,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const {nodes, links} = sankey({ nodes: data.nodes.map(d => Object.assign({}, d)), links: data.links.map(d => Object.assign({}, d)) }); 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", d => { let c = undefined; for (const link of d.targetLinks) { if (c === undefined) c = link.color; else if (c !== link.color) c = null; } return (d3.color(c) || d3.color(color(d.name))).darker(0.5); }) .append("title") .text(d => `${d.name}`); const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); if (edgeColor === "path") { 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 => d.source.targetLinks[0] ? d.source.targetLinks[0].color ? d.source.targetLinks[0].color : color(d.source.name) : color(d.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => d.color ? d.color : color(d.target.name)); } link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => edgeColor === "none" ? "#aaa" : edgeColor === "path" ? d.uid : edgeColor === "input" ? color(d.source.name) : color(d.target.name)) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}`); svg.append("g") .style("font", "10px sans-serif") .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 => d.name); return svg.node(); }32:T469,viewof source = { const textarea = html`

Berlin,Job Applications,102
Barcelona,Job Applications,39
Madrid,Job Applications,35
Amsterdam,Job Applications,15
Paris,Job Applications,14
London,Job Applications,6
Munich,Job Applications,5
Brussels,Job Applications,4
Dubai,Job Applications,3
Dublin,Job Applications,3
Other Cities,Job Applications,12
Job Applications,No Response,189,orange
Job Applications,Responded,49,purple
Responded,Rejected,38
Responded,Interviewed,11,red
Interviewed,No Offer,8
Interviewed,Declined Offer,5
Interviewed,Accepted Offer,3`;
  textarea.style.display = "block";
  textarea.style.boxSizing = "border-box";
  textarea.style.width = "calc(100% + 28px)";
  textarea.style.font = "var(--mono_fonts)";
  textarea.style.minHeight = "60px";
  textarea.style.border = "none";
  textarea.style.padding = "4px 10px";
  textarea.style.margin = "0 -14px";
  textarea.style.background = "rgb(247,247,249)";
  textarea.style.tabSize = 2;
  textarea.oninput = () => textarea.style.height = `${textarea.value.match(/^/gm).length * 21 + 8}px`;
  textarea.oninput();
  return textarea;
}33:[]
2f:{"title":"Colorful Flow-o-Matic","cells":[{"id":558,"value":"md`# Colorful Flow-o-Matic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"viewof edgeColor = Object.assign(html`<select>\n  <option value=input>Color by input\n  <option value=output>Color by output\n  <option value=path selected>Color by input-output\n  <option value=none>No color\n</select>`, {\n  value: new URLSearchParams(html`<a href>`.search).get(\"color\") || \"path\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"viewof scheme = Object.assign(html`<select>\n  <option value=category10>Scheme - Category10\n  <option value=accent>Scheme - Accent\n  <option value=dark2>Scheme - Dark2\n  <option value=paired selected>Scheme - Paired\n  <option value=pastel1>Scheme - Pastel1\n  <option value=pastel2>Scheme - Pastel2\n  <option value=set1>Scheme - Set1\n  <option value=set2>Scheme - Set2\n  <option value=set3>Scheme - Set3\n  <option value=tableau10>Scheme - Tableau10\n</select>`, {\n  value: new URLSearchParams(html`<a href>`.search).get(\"scheme\") || \"paired\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"viewof align = Object.assign(html`<select>\n  <option value=left>Align - Left\n  <option value=right>Align - Right\n  <option value=center>Align - Centered\n  <option value=justify selected>Align - Justified\n</select>`, {\n  value: new URLSearchParams(html`<a href>`.search).get(\"align\") || \"justify\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"html`\n${DOM.download(await rasterize(chart), \"sankey\", \"Download as PNG\")}\n${DOM.download(await serialize(chart), \"sankey\", \"Download as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"viewof inputOrder = {\n  const form = html`<form><label><input name=i type=checkbox checked> Preserve input order</label>`;\n  form.i.onclick = () => (form.value = form.i.checked, form.dispatchEvent(new CustomEvent(\"input\")));\n  form.value = form.i.checked;\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"color = {\n  let color = d3.scaleOrdinal(d3.schemePaired);\n  switch (scheme) {\n    case \"accent\":\n      color = d3.scaleOrdinal(d3.schemeAccent);\n      break;\n    case \"dark2\":\n      color = d3.scaleOrdinal(d3.schemeDark2);\n      break;\n    case \"pastel1\":\n      color = d3.scaleOrdinal(d3.schemePastel1);\n      break;\n    case \"pastel2\":\n      color = d3.scaleOrdinal(d3.schemePastel2);\n      break;\n    case \"set1\":\n      color = d3.scaleOrdinal(d3.schemeSet1);\n      break;\n    case \"set2\":\n      color = d3.scaleOrdinal(d3.schemeSet2);\n      break;\n    case \"set3\":\n      color = d3.scaleOrdinal(d3.schemeSet3);\n      break;\n    case \"tableau10\":\n      color = d3.scaleOrdinal(d3.schemeTableau10);\n      break;\n  }\n  return name => color(name.replace(/ .*/, \"\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = {\n  const links = d3.csvParseRows(source, \n  ([source, target, value, linkColor]) => \n    (source && target ? {source, target, value: !value || isNaN(value = +value) ? 1 : value, color: linkColor} : null));\n  const nodeByName = new Map;\n  for (const link of links) {\n    if (!nodeByName.has(link.source)) nodeByName.set(link.source, {name: link.source});\n    if (!nodeByName.has(link.target)) nodeByName.set(link.target, {name: link.target});\n  }\n  return {nodes: Array.from(nodeByName.values()), links};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"sankey = d3.sankey()\n    .nodeId(d => d.name)\n    .nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])\n    .nodeSort(inputOrder ? null : undefined)\n    .nodeWidth(15)\n    .nodePadding(padding)\n    .extent([[5, 5], [width - 5, height - 5]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"width = 975","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"viewof height = {\n  const form = html`<form class=\"observablehq--inspect\">height = <input name=i type=number min=0 value=720 step=1  style=\"padding:2px;margin:-2px 0;width:120px;\"></form>`;\n  (form.oninput = () => form.value = form.i.valueAsNumber)();\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"viewof padding = {\n  const form = html`<form class=\"observablehq--inspect\">padding = <input name=i type=number min=0 value=10 step=1  style=\"padding:2px;margin:-2px 0;width:120px;\"></form>`;\n  (form.oninput = () => form.value = form.i.valueAsNumber)();\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require(\"d3@5.12.0\", \"d3-sankey@0.12.3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}
</article></body></html>