30:T7ff,chart = { const root = pack(data); const circle = d3.arc() .innerRadius(0) .outerRadius(d => d+1) .startAngle(-Math.PI) .endAngle(Math.PI); const svg = d3.create("svg") .style("width", "100%") .style("height", "auto") .style("background", "#000") .style("font", "10px 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(Math.abs(d.r))); const internal = node.filter(d => d.children); internal.select("path") .attr("stroke", d => d.data.color) .attr("fill", "none"); internal.append("text") .attr("dy", "1em") .attr("fill", "#555") .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); leaf.append("text") .each(d => { const {lines, radius} = fit(d.data.name, isNaN(d.data.value) ? undefined : d.data.value); //if (lines[1] && lines[1].text > 1000) {console.log(lines[1].text)} d.lines = lines; if (!isNaN(d.data.value)) d.lines[d.lines.length - 1].value = true; }) .attr("fill", d => d3.lab(d.data.color).l < 60 ? lightColor : darkColor) .selectAll("tspan") .data(d => d.lines) .enter().append("tspan") .attr("x", 0) .attr("y", (d, i, data) => (i - data.length / 2 + 0.8) * 11) .text((d, i, data) => { //console.log(d, i, data) return d.text }) .attr("font-weight", 800) .style("font", "10px sans-serif") .filter(d => d.value) .attr("font-weight", 300) .style("font", "8px sans-serif") .attr("fill-opacity", 0.5); return autosize(svg.node()); }31:Td2b,viewof source = { const textarea = html`

data
  BMW OF N.A.	
    2 Series,5307
    3 Series,9426
    4 Series,4785
    5 Series,6433
    6 Series,41
    7 Series,1920
    8 Series,1502
    i3,340
    i8,8
    Z4,195
    Cooper S,4123
    Rolls-Royce,160
  FORD MOTOR CO.	
    Fusion,7889
    GT,33
    Mustang,17274
    Continental,768
    MKZ,1238
  GENERAL MOTORS	
    LaCrosse,2
    Regal,25
    Buick,27
    CT4,2627
    CT5,4374
    CT6,50
    CTS,55
    XTS,112
    Bolt,9025
    Camaro,7089
    Corvette,6611
    Cruze,17
    Impala,462
    Malibu,26987
    Sonic,1065
    Spark,11505
    Chevrolet,51257
  AMERICAN HONDA	
    ILX,2986
    NSX,17
    RL/RLX,144
    TLX,6141
    Acura,9144
    Acura,144
    Accord,46591
    Civic,40933
    Clarity,1147
    Fit,6065
    Insight,3859
    Honda,97448
  HYUNDAI-KIA AUTOMOTIVE	
    G70,1864
    G80,1512
    G90,415
    Accent,4272
    Elantra,26093
    Ioniq,4125
    Sonata,20557
    Veloster,687
    Hyundai,46650
    Cadenza,155
    Forte,24850
    K5/Optima,20394
    K900,56
    Rio,6818
    Soul,17191
    Stinger,2444
  JAGUAR LAND ROVER N.A.	
    F-Type,610
    XE,155
    XF,227
    XJ,10
  MAZDA N.A.	
    Mazda3,9992
    Mazda6,4285
    MX-5 Miata,2743
  MERCEDES-BENZ USA	
    A-Class,3289
    C-Class,7388
    C-Class,308
    CLA,2372
    E-Class/CLS,8199
    GT,1212
    S-Class,1043
    SL,311
    SLC/SLK,198
  MITSUBISHI MOTORS N.A.	
    Mirage,6932
  NISSAN GROUP/MITSUBISHI	
    Q50,4302
    Q60,686
    350Z/370Z,28
    Altima,32017
    GT-R,50
    Leaf,2925
    Maxima,4807
    Sentra,37238
    Versa,22394
    Nissan,99381
    Nissan Group,99381
    STELLANTIS	
    4C,24
    Giulia,2065
    Chrysler 300,5394
    Challenger,15096
    Charger,19740
    Dart,1
    Viper,2
    Fiat 500,4
    Spider,477
    Maserati,880
  SUBARU OF AMERICA	
    BRZ,583
    Impreza,9115
    Legacy,6305
    WRX,5566
  TESLA	
    Model 3,23110
    Model S,4155
  TOYOTA MOTOR N.A.	
    ES,10147
    ES,45
    GS,52
    IS,6028
    LC,654
    LS,1137
    RC,777
    Lexus,10147
    86 (incl. FR-S),764
    Avalon,5136
    Camry,78149
    Corolla,35051
    Corolla/IM,37469
    Mirai,869
    Prius,14050
    Supra,1725
    Yaris,129
  VW GROUP OF AMERICA	
    A3,1329
    A4/S4,5071
    A5/S5,4527
    A6/S6,3113
    A7/S7,989
    A8/S8,441
    R8,148
    TT,266
    Bentley,480
    Lamborghini,330
    Porsche 718,1506
    Porsche 911,2782
    Panamera,451
    Taycan,2008
    Arteon,1099
    Golf/Golf R/GTI,4221
    Jetta,22714
    Passat,4535
  VOLVO CAR USA	
    60 series,4617
    90 series,594
`;
  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 = "initial";
    textarea.style.height = `${textarea.scrollHeight}px`;
  };
  yield textarea;
  textarea.oninput();
}32:[]
2e:{"title":"Circle Pack","cells":[{"id":1,"value":"md`# Circle Pack`","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":true,"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":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 = cstParseRows(source, ([name, value, color = fillColor]) => ({\n  name, \n  value: value === undefined ? undefined : +value, \n  color\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"pack = data => {\n  const root = d3.hierarchy(data);\n  root.sum(d => d.children ? 0 : isNaN(d.value) ? 1 : d.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}","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"height = 720","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"fillColor = \"#e4e4e4\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"lightColor = \"#fff\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"darkColor = \"#000\"","pinned":true,"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":true,"hidden":false,"mode":"ojs"},{"id":464,"value":"import {fit, measureWidth} from \"@mbostock/bubble-o-matic\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"import {rasterize, serialize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"import {cstParseRows} from \"@mbostock/comma-separated-tree\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"value":"html`<style>\n\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>