31:T8ee,chart = { const root = pack(data); 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", 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()); }32:T4cc,viewof source = { const textarea = html`

name	value	color
Am 590	1	neutral
Am 750	4	of
c5n	6	of
Canal 13	2	opo
Canal 9	1	of
continental	1	neutral
delta fm	1	neutral
el destape	1	of
fm la patriada	1	of
futurock	2	neutral
instagram	1	neutral
jai	1	neutral
la once diez	1	neutral
metro	1	neutral
milenium	1	neutral
Radio 10	6	of
radio con vos	4	neutral
radio mitre	1	opo
radio rivadavia	2	neutral
telefe	3	neutral
televison publica	2	of
tn	2	opo`;
  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;
}33:[]
2f:{"title":"Grafico de burbujas","cells":[{"id":1,"value":"md`# Grafico de burbujas`","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    Mostrar circulo base\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> Ordenar por valor</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":"$31","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":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=\"#9801fe\"></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":"$32","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);","pinned":false,"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 = data => {\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":"$W33","stdlib":"1","titling":"auto"}
</article></body></html>