3f:null 40:["$","title",null,{"children":"Gráfico de pendientes | Andres Snitcofsky | Observable"}] 46:Ta1d,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("font-family", "sans-serif") .attr("font-size", 12); svg.append("rect").attr("width",width).attr("height",height).attr("fill",bgColor); svg .append('defs') .append('marker') .attr('id', 'arrow') .attr('viewBox', [0, 0, 20, 16]) .attr('refX', 20) .attr('refY', 5) .attr('markerWidth', 10) .attr('markerHeight', 8) .attr('orient', 'auto-start-reverse') .append('path') .attr('d', d3.line()(arrowPoints)) .attr('stroke', 'black'); svg.append("g") // eje superior y lineas verticales .attr("text-anchor", "middle") .selectAll("g") .data(data.columns) .join("g") .attr("transform", (d, i) => `translate(${x(i)},20)`) .call(g => g.append("text").text(d => d)) .call(g => g.append("line").attr("y1", 9).attr("y2", height).attr("stroke", "currentColor").attr("stroke-dasharray", "1,2")) .call(g => g.append("line").attr("y1", 3).attr("y2", 9).attr("stroke", "currentColor")); var flechita = svg.append("g").attr("id","flechas") // flechas group .selectAll("g") .data(data) .join("g").attr("class", "flechita"); flechita.append("path") // flechas .attr("fill", "none") .attr("d", d => line(d.values)) .attr('marker-end', 'url(#arrow)') .attr("stroke", d=> d.values[0]>d.values[1]?"#a64d79":fontColor) flechita.append("text") // porcentajes .attr("text-anchor", "middle") .attr("x",(x(1)-x(0))/2+x(0)) .attr("dy",3) .attr("y",d=>y((d.values[1]-d.values[0])/2+d.values[0])) .text(d=>locale.format(".0%")((d.values[1]-d.values[0])/d.values[0])) .attr("fill", d=> d.values[0]>d.values[1]?"#a64d79":fontColor) .call(halo) svg.append("g") .selectAll("g") .data(data.columns) .join("g") .attr("transform", (d, i) => `translate(${x(i) + (i === 0 ? -padding : i === n - 1 ? padding : 0)},0)`) .attr("text-anchor", (d, i) => i === 0 ? "end" : i === n - 1 ? "start" : "middle") .selectAll("text") .data((d, i) => d3.zip( data.map(i === 0 ? d => `${d.name} ${formatNumber(d.values[i])}` : i === n - 1 ? d => `${formatNumber(d.values[i])} ${d.name}` : d => `${formatNumber(d.values[i])}`), dodge(data.map(d => y(d.values[i]))))) .join("text") .attr("y", ([, y]) => y) .attr("dy", "0.35em") .attr("fill", fontColor) .text(([text]) => text) .call(halo) ; return svg.node(); }47:T56c,viewof source = { const textarea = html`

Actividades no etiquetadas en 2020 (sí presupuestadas) que continuan en 2021 	2020	2021
Prestaciones Previsionales por Moratoria Previsional (PPG)	604889840877	777690224125
Tarjetas Alimentar	4697852182	89624594231
Acompañamiento a Familias en la Crianza de Niños - Programa Primeros Años (PPG)	186521244	169000000
Políticas Federales para el Fortalecimiento Familiar y Comunitario (PPG)	25066440	37750000
 Monotributo Social - Potenciar Trabajo (Efectores 100%) (PPG)	1454640000	2184632319
 Monotributo Social (Efectores 50%) (PPG)	1837440000	2678918616
