{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-stable/src/components/d3/d3-bubblechart.js"],"names":["Morph","d3","D3Bubblechart","getData","data","children","Name","Value","setData","updateViz","initialize","setSize","width","height","get","innerHTML","diameter","color","scaleOrdinal","margin","top","right","bottom","left","svgElement","bubble","pack","size","padding","svg","select","attr","append","nodes","hierarchy","sum","d","node","selectAll","descendants","enter","filter","x","y","text","r","style","i","String","substring","livelyExample","livelyMigrate","other"],"mappings":"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","file":"d3-bubblechart.js","sourcesContent":["import Morph from 'src/components/widgets/lively-morph.js';\nimport d3 from 'src/external/d3.v5.js';\n\n/*MD # D3 Bubblechart \n\n![](d3-bubblechart.png){height=300px}\n\nMD*/\n\nexport default class D3Bubblechart extends Morph {\n  getData() {\n    if (!this.data) {\n      this.data = {\n        children: [\n          { Name: 'Olives', Value: 4319 },\n          { Name: 'Tea', Value: 4159 },\n          { Name: 'Mashed Potatoes', Value: 2583 },\n          { Name: 'Boiled Potatoes', Value: 2074 },\n          { Name: 'Milk', Value: 1894 },\n          { Name: 'Chicken Salad', Value: 1809 },\n          { Name: 'Vanilla Ice Cream', Value: 1713 },\n          { Name: 'Cocoa', Value: 1636 },\n          { Name: 'Lettuce Salad', Value: 1566 },\n          { Name: 'Lobster Salad', Value: 1511 },\n          { Name: 'Chocolate', Value: 1489 },\n          { Name: 'Apple Pie', Value: 1487 },\n          { Name: 'Orange Juice', Value: 1423 },\n          { Name: 'American Cheese', Value: 1372 },\n          { Name: 'Green Peas', Value: 1341 },\n          { Name: 'Assorted Cakes', Value: 1331 },\n          { Name: 'French Fried Potatoes', Value: 1328 },\n          { Name: 'Potato Salad', Value: 1306 },\n          { Name: 'Baked Potatoes', Value: 1293 },\n          { Name: 'Roquefort', Value: 1273 },\n          { Name: 'Stewed Prunes', Value: 1268 },\n        ],\n      };\n    }\n    return this.data;\n  }\n\n  setData(data) {\n    this.data = data;\n    this.updateViz();\n  }\n\n  async initialize() {\n    this.updateViz();\n  }\n  \n  setSize(width, height) {\n    this.width = width;\n    this.height = height;\n  }\n\n  updateViz() {\n    this.getData();\n    this.get('#svg').innerHTML = '';\n    const diameter = 600;\n    const color = d3.scaleOrdinal(\"schemeCategory20\");\n\n    const margin = { top: 20, right: 20, bottom: 30, left: 40 };\n    const svgElement = this.get('#svg');\n    const width = this.width;\n    const height = this.height;\n    const bubble = d3\n      .pack(this.data)\n      .size([width, height])\n      .padding(1.5);\n\n    const svg = d3\n      .select(svgElement)\n      .attr('width', width + margin.left + margin.right)\n      .attr('height', height + margin.top + margin.bottom)\n      .append('g')\n      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')\n      .attr('class', 'bubble');\n\n    const nodes = d3.hierarchy(this.data).sum(d => d.Value);\n\n    const node = svg\n      .selectAll('.node')\n      .data(bubble(nodes).descendants())\n      .enter()\n      .filter(d => !d.children)\n      .append('g')\n      .attr('class', 'node')\n      .attr('transform', d => 'translate(' + d.x + ',' + d.y + ')');\n    \n    node.append('title').text(d => d.data.Name + ': ' + d.data.Value);\n\n    node\n      .append('circle')\n      .attr('r', d => d.r)\n      .style('fill', (d,i) => color(i));\n\n    node\n      .append('text')\n      .attr('dy', '.2em')\n      .style('text-anchor', 'middle')\n      .text(d => String(d.data.Name).substring(0, 18))\n      .attr('font-family', 'sans-serif')\n      .attr('font-size', d => d.r / 5)\n      .attr('fill', 'white');\n\n    node\n      .append('text')\n      .attr('dy', '1.3em')\n      .style('text-anchor', 'middle')\n      .text(d => d.data.Value)\n      .attr('font-family', 'Gill Sans', 'Gill Sans MT')\n      .attr('font-size', d => d.r / 5)\n      .attr('fill', 'white');\n  }\n\n  async livelyExample() {\n    this.setData({\n      children: [\n        { Name: 'Olives', Value: 4319 },\n        { Name: 'Tea', Value: 4159 },\n        { Name: 'Mashed Potatoes', Value: 2583 },\n        { Name: 'Boiled Potatoes', Value: 2074 },\n        { Name: 'Milk', Value: 1894 },\n        { Name: 'Chicken Salad', Value: 1809 },\n        { Name: 'Vanilla Ice Cream', Value: 1713 },\n        { Name: 'Cocoa', Value: 1636 },\n        { Name: 'Lettuce Salad', Value: 1566 },\n        { Name: 'Lobster Salad', Value: 1511 },\n        { Name: 'Chocolate', Value: 1489 },\n        { Name: 'Apple Pie', Value: 1487 },\n        { Name: 'Orange Juice', Value: 1423 },\n        { Name: 'American Cheese', Value: 1372 },\n        { Name: 'Green Peas', Value: 1341 },\n        { Name: 'Assorted Cakes', Value: 1331 },\n        { Name: 'French Fried Potatoes', Value: 1328 },\n        { Name: 'Potato Salad', Value: 1306 },\n        { Name: 'Baked Potatoes', Value: 1293 },\n        { Name: 'Roquefort', Value: 1273 },\n        { Name: 'Stewed Prunes', Value: 1268 },\n      ],\n    });\n  }\n\n  livelyMigrate(other) {\n    this.data = other.data;\n  }\n}\n"]}