30:T91c,chart = { const root = pack(dataCleaned); var colorize = d3.scaleOrdinal() .range(["#e9c7c0","silver","#c6dbef","#c7e9c0","#dadaeb"]); const circle = d3.arc() .innerRadius(0) .outerRadius(d => d) .startAngle(-Math.PI) .endAngle(Math.PI); const svg = d3.create("svg") .style("width", "100%") .style("height", "auto") .style("background", "#fff") .style("font-size", "14px") .style("font-family", "OpenSans, sans-serif") .attr("text-anchor", "middle"); const node = svg.selectAll("g") .data(root.descendants().slice(rooted ? 0 : 1).reverse()) .enter().append("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); node.append("path") .attr("id", d => (d.circleUid = DOM.uid("circle")).id) .attr("d", d => circle(d.r)); const internal = node.filter(d => d.children); //&& d.children.length > 1 internal.select("path") .attr("stroke", d => d.data.color) .attr("fill", "none"); internal.append("text") .attr("dy", "1em") .attr("fill", fontColor) .append("textPath") .attr("xlink:href", d => d.circleUid.href) .attr("startOffset", "50%") .text(d => d.data.name); const leaf = node.filter(d => !d.children) .attr("fill", d=>d.data.color?colorize(d.data.color):fillColor );//d=>colorize(d.data.color) /* const refCircles = node.filter(d => !d.children) .append("circle") .attr("r", d => (d.r/d.data.value*d.data.ref)) .attr("stroke", "#555" ) .attr("fill", "none" ); */ leaf.filter(d => d.r>30).append("text") .each(d => { const {lines, radius} = fit(d.data.name, isNaN(d.data.value) ? undefined : format(d.data.value)); d.lines = lines; if (!isNaN(d.data.values)) d.lines[d.lines.length - 1].value = true; }) .attr("fill", d => d3.lab(d.data.color).l < 60 ? lightColor : fontColor) .selectAll("tspan") .data(d => d.lines) .enter().append("tspan") .attr("x", 0) .attr("y", (d, i, data) => (i - data.length / 2 + 0.8) * (13+interlinea)) .text(d => d.text) //.filter( (d, i, data) => i==data.length-1) .attr("font-weight", (d, i, data) => i==data.length-1?300:600) //.attr("fill-opacity", 0.5) ; return autosize(svg.node()); }31:T569,viewof source = { const textarea = html`

name	value	color
Ministerio de Trabajo, Empleo y Seguridad Social	1103503
Ministerio de Desarrollo Social	163196
Ministerio de las Mujeres, Géneros y Diversidad	6205
Ministerio de salud	5221
Ministerio de Obras Públicas	834
Ministerio de Justicia y Derechos Humanos	561
Ministerio de Cultura	314
Ministerio de Educación	253
Ministerio de Seguridad	104
Ministerio de Transporte	28
Ministerio de Defensa	16
Ministerio de Relaciones Exteriores, Comercio Internacional y Culto	15
Ministerio de Ciencia, Tecnología e Innovación	11
Ministerio de Economía	6
`;
  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;
}32:[]
2e:{"title":"Pack-o-Matic","cells":[{"id":1,"value":"md`# Pack-o-Matic\n\nEdit the textarea below to update the chart!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"viewof rooted = {\n  const form = html`<form>\n  <label>\n    <input name=checkbox type=checkbox>\n    Show root circle\n  </label>\n`;\n  form.checkbox.onclick = () => {\n    form.value = form.checkbox.checked;\n    form.dispatchEvent(new CustomEvent(\"input\"));\n  };\n  form.value = form.checkbox.checked;\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"viewof sorted = {\n  const form = html`<form><label><input name=checkbox type=checkbox checked> Sort by value</label>`;\n  form.checkbox.onclick = () => (form.value = form.checkbox.checked, form.dispatchEvent(new CustomEvent(\"input\")));\n  form.value = form.checkbox.checked;\n  return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"html`\n${DOM.download(await rasterize(chart), null, \"Download as PNG\")}\n${DOM.download(await serialize(chart), null, \"Download as SVG\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"html`Tamaño de texto relativo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"viewof diametro = html`<input type=\"range\" min=\"100\" max=\"2100\" value=\"900\"></input>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"html`Interlinea`","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"viewof others = Inputs.toggle({label: \"Agrupar en Otros\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"viewof interlinea = html`<input type=\"range\" min=\"0\" max=\"5\" value=\"0\"></input>`","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"viewof fillColor  = html`<input type=\"color\" value=\"#a64d79\"></input>`","pinned":true,"hidden":false,"mode":"ojs"},{"id":736,"value":"viewof fontColor  = html`<input type=\"color\" value=\"#ffffff\"></input>`","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"md`Each line in the textarea above represents a node in the tree. The depth of the node is determined by the number of leading spaces (the indentation): the root node has depth zero; its direct children have depth one; their children have depth two, and so on. The parent of each node is the closest preceding node with lesser depth.\n\nThe area of each node is determined by the number after the comma. You can also specify a fill color after the number. The contents of the textarea are interpreted as [CSV](https://en.wikipedia.org/wiki/Comma-separated_values), so put quotes around names if you want them to contain commas.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"data = d3.tsvParse(source,d3.autoType);","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"dataCleaned = data.filter(d=>d.value>(max/1000))","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"dataCleaned.push({name:\"Otros\",value:d3.sum(data.filter(d=>d.value<(max/1000)),e=>e.value)})","pinned":true,"hidden":false,"mode":"ojs"},{"id":793,"value":"max = d3.max(data,d=>d.value)","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"nest = d3.nest()\n    .key(function(d) { return d[data.columns[0]]; })\n    // .rollup(function(d) {\n    //   //return d3.sum(d, function(d) { return d[data.columns[1]]; })\n    //   return {\n    //     \"value\": d3.sum(d, function(d) { return d[data.columns[1]]; }),\n    //     \"cat\": d[0][data.columns[2]]\n    //     }\n    //   })\n    .entries(data);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"pack = dataCleaned => {\n  const root = d3.hierarchy({values: nest}, function(d) { return d.values; })\n      .sum(function(d) { return d.value; })\n      .sort(function(a, b) { return b.value - a.value; });\n   if (sorted) root.sort((a, b) => b.value - a.value);\n  return d3.pack()\n      .size([width - 2, height - 2])\n      .padding(3)\n    (root);\n}\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"format = d3.format(\".2s\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"height = diametro","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"lightColor = \"#fff\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"darkColor = \"#000\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"function autosize(svg) {\n  document.body.appendChild(svg);\n  const box = svg.getBBox();\n  document.body.removeChild(svg);\n  svg.setAttribute(\"viewBox\", `${box.x - 1} ${box.y - 1} ${box.width + 2} ${box.height + 2}`);\n  return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"import {fit, measureWidth} from \"@mbostock/bubble-o-matic\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"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"}],"files":"$W32","stdlib":"1","titling":"auto"}
</article></body></html>