{"id":"64e74b1cb96692d4","slug":"bubble-chart-component","first_public_version":378,"paused_version":null,"likes":134,"publish_level":"live","forks":300,"fork_of":{"id":"0edfeb766ced5a8c","slug":"pack-component","title":"Circle packing component","owner":{"id":"863951e3ebe4c0ae","avatar_url":"https://avatars.observableusercontent.com/avatar/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","login":"d3","name":"D3","bio":"Bring your data to life.","home_url":"https://d3js.org","type":"team","tier":"pro_2024"},"version":70},"has_importers":true,"thumbnail":"ca4f7b52273224989f1ecec193f6c9a1b11b85456d2ad78efcf6a54267839b78","default_thumbnail":"ca4f7b52273224989f1ecec193f6c9a1b11b85456d2ad78efcf6a54267839b78","update_time":"2020-08-26T22:49:47.311Z","publish_time":"2023-09-27T12:52:27.108Z","publish_version":387,"latest_version":387,"roles":[],"sharing":null,"owner":{"id":"863951e3ebe4c0ae","avatar_url":"https://avatars.observableusercontent.com/avatar/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","login":"d3","name":"D3","bio":"Bring your data to life.","home_url":"https://d3js.org","type":"team","tier":"pro_2024"},"creator":{"id":"074c414ad1d825f5","avatar_url":"https://avatars.observableusercontent.com/avatar/82811927da99f8938001b2ef1f552ad2c47083e46ebc55a3a146a5a5848c4519","login":"mbostock","name":"Mike Bostock","bio":"Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.","home_url":"https://bost.ocks.org/mike/","tier":"pro"},"authors":[{"id":"074c414ad1d825f5","avatar_url":"https://avatars.observableusercontent.com/avatar/82811927da99f8938001b2ef1f552ad2c47083e46ebc55a3a146a5a5848c4519","name":"Mike Bostock","login":"mbostock","bio":"Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.","home_url":"https://bost.ocks.org/mike/","tier":"pro","approved":true,"description":""}],"files":[{"id":"aee5d40e70ea9830c96efe6da03ad32187ff7223ad1b7b84e38c32127ccf6661b576fe0005b42657703e7bfaaefabc74550268cc35f64122a652fc471110c832","url":"https://static.observableusercontent.com/files/aee5d40e70ea9830c96efe6da03ad32187ff7223ad1b7b84e38c32127ccf6661b576fe0005b42657703e7bfaaefabc74550268cc35f64122a652fc471110c832","download_url":"https://static.observableusercontent.com/files/aee5d40e70ea9830c96efe6da03ad32187ff7223ad1b7b84e38c32127ccf6661b576fe0005b42657703e7bfaaefabc74550268cc35f64122a652fc471110c832?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27flare.csv","name":"flare.csv","create_time":"2019-10-30T00:12:08.428Z","mime_type":"text/csv","status":"public","size":7989,"content_encoding":"gzip","private_bucket_id":null}],"comments":[{"id":"6d957aad61b5e8dc","content":"Should those 32 items with empty values be filtered out? They affect quite a few aspects, like the assigned scheme colors, the chart layout, and they get rendered as circles with a radius of 0.","node_id":3,"create_time":"2021-02-19T17:55:55.194Z","update_time":null,"resolved":true,"user":{"id":"07362516b5994994","avatar_url":"https://avatars.observableusercontent.com/avatar/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","login":"mootari","name":"Fabian Iwand","bio":"Web dev and tinkerer.","home_url":"https://mootari.de/","tier":"pro"}},{"id":"7889a74140200641","content":"Yes, those are internal nodes, and we should only be plotting leaf nodes here. Thanks!","node_id":3,"create_time":"2021-02-19T19:24:38.334Z","update_time":null,"resolved":true,"user":{"id":"074c414ad1d825f5","avatar_url":"https://avatars.observableusercontent.com/avatar/82811927da99f8938001b2ef1f552ad2c47083e46ebc55a3a146a5a5848c4519","login":"mbostock","name":"Mike Bostock","bio":"Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.","home_url":"https://bost.ocks.org/mike/","tier":"pro"}}],"commenting_lock":null,"suggestions_to":[],"suggestion_from":null,"collections":[{"id":"0a91cb79ed4a7756","type":"public","slug":"components","title":"Components","description":"Reusable data visualization components","update_time":"2023-09-27T13:12:29.794Z","pinned":false,"ordered":true,"custom_thumbnail":"6069e89e9c8e1667964b8118ad76d660def24488a082f76bbc89d08a532775e1","default_thumbnail":"e59e0961759c38381cea458fc2f328e9dab1686e04a4a240149ee2cd25558cf6","thumbnail":"6069e89e9c8e1667964b8118ad76d660def24488a082f76bbc89d08a532775e1","listing_count":13,"parent_collection_count":0,"owner":{"id":"f35c755083683fe5","avatar_url":"https://avatars.observableusercontent.com/avatar/5a51c3b908225a581d20577e488e2aba8cbc9541c52982c638638c370c3e5e8e","login":"observablehq","name":"Observable","bio":"The end-to-end solution for building and hosting better data apps, dashboards, and reports.","home_url":"https://observablehq.com","type":"team","tier":"enterprise_2024"}},{"id":"d9df4fb5263ace62","type":"public","slug":"visualization","title":"Visualization","description":"Explore and explain patterns in quantitative data using D3, Vega, and Observable Plot","update_time":"2023-07-19T17:50:40.230Z","pinned":true,"ordered":true,"custom_thumbnail":"09e385d95ce7df7d392b0133d68e97dd5675378190775d038d21516ea62178ba","default_thumbnail":"32ad600cf556f7b9991b2a11f7b6b8e55abe7ada6062ef88a5a7de422bb261ab","thumbnail":"09e385d95ce7df7d392b0133d68e97dd5675378190775d038d21516ea62178ba","listing_count":84,"parent_collection_count":1,"owner":{"id":"f35c755083683fe5","avatar_url":"https://avatars.observableusercontent.com/avatar/5a51c3b908225a581d20577e488e2aba8cbc9541c52982c638638c370c3e5e8e","login":"observablehq","name":"Observable","bio":"The end-to-end solution for building and hosting better data apps, dashboards, and reports.","home_url":"https://observablehq.com","type":"team","tier":"enterprise_2024"}},{"id":"2a5376aca044b34e","type":"public","slug":"charts","title":"D3 Charts","description":"Older D3 examples, deprecated.","update_time":"2023-07-04T09:37:08.122Z","pinned":false,"ordered":true,"custom_thumbnail":null,"default_thumbnail":"2471c1145e33b39a1d5e38b7bb5460a2620aadf1c32717a270347620b1e981bd","thumbnail":"2471c1145e33b39a1d5e38b7bb5460a2620aadf1c32717a270347620b1e981bd","listing_count":11,"parent_collection_count":0,"owner":{"id":"863951e3ebe4c0ae","avatar_url":"https://avatars.observableusercontent.com/avatar/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","login":"d3","name":"D3","bio":"Bring your data to life.","home_url":"https://d3js.org","type":"team","tier":"pro_2024"}},{"id":"1b0fbc3b1939d7fa","type":"public","slug":"gallery","title":"Gallery","description":"Examples featured in the D3 gallery","update_time":"2023-04-10T02:28:10.124Z","pinned":false,"ordered":false,"custom_thumbnail":null,"default_thumbnail":"6953adf7aec9d29339751fa68d9c9dc67169a0ffd7469f9a4055eda920bdd2a4","thumbnail":"6953adf7aec9d29339751fa68d9c9dc67169a0ffd7469f9a4055eda920bdd2a4","listing_count":147,"parent_collection_count":0,"owner":{"id":"863951e3ebe4c0ae","avatar_url":"https://avatars.observableusercontent.com/avatar/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","login":"d3","name":"D3","bio":"Bring your data to life.","home_url":"https://d3js.org","type":"team","tier":"pro_2024"}},{"id":"ac3c6ed33ef3345f","type":"public","slug":"d3-hierarchy","title":"d3-hierarchy","description":"2D layout algorithms for visualizing hierarchical data.","update_time":"2019-03-07T07:26:12.604Z","pinned":true,"ordered":false,"custom_thumbnail":null,"default_thumbnail":"d1bb6653143239319cfee07a6f362c108ad0ddc9e7c064ebf185364992c2426c","thumbnail":"d1bb6653143239319cfee07a6f362c108ad0ddc9e7c064ebf185364992c2426c","listing_count":35,"parent_collection_count":1,"owner":{"id":"863951e3ebe4c0ae","avatar_url":"https://avatars.observableusercontent.com/avatar/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","login":"d3","name":"D3","bio":"Bring your data to life.","home_url":"https://d3js.org","type":"team","tier":"pro_2024"}}],"version":190,"title":"Bubble Chart","license":"isc","copyright":"Copyright 2017–2020 Observable, Inc.","nodes":[{"id":0,"value":"md`# Bubble Chart\n\nBubble charts are non-hierarchical [packed circles](/@d3/circle-packing). The area of each circle is proportional its value (here, file size). The organic appearance of these diagrams can be intriguing, but also consider a [treemap](/@d3/treemap) or a humble [bar chart](/@d3/horizontal-bar-chart).`","pinned":false,"mode":"js","data":null,"name":null},{"id":9,"value":"chart = {\n  const root = pack(data);\n  \n  const svg = d3.create(\"svg\")\n      .attr(\"viewBox\", [0, 0, width, height])\n      .attr(\"font-size\", 10)\n      .attr(\"font-family\", \"sans-serif\")\n      .attr(\"text-anchor\", \"middle\");\n\n  const leaf = svg.selectAll(\"g\")\n    .data(root.leaves())\n    .join(\"g\")\n      .attr(\"transform\", d => `translate(${d.x + 1},${d.y + 1})`);\n\n  leaf.append(\"circle\")\n      .attr(\"id\", d => (d.leafUid = DOM.uid(\"leaf\")).id)\n      .attr(\"r\", d => d.r)\n      .attr(\"fill-opacity\", 0.7)\n      .attr(\"fill\", d => color(d.data.group));\n\n  leaf.append(\"clipPath\")\n      .attr(\"id\", d => (d.clipUid = DOM.uid(\"clip\")).id)\n    .append(\"use\")\n      .attr(\"xlink:href\", d => d.leafUid.href);\n\n  leaf.append(\"text\")\n      .attr(\"clip-path\", d => d.clipUid)\n    .selectAll(\"tspan\")\n    .data(d => d.data.name.split(/(?=[A-Z][a-z])|\\s+/g))\n    .join(\"tspan\")\n      .attr(\"x\", 0)\n      .attr(\"y\", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`)\n      .text(d => d);\n\n  leaf.append(\"title\")\n      .text(d => `${d.data.title === undefined ? \"\" : `${d.data.title}\n`}${format(d.value)}`);\n    \n  return svg.node();\n}","pinned":true,"mode":"js","data":null,"name":null},{"id":3,"value":"data = d3.csvParse(await FileAttachment(\"flare.csv\").text(), ({id, value}) => ({name: id.split(\".\").pop(), title: id.replace(/\\./g, \"/\"), group: id.split(\".\")[1], value: +value}))","pinned":true,"mode":"js","data":null,"name":null},{"id":106,"value":"pack = data => d3.pack()\n    .size([width - 2, height - 2])\n    .padding(3)\n  (d3.hierarchy({children: data})\n    .sum(d => d.value))","pinned":true,"mode":"js","data":null,"name":null},{"id":101,"value":"width = 932","pinned":true,"mode":"js","data":null,"name":null},{"id":104,"value":"height = width","pinned":true,"mode":"js","data":null,"name":null},{"id":41,"value":"format = d3.format(\",d\")","pinned":true,"mode":"js","data":null,"name":null},{"id":140,"value":"color = d3.scaleOrdinal(data.map(d => d.group), d3.schemeCategory10)","pinned":true,"mode":"js","data":null,"name":null},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"mode":"js","data":null,"name":null}],"resolutions":[],"schedule":null,"last_view_time":null}