30:T79b,chart = { const svg = d3.select(DOM.svg(width, height)) .style("background", "#fff") .style("width", "100%") .style("height", "auto"); const {nodes, links} = sankey({ nodes: data.nodes.map(d => Object.assign({}, d)), links: data.links.map(d => Object.assign({}, d)) }); svg.append("g") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0 + 1) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0 - 2) .attr("fill", d => { let c; for (const link of d.sourceLinks) { if (c === undefined) c = link.color; else if (c !== link.color) c = null; } if (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)).darker(0.5); }) .append("title") .text(d => `${d.name}\n${d.value.toLocaleString()}`); const link = svg.append("g") .attr("fill", "none") .selectAll("g") .data(links) .join("g") .attr("stroke", d => d3.color(d.color) || color) .style("mix-blend-mode", "multiply"); link.append("path") .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke-width", d => Math.max(1, d.width)); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${d.value.toLocaleString()}`); 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) .append("tspan") .attr("fill-opacity", 0.7) .text(d => ` ${d.value.toLocaleString()}`); return svg.node(); }31:T5dd,viewof source = { const textarea = html`

AK,VEP,521777
AL,VEP,3641209
AR,VEP,2171940
AZ,VEP,4910625
CA,VEP,25635139
CO,VEP,4103903
CT,VEP,2614176
DC,VEP,529198
DE,VEP,710434
FL,VEP,15140654
GA,VEP,7178075
HI,VEP,1014363
IA,VEP,2312204
ID,VEP,1224275
IL,VEP,9017850
IN,VEP,4923068
KS,VEP,2072292
KY,VEP,3319907
LA,VEP,3394257
MA,VEP,5042403
MD,VEP,4306482
ME,VEP,1073006
MI,VEP,7513813
MN,VEP,4064389
MO,VEP,4570675
MS,VEP,2201276
MT,VEP,821710
NC,VEP,7577011
ND,VEP,564114
NE,VEP,1364285
NH,VEP,1062391
NJ,VEP,6114344
NM,VEP,1482246
NV,VEP,2052636
NY,VEP,13772077
OH,VEP,8839520
OK,VEP,2798385
OR,VEP,3113178
PA,VEP,9758386
RI,VEP,793460
SC,VEP,3819264
SD,VEP,640417
TN,VEP,5031061
TX,VEP,18072155
UT,VEP,2082549
VA,VEP,6141102
VT,VEP,497750
WA,VEP,5316196
WI,VEP,4337051
WV,VEP,1405262
WY,VEP,421722
VEP,Ballots Counted,118537867
Ballots Counted,Total Forms Received,79854972
Total Forms Received,Total Forms Rejected,2479439`;
  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;
}32:[]
2e:{"title":"Flow-o-Matic","cells":[{"id":0,"value":"md`# Flow-o-Matic\n\nEdit the textarea below to update the [Sankey diagram](/@d3/sankey-diagram)!`","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":299,"value":"viewof align = Object.assign(html`<select>\n  <option value=left>Left-aligned\n  <option value=right>Right-aligned\n  <option value=center>Centered\n  <option value=justify selected>Justified\n</select>`, {\n  value: new URLSearchParams(html`<a href>`.search).get(\"align\") || \"justify\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"html`\n${DOM.download(await rasterize(chart), \"flow-o-matic\", \"Download as PNG\")}\n${DOM.download(await serialize(chart), \"flow-o-matic\", \"Download as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = {\n  const links = d3.csvParseRows(source, ([source, target, value, linkColor = color]) => (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([[0, 5], [width, 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":256,"value":"viewof color = {\n  const form = html`<form class=\"observablehq--inspect\">color = <input name=i type=color value=\"#dddddd\" style=\"padding:2px;margin:-2px 0;\"></form>`;\n  (form.oninput = () => form.value = form.i.value)();\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\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}
</article></body></html>