30:T86c,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").attr("transform", "translate(0,15)").append("text").text(""); const sankeyGraph = svg.append("g").attr("id","sankeyGraph").attr("transform", "translate(0,20)"); sankeyGraph.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 = sankeyGraph.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()}`); sankeyGraph.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:Ted1,viewof source = { const textarea = html`

Berlin,Job Applications,102
Blancos/Nulos/Ausentes(p),Blancos/Nulos/Ausentes,491896,
CONSENSO FEDERAL(p),Blancos/Nulos/Ausentes,27458,
FIT(p),Blancos/Nulos/Ausentes,26634,
FRENTE DE TODOS(p),Blancos/Nulos/Ausentes,272,
FRENTE NOS(p),Blancos/Nulos/Ausentes,6320,
FRENTE PATRIOTA(p),Blancos/Nulos/Ausentes,6939,
JUNTOS POR EL CAMBIO(p),Blancos/Nulos/Ausentes,76,
MOV. AL SOCIALISMO(p),Blancos/Nulos/Ausentes,12774,
MOV. ACC. VECINAL(p),Blancos/Nulos/Ausentes,192,
PARTIDO AUTONOMISTA(p),Blancos/Nulos/Ausentes,1442,
UNITE(p),Blancos/Nulos/Ausentes,1173,
Blancos/Nulos/Ausentes(p),CONSENSO FEDERAL,200620,
CONSENSO FEDERAL(p),CONSENSO FEDERAL,1010563,
FIT(p),CONSENSO FEDERAL,206387,
FRENTE DE TODOS(p),CONSENSO FEDERAL,1,
FRENTE NOS(p),CONSENSO FEDERAL,2937,
FRENTE PATRIOTA(p),CONSENSO FEDERAL,13520,
JUNTOS POR EL CAMBIO(p),CONSENSO FEDERAL,1,
MOV. AL SOCIALISMO(p),CONSENSO FEDERAL,61462,
MOV. ACC. VECINAL(p),CONSENSO FEDERAL,215,
PARTIDO AUTONOMISTA(p),CONSENSO FEDERAL,282,
UNITE(p),CONSENSO FEDERAL,573,
Blancos/Nulos/Ausentes(p),FIT,86567,
CONSENSO FEDERAL(p),FIT,19003,
FIT(p),FIT,334785,
FRENTE DE TODOS(p),FIT,30,
FRENTE NOS(p),FIT,875,
FRENTE PATRIOTA(p),FIT,1766,
JUNTOS POR EL CAMBIO(p),FIT,8,
MOV. AL SOCIALISMO(p),FIT,71788,
MOV. ACC. VECINAL(p),FIT,114,
PARTIDO AUTONOMISTA(p),FIT,1435,
UNITE(p),FIT,311,
Blancos/Nulos/Ausentes(p),FRENTE DE TODOS,898755,#03a9f5
CONSENSO FEDERAL(p),FRENTE DE TODOS,336,#03a9f5
FIT(p),FRENTE DE TODOS,301,#03a9f5
FRENTE DE TODOS(p),FRENTE DE TODOS,11112656,#03a9f5
FRENTE NOS(p),FRENTE DE TODOS,38,#03a9f5
FRENTE PATRIOTA(p),FRENTE DE TODOS,13855,#03a9f5
JUNTOS POR EL CAMBIO(p),FRENTE DE TODOS,213,#03a9f5
MOV. AL SOCIALISMO(p),FRENTE DE TODOS,766,#03a9f5
MOV. ACC. VECINAL(p),FRENTE DE TODOS,62,#03a9f5
PARTIDO AUTONOMISTA(p),FRENTE DE TODOS,207,#03a9f5
UNITE(p),FRENTE DE TODOS,160,#03a9f5
Blancos/Nulos/Ausentes(p),FRENTE NOS,90010,
CONSENSO FEDERAL(p),FRENTE NOS,1957,
FIT(p),FRENTE NOS,4518,
FRENTE DE TODOS(p),FRENTE NOS,0,
FRENTE NOS(p),FRENTE NOS,289075,
FRENTE PATRIOTA(p),FRENTE NOS,5604,
JUNTOS POR EL CAMBIO(p),FRENTE NOS,4,
MOV. AL SOCIALISMO(p),FRENTE NOS,7599,
MOV. ACC. VECINAL(p),FRENTE NOS,211,
PARTIDO AUTONOMISTA(p),FRENTE NOS,1356,
UNITE(p),FRENTE NOS,295,
Blancos/Nulos/Ausentes(p),JUNTOS POR EL CAMBIO,861544,#ffc107
CONSENSO FEDERAL(p),JUNTOS POR EL CAMBIO,730471,#ffc107
FIT(p),JUNTOS POR EL CAMBIO,1920,#ffc107
FRENTE DE TODOS(p),JUNTOS POR EL CAMBIO,40932,#ffc107
FRENTE NOS(p),JUNTOS POR EL CAMBIO,317524,#ffc107
FRENTE PATRIOTA(p),JUNTOS POR EL CAMBIO,9226,#ffc107
JUNTOS POR EL CAMBIO(p),JUNTOS POR EL CAMBIO,7576180,#ffc107
MOV. AL SOCIALISMO(p),JUNTOS POR EL CAMBIO,1703,#ffc107
MOV. ACC. VECINAL(p),JUNTOS POR EL CAMBIO,34001,#ffc107
PARTIDO AUTONOMISTA(p),JUNTOS POR EL CAMBIO,26038,#ffc107
UNITE(p),JUNTOS POR EL CAMBIO,512586,#ffc107
Blancos/Nulos/Ausentes(p),UNITE,87289,
CONSENSO FEDERAL(p),UNITE,146453,
FIT(p),UNITE,97199,
FRENTE DE TODOS(p),UNITE,43,
FRENTE NOS(p),UNITE,2773,
FRENTE PATRIOTA(p),UNITE,5245,
JUNTOS POR EL CAMBIO(p),UNITE,15,
MOV. AL SOCIALISMO(p),UNITE,11005,
MOV. ACC. VECINAL(p),UNITE,62,
PARTIDO AUTONOMISTA(p),UNITE,221,
UNITE(p),UNITE,849,`;
  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 = "initial";
    textarea.style.height = `${textarea.scrollHeight}px`;
  };
  yield textarea;
  textarea.oninput();
}32:[]
2e:{"title":"Sankey de flujos","cells":[{"id":0,"value":"md`# Sankey de flujos`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"viewof inputOrder = {\n  const form = html`<form><label><input name=i type=checkbox > Mantener orden inicial</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":410,"value":"viewof dataType = Object.assign(html`Formato de los datos: <select>\n  <option value=cvs selected=\"selected\">CSV\n  <option value=tsv>TSV\n</select>`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`Cada línea en el área de texto de arriba representa un enlace en el gráfico. El origen y el destino del enlace están determinados por los dos nombres, así que ponga comillas alrededor de los nombres si desea que contengan comas.) El grosor del enlace es determinado por el siguiente valor. También puede especificar un color de relleno después del número`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"links = {\n  return d3.csvParseRows(source, ([source, target, value, linkColor = color]) => (source && target ? {source, target, value: !value || isNaN(value = +value) ? 1 : value, color: linkColor} : null));\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = {\n  \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":true,"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 - 45]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"width = 954","pinned":true,"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":true,"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":true,"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":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require(\"d3@5\", \"d3-sankey@0.12\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}
</article></body></html>