`;
  textarea.onkeypress = event => {
    if (event.key !== "Enter" || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return;
    let i = textarea.selectionStart;
    let j = textarea.selectionEnd;
    let v = textarea.value;
    if (i === j) {
      let k = 0;
      while (i > 0 && v[--i - 1] !== "\n");
      while (i < j && v[i] === " ") ++i, ++k;
      textarea.value = v.substring(0, j) + "\n" + new Array(k + 1).join(" ") + v.substring(j);
      textarea.selectionStart = textarea.selectionEnd = j + k + 1;
      textarea.dispatchEvent(new CustomEvent("input"));
      event.preventDefault();
    }
  };
  textarea.oninput = () => textarea.style.height = `${textarea.value.match(/^/gm).length * 21 + 8}px`;
  textarea.oninput();
  return textarea;
}48:[]
44:{"id":"2803831657efe918","slug":"grafico-de-pendientes","title":"Gráfico de pendientes","thumbnail":"f3fae642cdb7b1126143b0133f725d7e9133df2944c67b3f54f1f15b9f16925d","access_level":"public","create_time":"$D2021-03-25T15:55:22.186Z","update_time":"$D2023-01-31T23:28:56.748Z","view_time":null,"first_public_time":"$D2021-03-25T15:57:17.295Z","has_unpublished_edits":null,"fork":{"id":"d42ee541ec6e20c9","slug":"slope-o-matic","title":"Slope-O-Matic","owner":{"id":"82fa28a4bb8e5238","login":"rusosnith","name":"Andres Snitcofsky"}},"stars":0,"starred":false,"owner":{"type":"team","id":"82fa28a4bb8e5238","login":"rusosnith","name":"Andres Snitcofsky","avatar_url":"https://avatars-next.observableusercontent.com/3ccaf0a07d8d8892515e52d8675c078e760f47c4bca250ca67026f082cd9f2ee","tier":"pro_2024","bio":"Data visualization and hacktivism from Buenos Aires, Argentina.\n(A Graph designer trying to code)","following":false},"version":358,"publish_version":358,"role":null,"authored":false,"authors":[{"type":"individual","id":"6af64127e9c2630a","login":"rusosnith","name":"Andres Snitcofsky","avatar_url":"https://avatars-next.observableusercontent.com/2b262ea0f2ac88cc8e7b343d227833840f0f3f16653078effbfb00582801e631","tier":null,"bio":"Data visualization and hacktivism from Buenos Aires, Argentina.\n(A graph designer trying to code)","following":false}],"members":[{"type":"individual","id":"6af64127e9c2630a","login":"rusosnith","name":"Andres Snitcofsky","avatar_url":"https://avatars-next.observableusercontent.com/2b262ea0f2ac88cc8e7b343d227833840f0f3f16653078effbfb00582801e631","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b1ab551866191630","slug":"herramientas-ppg","title":"Herramientas PPG","owner":{"id":"82fa28a4bb8e5238","login":"rusosnith","name":"Andres Snitcofsky"}},"type":"notebook","body":{"titling":"auto","title":"Gráfico de pendientes","cells":[{"id":0,"value":"md`# Gráfico de pendientes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"viewof anchoCentral = html`<input type=\"range\" min=\"0.1\" max=\"3\" value=\"1\" step=\"0.1\"></input>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"viewof dataType = Object.assign(html`Formato de los datos: <select>\n  <option value=tsv selected=\"selected\">TSV\n  <option value=csv >CSV\n</select>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"viewof bgColor  = html`<input type=\"color\" value=\"#fcf9ff\"></input>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"viewof fontColor  = html`<input type=\"color\" value=\"#073763\"></input>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = {\n  //const data = dataType==\"CSV\"?d3.csvParseRows(source):d3.tsvParseRows(source);\n  const data = d3.tsvParseRows(source);\n  return Object.assign(data.slice(1).map(([name, ...values]) => ({name, values: values.map(x => +x)})), {\n    columns: data[0].slice(1)\n  });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"function dodge(positions, separation = 10, maxiter = 10, maxerror = 1e-1) {\n  positions = Array.from(positions);\n  let n = positions.length;\n  if (!positions.every(isFinite)) throw new Error(\"invalid position\");\n  if (!(n > 1)) return positions;\n  let index = d3.range(positions.length);\n  for (let iter = 0; iter < maxiter; ++iter) {\n    index.sort((i, j) => d3.ascending(positions[i], positions[j]));\n    let error = 0;\n    for (let i = 1; i < n; ++i) {\n      let delta = positions[index[i]] - positions[index[i - 1]];\n      if (delta < separation) {\n        delta = (separation - delta) / 2;\n        error = Math.max(error, delta);\n        positions[index[i - 1]] -= delta;\n        positions[index[i]] += delta;\n      }\n    }\n    if (error < maxerror) break;\n  }\n  return positions;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"n = data.columns.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"function halo(text) {\n  text.clone(true)\n      .each(function() { this.parentNode.insertBefore(this, this.previousSibling); })\n      .attr(\"fill\", \"none\")\n      .attr(\"stroke\", bgColor)\n      .attr(\"stroke-width\", 6)\n      .attr(\"stroke-linejoin\", \"round\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"line = d3.line()\n    .x((d, i) => x(i)+(i==0?3:-3))\n    .y(y)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"x = d3.scalePoint()\n    .domain(d3.range(n))\n    .range([margin.left, width - margin.right])\n    .padding(anchoCentral)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"y = d3.scaleLinear()\n    .domain(d3.extent(data.flatMap(d => d.values)))\n    .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"locale = d3.formatLocale({\n  decimal: \",\",\n  thousands: \".\",\n  grouping: [3],\n  currency: [\"$\", \"\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"formatNumber = locale.format(\".1s\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"margin = ({top: 40, right: 150, bottom: 110, left: 150})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"padding = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"arrowPoints = [[0, 0], [0, 10], [20, 5]];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"html`<style>\n\ntextarea {\n  display: block;\n  boxSizing: border-box;\n  width: calc(100% + 28px);\n  font: var(--mono_fonts);\n  minHeight: 33px;\n  border: none;\n  padding: 4px 10px;\n  margin: 0 -14px;\n  background: rgb(247,247,249);\n  tabSize: 2;\n}\n\ntextarea:focus {\n  outline: none;\n}\n\n</style>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}}
45:"$44:body"
</article></body></html>